Transaction Inbox and Messaging (POC)

.husky/post-checkout

@@ -1,30 +1,8 @@
 #!/bin/sh
 FILE="$(dirname "$0")/_/husky.sh"
-
-DIFF=$(git diff --numstat $1 -- server/package.json)
-DIFF2=$(git diff --numstat $1 -- client/package.json)
-
-# Check if the diff is empty
-if [ -z "$DIFF" ]; then
-  echo 'Server Package.json unchanged'
-else
-  if [ ! -f "$FILE" ]; then
-    cd server && npm ci --legacy-peer-deps && npm run prepare && cd ..
-  else
-      . "$FILE"
-      cd server && npm ci --legacy-peer-deps && cd ..
-  fi
-
+if [ ! -f "$FILE" ]; then
+  cd server && npm ci --legacy-peer-deps && npm run prepare && cd ../client && npm ci --legacy-peer-deps && npm run prepare && cd ..
 fi
 
-if [ -z "$DIFF2" ]; then
-  echo ' Client Package.json unchanged'
-else
-  if [ ! -f "$FILE" ]; then
-    cd client && npm ci --legacy-peer-deps && npm run prepare && cd ..
-  else
-      . "$FILE"
-      cd client && npm ci --legacy-peer-deps && cd ..
-  fi
-
-fi
+. "$FILE"
+cd server && npm ci --legacy-peer-deps && cd ../client && npm ci --legacy-peer-deps && cd ..

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+cd server && npm run checks && cd ../client && npm run checks && cd ..

client/src/FetchActions.ts

@@ -1,4 +1,5 @@
 import { APP_API_BASE_URL } from './configs';
+import { Message } from './types';
 
 export const getRequest = (
   url: string,
@@ -26,6 +27,42 @@ export const getRequest = (
       }
     });
 };
