more history work

yiqu · Jul 7, 2023 · 83abf16 · 83abf16
1 parent 4d6409e
commit 83abf16
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 38 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "animate.css": "^4.1.1",
     "axios": "^0.27.2",
     "axios-hooks": "^4.0.0",
+    "date-fns": "^2.30.0",
     "formik": "^2.2.9",
     "gh-pages": "^4.0.0",
     "immer": "^9.0.21",
@@ -44,7 +45,6 @@
     "react-hook-form": "^7.45.1",
     "react-hot-toast": "^2.4.1",
     "react-infinite-scroll-component": "^6.1.0",
-    "react-moment": "^1.1.2",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.4.2",
     "react-tooltip": "^5.9.1",

diff --git a/src/history/History.tsx b/src/history/History.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Divider, LinearProgress, Skeleton, Stack } from '@mui/material';
+import { Box, Button, DialogContent, Divider, LinearProgress, List, ListItem, ListItemText, Skeleton, Stack, Typography } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { useGetUserHistoryQuery } from '../store/user-history/user-history.api';
 import ErrorPage from '../404/ErrorPage';
@@ -14,15 +14,57 @@ import { ellipsis } from '../shared/utils/css.utils';
 import { UserHistory } from '../store/user-history/user-history.state';
 import { GREY } from '../theme/palette';
 import { startCase } from 'lodash';
