change .bat name

Shuan97 · Aug 20, 2021 · 6bd8d6c · 6bd8d6c
1 parent a36df46
commit 6bd8d6c
Show file tree

Hide file tree

Showing 20 changed files with 172 additions and 80 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -15,7 +15,7 @@ module.exports = {
     // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
     // e.g. "@typescript-eslint/explicit-function-return-type": "off",
     "react/prop-types": 0,
-    "eslint-disable-next-line": 0,
+    "@typescript-eslint/no-explicit-any": 0,
   },
   plugins: ["react"],
   settings: {

diff --git a/start.bat → VSCode.bat b/start.bat → VSCode.bat
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "@babel/preset-env": "^7.12.13",
     "@babel/preset-react": "^7.12.13",
     "@tailwindcss/postcss7-compat": "^2.1.0",
+    "@types/react-redux": "^7.1.16",
     "@types/styled-components": "^5.1.9",
     "@typescript-eslint/eslint-plugin": "^4.25.0",
     "@typescript-eslint/parser": "^4.25.0",

diff --git a/start server_dev.bat → server.bat b/start server_dev.bat → server.bat
diff --git a/src/components/Auth/Login.jsx b/src/components/Auth/Login.jsx
@@ -7,7 +7,7 @@ import styled from "styled-components/macro";
 import * as Yup from "yup";
 // import background from "../../assets/pexels-bg.jpg";
 
-const Login = (props) => {
+const Login = () => {
   const dispatch = useDispatch();
   const [validationSchema] = useState(
     Yup.object().shape({

diff --git a/src/components/Chat/Chat.jsx b/src/components/Chat/Chat.jsx
@@ -1,4 +1,4 @@
-import Sidebar from "components/Chat/ChatSidebar/ChatSidebar";
+import ChatSidebar from "components/Chat/ChatSidebar/ChatSidebar";
 import { selectChannelName, selectChannelUUID } from "features/channelsSlice";
 import { fetchMessagesByChannel } from "features/messagesSlice";
 import { fetchTextChannels } from "features/channelsSlice";
@@ -27,7 +27,7 @@ const Chat = () => {
   return (
     <StyledChat>
       <ChatNavbar />
-      <Sidebar />
+      <ChatSidebar />
       <MainChat>
         <ChatHeader channelName={channelName} />
         <ChatMessages />

diff --git a/src/components/Chat/ChatSidebar/ChatSidebar.jsx b/src/components/Chat/ChatSidebar/ChatSidebar.jsx
@@ -1,8 +1,8 @@
 import React from "react";
 import styled from "styled-components/macro";
 import ExpandMoreRoundedIcon from "@material-ui/icons/ExpandMoreRounded";
-import SidebarContent from "./ChatSidebarContent";
-import SidebarProfile from "./ChatSidebarProfile";
+import ChatSidebarContent from "./ChatSidebarContent";
+import ChatSidebarProfile from "./ChatSidebarProfile";
 
 const Sidebar = () => {
   return (
@@ -12,10 +12,10 @@ const Sidebar = () => {
         <ExpandMoreRoundedIcon />
       </SidebarHeader>
       <SidebarContentWrapper>
-        <SidebarContent />
+        <ChatSidebarContent />
       </SidebarContentWrapper>
       <SidebarFooter>
-        <SidebarProfile />
+        <ChatSidebarProfile />
       </SidebarFooter>
     </StyledSidebar>
   );

diff --git a/src/components/Chat/ChatSidebar/ChatSidebarContent.jsx b/src/components/Chat/ChatSidebar/ChatSidebarContent.jsx
@@ -1,16 +1,17 @@
 import AddRoundedIcon from "@material-ui/icons/AddRounded";
 import ExpandMoreRoundedIcon from "@material-ui/icons/ExpandMoreRounded";
-import { createChannel, selectTextChannels } from "features/channelsSlice";
-import React, { useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import styled from "styled-components/macro";
-import SidebarChannel from "./ChatSidebarChannel";
+import TextInput from "components/common/Form/TextInput";
 import Modal from "components/common/Modal/Modal";
 import VariantButton from "components/common/VariantButton";
 import { variant } from "constants/variant";
+import { createChannel, selectTextChannels } from "features/channelsSlice";
+import { selectUser } from "features/userSlice";
 import { Form, Formik } from "formik";
-import TextInput from "components/common/Form/TextInput";
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import styled from "styled-components/macro";
 import * as Yup from "yup";
+import SidebarChannel from "./ChatSidebarChannel";
 
 const textChannelContext = {
   type: "TEXT",
@@ -25,8 +26,11 @@ const voiceChannelContext = {
 const SidebarContent = () => {
   const dispatch = useDispatch();
   const channels = useSelector(selectTextChannels);
+  const user = useSelector(selectUser);
   const [showModal, setShowModal] = useState(false);
   const [modalContext, setModalContext] = useState({});
+  const [textChannelsCollapse, setTextChannelsCollapse] = useState(false);
+  const [voiceChannelsCollapse, setVoiceChannelsCollapse] = useState(true);
 
   const [validationSchema] = useState(
     Yup.object().shape({
@@ -66,34 +70,50 @@ const SidebarContent = () => {
     <StyledSidebarContent>
       <ChannelHeaderWrapper>
         <ChannelHeader>
-          <ExpandMoreRoundedIcon />
+          <ExpandMoreRoundedIcon
+            // classes={{
+            //   root: "transform -rotate-90 bg-red-500",
+            // }}
+            className={`${textChannelsCollapse && "transform -rotate-90"}`}
+            onClick={() => setTextChannelsCollapse((value) => !value)}
+          />
           <h2>Text channels</h2>
         </ChannelHeader>
-        <AddRoundedIcon
-          onClick={() => {
-            handleAddChannel("TEXT");
-          }}
-        />
+        {user && user.role === "admin" && (
+          <AddRoundedIcon
+            onClick={() => {
+              handleAddChannel("TEXT");
+            }}
+          />
+        )}
       </ChannelHeaderWrapper>
-      <ChannelsList>
-        {channels &&
-          channels.length > 0 &&
-          channels.map(({ UUID, name }) => (
-            <SidebarChannel key={UUID} id={UUID} channelName={name} />
-          ))}
-      </ChannelsList>
+      {!textChannelsCollapse && (
+        <ChannelsList>
+          {channels &&
+            channels.length > 0 &&
+            channels.map(({ UUID, name }) => (
+              <SidebarChannel key={UUID} id={UUID} channelName={name} />
+            ))}
+        </ChannelsList>
+      )}
 
       <ChannelHeaderWrapper>
         <ChannelHeader>
-          <ExpandMoreRoundedIcon />
+          <ExpandMoreRoundedIcon
+            className={`${voiceChannelsCollapse && "transform -rotate-90"}`}
+            onClick={() => setVoiceChannelsCollapse((value) => !value)}
+          />
           <h2>Voice channels</h2>
         </ChannelHeader>
-        <AddRoundedIcon
-          onClick={() => {
-            handleAddChannel("VOICE");
-          }}
-        />
+        {user && user.role === "admin" && (
+          <AddRoundedIcon
+            onClick={() => {
+              handleAddChannel("VOICE");
+            }}
+          />
+        )}
       </ChannelHeaderWrapper>
+      {!voiceChannelsCollapse && <ChannelsList>Voice [WIP]</ChannelsList>}
       <Formik
         initialValues={{
           channelName: "",

diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
@@ -18,7 +18,7 @@ const Dashboard = () => {
             <Label>Chat</Label>
           </Block>
         </Link>
-        <Link to={historyLink("/chat")}>
+        <Link to={historyLink("/knowledge_center")}>
           <Block>
             <WidgetsIcon />
             <Label>Knowledge center</Label>

diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
@@ -14,6 +14,9 @@ const Layout = () => {
           <Route exact path='/chat'>
             <Chat />
           </Route>
+          <Route exact path='/knowledge_center'>
+            Hello KC
+          </Route>
           <Route exact path='/'>
             <Dashboard />
           </Route>

diff --git a/src/components/Message/Message.jsx → src/components/Message/Message.tsx b/src/components/Message/Message.jsx → src/components/Message/Message.tsx
@@ -1,50 +1,70 @@
 import React, { useEffect } from "react";
 import styled from "styled-components/macro";
 import { Avatar } from "@material-ui/core";
+import { selectUser } from "features/userSlice";
+import { useSelector } from "react-redux";
 
-const Message = ({ message }) => {
+interface IMessageProps {
+  message: any;
+}
+
+interface IMessageContainer {
+  isUserMessage: boolean;
+}
+
+const Message: React.FC<IMessageProps> = ({ message }) => {
   const date = new Date(message.createdAt).toLocaleString();
-  const user = message.user;
+  const { UUID } = useSelector(selectUser);
+
+  const isUserMessage = () => {
+    return UUID === message.user.UUID;
+  };
 
   return (
     <MessageListItem>
-      {user && (
-        <MessageContainer>
+      {!!message.user && (
+        <MessageContainer isUserMessage={isUserMessage()}>
           <Avatar src='https://avatars.githubusercontent.com/u/35654946?s=460&u=177d19ab4fef81db30b3bc104be0871e00818822&v=4' />
           <MessageWrapper>
             <MessageHeader>
-              <MessageLabel>{user.name}</MessageLabel>
+              <MessageLabel
+                className={`${
+                  message.user.name.indexOf("ADMIN") === 0 && "text-accent-1"
+                }`}
+              >
+                {message.user.name}
+              </MessageLabel>
               <MessageTimestamp>{date}</MessageTimestamp>
             </MessageHeader>
-            <MessageBodyContent>{message.body}</MessageBodyContent>
+            <MessageBodyContent isUserMessage={isUserMessage()}>
+              <span>{message.body}</span>
+            </MessageBodyContent>
           </MessageWrapper>
         </MessageContainer>
       )}
     </MessageListItem>
   );
 };
 
-export default Message;
-
 const MessageListItem = styled.div`
   display: flex;
-  padding-right: 3rem;
   color: ${({ theme }) => theme.textPrimary};
 `;
 
-const MessageContainer = styled.div`
+const MessageContainer = styled.div<IMessageContainer>`
   display: flex;
   width: 100%;
-  margin: 1rem 0;
+  margin: 0.5rem 0;
+  ${({ isUserMessage }) => isUserMessage && "flex-direction: row-reverse"};
 `;
 
-const MessageBodyContent = styled.div`
+const MessageBodyContent = styled.div<IMessageContainer>`
   display: flex;
   height: 100%;
   width: 100%;
   padding: 0.5rem 1rem;
   border-radius: 0.375rem;
-  background: #444;
+  background: ${({ isUserMessage }) => (isUserMessage ? "#57595C" : "#444")};
   font-size: 0.875rem;
   box-shadow: 0 0 4px ${({ theme }) => theme.borderPrimary};
 `;
@@ -54,7 +74,7 @@ const MessageWrapper = styled.div`
   flex-direction: column;
   min-width: 360px;
   max-width: 75%;
-  margin-left: 1rem;
+  margin: 0 1rem;
 `;
 
 const MessageHeader = styled.div`
@@ -74,3 +94,5 @@ const MessageTimestamp = styled.div`
   font-size: 0.625rem;
   font-size: x-small;
 `;
+
+export default Message;
diff --git a/src/components/common/Form/TextInput.jsx b/src/components/common/Form/TextInput.jsx
@@ -19,6 +19,6 @@ const InputWrapper = tw.div`flex flex-wrap flex-col w-full`;
 const Info = tw.div`flex justify-between my-2`;
 const Label = tw.label`text-white`;
 const Error = tw.span`text-sm text-red-600 text-right mx-2`;
-const Input = tw(Field)`border-2 rounded px-4 py-1 outline-none bg-gray-900`;
+const Input = tw(Field)`rounded px-4 py-1 outline-none bg-primary-1 text-white`;
 
 export default TextInput;
diff --git a/src/components/common/Modal/ModalBody.tsx b/src/components/common/Modal/ModalBody.tsx
@@ -15,6 +15,6 @@ const ModalBody: React.FC<IModalBodyProps> = ({ children, ...props }) => {
   )
 }
 
-const Body = tw.div`flex p-4`
+const Body = tw.div`flex px-4 py-6`
 
 export default ModalBody
diff --git a/src/components/common/Modal/ModalDialog.tsx b/src/components/common/Modal/ModalDialog.tsx
@@ -1,47 +1,51 @@
-import React from 'react'
-import tw from 'tailwind-styled-components';
-import PropTypes from 'prop-types';
-import { IModalProps } from './Modal';
-import styled from 'styled-components';
-import { ITheme } from 'interfaces/theme.interface';
+import React from "react";
+import PropTypes from "prop-types";
+import { IModalProps } from "./Modal";
+import styled from "styled-components";
+import { ITheme } from "interfaces/theme.interface";
 
 const propTypes = {
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.element),
-    PropTypes.element
+    PropTypes.element,
   ]),
   show: PropTypes.bool.isRequired,
   onHide: PropTypes.func.isRequired,
-}
+};
 
 const defaultProps = {
   show: false,
   onHide: () => {
-    console.log("Hide modal")
+    console.log("Hide modal");
   },
-}
+};
 
-const ModalDialog: React.FC<IModalProps> = ({ children, show, onHide, ...props }) => {
+const ModalDialog: React.FC<IModalProps> = ({
+  children,
+  show,
+  onHide,
+  ...props
+}) => {
   return (
     <Dialog>
-      <DialogContent className='box-shadow'>
-      {children}
-      </DialogContent>
+      <DialogContent className='box-shadow'>{children}</DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
-ModalDialog.displayName = 'ModalDialog';
+ModalDialog.displayName = "ModalDialog";
 ModalDialog.propTypes = propTypes;
 ModalDialog.defaultProps = defaultProps;
 
-const Dialog = tw.div`flex-center w-full my-8`;
-const DialogContent = styled.div`
+const Dialog = styled.div`
   max-width: 480px;
   width: 100%;
-  background: ${({ theme }: ITheme ) => theme.backgroundPrimary};
+`;
+
+const DialogContent = styled.div`
+  background: ${({ theme }: ITheme) => theme.backgroundPrimary};
   color: white;
   border-radius: 8px;
 `;
 
-export default ModalDialog
+export default ModalDialog;
diff --git a/src/components/common/Modal/ModalFooter.tsx b/src/components/common/Modal/ModalFooter.tsx
@@ -15,6 +15,6 @@ const ModalFooter: React.FC<IModalFooterProps> = ({ children }) => {
   )
 }
 
-const Footer = tw.div`flex justify-end border-t border-gray-600 p-4`
+const Footer = tw.div`flex justify-end border-t border-primary-1 p-4`
 
 export default ModalFooter