chat input now always sits at the bottom of the chat; has a divider

src/app/HeaderButtons.tsx

@@ -1,12 +1,9 @@
-import { Chat as ChatIcon, ChevronRight } from "@mui/icons-material";
+import { Chat as ChatIcon } from "@mui/icons-material";
-import { Box, Drawer, IconButton, Theme, Tooltip, Typography } from "@mui/material";
+import { Box, IconButton, Theme, Tooltip } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import Chat from "chat/Chat";
 import { ChatDrawer } from "chat/ChatDrawer";
-import { useMobile } from "hooks";
 import { Team, User } from "models";
 import moment from "moment";
-import { pond } from "protobuf-ts/pond";
 import { useEffect, useState } from "react";
 import { getSignatureAccentColour } from "services/whiteLabel";
 
@@ -33,18 +30,6 @@ const useStyles = makeStyles((theme: Theme) => ({
   off: {
     backgroundColor: "transparent"
   },
-  chatDrawer: {
-    padding: theme.spacing(1),
-    height: "100%",
-    minWidth: theme.spacing(54),
-    maxWidth: theme.spacing(54),
-    zIndex: 1000000000000
-  },
-  chatDrawerMobile: {
-    padding: theme.spacing(1),
-    height: "auto",
-    width: "100%"
-  },
   drawerHeader: {
     display: "flex",
     alignItems: "center",
@@ -65,10 +50,7 @@ export default function HeaderButtons(props: Props) {
   const {hasTeams, /*user,*/ team} = props
   const [hasNewChats, setHasNewChats] = useState(false);
   const [chatDrawerOpen, setChatDrawerOpen] = useState(false);
-
-  // const theme = useTheme();
   const classes = useStyles();
-  const isMobile = useMobile();
 
   useEffect(() => {
     if (!team) return;
@@ -109,7 +91,6 @@ export default function HeaderButtons(props: Props) {
             width="8px"
             height="8px"
             borderRadius="50%"
-            // style={{ backgroundColor: theme.palette.primary.main }}
             className={classes.on}
           />
         )}
@@ -126,74 +107,7 @@ export default function HeaderButtons(props: Props) {
         onClose={() => setChatDrawerOpen(false)}
         team={team}
       />
-      // <Drawer
-      //   anchor="right"
-      //   open={chatDrawerOpen}
-      //   sx={{ zIndex: 10000 }}
-      //   onClose={() => setChatDrawerOpen(false)}
-      //   style={{ height: "100%", maxWidth: "100%" }}
-      //   title={team.settings.name ? team.settings.name + "Chat" : "Chat"}>
-      
-      //   <div className={isMobile ? classes.chatDrawerMobile : classes.chatDrawer}>
-      //     <div className={classes.drawerHeader}>
-      //       <IconButton onClick={() => setChatDrawerOpen(false)}>
-      //         <ChevronRight />
-      //       </IconButton>
-      //       <Typography>{team.name()} Chat</Typography>
-      //     </div>
-      //     <Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM} />
-      //   </div>
-      // </Drawer>
     )}
     </>
   )
-
-  // return (
-  //   {user.settings?.notificationMethods?.includes(
-  //     pond.NotificationMethod.NOTIFICATION_METHOD_APP
-  //   ) && (
-  //     <div style={{ position: "relative", marginLeft: theme.spacing(-1) }}>
-  //       <Tooltip title="Notifications">
-  //         <IconButton
-  //           style={{ marginLeft: theme.spacing(1) }}
-  //           onClick={() => {
-  //             setNotificationDrawerOpen(true);
-  //           }}>
-  //           <Notifications />
-  //         </IconButton>
-  //       </Tooltip>
-  //       {hasNewNotifications && (
-  //         <Box
-  //           width="8px"
-  //           height="8px"
-  //           borderRadius="50%"
-  //           style={{ backgroundColor: theme.palette.primary.main }}
-  //           className={classes.on}
-  //         />
-  //       )}
-  //     </div>
-  //   )}
-  //   {team && team.settings && team.settings.key && (
-  //     <Drawer
-  //       anchor="right"
-  //       open={chatDrawerOpen}
-  //       onClose={() => setChatDrawerOpen(false)}
-  //       style={{ height: "100%", maxWidth: "100%" }}
-  //       title={team.settings.name ? team.settings.name + "Chat" : "Chat"}>
-  //       <div className={isMobile ? classes.chatDrawerMobile : classes.chatDrawer}>
-  //         <div className={classes.drawerHeader}>
-  //           <IconButton onClick={() => setChatDrawerOpen(false)}>
-  //             <ChevronRightIcon />
-  //           </IconButton>
-  //           <Typography>{team.name()} Chat</Typography>
-  //         </div>
-  //         <Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM} />
-  //       </div>
-  //     </Drawer>
-  //   )}
-  //   <NotificationDrawer
-  //     setNotificationDrawerOpen={setNotificationDrawerOpen}
-  //     notificationDrawerOpen={notificationDrawerOpen}
-  //   />
-  // )
 }

src/chat/Chat.tsx

@@ -1,4 +1,4 @@
-import { Box, CircularProgress } from "@mui/material";
+import { Box, CircularProgress, Divider, Theme } from "@mui/material";
 import { useGlobalState, useNoteAPI } from "providers";
 import React from "react";
 import { useEffect } from "react";
@@ -7,6 +7,18 @@ import ChatInput from "./ChatInput";
 import ChatOutput from "./ChatOutput";
 import { Note } from "models";
 import { pond } from "protobuf-ts/pond";
+import { makeStyles } from "@mui/styles";
+
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
+    chatContainer: {
+      height: "100%", 
+      display: "flex", 
+      flexDirection: "column", 
+      justifyContent: "space-between",
+    }
+  })
+})
 
 interface Props {
   objectKey: string;
@@ -21,6 +33,7 @@ export default function Chat(props: Props) {
   const [loading, setLoading] = useState<boolean>(false);
   const [totalMessages, setTotalMessages] = useState(0);
   const [{ user }] = useGlobalState();
+  const classes = useStyles()
 
   const loadChats = () => {
     setLoading(true)
@@ -79,8 +92,7 @@ export default function Chat(props: Props) {
           <CircularProgress />
         </Box>
       ) : (
-        <div style={{ maxHeight: "100%", display: "flex", flexDirection: "column-reverse" }}>
+        <Box className={classes.chatContainer}>
-          <ChatInput newNoteMethod={showNewNotes} objectKey={objectKey} type={type} />
           <ChatOutput
             totalMessages={totalMessages}
             // attachmentMap={attachmentMap}
@@ -88,7 +100,11 @@ export default function Chat(props: Props) {
             removeNoteMethod={removeNote}
             loadMore={loadMore}
           />
-        </div>
+          <Box style={{bottom: 0}}>
+            <Divider/>
+            <ChatInput newNoteMethod={showNewNotes} objectKey={objectKey} type={type} />
+          </Box>
+        </Box>
       )}
     </React.Fragment>
   );

src/chat/ChatDrawer.tsx

@@ -4,6 +4,7 @@ import { makeStyles } from "@mui/styles";
 import { useMobile } from "hooks";
 import { Team } from "models";
 import Chat from "./Chat";
+import { pond } from "protobuf-ts/pond";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -57,7 +58,7 @@ export function ChatDrawer(props: Props) {
           <Typography>{team.name()} Chat</Typography>
         </Box>
         <Box className={classes.chatContainer}>
-          <Chat objectKey={team.settings.key}/>
+          <Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM}/>
         </Box>
       </Box>
     </Drawer>

src/pages/Team.tsx

@@ -8,6 +8,7 @@ import { Team, teamScope, User } from "models";
 // import { useSnackbar } from "notistack";
 import PageContainer from "pages/PageContainer";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
+import { pond } from "protobuf-ts/pond";
 import { useSnackbar, useTeamAPI, useUserAPI } from "providers";
 import { useEffect, useState } from "react";
 import { useLocation, useParams } from 'react-router-dom';
@@ -225,7 +226,7 @@ export default function TeamPage() {
       <Grid2 container spacing={1}>
         <Grid2 size={{ xs: 12, sm: 6 }}>
           <Card className={ isMobile ? classes.cardMobile : classes.card }>
-            <Chat objectKey={team.key()} />
+            <Chat objectKey={team.key()} type={pond.NoteType.NOTE_TYPE_TEAM}/>
           </Card>
         </Grid2>
         <Grid2 size={{ xs: 12, sm: 6 }}>

src/user/ShareObject.tsx

@@ -24,14 +24,12 @@ import {
   Typography
 } from "@mui/material";
 import { green, red } from "@mui/material/colors";
-// import { Theme } from "@mui/material/styles/createMuiTheme";
 import {
   Add as AddIcon,
   Link as LinkIcon,
   LinkOff,
   RemoveCircle as RemoveCircleIcon
 } from "@mui/icons-material";
-// import { MobileDateTimePicker } from "@mui/utils/pi";
 import { MobileDateTimePicker } from '@mui/x-date-pickers';
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { usePermissionAPI, usePrevious, useSnackbar } from "hooks";
@@ -41,7 +39,6 @@ import moment, { Moment } from "moment";
 import { pond } from "protobuf-ts/pond";
 import React, { useCallback, useEffect, useState } from "react";
 import { openSnackbar } from "providers/Snackbar";
-// import { Status } from "@sentry/react";
 import { useBinAPI, useGateAPI } from "providers";
 import { makeStyles } from "@mui/styles";
 
@@ -131,7 +128,7 @@ export default function ShareObject(props: Props) {
             resp.data.bins.forEach(bin => {
               if (bin.settings) {
                 let newScope = binScope(bin.settings?.key);
-                permissionAPI.shareObject(newScope, email, sharedPermissions).catch(err => {
+                permissionAPI.shareObject(newScope, email, sharedPermissions).catch(_err => {
                   successBins = false;
                 });
               }
@@ -161,7 +158,7 @@ export default function ShareObject(props: Props) {
               resp.data.gates.forEach(gate => {
                 if (gate) {
                   let newScope = { key: gate.key, kind: "gate" } as Scope;
-                  permissionAPI.shareObject(newScope, email, sharedPermissions).catch(err => {
+                  permissionAPI.shareObject(newScope, email, sharedPermissions).catch(_err => {
                     successGates = false;
                   });
                 }
@@ -175,7 +172,7 @@ export default function ShareObject(props: Props) {
         }
         closeAfterShare();
       })
-      .catch((err: any) => {
+      .catch((_err: any) => {
         error("Unable to share " + label + " with " + email);
         close();
       });
@@ -192,7 +189,7 @@ export default function ShareObject(props: Props) {
         );
         setShareableLinks(rShareableLinks);
       })
-      .catch((error: any) => {
+      .catch((_error: any) => {
         setShareableLinks([]);
         console.log("Error occured while loading shareable links");
       })
@@ -215,10 +212,10 @@ export default function ShareObject(props: Props) {
     const expiration = isNewLinkInfinite ? getNeverExpires() : newLinkExpiration.toISOString();
     permissionAPI
       .addShareableLink(scope, expiration)
-      .then((response: any) => {
+      .then((_response: any) => {
         loadShareableLinks();
       })
-      .catch((error: any) => {
+      .catch((_error: any) => {
         console.log("Error occured while creating shareable link");
       });
   };
@@ -226,10 +223,10 @@ export default function ShareObject(props: Props) {
   const revokeShareableLink = (code: string) => {
     permissionAPI
       .removeShareableLink(scope, code)
-      .then((response: any) => {
+      .then((_response: any) => {
         loadShareableLinks();
       })
-      .catch((error: any) => {
+      .catch((_error: any) => {
         console.log("Error occured while removing the shareable link");
       });
   };
@@ -295,7 +292,7 @@ export default function ShareObject(props: Props) {
     setSharedPermissions(updatedSharedPermissions);
   };
 
-  const changeTab = (event: any, newTab: number) => {
+  const changeTab = (_event: any, newTab: number) => {
     setTab(newTab);
   };