added loading states

arihant-jain-09 · Nov 30, 2021 · 413836d · 413836d
1 parent 70d6b8f
commit 413836d
Show file tree

Hide file tree

Showing 16 changed files with 145 additions and 22 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -15,6 +15,7 @@
     "http-proxy-middleware": "^0.19.1",
     "node-sass": "^6.0.1",
     "react": "^17.0.2",
+    "react-content-loader": "^6.0.3",
     "react-dom": "^17.0.2",
     "react-firebase-hooks": "^3.0.4",
     "react-redux": "^7.2.5",

diff --git a/client/src/features/chat/chatSlice.js b/client/src/features/chat/chatSlice.js
@@ -3,7 +3,9 @@ import axios from 'axios';
 
 const initialState = {
   messages:[],
-  edit:null
+  messageFetchLoading:false,
+  edit:null,
+  hover:false
 };
 export const fetchMessagesByChannel = createAsyncThunk(
   "/api/servers/channels/messages",
@@ -84,10 +86,11 @@ export const chatSlice = createSlice({
   extraReducers: (builder) => {
     builder
       .addCase(fetchMessagesByChannel.pending, (state) => {
-        // state.status = 'loading';
+        state.messageFetchLoading = true;
       })
       .addCase(fetchMessagesByChannel.fulfilled, (state, action) => {
         state.messages=action.payload;
+        state.messageFetchLoading = false;
       })      
   },
 });

diff --git a/client/src/features/chat/components/chatBox/components/ChatLoader/ChatLoader.jsx b/client/src/features/chat/components/chatBox/components/ChatLoader/ChatLoader.jsx
@@ -0,0 +1,28 @@
+import React from "react"
+import ContentLoader from "react-content-loader"
+
+const ChatLoader = (props) => {
+  return (
+    <ContentLoader
+    speed={1.25}
+    height={1200}
+    width={1060}
+    backgroundColor="#b4b5b6"
+    foregroundColor="#72767d"
+      {...props}
+    >
+      {new Array(12).fill(" ").map((_, i) => {
+        return (
+          <>
+            <rect x="48" y={i*48+8} rx="3" ry="3" width="88" height="6" /> 
+            <rect x="48" y={i*48+26} rx="3" ry="3" width="410" height="6" /> 
+            <circle cx="20" cy={i*52+20} r="20" /> 
+          </>
+        );
+      })}
+
+    </ContentLoader>
+  )
+}
+
+export default ChatLoader
diff --git a/client/src/features/chat/components/chatBox/components/ChatMenu/index.js b/client/src/features/chat/components/chatBox/components/ChatMenu/index.js
@@ -33,7 +33,9 @@ const ChatMenu = ({msg}) => {
           </svg>
         </div>
         }
-        <div className="chatmenu__more" onClick={()=>setOpenMore(true)}>
+        <div className="chatmenu__more" onClick={()=>{
+          setOpenMore(true);
+        }}>
           <svg className='chatmenu__image' aria-hidden="false" width="24" height="24" viewBox="0 0 24 24">
             <path fill="currentColor" fillRule="evenodd" clipRule="evenodd" d="M7 12.001C7 10.8964 6.10457 10.001 5 10.001C3.89543 10.001 3 10.8964 3 12.001C3 13.1055 3.89543 14.001 5 14.001C6.10457 14.001 7 13.1055 7 12.001ZM14 12.001C14 10.8964 13.1046 10.001 12 10.001C10.8954 10.001 10 10.8964 10 12.001C10 13.1055 10.8954 14.001 12 14.001C13.1046 14.001 14 13.1055 14 12.001ZM19 10.001C20.1046 10.001 21 10.8964 21 12.001C21 13.1055 20.1046 14.001 19 14.001C17.8954 14.001 17 13.1055 17 12.001C17 10.8964 17.8954 10.001 19 10.001Z"></path>
           </svg>

diff --git a/client/src/features/chat/components/chatBox/components/ChatMessage/components/ChatSimple.jsx b/client/src/features/chat/components/chatBox/components/ChatMessage/components/ChatSimple.jsx
@@ -9,7 +9,7 @@ const ChatSimple = ({message}) => {
   const edit=useSelector((state)=>state.message.edit);
   return (
     <>
-      <div className='chatSimple' id={message._id}onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
+      <div className='chatSimple' id={message._id} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
         <div className="chatSimple__img">
           <img src={message.sender.img} alt={message.text.slice(0,1)}/>
         </div>
@@ -22,11 +22,11 @@ const ChatSimple = ({message}) => {
             {`${date && date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear()}`}
             </div>
             <div className='chatSimple__content-header--menu'>
-              {inHover&& <ChatMenu msg={message} />}
+              {inHover&& <ChatMenu msg={message}/>}
             </div>
           </div>
           <div className="chatSimple__content-message">
-            {edit?._id===message._id ? <ChatEdit msg={message}/> : message.text}
+            {edit?._id===message._id ? <ChatEdit msg={message} /> : message.text}
             {edit?._id!==message._id && <span className='chatSimple__content-message--edited'>{message?.edited===true && '(edited)'}</span>}
         </div>
         </div>

diff --git a/client/src/features/chat/components/chatBox/components/ChatMessage/index.js b/client/src/features/chat/components/chatBox/components/ChatMessage/index.js
@@ -2,12 +2,13 @@ import React from 'react';
 import ChatPinned from './components/ChatPinned';
 import ChatReply from './components/ChatReply';
 import ChatSimple from './components/ChatSimple';
-const ChatMessage = React.forwardRef(({message}) => {
+const ChatMessage = ({message}) => {
+
   return(
     <>
     {message?.pinned ? <ChatPinned message={message}/> : (message?.reply ? <ChatReply message={message}/>:<ChatSimple message={message} />)}
     </>
   )
-});
+};
 
 export default ChatMessage
diff --git a/client/src/features/chat/components/chatBox/components/index.js b/client/src/features/chat/components/chatBox/components/index.js
@@ -4,8 +4,10 @@ import ChatMessage from './ChatMessage';
 import { io } from "socket.io-client";
 import './styles/chat.box.scss';
 import { PinMsg, DeleteMsg, EditMsg, MsgToEdit } from '../../../chatSlice';
+import ChatLoader from './ChatLoader/ChatLoader';
 const ChatBox = () => {
   const messages=useSelector((state)=>state.message.messages);
+  const messageFetchLoading=useSelector((state)=>state.message.messageFetchLoading);
   const dispatch = useDispatch();
   useEffect(() => {
     // message-updated
@@ -29,12 +31,14 @@ const ChatBox = () => {
 
     }
   }, [dispatch])
+
   return (
     <>
-     <div className="chatBox">
-      {messages?.map((message,i)=>{
+    <div className="chatBox">
+    {messageFetchLoading ? <ChatLoader/>: messages?.map((message,i)=>{
         return <ChatMessage key={message._id} message={message}/>
-      })}
+      })
+     }
      </div> 
     </>
   )

diff --git a/client/src/features/sidebar/Channel/channelSlice.js b/client/src/features/sidebar/Channel/channelSlice.js
@@ -7,7 +7,8 @@ const initialState = {
     name:'',
     _message:null,
   },
-  channels:[]
+  channels:[],
+  ChannelFetchLoading:false
 };
 export const fetchChannelByServer = createAsyncThunk(
   "/api/servers/channels",
@@ -31,10 +32,11 @@ export const channelSlice = createSlice({
   extraReducers: (builder) => {
     builder
       .addCase(fetchChannelByServer.pending, (state) => {
-        // state.status = 'loading';
+        state.ChannelFetchLoading = true;
       })
       .addCase(fetchChannelByServer.fulfilled, (state, action) => {
         state.channels=action.payload;
+        state.ChannelFetchLoading = false;
       })      
   },
 });

diff --git a/client/src/features/sidebar/Channel/components/channel.loader.jsx b/client/src/features/sidebar/Channel/components/channel.loader.jsx
@@ -0,0 +1,24 @@
+import React from "react"
+import ContentLoader from "react-content-loader"
+
+const ChannelLoader = (props) => (
+  <ContentLoader 
+    speed={2}
+    width={240}
+    height={600}
+    backgroundColor="#b4b5b6"
+    foregroundColor="#72767d"
+    {...props}
+  >
+    {new Array(6).fill(" ").map((_, i) => {
+        return (
+          <>
+          <rect x="12.5" y={i*32+14} rx="3" ry="3" width="213" height="20" /> 
+          </>
+        );
+      })}
+
+  </ContentLoader>
+)
+
+export default ChannelLoader
diff --git a/client/src/features/sidebar/Channel/components/index.js b/client/src/features/sidebar/Channel/components/index.js
@@ -11,6 +11,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import SingleChannel from './SingleChannel'
 import {SocketIOmessageSet} from '../../../chat/chatSlice'
 import { io } from "socket.io-client";
+import ChannelLoader from './channel.loader'
 // import { setCurrentChannel } from '../channelSlice'
 const ChannelPageIndex = () => {
   const [micOn,setMicOn]=useState(false);
@@ -19,6 +20,7 @@ const ChannelPageIndex = () => {
   const history=useHistory();
   const currentServer=useSelector((state)=>state.server.currentServer);
   const channels=useSelector((state)=>state.channel.channels);
+  const ChannelFetchLoading=useSelector((state)=>state.channel.ChannelFetchLoading);
   const auth=useSelector((state)=>state.auth.user);
   const dispatch = useDispatch();
   useEffect(() => {
@@ -50,9 +52,10 @@ const ChannelPageIndex = () => {
           }
         </div>
         <div className="channelPage__body">
-          {currentServer?._id && channels?.map((channel)=>{
+          {ChannelFetchLoading ? <ChannelLoader/> : currentServer?._id && channels?.map((channel)=>{
             return <SingleChannel key={channel._id} channel={channel}/>
           })}
+
         </div>
         <div className="channelPage__footer">
           <div className="channelPage__footer-avatar">

diff --git a/client/src/features/sidebar/Channel/components/styles/single.channel.scss b/client/src/features/sidebar/Channel/components/styles/single.channel.scss
@@ -20,7 +20,7 @@
       }
       border-radius: 0.5rem;
       @include themed() {
-        color: t('text-link');
+        color: t('interactive-hover');
       }
     }
   }

diff --git a/client/src/features/sidebar/Server/components/index.js b/client/src/features/sidebar/Server/components/index.js
@@ -6,6 +6,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { fetchServers, setCurrentServer } from './serverSlice';
 import { Dialog, makeStyles } from '@material-ui/core';
 import AddServer from './server.add.form';
+import ServerLoader from './server.loader';
 
 const useStyles = makeStyles(() => ({
   paper: { maxWidth: "44rem" },
@@ -23,6 +24,7 @@ const ServerPageIndex = () => {
 
     const handledialogactions=()=>{setopen(false)}
   const servers=useSelector(state=>state.server.servers);
+  const serverFetchLoading=useSelector(state=>state.server.serverFetchLoading);
   return (
     <>
       <div className="serverPage">
@@ -39,7 +41,7 @@ const ServerPageIndex = () => {
             </div>
         </div>
         <div className="serverPage__map">
-          {servers && servers?.map((server)=>{
+          {serverFetchLoading?<ServerLoader/>:servers && servers?.map((server)=>{
             return <SingleServer key={server._id} server={server}/>
           })}
           <div className="serverPage__map-addicon" onClick={()=>setopen(true)}>

diff --git a/client/src/features/sidebar/Server/components/server.loader.jsx b/client/src/features/sidebar/Server/components/server.loader.jsx
@@ -0,0 +1,31 @@
+import React from "react"
+import ContentLoader from "react-content-loader"
+
+const ServerLoader = (props) => {
+  return(
+    <>
+      <ContentLoader 
+      speed={1.25}
+      width={72}
+      height={600}
+      // viewBox="0 0 72 124"
+      // backgroundColor="#b4b5b6"
+      backgroundColor="#2f3134"
+      foregroundColor="#72767d"
+      {...props}
+    >
+      {new Array(12).fill(" ").map((_, i) => {
+        return (
+          <>
+            <circle cx="37" cy={i*65+35} r="29" /> 
+            <rect x="-2" y={i*65+29} rx="19" ry="19" width="8" height="16" />
+          </>
+        );
+      })}
+
+    </ContentLoader>
+    </>
+  )
+}
+
+export default ServerLoader
diff --git a/client/src/features/sidebar/Server/components/serverSlice.js b/client/src/features/sidebar/Server/components/serverSlice.js
@@ -8,6 +8,7 @@ const initialState = {
     home:true
   },
   servers:[],
+  serverFetchLoading:false
 };
 
 export const addServer = createAsyncThunk(
@@ -45,10 +46,11 @@ export const serverSlice = createSlice({
   extraReducers: (builder) => {
     builder
       .addCase(fetchServers.pending, (state) => {
-        // state.status = 'loading';
+        state.serverFetchLoading = true;
       })
       .addCase(fetchServers.fulfilled, (state, action) => {
         state.servers=action.payload;
+        state.serverFetchLoading = false;
       })      
   },
 });

diff --git a/routes/messageRoutes.js b/routes/messageRoutes.js
@@ -55,12 +55,14 @@ module.exports=(app)=>{
   app.post('/api/servers/channels/messages/delete',async(req,res)=>{
     const {_id}=req.body;
     try {
-      Message.deleteOne({_id}).then((response)=>{
-        if(response.deletedCount==1){
-          io.emit('message-deleted',{_id})
-          res.status(200).send({message:'msg deleted'});
+      Message.findOneAndRemove({_id}).then((response)=>{
+        io.emit('message-deleted',{_id:response._id})
+        if(response.isPinned===true){
+          Message.findOneAndRemove({pinned:response._id}).then((result)=>{
+            io.emit('message-deleted',{_id:result._id})
+          })
         }
-        else res.status(400).send({message:'failed to delete'});
+        res.status(200).send({message:'msg deleted'});
       })
     } catch (error) {
       res.status(500).send(error);