+
+export const patchRequest = (
+  url: string,
+  body: any,
+  onSuccess: Function,
+  abortController?: AbortController,
+  onError = (statusCode?: Number, statusText?: string) => {},
+) => {
+  let options = {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController?.signal,
+    body: JSON.stringify(body),
+  };
+  fetch(url, options)
+    .then((resp) => {
+      if (!resp.ok) {
+        onError(resp.status, resp.statusText);
+      } else {
+        return resp.json();
+      }
+    })
+    .then((data) => onSuccess(data))
+    .catch((e) => {
+      if (e.name === 'AbortError') {
+        // usually, this abort is intentional due to a change in props
+        console.log('fetch aborted');
+      } else {
+        onError();
+      }
+    });
+};
+// best practice for fetching is to allow fetches to be aborted, in case props change while a fetch is in progress
+
 export const fetchNeeds = (
   limit: string,
   offset: string,
@@ -54,3 +91,21 @@ export const fetchDonations = (
 
   getRequest(assetsApiRequest.href + assetsApiRequest.hash, onSuccess, abortController, onError);
 };
+
+export const fetchInbox = (
+  onSuccess: Function,
+  abortController?: AbortController,
+  onError = (statusCode?: Number, statusText?: string) => {},
+) => {
+  const assetsApiRequest = new URL(`${APP_API_BASE_URL}/transactions/inbox`);
+  getRequest(assetsApiRequest.href + assetsApiRequest.hash, onSuccess, abortController, onError);
+};
+
+export const updateMessage = (
+  messageBody: Message,
+  onSuccess: Function,
+  onError = (statusCode?: Number, statusText?: string) => {},
+) => {
+  const messageApiRequest = new URL(`${APP_API_BASE_URL}/messages/${messageBody.id}`);
+  patchRequest(messageApiRequest.href, messageBody, onSuccess, new AbortController(), () => {});
+};

client/src/components/FAQs.tsx

@@ -58,7 +58,7 @@ function FAQs() {
   return (
     <div className={classes.faqs}>
       <div className={classes.faqsVisual}>
-        <img src={FAQsImage} alt="FAQs Image" className={classes.faqsImage} />
+        <img src={FAQsImage} alt="FAQs" className={classes.faqsImage} />
       </div>
       <div className={classes.faqsInfo}>
         <Typography variant="h4" component="h4">

client/src/components/Users/Auth/SetNewPassword.tsx

@@ -152,7 +152,7 @@ function SetNewPassword() {
   return (
     <div className={classes.container}>
       <div className={classes.imgContainer}>
-        <img src={SetNewPasswordImg} alt="FAQs Image" className={classes.setNewPasswordImg} />
+        <img src={SetNewPasswordImg} alt="FAQs" className={classes.setNewPasswordImg} />
       </div>
       <Paper elevation={0} className={classes.paper}>
         <Typography variant="h2" align="center">

client/src/components/Users/Auth/SignUpCitizen/SignUpCitizen.tsx

@@ -51,20 +51,6 @@
     }
   }, [user]);
 
-  useEffect(() => {
-    if (submitForm) {
-      registerUserMutation.mutate(formData);
-      setSubmitForm(false);
-    }
-  }, [submitForm]);
-
-  useEffect(() => {
-    if (submitProfile) {
-      updateProfileMutation.mutate({ file: image!, userId: user!['id'] });
-      setSubmitProfile(false);
-    }
-  }, [submitProfile]);
-
   const registerUserMutation = useMutation({
     mutationFn: Endpoints.userRegister,
     onSuccess: ({ data: user }) => {
@@ -82,6 +68,20 @@
     onError: (error: AxiosError) => console.log(error),
   });
 
+  useEffect(() => {
+    if (submitForm) {
+      setSubmitForm(false);
+      registerUserMutation.mutate(formData);
+    }
+  }, [submitForm, setSubmitForm, formData]);
+
+  useEffect(() => {
+    if (submitProfile) {
+      updateProfileMutation.mutate({ file: image!, userId: user!['id'] });
+      setSubmitProfile(false);
+    }
+  }, [submitProfile, formData, image, user]);
+
   const handleNext = (newFormData: {}, doSubmit = false) => {
     setFormData((currFormData) => ({
       ...currFormData,

client/src/components/Users/Inbox/MessageCard.tsx

@@ -3,39 +3,52 @@ import { makeStyles } from 'tss-react/mui';
 
 import type { Theme } from '@mui/material/styles';
 
-import type { Message } from '../../../types';
+import { Typography } from '@mui/material';
+import { Button } from '@mui/base';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   currentUserMessage: {
     alignSelf: 'flex-end',
-    border: '1px solid black',
+    border: '1px solid lightgrey',
     borderRadius: '10px',
     padding: '5px',
     maxWidth: '70%',
     marginLeft: '30%',
+    background: 'rgba(196, 196, 196, 0.3)',
   },
   otherUserMessage: {
     alignSelf: 'flex-start',
-    background: 'rgba(196, 196, 196, 0.3)',
-    border: '1px solid black',
+    background: 'lightblue',
+    border: '1px solid lightgrey',
     borderRadius: '10px',
     padding: '5px',
     maxWidth: '70%',
   },
 }));
 
 function MessageCard({
+  text,
+  senderName,
   isCurrentUser,
-  message,
+  dateString,
+  messageReadCallback,
 }: {
+  senderName: string;
+  text: string;
   isCurrentUser: boolean;
-  message: Message;
+  dateString: string;
+  messageReadCallback: React.MouseEventHandler<HTMLButtonElement>;
 }): JSX.Element {
   const { classes } = useStyles();
-
   return (
     <div className={isCurrentUser ? classes.currentUserMessage : classes.otherUserMessage}>
-      {message.user.firstName}: {message.text}
+      <Typography variant="subtitle2" color="text.primary">
+        {text}
+      </Typography>
+      <Typography variant="body2" color="text.primary">
+        {dateString}
+      </Typography>
+      <Button onClick={messageReadCallback}> Read </Button>
     </div>
   );
 }

client/src/components/Users/Inbox/TransactionThreadCard.tsx

@@ -1,39 +1,12 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
-import { makeStyles } from 'tss-react/mui';
 import Typography from '@mui/material/Typography';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import PermIdentityRoundedIcon from '@mui/icons-material/PermIdentityRounded';
-
-import type { Theme } from '@mui/material/styles';
+import Divider from '@mui/material/Divider';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import Avatar from '@mui/material/Avatar';
 
 import type { Transaction, User } from '../../../types';
-
-const useStyles = makeStyles()((theme: Theme) => ({
-  threadCardSelected: {
-    background: 'rgba(196, 196, 196, 0.3)',
-    width: '95%',
-    margin: '0 auto',
-  },
-  threadCard: {
-    background: 'white',
-    width: '95%',
-    margin: '0 auto',
-    boxShadow: 'none',
-  },
-  threadCardContent: {
-    padding: '10px 4px 10px 40px',
-  },
-  threadsSection: {
-    marginRight: '20px',
-  },
-  threadCardTitle: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-}));
+import { ListItemButton } from '@mui/material';
 
 function TransactionThreadCard({
   isSelected,
@@ -44,30 +17,77 @@ function TransactionThreadCard({
   isSelected: boolean;
   onClick: (transaction: Transaction) => void;
   transaction: Transaction;
-  user?: User;
+  user?: User | null;
 }): JSX.Element {
-  const { classes } = useStyles();
-  const otherUser =
-    user?.id === transaction.requester.id
-      ? transaction.requester.firstName
-      : transaction.donater.firstName;
+  const message = transaction.messages[0];
+  const renderMessage = () => {
+    if (message) {
+      return (
+        <React.Fragment>
+          <Typography
+            sx={{ display: 'inline' }}
+            component="span"
+            variant="body2"
+            color="text.primary"
+          >
+            {message.sendingUserId === (user && user.id) ? ' Me: ' : ''}
+          </Typography>
+          {message.text}
+        </React.Fragment>
+      );
+    }
+  };
+  const userOrg =
+    user && user.organizations && user.organizations[0] && user.organizations[0].organization.id;
+  const userIsClaimer = userOrg === transaction.claimer.id;
+  const isCurrentUser =
+    (userOrg && message && message.sendingOrgId === userOrg) ||
+    (user && message && message.sendingUserId === user.id);
+  const donaterIsOrg = !!transaction.donater_organization;
+
+  let otherUserName = '';
+  let otherUserImage = '' as string | undefined;
+  if (userIsClaimer) {
+    // other user is claimer
+    if (donaterIsOrg) {
+      const otherUser = transaction.donater_organization && transaction.donater_organization;
+      otherUserName = otherUser.name;
+    } else {
+      const otherUser = transaction.donater_user && transaction.donater_user;
+      otherUserName = otherUser.firstName;
+      otherUserImage = otherUser.profile_image_url;
+    }
+  } else {
+    // other user is claimer
+    otherUserName = transaction.claimer && transaction.claimer.name;
+    otherUserImage = transaction.claimer && transaction.claimer.image_url;
+  }
 
   return (
-    <Card
-      className={isSelected ? classes.threadCardSelected : classes.threadCard}
-      onClick={() => onClick(transaction)}
-      variant={isSelected ? 'outlined' : undefined}
-    >
-      <CardContent className={classes.threadCardContent}>
-        <Box className={classes.threadCardTitle}>
-          <Typography variant="h6" component="h6">
-            {otherUser}
-          </Typography>
-          <PermIdentityRoundedIcon />
-        </Box>
-        <Typography>Re: {transaction.asset.title}</Typography>
-      </CardContent>
-    </Card>
+    <>
+      <ListItemButton
+        alignItems="flex-start"
+        selected={isSelected}
+        onClick={() => onClick(transaction)}
+      >
+        <ListItemAvatar>
+          {otherUserImage && <Avatar alt={otherUserName} src={otherUserImage} />}
+        </ListItemAvatar>
+        <ListItemText
+          primary={
+            <>
+              <Typography variant="subtitle2">
+                {message ? (isCurrentUser ? 'To : ' : 'From: ') : ''}
+                {otherUserName}
+              </Typography>
+              <Typography variant="subtitle2">{`Topic: ${transaction.asset.title}`}</Typography>
+            </>
+          }
+          secondary={renderMessage()}
+        />
+      </ListItemButton>
+      <Divider variant="inset" component="li" />
+    </>
   );
 }
 

client/src/providers/SettingsProvider.tsx

@@ -48,9 +48,8 @@ export const SettingsProvider = ({ children }: Props) => {
   const fetchCategories = async () => {
     try {
       const res = await fetch(`${APP_API_BASE_URL}/categories`);
-      const response = (await res.json()) satisfies Category[];
       if (res.ok) {
-        _categoriesRef.current = [...response];
+        _categoriesRef.current = [...((await res.json()) satisfies Category[])];
       }
     } catch (error) {
       console.log('Error fetching Categorie', error);