feat: Aug2022 updates (#130)

* fix: add missing association icons in root [request] * chore: lint * fix: use useSession in all pages to ensure checking the session * - update all packages - fix type-check errors * feat: add basePath and logout_url env variables * feat: add zendro favicon * feat: add textSearchOperator model parameter. Can be like or iLike, default iLike * refactor: rename textSearchOperator -> spaSearchOperator * fix: session expiration due to ill timed session polling * chore: remove log * fix: typo * add .env.example * feat: accept all case errors in spaSearchOperator * add comments * refactor: remove unsused BATCH_SIZE env variable
Zendro-dev · Aug 24, 2022 · 8e2419d · 8e2419d
1 parent b30ee37
commit 8e2419d
Show file tree

Hide file tree

Showing 40 changed files with 371 additions and 254 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,15 @@
+NEXT_PUBLIC_ZENDRO_GRAPHQL_URL="http://localhost:3000/graphql"
+NEXT_PUBLIC_ZENDRO_METAQUERY_URL="http://localhost:3000/meta_query"
+NEXT_PUBLIC_ZENDRO_ROLES_URL="http://zendro-graphql-server:3000/getRolesForOAuth2Token"
+NEXT_PUBLIC_ZENDRO_MAX_UPLOAD_SIZE="500"
+NEXT_PUBLIC_ZENDRO_MAX_RECORD_LIMIT="10000"
+NEXT_PUBLIC_REDUX_LOGGER="false"
+ZENDRO_DATA_MODELS="../data_model_definitions"
+RECORD_DELIMITER=""
+FIELD_DELIMITER=""
+ARRAY_DELIMITER=""
+OAUTH2_ISSUER="http://zendro-keycloak:8080/auth/realms/zendro"
+OAUTH2_TOKEN_URI="http://zendro-keycloak:8080/auth/realms/zendro/protocol/openid-connect/token"
+OAUTH2_LOGOUT_URL="http://localhost:8081/auth/realms/zendro/protocol/openid-connect/logout"
+NEXTAUTH_URL="http://localhost:8080/api/auth"
+NEXTAUTH_SECRET="secret"
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -25,6 +25,7 @@ module.exports = {
         'plugin:react-hooks/recommended', // React hooks rules
         'plugin:jsx-a11y/recommended', // Accessibility rules
         'plugin:prettier/recommended', // Prettier recommended rules
+        'plugin:@next/next/recommended', // Next.js recommended rules
       ],
       rules: {
         // This rule is not compatible with Next.js's <Link /> components

diff --git a/.gitignore b/.gitignore
@@ -31,6 +31,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

diff --git a/babel.config.js b/babel.config.js
diff --git a/next.config.js b/next.config.js
@@ -1,14 +1,21 @@
 const createNextPluginPreval = require('next-plugin-preval/config');
 const withNextPluginPreval = createNextPluginPreval();
+const BASEPATH = String(
+  process.env.NEXT_PUBLIC_ZENDRO_BASEPATH
+    ? process.env.NEXT_PUBLIC_ZENDRO_BASEPATH.replace(
+        /\/*([a-zA-Z]+)\/*/g,
+        '/$1'
+      )
+    : ''
+);
 
 /**
  * @typedef {import('next/dist/next-server/server/config').NextConfig} NextConfig NextJS configuration
  * @type {NextConfig}
  */
 const config = {
-  webpack5: true,
   reactStrictMode: true,
-  basePath: '/spa',
+  ...(BASEPATH && { basePath: BASEPATH }),
 };
 
 module.exports = withNextPluginPreval(config);
diff --git a/package.json b/package.json
@@ -22,63 +22,62 @@
   "dependencies": {
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
-    "@mui/icons-material": "^5.6.1",
-    "@mui/lab": "^5.0.0-alpha.77",
-    "@mui/material": "^5.6.1",
-    "@mui/styles": "^5.6.1",
-    "@types/acl": "^0.4.37",
-    "acl2": "^2.0.0",
-    "axios": "^0.21.1",
-    "clsx": "^1.1.1",
-    "date-fns": "^2.21.1",
-    "graphql": "^15.5.1",
-    "graphql-request": "^3.4.0",
-    "i18next": "^20.3.2",
-    "i18next-browser-languagedetector": "^6.1.2",
-    "inflection": "^1.13.1",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.93",
+    "@mui/material": "^5.9.3",
+    "@mui/styles": "^5.9.3",
+    "@types/acl": "^0.4.41",
+    "acl2": "^3.0.1",
+    "axios": "^0.27.2",
+    "clsx": "^1.2.1",
+    "date-fns": "^2.29.1",
+    "graphql": "^16.5.0",
+    "graphql-request": "^4.3.0",
+    "i18next": "^21.8.16",
+    "i18next-browser-languagedetector": "^6.1.4",
+    "inflection": "^1.13.2",
     "jwt-decode": "^3.1.2",
-    "next": "^12.1.5",
-    "next-auth": "^4.3.2",
+    "next": "^12.2.4",
+    "next-auth": "^4.10.3",
     "next-plugin-preval": "^1.2.4",
-    "notistack": "^2.0.4",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-i18next": "^11.11.0",
-    "swr": "^0.5.6",
-    "xlsx": "^0.17.5",
+    "notistack": "^2.0.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-i18next": "^11.18.3",
+    "sharp": "^0.30.7",
+    "swr": "^1.3.0",
+    "xlsx": "^0.18.5",
     "zendro-bulk-create": "github:Zendro-dev/zendro-bulk-create#0.7.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6",
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
     "@cypress/code-coverage": "^3.9.8",
-    "@types/inflection": "^1.5.28",
-    "@types/node": "^16.0.0",
-    "@types/prettier": "^2.3.1",
-    "@types/react": "^17.0.13",
-    "@types/react-test-renderer": "^17.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.28.1",
-    "@typescript-eslint/parser": "^4.28.1",
+    "@next/eslint-plugin-next": "^12.2.4",
+    "@types/inflection": "^1.13.0",
+    "@types/node": "^18.6.4",
+    "@types/prettier": "^2.7.0",
+    "@types/react": "18.0.16",
+    "@types/react-test-renderer": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.32.0",
+    "@typescript-eslint/parser": "^5.32.0",
     "ajv": "^7.2.4",
     "babel-plugin-istanbul": "^6.0.0",
-    "cypress": "7.6.0",
-    "eslint": "^7.30.0",
-    "eslint-config-next": "^11.0.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^7.0.0",
+    "cypress": "^7.6.0",
+    "eslint": "^8.21.0",
+    "eslint-config-next": "^12.2.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
-    "lint-staged": "^11.0.0",
-    "prettier": "^2.2.1",
-    "serve": "^12.0.1",
-    "typescript": "^4.4.3",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "serve": "^14.0.1",
+    "typescript": "^4.7.4",
     "utility-types": "^3.10.0",
-    "wait-on": "^6.0.0"
-  },
-  "resolutions": {
-    "@types/react": "17.0.40"
+    "wait-on": "^6.0.1"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/build/models.ts b/src/build/models.ts
@@ -45,8 +45,10 @@ export async function getStaticModels(): Promise<{
   }
 
   // Resolve model paths
-  const resolvePaths = (folderPath: string) => (file: string): string =>
-    path.resolve(path.join(folderPath, file));
+  const resolvePaths =
+    (folderPath: string) =>
+    (file: string): string =>
+      path.resolve(path.join(folderPath, file));
 
   return {
     models: modelFiles.map(resolvePaths(MODELS_PATH)),
@@ -94,15 +96,11 @@ export async function parseStaticModels(
  * group them according to the source (i.e. models).
  * @param group group models by their source
  */
-export async function parseStaticModels(
-  group: true
-): Promise<{
+export async function parseStaticModels(group: true): Promise<{
   models: Record<string, ParsedDataModel>;
 }>;
 
-export async function parseStaticModels(
-  group?: boolean
-): Promise<
+export async function parseStaticModels(group?: boolean): Promise<
   | Record<string, ParsedDataModel>
   | {
       models: Record<string, ParsedDataModel>;

diff --git a/src/build/routes.ts b/src/build/routes.ts
@@ -35,15 +35,15 @@ export async function getModelNavRoutes(): Promise<AppRoutes> {
     models: getCrossModels(parsedModels.models),
   };
 
-  const parseModelAsRoute = (group: string) => ({
-    model,
-  }: ParsedDataModel): RouteLink => {
-    return {
-      type: 'link',
-      name: model,
-      href: `/${group}/${model}`,
+  const parseModelAsRoute =
+    (group: string) =>
+    ({ model }: ParsedDataModel): RouteLink => {
+      return {
+        type: 'link',
+        name: model,
+        href: `/${group}/${model}`,
+      };
     };
-  };
 
   return [
     {
@@ -73,11 +73,11 @@ export async function getStaticModelPaths(): Promise<
   const parsedModels = await parseDataModels();
 
   // Generate model paths
-  const composeUrlQuery = (group: string) => ({
-    model,
-  }: ParsedDataModel): { params: ModelUrlQuery } => ({
-    params: { group, model },
-  });
+  const composeUrlQuery =
+    (group: string) =>
+    ({ model }: ParsedDataModel): { params: ModelUrlQuery } => ({
+      params: { group, model },
+    });
 
   let modelPaths = parsedModels.models.map(composeUrlQuery('models'));
 
@@ -111,26 +111,28 @@ export async function getStaticRecordPaths(): Promise<
   const parsedModels = await parseDataModels();
   const requests = ['details', 'edit', 'new'];
 
-  const composeRecordUrlQuery = (group: string) => (
-    recordPaths: Array<{ params: RecordUrlQuery }>,
-    parsedModel: ParsedDataModel
-  ): Array<{ params: RecordUrlQuery }> => {
-    for (const request of requests) {
-      // Skip not supported operations
-      if (
-        (request === 'edit' && !parsedModel.apiPrivileges.update) ||
-        (request === 'new' && !parsedModel.apiPrivileges.create)
-      ) {
-        continue;
-      }
+  const composeRecordUrlQuery =
+    (group: string) =>
+    (
+      recordPaths: Array<{ params: RecordUrlQuery }>,
+      parsedModel: ParsedDataModel
+    ): Array<{ params: RecordUrlQuery }> => {
+      for (const request of requests) {
+        // Skip not supported operations
+        if (
+          (request === 'edit' && !parsedModel.apiPrivileges.update) ||
+          (request === 'new' && !parsedModel.apiPrivileges.create)
+        ) {
+          continue;
+        }
 
-      // Add path to attributes page
-      recordPaths.push({
-        params: { group, model: parsedModel.model, request },
-      });
-    }
-    return recordPaths;
-  };
+        // Add path to attributes page
+        recordPaths.push({
+          params: { group, model: parsedModel.model, request },
+        });
+      }
+      return recordPaths;
+    };
 
   const modelPaths = parsedModels.models.reduce(
     composeRecordUrlQuery('models'),

diff --git a/src/components/dialog-popup/use-dialog.tsx b/src/components/dialog-popup/use-dialog.tsx
@@ -56,6 +56,7 @@ export interface DialogOptions extends ConfirmationDialogProps {
 
 interface DialogProviderProps {
   context?: (context: DialogContext) => void;
+  children?: React.ReactNode;
 }
 
 export const DialogProvider: React.FunctionComponent<DialogProviderProps> = ({

diff --git a/src/components/lang-switcher/lang-switcher.tsx b/src/components/lang-switcher/lang-switcher.tsx
@@ -32,9 +32,9 @@ export default function LanguageSwitcher(props: IconButtonProps): ReactElement {
     i18n.changeLanguage(translations.current[index].lcode);
   };
 
-  const handleTranslationIconClick: React.MouseEventHandler<HTMLButtonElement> = (
-    event
-  ) => {
+  const handleTranslationIconClick: React.MouseEventHandler<
+    HTMLButtonElement
+  > = (event) => {
     setTranslationAnchorEl(event.currentTarget);
   };
 

diff --git a/src/components/text-input/text-input.tsx b/src/components/text-input/text-input.tsx
@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { Theme } from '@mui/material/styles';
 import { createStyles, makeStyles } from '@mui/styles';
 import {

diff --git a/src/components/toast-alert/toast-alert.tsx b/src/components/toast-alert/toast-alert.tsx
@@ -65,7 +65,7 @@ const toast = forwardRef<HTMLDivElement, AlertToastProps>(
         <Card className={backgroundColor}>
           <CardActions classes={{ root: classes.actionRoot }}>
             <Box display="flex" alignItems="center">
-              {details && (
+              {!!details && (
                 <IconButton
                   aria-label="Show more"
                   className={clsx(classes.expand, {
@@ -88,7 +88,7 @@ const toast = forwardRef<HTMLDivElement, AlertToastProps>(
               <CloseIcon className={textColor} />
             </IconButton>
           </CardActions>
-          {details && (
+          {!!details && (
             <Collapse in={expanded} timeout="auto" unmountOnExit>
               <Paper className={classes.collapse}>
                 <Typography variant="subtitle1" gutterBottom>

diff --git a/src/config/globals.ts b/src/config/globals.ts
@@ -12,6 +12,16 @@ const RECORD_DELIMITER = process.env.RECORD_DELIMITER || '\n';
 const FIELD_DELIMITER = process.env.FIELD_DELIMITER || ',';
 const ARRAY_DELIMITER = process.env.ARRAY_DELIMITER || ';';
 const SHEET_NAME = process.env.SHEET_NAME || '';
+
+const BASEPATH = String(
+  process.env.NEXT_PUBLIC_ZENDRO_BASEPATH
+    ? process.env.NEXT_PUBLIC_ZENDRO_BASEPATH.replace(
+        /\/*([a-zA-Z]+)\/*/g,
+        '/$1'
+      )
+    : ''
+);
+
 interface Config {
   GRAPHQL_URL: string;
   ROLES_URL: string;
@@ -23,6 +33,7 @@ interface Config {
   FIELD_DELIMITER: string;
   ARRAY_DELIMITER: string;
   SHEET_NAME: string;
+  BASEPATH: string;
 }
 
 const config: Config = {
@@ -36,6 +47,7 @@ const config: Config = {
   FIELD_DELIMITER,
   ARRAY_DELIMITER,
   SHEET_NAME,
+  BASEPATH,
 };
 
 if (
@@ -60,6 +72,7 @@ export {
   FIELD_DELIMITER,
   ARRAY_DELIMITER,
   SHEET_NAME,
+  BASEPATH,
 };
 
 export default config;
diff --git a/src/hooks/useCountdown.tsx b/src/hooks/useCountdown.tsx
@@ -19,7 +19,7 @@ export default function useCountdown(count = 0): UseCountdown {
         const id = setInterval(() => {
           setTimer((state) => (state > 0 ? state - 1 : state));
         }, 1000);
-        timerId.current = (id as unknown) as number;
+        timerId.current = id as unknown as number;
       }
       return () => clearInterval(timerId.current);
     },