using chats instead of notes for the chat

src/chat/ChatMessage.tsx

@@ -17,24 +17,15 @@ import {
 } from "@mui/material";
 import { MoreVert, Person, Delete as DeleteIcon, } from "@mui/icons-material";
 import moment from "moment-timezone";
-import { useGlobalState, useNoteAPI, useSnackbar, useUserAPI } from "providers";
+import { useGlobalState, useNoteAPI, useSnackbar } from "providers";
 import React, { useState } from "react";
-// import { getThemeType } from "theme";
-// import { red } from "@material-ui/core/colors";
-import { useEffect } from "react";
-import { noteScope } from "models/Scope";
 import { pond } from "protobuf-ts/pond";
-import { useCallback } from "react";
-import { Note } from "models";
 import { red } from "@mui/material/colors";
-import { getThemeType } from "theme/themeType";
 import { makeStyles } from "@mui/styles";
-//import ImageViewer from "common/ImageViewer";
-//import ResponsiveDialog from "common/ResponsiveDialog";
 
 interface Props {
   index: number;
-  note: Note;
+  chat: pond.Chat;
   attachments?: pond.FileReference[];
   removeNoteMethod: (index: number) => void;
 }
@@ -44,11 +35,13 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   oddGrid: {
     backgroundColor: theme.palette.background.paper,
-    padding: 4
+    // padding: 4,
+    padding: theme.spacing(1)
   },
   evenGrid: {
-    backgroundColor: theme.palette.background.default,
-    padding: 4
+    // backgroundColor: theme.palette.background.default,
+    // padding: 4
+    padding: theme.spacing(1)
   },
   textContainer: {
     padding: theme.spacing(1),
@@ -61,6 +54,8 @@ const useStyles = makeStyles((theme: Theme) => ({
   }
 }))
 
+
+
 /**
  * Takes in a note and renders it
  * handles deleting of the note
@@ -71,40 +66,33 @@ export default function ChatMessage(props: Props) {
   const [{ user }] = useGlobalState();
   const noteAPI = useNoteAPI();
   const { openSnack } = useSnackbar();
-  const [permissions, setPermissions] = useState<pond.Permission[]>([]);
-  const userAPI = useUserAPI();
   const [dialog, setDialog] = useState(false);
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  //const [fileListOpen, setFileListOpen] = useState(false);
 
-  const [name, setName] = useState("");
-  const [avatar, setAvatar] = useState("");
+  const avatar = props.chat.profile?.avatar
+  const name = props.chat.profile?.name
+  const timestamp = props.chat.note?.settings?.timestamp ? props.chat.note?.settings?.timestamp : undefined
 
-  const loadPermissions = useCallback(() => {
-    let scope = noteScope(props.note.key());
-    userAPI
-      .getUser(user.id(), scope)
-      .then(resp => {
-        setPermissions(resp.permissions);
-      })
-      .catch(_err => {});
-    userAPI
-      .getProfile(props.note.settings.userId)
-      .then(resp => {
-        setName(resp.name);
-        setAvatar(resp.avatar);
-      })
-      .catch(_err => {});
-  }, [props.note, userAPI, user]);
-
-  useEffect(() => {
-    loadPermissions();
-  }, [loadPermissions]);
+  const generatePermissions = () => {
+    let perms: pond.Permission[] = []
+    if (Array.isArray(props.chat.permissions)) {
+      perms = props.chat.permissions.map((perm: unknown) => {
+        const mappedPerm = pond.Permission[perm as keyof typeof pond.Permission];
+        return mappedPerm; // Return null for invalid keys
+      }).filter(Boolean); // Optionally filter out any null values
+    } else {
+      console.error("data.permissions is not an array or does not exist");
+      perms = [];
+    }
+    return perms
+  }
+const permissions = generatePermissions()
 
   const deleteMessage = () => {
+    if (!props.chat?.note?.settings) return
     setAnchorEl(null);
     noteAPI
-      .removeNote(props.note.key())
+      .removeNote(props.chat.note.settings.key)
       .then(_resp => {
         openSnack("Message Deleted");
         props.removeNoteMethod(props.index);
@@ -123,54 +111,6 @@ export default function ChatMessage(props: Props) {
     setDialog(false);
   };
 
-  // const uploadedImages = () => {
-  //   return (
-  //     <Grid container direction="row">
-  //       {props.attachments?.map(attachment => {
-  //         if (attachment.metadata && attachment.metadata.contentType.split("/")[0] === "image") {
-  //           return (
-  //             <Grid item xs={4} key={attachment.uuid}>
-  //               <ImageViewer image={attachment} width={"100%"} />
-  //             </Grid>
-  //           );
-  //         } else {
-  //           return undefined;
-  //         }
-  //       })}
-  //     </Grid>
-  //   );
-  // };
-
-  // const fileListDialog = () => {
-  //   return (
-  //     <ResponsiveDialog
-  //       open={fileListOpen}
-  //       onClose={() => {
-  //         setFileListOpen(false);
-  //       }}>
-  //       <DialogTitle>Message Attachments</DialogTitle>
-  //       <DialogContent>
-  //         {props.attachments &&
-  //           props.attachments.map(file => {
-  //             if (file.metadata && file.metadata.contentType.includes("image/")) {
-  //               //if the file is an image
-  //               return (
-  //                 <Box margin={2} key={file.uuid}>
-  //                   <ImageViewer image={file} width={"100%"} />
-  //                 </Box>
-  //               );
-  //             } else {
-  //               return undefined;
-  //             }
-  //           })}
-  //       </DialogContent>
-  //       <DialogActions>
-  //         <Button onClick={() => setFileListOpen(false)}>Close</Button>
-  //       </DialogActions>
-  //     </ResponsiveDialog>
-  //   );
-  // };
-
   const messageMenu = () => {
     return (
       <Menu
@@ -236,28 +176,36 @@ export default function ChatMessage(props: Props) {
             </Grid>
             <Grid justifyContent={"center"}>
               <Typography variant="caption" color="textSecondary">
-                {moment(props.note.date())
-                  .tz(user.settings.timezone)
+                {moment.unix(timestamp ? timestamp/1000: 0)
+                  .tz(user.settings.timezone ? user.settings.timezone : "Canada/Central")
                   .format("MMMM Do YYYY, h:mm:ss a")}
               </Typography>
             </Grid>
           </Grid>
           <Grid size={{ xs: 12 }}>
             <Typography variant="body2" whiteSpace={"pre-line"}>
-              {props.note.content()}
+              {props.chat.note?.settings?.content}
             </Typography>
             {/*load files and display attached images below the message */}
           </Grid>
         </Grid>
         <Grid padding={1}>
           {/* delete button */}
-          {permissions.includes(pond.Permission.PERMISSION_WRITE) && (
+          {permissions.includes(pond.Permission.PERMISSION_WRITE) ? (
             <IconButton
               onClick={(event: React.MouseEvent<HTMLButtonElement>) =>
                 setAnchorEl(event.currentTarget)
               }>
               <MoreVert />
             </IconButton>
+          ) : (
+            // <span>
+              // <Tooltip title="No permissions to edit or delete" disableInteractive>
+                <IconButton disabled>
+                  <MoreVert />
+                </IconButton>
+              // </Tooltip>
+            // </span>
           )}
         </Grid>
       </Grid>