Frontend linter

PantryNodeReact/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "overrides": [],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {
+    // "tabs": ["warn", 2],
+    "linebreak-style": ["warn", "unix"],
+    "quotes": ["warn", "double"],
+    "semi": ["warn", "always"],
+    "@typescript-eslint/no-explicit-any": "off"
+  }
+}

PantryNodeReact/.gitignore

@@ -24,6 +24,4 @@ src/**/*.jsx
 
 npm-debug.log*
 yarn-debug.log*
-yarn-error.log*
-
-package-lock.json
+yarn-error.log*

PantryNodeReact/package.json

@@ -16,7 +16,11 @@
     "@types/node": "^16.18.13",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/parser": "^5.58.0",
     "axios": "^1.3.4",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react": "^7.32.2",
     "formik": "^2.2.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -31,7 +35,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint --fix --ext .ts,.tsx ./src"
   },
   "eslintConfig": {
     "extends": [

PantryNodeReact/src/Components/Copyright.tsx

@@ -1,15 +1,15 @@
-import React from 'react'
-import Typography from '@mui/material/Typography';
-function Copyright(props: any) {
+import React from "react";
+import Typography from "@mui/material/Typography";
+function Copyright(props: {sx:any}) {
     return (
         <Typography variant="body2" color="text.secondary" align="center" {...props}>
-      {'Copyright © '}
+      {"Copyright © "}
         Pantry Node
-      {' '}
+      {" "}
       {new Date().getFullYear()}
-      {'.'}
+      {"."}
     </Typography>
-    )
+    );
 }
 
 export default Copyright;

PantryNodeReact/src/Components/Feed/Feed.tsx

@@ -1,34 +1,77 @@
-import React from 'react'
-import { Box, Typography } from '@mui/material';
+import React from "react";
+import { Box, Typography } from "@mui/material";
 
 type FeedProps = {
-    sortedFeedList: { 
-        id: number; 
-        item: string; 
-        expiry_date: string;
-        added_date: string; 
-        quantity: number 
-    }[];
-
-    sortedExpiredFeedList: { 
-        id: number; 
-        item: string; 
-        expiry_date: string;
-        added_date: string; 
-        quantity: number 
-    }[];
-  };
-
+  sortedFeedList: {
+    id: number;
+    item: string;
+    expiry_date: string;
+    added_date: string;
+    quantity: number;
+  }[];
+
+  sortedExpiredFeedList: {
+    id: number;
+    item: string;
+    expiry_date: string;
+    added_date: string;
+    quantity: number;
+  }[];
+};
 
 const Feed = ({ sortedFeedList, sortedExpiredFeedList }: FeedProps) => {
   return (
-    <Box sx={{ width: '100%', bgcolor: '', p: 2 }}>
-        <Typography variant="h4" gutterBottom style={{ textAlign: "center" }}>Feed</Typography>
-        <div style={{ display: "flex", flexWrap:"wrap" }}>
+    <Box sx={{ width: "100%", bgcolor: "", p: 2 }}>
+      <Typography variant="h4" gutterBottom style={{ textAlign: "center" }}>
+        Feed
+      </Typography>
+      <div style={{ display: "flex", flexWrap: "wrap" }}>
+        {/* Expiring feed list section */}
+        <div style={{ width: "50%" }}>
+          <Typography variant="h5" gutterBottom style={{ textAlign: "center" }}>
+            Expiring Soon Items{" "}
+          </Typography>
 
-            {/* Expiring feed list section */}
-            <div style={{ width: "50%" }}>
-                <Typography variant="h5" gutterBottom style={{ textAlign: "center" }}>Expiring Soon Items </Typography>
+          {sortedFeedList
+            .filter((item) => {
+              const expiryDate = new Date(item.expiry_date).getTime();
+              const currentDate = new Date().getTime();
+              const isExpiring = expiryDate >= currentDate;
+              if (isExpiring) return item;
+              return isExpiring;
+            })
+            .map((item, index) => {
+              // to change date format 2023-05-04 => May 4, 2023
+              const formattedExpiringDate = new Intl.DateTimeFormat("en-US", {
+                month: "short",
+                day: "numeric",
+                year: "numeric",
+              }).format(new Date(item.expiry_date));
+              return (
+                <div
+                  key={item.id}
+                  style={{
+                    position: "relative",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    padding: "25px",
+                    backgroundColor: "#fff4b2",
+                    margin: "10px",
+                    borderBottom:
+                      index !== sortedFeedList.length - 1
+                        ? "1px solid #ccc"
+                        : "none",
+                  }}>
+                  <Typography
+                    variant="caption"
+                    style={{ position: "absolute", top: "5px", right: "10px" }}>
+                    Added on: {item.added_date}
+                  </Typography>
+                  <Typography style={{ width: "70%" }}>
+                    <b>{item.item}</b> expiring on{" "}
+                    <b>{formattedExpiringDate}</b>
+                  </Typography>
 
                 {
                     sortedFeedList.filter((item) => {
@@ -69,12 +112,11 @@ const Feed = ({ sortedFeedList, sortedExpiredFeedList }: FeedProps) => {
                         );
                     })
 
-                }
-            </div>
-
-            {/* Expired feed list section */}
-            <div style={{ width: "50%" }}>
-                <Typography variant="h5" gutterBottom style={{ textAlign: "center" }}>Expired Items</Typography>
+        {/* Expired feed list section */}
+        <div style={{ width: "50%" }}>
+          <Typography variant="h5" gutterBottom style={{ textAlign: "center" }}>
+            Expired Items
+          </Typography>
 
                 {
                 sortedExpiredFeedList.filter((item) => {
@@ -90,38 +132,44 @@ const Feed = ({ sortedFeedList, sortedExpiredFeedList }: FeedProps) => {
                         year: "numeric",
                       }).format(new Date(item.expiry_date));
 
-                        return (
-                            <div key={item.id} 
-                                    style={{ 
-                                    position:"relative",
-                                    display: "flex",
-                                    justifyContent: "space-between", 
-                                    alignItems: "center", 
-                                    padding: "25px",
-                                    backgroundColor: "#f9b2b2",
-                                    margin: "10px",
-                                    borderBottom: index !== sortedExpiredFeedList.length - 1 ? "1px solid #ccc" : "none" 
-                                    }}>
-
-                                <Typography variant="caption" style={{ position:"absolute", top: "5px", right: "10px" }}>
-                                    Added on: {item.added_date}
-                                </Typography>
-                                <Typography style={{ width: "70%" }}>
-                                    <b>{item.item}</b> expired on <b>{formattedExpiredDate}</b>
-                                </Typography>
-
-                                <Typography style={{ width:"30%" }}>
-                                    <strong>Stock Quantity:{ item.quantity<1?"Not available": item.quantity}</strong>
-                                </Typography>
-                            </div>
-                        );
-                }
-                )}
-            </div>
+              return (
+                <div
+                  key={item.id}
+                  style={{
+                    position: "relative",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    padding: "25px",
+                    backgroundColor: "#f9b2b2",
+                    margin: "10px",
+                    borderBottom:
+                      index !== sortedExpiredFeedList.length - 1
+                        ? "1px solid #ccc"
+                        : "none",
+                  }}>
+                  <Typography
+                    variant="caption"
+                    style={{ position: "absolute", top: "5px", right: "10px" }}>
+                    Added on: {item.added_date}
+                  </Typography>
+                  <Typography style={{ width: "70%" }}>
+                    <b>{item.item}</b> expired on <b>{formattedExpiredDate}</b>
+                  </Typography>
 
+                  <Typography style={{ width: "30%" }}>
+                    <strong>
+                      Stock Quantity:
+                      {item.quantity < 1 ? "Not available" : item.quantity}
+                    </strong>
+                  </Typography>
+                </div>
+              );
+            })}
         </div>
+      </div>
     </Box>
-  )
-}
+  );
+};
 
 export default Feed;