+import { formatDistanceToNow, format } from 'date-fns';
+import { ReactNode, useState } from 'react';
+import Add from '@mui/icons-material/Add';
+import LowPriorityIcon from '@mui/icons-material/LowPriority';
+import Delete from '@mui/icons-material/Delete';
+import Edit from '@mui/icons-material/Edit';
+import produce from 'immer';
+import { shortenUserAgentHash } from '../shared/utils/user-agent';
+import DialogLayout from '../shared/components/dialog/DialogLayout';
+
+
 
 function HistoryList() {
 
-  const { data, isError, isLoading, isFetching, refetch, error } = useGetUserHistoryQuery();
+  const { data, sortedByDate, isError, isLoading, isFetching, refetch, error } = useGetUserHistoryQuery(undefined, {
+    selectFromResult: (data) => {
+      const copy = produce(data.data, draft => {
+        (draft ?? []).sort((a, b) => {
+          return (b.timestamp ?? 0) > (a.timestamp ?? 0) ? 1 : -1;
+        });
+      });
+      return {
+        ...data,
+        sortedByDate: copy
+      };
+    }
+  });
+  const [open, setOpen] = useState<{open: boolean; payload?: UserHistory}>({
+    open: false
+  });
+
+  const handleClose = () => {
+    setOpen((current) => {
+      return {
+        ...current,
+        open: false
+      };
+    });
+  };
 
   const handleRefresh = () => {
     refetch();
   };
 
+  const handleActionClick = (action: string, payload: UserHistory) => {
+    setOpen({
+      open: true,
+      payload: payload
+    });
+  };
+
   if (isLoading) {
     return (
       <Stack width="100%" direction="column" spacing={ 3 }>
@@ -37,10 +79,14 @@ function HistoryList() {
     return <ErrorPage reason={ 'Error' } debug={ error } />;
   }
 
-  if (!data) {
+  if (!data || !sortedByDate) {
     return null;
   }
 
+  if (sortedByDate && sortedByDate.length < 1) {
+    return <Stack> No History </Stack>;
+  }
+
   return (
     <Box width="100%">
       <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%">
@@ -57,8 +103,13 @@ function HistoryList() {
         }
       </Box>
 
+      <Box mb={ 3 }>
+        <Typography>
+          This is a list of all actions performed on Pokemons. ({ sortedByDate.length})
+        </Typography>
+      </Box>
       <TableContainer component={ Paper } elevation={ 0 } sx={ { overflowX: 'hidden', '&:hover': {overflowX: 'auto'}} }>
-        <Table size="medium" aria-label="table" stickyHeader style={ { width: '100%', tableLayout: 'auto' } }>
+        <Table size="medium" aria-label="table" stickyHeader style={ { width: '100%', tableLayout: 'fixed' } }>
           <TableHead>
             <TableRow>
               {
@@ -79,7 +130,7 @@ function HistoryList() {
 
           <TableBody>
             {
-              data.map((history: UserHistory) => (
+              sortedByDate.map((history: UserHistory) => (
                 <TableRow
                   key={ history.fireId }
                   sx={ { '&:hover': {backgroundColor: GREY[300]} } }
@@ -89,7 +140,7 @@ function HistoryList() {
                       return (
                         <StyledDataCell key={ `${history.fireId}${index}` }
                         >
-                          { transformTableData(history, col) }
+                          { transformTableData(history, col, handleActionClick) }
                         </StyledDataCell>
                       );
                     })
@@ -101,23 +152,82 @@ function HistoryList() {
 
         </Table>
       </TableContainer>
+
+      <DialogLayout open={ open.open } onClose={ handleClose } title="User Details" maxWidth="sm">
+        <DialogContent>
+          <Typography> {open.payload?.user?.userHash} </Typography>
+          <Divider variant='fullWidth' flexItem sx={ {my: 2} } /> 
+          { open.payload?.user?.userAgent && <Stack direction="column" spacing={ 2 } >
+            <List dense={ true }>
+              {
+              Object.keys(open.payload.user.userAgent).map((key) => {
+                return (
+                  <ListItem key={ key } title={ `${JSON.stringify((open.payload?.user?.userAgent as any)[key])}` }>
+                    <ListItemText
+                      primary={ startCase(key) }
+                      secondary={ `${JSON.stringify((open.payload?.user?.userAgent as any)[key])}` }
+                    />
+                  </ListItem>
+                );
+              })
+            }
+            </List>
+          </Stack> }
+
+        </DialogContent>
+
+      </DialogLayout>
     </Box>
   );
 }
 
-function transformTableData(history: UserHistory, columnId: typeof TABLE_COLUMNS[number]) {
+function transformTableData(history: UserHistory, columnId: typeof TABLE_COLUMNS[number], onClick: (action: string, payload: UserHistory)=>void) {
+
+  const handleUserClick = () => {
+    onClick("user", history);
+  };
 
   switch (columnId) {
+    case 'actionType': {
+      let icon: ReactNode = null;
+      switch(history.actionType) {
+        case 'add': {
+          icon = <Add />;
+          break;
+        }
+        case 'remove': {
+          icon = <Delete />;
+          break;
+        }
+        case 'edit': {
+          icon = <Edit />;
+          break;
+        }
+        case 'reorder': {
+          icon = <LowPriorityIcon />;
+          break;
+        }
+      }
+      return <Stack direction="row" justifyContent="start" alignItems="center" spacing={ 1 } width="100%" style={ {...ellipsis} }> 
+        <span style={ {display: 'flex'} }>{ icon }</span> <span style={ {...ellipsis} }>{ startCase(history[columnId]) }</span>
+      </Stack>;
+    }
     case 'user': {
-      return <span data-tooltip-id="tooltip"
-      data-tooltip-content={ `` }> { history.user?.userHash } </span>;
+      return <Box data-tooltip-id="tooltip" style={ {...ellipsis} }
+      data-tooltip-content={ `` }> <Button onClick={ handleUserClick } sx={ {width: 'inherit'} }> 
+        <span style={ {...ellipsis} }>{ shortenUserAgentHash(history.user?.userHash ?? '') }</span>
+      </Button> </Box>;
+    }
+    case 'timestamp': {
+      return <span title={ format(history[columnId] ?? 0, 'MM/dd/yyyy hh:mm aaa') }> { formatDistanceToNow(history[columnId] ?? 0) } ago </span>;
     }
     default: {
       return <div style={ {...ellipsis} }> { startCase(`${history[columnId]}`) } </div>;
     }
   }
 }
 
-const TABLE_COLUMNS = ['actionEntity',  'actionEntitySource', 'actionEntitySourcePosition', 'actionEntityTarget', 'actionEntityTargetPosition', 'actionType', 'timestamp', 'user'] as const;
+
+const TABLE_COLUMNS = ['actionType', 'timestamp', 'actionEntity',  'actionEntitySource', 'actionEntitySourcePosition', 'actionEntityTarget', 'actionEntityTargetPosition',  'user'] as const;
 
 export default HistoryList;
diff --git a/src/routes/Layout.tsx b/src/routes/Layout.tsx
@@ -22,7 +22,7 @@ const Layout = () => {
 
   return (
     <ThemeProvider theme={ theme }>
-      <Box sx={ { display: 'flex', height: '100%' } }>
+      <Box sx={ { display: 'flex', height: '100%' } } mb={ 5 } id="main-box">
 
         <Box component="main" sx={ { flexGrow: 1, bgcolor:(theme) => theme.palette.mode === 'light' ? GREY[0] : null } }>
 

diff --git a/src/shared/utils/table.utils.tsx b/src/shared/utils/table.utils.tsx
@@ -4,22 +4,20 @@ import { ellipsis } from "./css.utils";
 
 export const StyledHeaderCell = styled(TableCell)(() => ({
   ...ellipsis,
-  paddingTop: '10px',
-  paddingBottom: '10px',
-  fontSize: '15px',
+  paddingTop: '5px',
+  paddingBottom: '5px',
+  fontSize: '12px',
   borderRight: `1px solid ${GREY[400]}`,
   borderColor: GREY[400],
   backgroundColor: GREY[200],
-  maxWidth: '15rem', // the max width data cells can have
 }));
 
 export const StyledDataCell = styled(TableCell)(() => ({
   ...ellipsis,
-  paddingTop: '10px',
-  paddingBottom: '10px',
-  fontSize: '14px',
+  paddingTop: '5px',
+  paddingBottom: '5px',
+  fontSize: '10px',
   //borderRight: `1px solid ${GREY[300]}`,
   borderBottom: "none",
-  maxWidth: '15rem', // the max width data cells can have
 }));
 
diff --git a/src/shared/utils/user-agent.ts b/src/shared/utils/user-agent.ts
@@ -1,5 +1,5 @@
 export const shortenUserAgentHash = (hashString: string): string => {
   const first4 = hashString.substring(0, 4);
   const last4 = hashString.substring(hashString.length - 4);
-  return `${first4}...${last4}`;
+  return `${first4}${last4}`;
 };