File indexing completed on 2025-01-26 05:27:58

0001 import React , {useEffect, useState, useRef,useContext} from 'react'
0002 import MyButton from './function/MyButton';
0003 import {MetaheaderContext} from '../contexts/MetaheaderContext';
0004 
0005 
0006 const DevelopmentAppMenu = () => {
0007   const {state} = useContext(MetaheaderContext);
0008   const [dropdownClass, setDropdownClass] = useState('');  
0009   const [notification, setNotification] = useState(false);  
0010   const [notification_count, setNotification_count] = useState(0);
0011   const toggleEl = useRef(null);  
0012   
0013   useEffect(() => {     
0014     document.addEventListener('mousedown',handleClick, false);
0015     return () => {        
0016         document.removeEventListener('mousedown',handleClick, false);
0017     };
0018   },[dropdownClass])
0019 
0020   
0021   useEffect(() => {
0022     if(state.user){
0023         let url = state.baseUrl+'/membersetting/notification';
0024         fetch(url,{
0025                   mode: 'cors',
0026                   credentials: 'include'
0027                   })
0028         .then(response => response.json())
0029         .then(data => {            
0030             if(data.notifications){
0031               const nots = data.notifications.filter(note => note.read==false && note.notification_type==6);
0032               if(nots.length>0 && notification_count !== nots.length)
0033               {
0034                   setNotification(true);
0035                   setNotification_count(nots.length);                
0036               }
0037             }
0038         });
0039      }     
0040   }, [])
0041   
0042 
0043   const handleClick= e => {          
0044     let cls = "";
0045     if (toggleEl.current.contains(e.target)){                 
0046       if (dropdownClass === "open"){              
0047         if (e.target.className === "btn btn-default dropdown-toggle" || e.target.className === "th-icon"){
0048             cls = "";
0049         } else {
0050             cls = "open";
0051         }
0052       } else {
0053         cls = "open";
0054       }
0055     }        
0056     setDropdownClass(cls);              
0057   }
0058   return (
0059     <li ref={toggleEl} id="development-app-menu-container">
0060         <div className={"user-dropdown " + dropdownClass}>
0061           <button
0062             id="developmentDropdownBtn"
0063             className="btn btn-default dropdown-toggle" type="button" >
0064             <span className="th-icon"></span>            
0065             {notification && 
0066               <span className="badge-notification">{notification_count}</span>
0067             }            
0068           </button>
0069           <ul id="user-context-dropdown" className="dropdown-menu dropdown-menu-right">                          
0070           
0071               <MyButton id="storage-link-item"
0072                       url={state.myopendesktopUrl+"/apps/files/"}
0073                       label="Files" />
0074               <MyButton id="calendar-link-item"
0075                       url={state.myopendesktopUrl+"/apps/calendar/"}
0076                       label="Calendar" />
0077               <MyButton id="contacts-link-item"
0078                       url={state.myopendesktopUrl+"/apps/contacts/"}
0079                       label="Contacts" />
0080                 <li id="messages-link-item">
0081                     <a href={state.forumUrl+"/u/"+state.user.username+"/messages"}>
0082                       <div className="icon"></div>
0083                       <span>DM</span>
0084                       {notification && 
0085                           <span className="badge-notification">{notification_count}</span>
0086                         } 
0087                     </a>
0088                 </li>
0089                   
0090                 <MyButton id="music-link-item"
0091                               url={state.musicopendesktopUrl}
0092                               label="Music"
0093                                />
0094              
0095              { 
0096                state.isAdmin &&
0097                <>
0098                   <MyButton id="mail-link-item"
0099                             url={state.myopendesktopUrl+"/apps/rainloop/"}
0100                             label="Mail" 
0101                             fontStyleItalic="1"
0102                             />
0103                   
0104                 </>
0105               }
0106               <MyButton id="maps-link-item"
0107                         url={state.myopendesktopUrl+"/apps/maps/"}
0108                         label="Maps" />
0109               <MyButton id="mastodon-link-item"
0110                       url={state.mastodonUrl}
0111                       label="Social" />
0112           </ul>
0113           
0114         </div>
0115       </li>
0116   )
0117 }
0118 
0119 export default DevelopmentAppMenu
0120 
0121