Skip to content

Commit

Permalink
FE: Direct URL access to messaging and other bug fixes and perf optim…
Browse files Browse the repository at this point in the history 
…ization
  • Loading branch information
Abhinav Bhattarai committed Jan 12, 2021
1 parent 2c36283 commit 5b077b1
Show file tree
Hide file tree
Showing 5 changed files with 185 additions and 53 deletions.
2 changes: 2 additions & 0 deletions client/debug.log
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,5 @@
[0111/170627.410:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
[0111/202718.814:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
[0112/100707.967:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
[0112/133816.274:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
[0112/141101.646:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
7 changes: 4 additions & 3 deletions client/src/Components/Messages/MessageFooter/message-footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@ const SendIcon = ()=>{
return (
<IconContext.Provider value = {{
style: {
fontSize: '15px',
fontSize: '24px',
position: 'absolute',
top: '50%',
right: '3%'
top: '24%',
right: '3%',
color: '#00acee'
}
}}>
<BiSend/>
Expand Down
14 changes: 13 additions & 1 deletion client/src/Components/SiderBar/Sidebar-Nav/sidebar-nav.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,18 @@
import React, { Fragment, useRef } from 'react';
import './sidebar-nav.scss';
import { IconContext } from 'react-icons';
import { FaDotCircle } from 'react-icons/fa';

const SidebarNav = ({ TriggerMessageNav, TriggerMatchNav }) => {
const NotifyIcon = ()=>{
return (
<IconContext.Provider value={{ className: 'notify-icon-2' }}>
<FaDotCircle/>
</IconContext.Provider>
)
}


const SidebarNav = ({ TriggerMessageNav, TriggerMatchNav, NavNotification }) => {

const navbar_pointer = useRef(null)

Expand All @@ -15,6 +26,7 @@ const SidebarNav = ({ TriggerMessageNav, TriggerMatchNav }) => {

<div className='sidebar-nav-element' onClick={TriggerMessageNav.bind(this, navbar_pointer.current) }>
Messages
{ (NavNotification) ? <NotifyIcon/> : null }
</div>

<div className='navbar-pointer' ref={ navbar_pointer }></div>
Expand Down
13 changes: 13 additions & 0 deletions client/src/Components/SiderBar/Sidebar-Nav/sidebar-nav.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
position: relative;

&-element{
cursor: context-menu;
width: 40%;
text-align: center;
margin: 0px 5%;
Expand All @@ -16,6 +17,7 @@
font-weight: 700;
color: black;
text-decoration: none;
position: relative;
}


Expand All @@ -30,6 +32,17 @@
}
}

.notify-icon-2{
font-size: 8px;
color: $theme-color;
position: absolute;
top: 4px;
background-color: $theme-color;
border-radius: 50%;
right: 14%;
box-shadow: 0 0 5px $theme-color
}

// .match-active{
// border-bottom: 3px solid $theme-color
// }
Expand Down
202 changes: 153 additions & 49 deletions client/src/Containers/MainPage/mainPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const AsyncMessageRoute = React.lazy(()=>{
return import('../../Components/Messages/messages');
})

const MainPage = ({ authenticate, history }) => {
const MainPage = ({ authenticate, history, match }) => {

const [ people_list, SetPeopleList ] = useState( null );
const [ requests, SetRequests ] = useState( null );
Expand All @@ -52,6 +52,8 @@ const MainPage = ({ authenticate, history }) => {
const [ current_post_api_call, SetCurrentPostApiCall ] = useState( 0 );
const [ milestone, SetMileStone ] = useState( 0 );
const [ joined_room, SetJoinedRoom ] = useState( null );
const [ nav_notification, SetNavNotification ] = useState( null );
const [ direct_url_access, SetDirectURLAccess ] = useState( false );

const TriggerDropdown = ()=>{
SetDropdownInfo(!dropdown_info);
Expand All @@ -70,6 +72,7 @@ const MainPage = ({ authenticate, history }) => {
ref.style.transform = "translateX(25%)";
SetSideBarValue(0);
LeaveJoinedRoom();
history.push('/main-app');
}

const TriggerNotificationNav = (ref)=>{
Expand All @@ -88,6 +91,27 @@ const MainPage = ({ authenticate, history }) => {
SetProfileAlert(!profile_alert)
}

const DeleteNotification = (sender)=>{
const dummy = [...people_list];
const findSender = dummy.findIndex((element)=>{
return element.username === sender;
});
if(findSender !== -1){
const new_data = {...dummy[findSender], notification: null}
dummy[findSender] = new_data;
const nav_notification_list = [...nav_notification];
const index = nav_notification_list.findIndex((element)=>{
return element === sender;
})
nav_notification_list.splice(index, 1);
if(nav_notification_list.length === 0){
SetNavNotification( null );
}
SetPeopleList(dummy);
SetNavNotification( nav_notification_list );
}
}

const PeopleCardMessageClick = (username)=>{
// socket emit to that person room
const dummy = [...people_list]
Expand All @@ -101,6 +125,9 @@ const MainPage = ({ authenticate, history }) => {
SetMessageInfo(MessageInfo);
SetRecentMessages(MessageData);
SetJoinedRoom( username );
if(nav_notification){
DeleteNotification(username);
}
// shifting the route;
history.push(`/message/${username}`);
}
Expand Down Expand Up @@ -206,11 +233,10 @@ const MainPage = ({ authenticate, history }) => {
}else{
SetCurrentIndex(current_index + 1);
}

SendMatchRequest(FriendName);
SetReactionBackend(FriendName);
dummy.splice(0, 1);
SetPostList(dummy);
SendMatchRequest(FriendName);
SetReactionBackend(FriendName);
};

const RightClickHandler = ()=>{
Expand All @@ -227,10 +253,10 @@ const MainPage = ({ authenticate, history }) => {
SetCurrentIndex(current_index + 1);
}

SendMatchRequest(FriendName);
SetReactionBackend(FriendName);
dummy.splice(0, 1);
SetPostList(dummy);
SendMatchRequest(FriendName);
SetReactionBackend(FriendName);

};

Expand Down Expand Up @@ -262,6 +288,13 @@ const MainPage = ({ authenticate, history }) => {
const new_data = {...dummy[findSender], notification: true}
dummy[findSender] = new_data;
SetPeopleList(dummy);
if(nav_notification){
const nav_notification_list = [...nav_notification];
nav_notification_list.push(sender);
SetNavNotification(nav_notification_list);
}else{
SetNavNotification([sender]);
}
}
}
}
Expand Down Expand Up @@ -449,13 +482,42 @@ const MainPage = ({ authenticate, history }) => {
}
}, [ temp_post_list, people_list ]);

const FetchDirectURLMessages = (username)=>{
const dummy = [...people_list]
const user_index = dummy.findIndex((element)=>{
return element.username === username;
})
// check if there is data in the main array;
if(user_index !== -1){
const MessageData = dummy[user_index].Messages;
const MessageInfo = { Username: username, Profile: dummy[user_index].Profile_Picture };
SetMessageInfo(MessageInfo);
SetRecentMessages(MessageData);
SetJoinedRoom( username );
if(nav_notification){
DeleteNotification(username);
}
SetDirectURLAccess(true);
}else{
// false username;
history.push('/main-app');
}
}

useEffect(()=>{
if(history.location.pathname === "/"){
if(joined_room !== null){
SetJoinedRoom(null);
SetDirectURLAccess(false);
}
}else{
if(joined_room === null && people_list){
const username = history.location.pathname.split('/')[2];
FetchDirectURLMessages(username);
}
}
}, [ joined_room, history.location.pathname ])

}, [ joined_room, history.location.pathname, people_list ])

useEffect(()=>{
// socket receiers in client;
Expand Down Expand Up @@ -619,6 +681,7 @@ const MainPage = ({ authenticate, history }) => {
<SidebarNav
TriggerMessageNav={ (ref)=>TriggerMessageNav(ref) }
TriggerMatchNav= { (ref)=>TriggerMatchNav(ref) }
NavNotification = { nav_notification }
/>
{ ( !people_list_jsx ) ? <LoadSpinner/> : people_list_jsx }
</SideBar>
Expand All @@ -642,13 +705,19 @@ const MainPage = ({ authenticate, history }) => {
: null
}

{ ( post_area_jsx ) ?
(
<Switch>

<Route exact path='/message/:user' render={()=>{
return (
<Suspense fallback={ <LoadSpinner/> }>
{ ( direct_url_access ) ? (

<Route exact path='/message/:user' render={()=>{
return (
<Suspense
fallback={
(<main className='main-post-container'>
<LoadSpinner/>
</main>)
}
>
{
(message_info) ? (
<AsyncMessageRoute
blur={ ( profile_alert || logout_popup ) ? '5px' : '0px' }
MessageInputValue = { messageInput }
Expand All @@ -658,40 +727,75 @@ const MainPage = ({ authenticate, history }) => {
Profile = { message_info.Profile }
SendMessage = { (username)=>SendMessageHandler(username) }
/>
</Suspense>
)
}}/>

<Route exact path='/home' render={()=>{
return <HomeContainer
jsx = { post_area_jsx }
LeftClick = { LeftClickHandler }
RightClick = { RightClickHandler }
CenterClick = { CenterClickHandler }
post_list = { post_list }
current_sidebar_value = { current_sidebar_value }
current_index = { 0 }
/>}
}/>

<Route render={()=>{
return <HomeContainer
jsx = { post_area_jsx }
LeftClick = { LeftClickHandler }
RightClick = { RightClickHandler }
CenterClick = { CenterClickHandler }
post_list = { post_list }
current_sidebar_value = { current_sidebar_value }
current_index = { 0 }
/>}
}/>
</Switch>
)
:
<main className='main-post-container'>
<LoadSpinner/>
</main>
}
): null
}
</Suspense>
)
}}/>

) : (
( post_area_jsx ) ?
(
<Switch>

<Route exact path='/message/:user' render={()=>{
return (
<Suspense
fallback={
(<main className='main-post-container'>
<LoadSpinner/>
</main>)
}
>
{
(message_info) ? (
<AsyncMessageRoute
blur={ ( profile_alert || logout_popup ) ? '5px' : '0px' }
MessageInputValue = { messageInput }
ChangeMessageInput = { (e)=>ChangeMessageInput(e) }
RecentMessages = { recent_messages }
Username = { message_info.Username }
Profile = { message_info.Profile }
SendMessage = { (username)=>SendMessageHandler(username) }
/>
): null
}
</Suspense>
)
}}/>

<Route exact path='/home' render={()=>{
return <HomeContainer
jsx = { post_area_jsx }
LeftClick = { LeftClickHandler }
RightClick = { RightClickHandler }
CenterClick = { CenterClickHandler }
post_list = { post_list }
current_sidebar_value = { current_sidebar_value }
current_index = { 0 }
/>}
}/>

<Route render={()=>{
return <HomeContainer
jsx = { post_area_jsx }
LeftClick = { LeftClickHandler }
RightClick = { RightClickHandler }
CenterClick = { CenterClickHandler }
post_list = { post_list }
current_sidebar_value = { current_sidebar_value }
current_index = { 0 }
/>}
}/>

</Switch>
)
:
<main className='main-post-container'>
<LoadSpinner/>
</main>

) }

<RequestBar blur={ ( profile_alert || logout_popup ) ? '5px' : '0px' }>
<RequestHeader/>
Expand All @@ -708,4 +812,4 @@ const MainPage = ({ authenticate, history }) => {
)
}

export default withRouter( MainPage );
export default withRouter( MainPage );

0 comments on commit 5b077b1

Please sign in to comment.