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