PantryNodeReact/src/Components/Layout.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import Box from "@mui/material/Box";
 import Navigation from "./Navigation/index";
 
-const Layout = ({ children }: any) => {
+const Layout = ({ children }: React.PropsWithChildren) => {
   return (
     <Box sx={{ display: "flex", maxWidth: "1920px" }}>
       <Navigation />

PantryNodeReact/src/Components/Navigation/index.tsx

@@ -16,7 +16,7 @@ const Navigation = () => {
   const location = useLocation();
   const navigate = useNavigate();
 
-  const path: String = location.pathname;
+  const path: string = location.pathname;
   const [activeLink, setActiveLink] = useState(path);
 
   const handleLogout = () => {

PantryNodeReact/src/Components/Navigation/paths.tsx

@@ -1,3 +1,4 @@
+import * as React from "react";
 import Inventory2Icon from "@mui/icons-material/Inventory2";
 import VolunteerActivismIcon from "@mui/icons-material/VolunteerActivism";
 import CategoryIcon from "@mui/icons-material/Category";

PantryNodeReact/src/Components/ProtectedRoute.tsx

@@ -3,8 +3,8 @@ import { Navigate, Outlet } from "react-router-dom";
 import Layout from "./Layout";
 
 type ProtectedRouteProps = {
-  isLoggedIn: Boolean;
-  redirectPath?: any;
+  isLoggedIn: boolean;
+  redirectPath?: string;
 };
 
 const ProtectedRoute = ({

PantryNodeReact/src/Components/Sale/SaleTable.tsx

@@ -1,18 +1,26 @@
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
-import React from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import React from "react";
 
 interface categoryListType {
   id: number;
   name: string;
   image_url: string;
-};
+}
 
 interface productType {
   id: number;
   name: string;
   price: number;
   quantity: number;
-};
+}
 
 interface SaleTableProps {
   category: categoryListType;

PantryNodeReact/src/hooks.ts

@@ -1,15 +1,15 @@
-import { useDispatch, useSelector } from 'react-redux'
-import type { TypedUseSelectorHook } from 'react-redux'
-import type { RootState, AppDispatch } from './store'
+import { useDispatch, useSelector } from "react-redux";
+import type { TypedUseSelectorHook } from "react-redux";
+import type { RootState, AppDispatch } from "./store";
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
-export const useAppDispatch: () => AppDispatch = useDispatch
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
 
-//While it's possible to import the RootState and AppDispatch types into each component, 
+//While it's possible to import the RootState and AppDispatch types into each component,
 //it's better to create typed versions of the useDispatch and useSelector hooks for usage in your application. This is important for a couple reasons:
 
 //1.For useSelector, it saves you the need to type (state: RootState) every time
-//2.For useDispatch, the default Dispatch type does not know about thunks. 
-//  In order to correctly dispatch thunks, you need to use the specific customized AppDispatch type from the store that includes the thunk middleware types, 
-//  and use that with useDispatch. Adding a pre-typed useDispatch hook keeps you from forgetting to import AppDispatch where it's needed.
+//2.For useDispatch, the default Dispatch type does not know about thunks.
+//  In order to correctly dispatch thunks, you need to use the specific customized AppDispatch type from the store that includes the thunk middleware types,
+//  and use that with useDispatch. Adding a pre-typed useDispatch hook keeps you from forgetting to import AppDispatch where it's needed.

PantryNodeReact/src/index.tsx

@@ -10,12 +10,10 @@ import "@fontsource/roboto/300.css";
 import "@fontsource/roboto/400.css";
 import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
-
 import { store } from "./store";
-import { Provider } from 'react-redux'
-
-const rootElement = document.getElementById("root");
-const root = ReactDOM.createRoot(rootElement!);
+import { Provider } from "react-redux";
+const rootElement = document.getElementById("root") as Element;
+const root = ReactDOM.createRoot(rootElement);
 
 root.render(
   <React.StrictMode>