[Release] Version 0.3.7 (#406)

sherryhli · jennchenn · ChinemeremChigbo · web-flow · commit e276cdc2064c · 2025-11-19T19:28:31.000-08:00
* Add support to go back to prev page (#397) * Upgrade to ubuntu 22.04 (#395) * Upgrade to ubuntu 22.04 * Update ci.yml * Observe ts version for ubuntu 20.04 * Pin typescript version * Update yarn.lock * Revert "Update yarn.lock" This reverts commit dadfe1d. * Revert "Pin typescript version" This reverts commit 42c6eb3. * Pin packageManager * Update ci.yml * Update ci.yml * Update yarn.lock * Pin exact versions * Update yarn.lock * Update package.json * Generate prisma client * Update tsconfig.json * Update ci.yml * Prisma binary targets * Update ci.yml * Try linux-musl * Linux musl * Update ci.yml * Specify musl * Remove generated client * Update schema.prisma * Update ci.yml * Update schema.prisma * Update ci.yml * Update ci.yml * Update ci.yml * Update ci.yml * Update ci.yml * Update ci.yml * Update ci.yml * Update ci.yml * Update ci.yml * Update schema.prisma * Upgrade prisma * Try upgrading to Node 16 * Update ci.yml * Update yarn.lock * Upgrade prisma * Update ci.yml * Update tsconfig.json * Update schema.prisma * Update schema.prisma * Update schema.prisma * Add Seeding and Add Primsa3 Naming Migration * Prisma standardize * Update yarn.lock * Update yarn and add return type * Revert package.json * Revert "Revert package.json" This reverts commit 8db818e. * Update index.tsx --------- Co-authored-by: Sharujan Sreekaran <ohnose123@gmail.com> * Add Albert Lai to employee seed data (#401) Added a new employee entry for Albert Lai in the seed data to support development and testing with updated employee records. * Upgrade to ubuntu 24.04 (#402) * Upgrade to ubuntu 22.04 * Update ci.yml * Observe ts version for ubuntu 20.04 * Pin typescript version * Update yarn.lock * Revert "Update yarn.lock" This reverts commit dadfe1d. * Revert "Pin typescript version" This reverts commit 42c6eb3. * Pin packageManager * Update ci.yml * Update ci.yml * Update yarn.lock * Pin exact versions * Update yarn.lock * Update package.json * Generate prisma client * Update tsconfig.json * Update ci.yml * Prisma binary targets * Update ci.yml * Try linux-musl * Linux musl * Update ci.yml * Specify musl * Remove generated client * Update schema.prisma * Update ci.yml * Update schema.prisma * Update ci.yml * Update ci.yml * Update ci.yml * Update ci.yml * Update ci.yml * Update ci.yml * Update ci.yml * Update ci.yml * Update ci.yml * Update schema.prisma * Upgrade prisma * Try upgrading to Node 16 * Update ci.yml * Update yarn.lock * Upgrade prisma * Update ci.yml * Update tsconfig.json * Update schema.prisma * Update schema.prisma * Update schema.prisma * Add Seeding and Add Primsa3 Naming Migration * Prisma standardize * Update yarn.lock * Update yarn and add return type * Revert package.json * Revert "Revert package.json" This reverts commit 8db818e. * Update index.tsx * Add IF EXISTS to index rename statements in migration Updated index renaming statements in the migration SQL to use ALTER INDEX IF EXISTS for safer execution. This prevents errors if the specified indexes do not exist during migration. * Update migration.sql --------- Co-authored-by: Sharujan Sreekaran <ohnose123@gmail.com> --------- Co-authored-by: Jennifer Chen <32009013+jennchenn@users.noreply.github.com> Co-authored-by: Chinemerem <chinemeremchigbo@Outlook.com> Co-authored-by: Sharujan Sreekaran <ohnose123@gmail.com>
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -16,8 +16,8 @@ jobs:
 
         strategy:
             matrix:
-                os: [ubuntu-20.04]
-                node: [14.17.0]
+                os: [ubuntu-22.04]
+                node: [16.20.2]
 
         steps:
             - name: Checkout
diff --git a/README.md b/README.md
@@ -72,7 +72,7 @@ yarn dev
 npx prisma migrate deploy
 ```
 
-4. Reset and seed database (ensure node is v14.17.0 or else it will stall)
+4. Reset and seed database (ensure node is v16.20.2 or else it will stall)
 
 ```bash
 npx prisma migrate reset
diff --git a/components/Pagination.tsx b/components/Pagination.tsx
@@ -1,6 +1,6 @@
 import { HStack, Text, IconButton, Input } from '@chakra-ui/react'; // Chakra UI
 import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'; // Chakra UI Icons
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 type Props = {
   readonly pageSize: number; // Number of items per page
@@ -25,6 +25,10 @@ export default function Pagination(props: Props) {
 
   const [inputValue, setInputValue] = useState<string | number>(pageNumber + 1); // Display page number as 1-based index
 
+  useEffect(() => {
+    setInputValue(pageNumber + 1);
+  }, [pageNumber]);
+
   /**
    * Go to the next page if possible, and invoke callback if defined
    * `pageNumber + 1` moves to the next page (zero-based index)
diff --git a/components/admin/requests/Header.tsx b/components/admin/requests/Header.tsx
@@ -93,14 +93,10 @@ export default function RequestHeader({
 
   const [backLink, setBackLink] = useState('/admin');
   const generateBackLink = () => {
-    let status;
     const routerQuery = router.query;
-    if (routerQuery === undefined || routerQuery.origin === undefined) {
-      status = applicationStatus;
-    } else {
-      status = routerQuery.origin;
-    }
-    setBackLink(`/admin?tab=${status}`);
+    const status = typeof routerQuery.tab === 'string' ? routerQuery.tab : applicationStatus;
+    const page = typeof routerQuery.page === 'string' ? routerQuery.page : '0';
+    setBackLink(`/admin?tab=${status}&page=${page}`);
   };
 
   useEffect(() => {
diff --git a/lib/utils/s3-utils.ts b/lib/utils/s3-utils.ts
@@ -143,7 +143,7 @@ export const refreshS3SignedUrl = (
   objectKey: string | null,
   s3SignedUrl: string | null,
   lastUpdatedTime: number
-) => {
+): string | null => {
   // Get the valid duration period from env.
   const linkDuration = parseInt(process.env.INVOICE_LINK_TTL_DAYS);
   const DAY = 24 * 60 * 60 * 1000;
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "with-typescript",
   "version": "1.0.0",
   "engines": {
-    "node": "14.17.0"
+    "node": "16.20.2"
   },
   "scripts": {
     "dev": "next",
@@ -22,69 +22,70 @@
     "ts-node": "ts-node --compiler-options \"{\\\"module\\\":\\\"commonjs\\\"}\""
   },
   "dependencies": {
-    "@apollo/client": "^3.6.8",
-    "@chakra-ui/icons": "^1.0.14",
-    "@chakra-ui/react": "^1.6.2",
-    "@emotion/react": "11",
-    "@emotion/styled": "11",
-    "@fontsource/noto-sans": "^4.4.5",
-    "@prisma/client": "^2.28.0",
-    "@types/mime-types": "^2.1.1",
-    "@types/node": "^16.7.4",
-    "@types/nodemailer": "^6.4.4",
-    "@types/react-bootstrap-typeahead": "^5.1.7",
-    "@types/react-helmet": "^6.1.2",
-    "@types/react-table": "^7.7.2",
-    "apollo-server-micro": "^2.24.1",
+    "@apollo/client": "3.6.8",
+    "@chakra-ui/icons": "1.0.14",
+    "@chakra-ui/react": "1.6.2",
+    "@emotion/react": "11.4.0",
+    "@emotion/styled": "11.3.0",
+    "@fontsource/noto-sans": "4.4.5",
+    "@prisma/client": "3.15.2",
+    "@types/mime-types": "2.1.1",
+    "@types/node": "16.7.4",
+    "@types/nodemailer": "6.4.4",
+    "@types/react-bootstrap-typeahead": "5.1.7",
+    "@types/react-helmet": "6.1.2",
+    "@types/react-table": "7.7.2",
+    "apollo-server-micro": "2.24.1",
     "bootstrap": "5.1.1",
-    "chakra-ui-steps": "^1.1.1",
-    "csv-writer": "^1.6.0",
-    "formik": "^2.2.9",
-    "framer-motion": "4",
-    "graphql": "^15.5.0",
-    "graphql-middleware": "^6.1.31",
+    "chakra-ui-steps": "1.1.1",
+    "csv-writer": "1.6.0",
+    "formik": "2.2.9",
+    "framer-motion": "4.1.17",
+    "graphql": "15.5.0",
+    "graphql-middleware": "6.1.31",
     "graphql-request": "3.6.0",
-    "mime-types": "^2.1.35",
-    "moment": "^2.29.3",
-    "next": "12",
-    "next-auth": "^3.26.1",
-    "next-i18next": "^8.3.0",
-    "next-s3-upload": "^0.1.8",
-    "nodemailer": "^6.6.1",
-    "pdfmake": "^0.2.4",
-    "pino": "^8.3.0",
-    "react": "^17.0.2",
-    "react-bootstrap": "^2.0.0-rc.0",
-    "react-bootstrap-typeahead": "^5.2.1",
-    "react-day-picker": "^7.4.10",
-    "react-dom": "^17.0.2",
-    "react-helmet": "^6.1.0",
-    "react-intersection-observer": "^8.32.0",
-    "react-table": "^7.7.0",
-    "typescript": "^4.4.2",
-    "unstated-next": "^1.1.0",
-    "yup": "^0.32.11"
+    "mime-types": "2.1.35",
+    "moment": "2.29.1",
+    "next": "12.0.3",
+    "next-auth": "3.26.1",
+    "next-i18next": "8.3.0",
+    "next-s3-upload": "0.1.8",
+    "nodemailer": "6.6.1",
+    "pdfmake": "0.2.4",
+    "pino": "8.3.0",
+    "react": "17.0.2",
+    "react-bootstrap": "2.0.0-rc.0",
+    "react-bootstrap-typeahead": "5.2.1",
+    "react-day-picker": "7.4.10",
+    "react-dom": "17.0.2",
+    "react-helmet": "6.1.0",
+    "react-intersection-observer": "8.32.0",
+    "react-table": "7.7.0",
+    "typescript": "4.4.2",
+    "unstated-next": "1.1.0",
+    "yarn-lockfile": "1.1.1",
+    "yup": "0.32.11"
   },
   "devDependencies": {
-    "@graphql-codegen/add": "^2.0.2",
+    "@graphql-codegen/add": "2.0.2",
     "@graphql-codegen/cli": "1.21.4",
-    "@graphql-codegen/typescript": "^1.22.0",
-    "@types/pdfmake": "^0.1.21",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.24.0",
-    "@typescript-eslint/parser": "^4.24.0",
-    "apollo": "^2.33.2",
-    "csv-parser": "^3.0.0",
-    "eslint": "^7.26.0",
-    "eslint-config-next": "^11.0.0",
-    "eslint-plugin-react": "^7.23.2",
-    "husky": "4",
-    "lint-staged": "^11.0.0",
-    "pino-pretty": "^8.1.0",
-    "prettier": "^2.3.0",
-    "prisma": "^2.28.0",
-    "ts-node": "^10.0.0"
+    "@graphql-codegen/typescript": "1.22.0",
+    "@types/pdfmake": "0.1.21",
+    "@types/react": "17.0.30",
+    "@types/react-dom": "17.0.5",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
+    "apollo": "2.33.2",
+    "csv-parser": "3.0.0",
+    "eslint": "7.32.0",
+    "eslint-config-next": "11.0.0",
+    "eslint-plugin-react": "7.24.0",
+    "husky": "4.3.8",
+    "lint-staged": "11.0.0",
+    "pino-pretty": "8.1.0",
+    "prettier": "2.3.0",
+    "prisma": "3.15.2",
+    "ts-node": "10.0.0"
   },
   "husky": {
     "hooks": {
@@ -95,5 +96,8 @@
     "*.{ts,tsx}": "eslint --cache --fix",
     "*.{ts,tsx,md}": "prettier --write"
   },
+  "prisma": {
+    "seed": "yarn ts-node prisma/seed.ts"
+  },
   "license": "MIT"
 }
diff --git a/pages/admin/index.tsx b/pages/admin/index.tsx
@@ -29,7 +29,7 @@ import Table from '@components/Table'; // Table component
 import Pagination from '@components/Pagination'; // Pagination component
 import RequestStatusBadge from '@components/admin/RequestStatusBadge'; //Status badge component
 import { useQuery } from '@tools/hooks/graphql'; //Apollo client
-import { useEffect, useState } from 'react'; // React
+import { useEffect, useRef, useState, useMemo } from 'react'; // React
 import {
   ApplicationRow,
   GetApplicationsRequest,
@@ -46,27 +46,42 @@ import EmptyMessage from '@components/EmptyMessage';
 
 interface RouterQuery {
   tab?: string;
+  page?: number;
 }
 
-export const getTabIndex = (routerQuery: RouterQuery): number => {
-  if (routerQuery === undefined || routerQuery.tab === undefined) {
-    return 1;
+export const getTabPageIndex = (routerQuery: RouterQuery): [number, number] => {
+  if (
+    routerQuery === undefined ||
+    routerQuery.tab === undefined ||
+    routerQuery.page === undefined
+  ) {
+    return [1, 0];
   }
+
   const tabName = routerQuery.tab;
+  let tabIndex = 1;
+
   switch (tabName) {
     case 'ALL':
-      return 0;
+      tabIndex = 0;
+      break;
     case 'PENDING':
-      return 1;
+      tabIndex = 1;
+      break;
     case 'IN_PROGRESS':
-      return 2;
+      tabIndex = 2;
+      break;
     case 'COMPLETED':
-      return 3;
+      tabIndex = 3;
+      break;
     case 'REJECTED':
-      return 4;
+      tabIndex = 4;
+      break;
     default:
-      return 1;
+      tabIndex = 1;
   }
+
+  return [tabIndex, Number(routerQuery.page)];
 };
 
 const tabIndexToStatus: { [key: number]: ApplicationStatus | 'ALL' } = {
@@ -174,23 +189,37 @@ const Requests: NextPage = () => {
   // This will avoid firing a query for each key the user presses
   const debouncedSearchFilter = useDebounce<string>(searchFilter, 500);
 
+  const filters = useMemo(
+    () => ({
+      statusFilter,
+      permitTypeFilter,
+      requestTypeFilter,
+      searchFilter,
+      sortOrder,
+    }),
+    [statusFilter, permitTypeFilter, requestTypeFilter, searchFilter, sortOrder]
+  );
+
+  const debouncedFilters = useDebounce(filters, 500);
+
   // Data & pagination
   const [requestsData, setRequestsData] = useState<Array<ApplicationRow>>([]);
   const [pageNumber, setPageNumber] = useState(0);
   const [recordsCount, setRecordsCount] = useState(0);
 
   // Tabs
   const [tabIndex, setTabIndex] = useState(0);
-  const getTabFromRoute = (): number => {
-    const index = getTabIndex(routerQuery);
+  const getTabPageFromRoute = () => {
+    const [index, page] = getTabPageIndex(routerQuery);
     setTabIndex(index);
+    setPageNumber(page);
     return index;
   };
 
   const handleTabChange = () => {
     const status = tabIndexToStatus[tabIndex];
     setStatusFilter(status === 'ALL' ? null : status);
-    router.push({ query: { tab: status } });
+    router.push({ query: { tab: status, page: pageNumber } });
   };
 
   // Make query to applications resolver
@@ -239,9 +268,11 @@ const Requests: NextPage = () => {
     }
   );
 
+  const firstRender = useRef(true);
+
   // Determine the active tab on page load based on the route
   useEffect(() => {
-    getTabFromRoute();
+    getTabPageFromRoute();
   }, []);
 
   useEffect(() => {
@@ -251,9 +282,13 @@ const Requests: NextPage = () => {
 
   // Set page number to 0 after every filter or sort change
   useEffect(() => {
+    if (firstRender.current) {
+      firstRender.current = false;
+      return; // Skip resetting on first mount to allow resetting state
+    }
     setPageNumber(0);
     refetch();
-  }, [statusFilter, permitTypeFilter, requestTypeFilter, debouncedSearchFilter, sortOrder]);
+  }, [debouncedFilters]);
 
   return (
     <Layout>
@@ -291,6 +326,7 @@ const Requests: NextPage = () => {
             index={tabIndex}
             onChange={index => {
               setTabIndex(index);
+              setPageNumber(0);
             }}
           >
             <TabList paddingX="24px" defaultIndex={1}>
@@ -423,7 +459,9 @@ const Requests: NextPage = () => {
                   initialSort={sortOrder}
                   onChangeSortOrder={setSortOrder}
                   onRowClick={({ id }) =>
-                    router.push(`/admin/request/${id}?origin=${tabIndexToStatus[tabIndex]}`)
+                    router.push(
+                      `/admin/request/${id}?tab=${tabIndexToStatus[tabIndex]}&page=${pageNumber}`
+                    )
                   }
                 />
                 <Flex justifyContent="flex-end">
diff --git a/prisma/dev-seed-utils/employees.ts b/prisma/dev-seed-utils/employees.ts
@@ -124,6 +124,11 @@ const employees = [
     lastName: 'Lu',
     email: 'davidlu+employee@uwblueprint.org',
   },
+  {
+    firstName: 'Albert',
+    lastName: 'Lai',
+    email: 'albertlai631+employee@gmail.com',
+  },
 ];
 
 /**
diff --git a/prisma/migrations/20250727225112_prisma3_migration/migration.sql b/prisma/migrations/20250727225112_prisma3_migration/migration.sql
diff --git a/yarn.lock b/yarn.lock
