@campxdev/campx-web-utils 0.1.18 → 0.1.19

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "bracketSpacing": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "useTabs": false,
+  "bracketSameLine": false
+}

package/craco.config.js

@@ -1,18 +1,14 @@
-const path = require("path");
-const { getLoader, loaderByName } = require("@craco/craco");
+const path = require('path');
+const { getLoader, loaderByName } = require('@craco/craco');
 const packages = [];
-packages.push(path.dirname(require.resolve("@campxdev/react-blueprint")));
+packages.push(path.dirname(require.resolve('@campxdev/react-blueprint')));
+packages.push(path.dirname(require.resolve('@campxdev/campx-web-utils')));
 module.exports = {
   webpack: {
     configure: (webpackConfig) => {
-      const { isFound, match } = getLoader(
-        webpackConfig,
-        loaderByName("babel-loader")
-      );
+      const { isFound, match } = getLoader(webpackConfig, loaderByName('babel-loader'));
       if (isFound) {
-        const include = Array.isArray(match.loader.include)
-          ? match.loader.include
-          : [match.loader.include];
+        const include = Array.isArray(match.loader.include) ? match.loader.include : [match.loader.include];
         match.loader.include = include.concat(packages);
       }
 

package/exports.ts

@@ -1,2 +1,3 @@
 export * from "./src/config/axios";
 export * from "./src/context/export";
+export * from "./src/hooks/export";

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@campxdev/campx-web-utils",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "main": "./exports.ts",
   "private": false,
   "dependencies": {
-    "@campxdev/react-blueprint": "^1.1.6",
+    "@campxdev/react-blueprint": "1.1.8",
     "@hookform/resolvers": "^3.9.0",
     "@mui/x-date-pickers": "^7.12.1",
     "@testing-library/jest-dom": "^5.14.1",

package/src/AppContent.tsx

@@ -1,37 +1,26 @@
-import { useQuery } from "react-query";
-import { axios } from "./config/axios";
-
-const fetchClubRequests = () => {
-  return axios
-    .get(`/hrms/departments`, {
-      headers: {
-        "x-tenant-id": "aupulse",
-        "X-Institution-Code": "aupulse",
-        campx_session_key: "66a36c752e28b1200876b034",
-      },
-    })
-    .then((res) => res.data);
-};
+import { Button } from '@campxdev/react-blueprint';
+import useConfirm from './hooks/useConfirm';
 
 function AppContent() {
-  const {
-    data: requests,
-    isLoading,
-    error,
-    refetch,
-  } = useQuery("club-requests", () => fetchClubRequests());
+  const isConfirm = useConfirm();
 
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
+  const handleConfirm = async () => {
+    const confirm = await isConfirm({
+      type: 'delete',
+      title: 'Are you sure?',
+      message: 'Please confirm before submission to action description',
+    });
 
-  // if (error) {
-  //   // No need to handle the error locally, it will be caught by ErrorBoundary
-  //   console.error("Error fetching club requests:", error);
-  //   throw error; // Re-throw the error to be caught by the ErrorBoundary
-  // }
+    // If user cancel the action
+    if (!confirm) {
+      console.log('User cancelled the action');
+      return;
+    }
+    // If user confirm the action
+    console.log('User confirmed the action');
+  };
 
-  return <></>;
+  return <Button onClick={handleConfirm}>Confirm</Button>;
 }
 
 export default AppContent;

package/src/config/axios.ts

@@ -1,37 +1,46 @@
-import Axios, { InternalAxiosRequestConfig } from "axios";
-import Cookies from "js-cookie";
-import { SnackbarStore } from "../context/SnackbarProvider";
+import Axios, { InternalAxiosRequestConfig } from 'axios';
+import Cookies from 'js-cookie';
+import { ApplicationStore } from '../context/application-store';
 
-const isDevelopment = process.env.NODE_ENV == "development";
+const isDevelopment = process.env.NODE_ENV == 'development';
 
 const tenantCode =
-  window.location.hostname === "localhost"
-    ? Cookies.get("campx_tenant")
-    : window.location.hostname.split(".")[0];
-const institutionCode = window.location.pathname.split("/")[1];
+  window.location.hostname === 'localhost'
+    ? Cookies.get('campx_tenant')
+    : window.location.hostname.split('.')[0];
+const institutionCode = window.location.pathname.split('/')[1];
+
+export const formatParams = (params: any) => {
+  return Object.fromEntries(
+    Object.entries(params ?? {})?.map((i) => [
+      i[0],
+      i[1] === '__empty__' ? '' : i[1],
+    ]),
+  );
+};
 
 export const axios = Axios.create({
   baseURL: process.env.REACT_APP_API_HOST,
   withCredentials: true,
   headers: {
-    "x-tenant-id": tenantCode,
-    "x-institution-code": institutionCode,
+    'x-tenant-id': tenantCode,
+    'x-institution-code': institutionCode,
   },
 });
 
 axios.interceptors.request.use(
   function (config: InternalAxiosRequestConfig) {
-    const params = config?.params;
+    const params = formatParams(config?.params);
 
-    const sessionKey = Cookies.get("campx_session_key");
-    const openPaymentsKey = Cookies.get("campx_open_payments_key");
+    const sessionKey = Cookies.get('campx_session_key');
+    const openPaymentsKey = Cookies.get('campx_open_payments_key');
 
     if (isDevelopment && sessionKey) {
-      config.headers.set("campx_session_key", sessionKey);
+      config.headers.set('campx_session_key', sessionKey);
     }
 
     if (openPaymentsKey) {
-      config.headers.set("campx_open_payments_key", openPaymentsKey);
+      config.headers.set('campx_open_payments_key', openPaymentsKey);
     }
 
     return {
@@ -41,7 +50,7 @@ axios.interceptors.request.use(
   },
   function (error) {
     return Promise.reject(error);
-  }
+  },
 );
 
 axios.interceptors.response.use(
@@ -49,13 +58,13 @@ axios.interceptors.response.use(
     console.log(response);
     if (
       response.config.method &&
-      ["put", "post", "delete", "patch"].includes(response.config.method) &&
+      ['put', 'post', 'delete', 'patch'].includes(response.config.method) &&
       [200, 201, 202].includes(response.status)
     ) {
-      SnackbarStore.update((s) => {
-        s.open = true;
-        s.message = response.data.message;
-        s.severity = "success";
+      ApplicationStore.update((s) => {
+        s.snackbar.open = true;
+        s.snackbar.message = response.data.message;
+        s.snackbar.severity = 'success';
       });
     }
 
@@ -63,24 +72,24 @@ axios.interceptors.response.use(
   },
   function (err) {
     if ([400, 422].includes(err.response.status)) {
-      SnackbarStore.update((s) => {
-        s.open = true;
-        s.message = err.response.data.message || "Bad Request";
-        s.severity = "error";
+      ApplicationStore.update((s) => {
+        s.snackbar.open = true;
+        s.snackbar.message = err.response.data.message || 'Bad Request';
+        s.snackbar.severity = 'error';
       });
     }
     if (
       err.response.config.method &&
-      ["put", "post", "delete", "patch"].includes(err.response.config.method) &&
+      ['put', 'post', 'delete', 'patch'].includes(err.response.config.method) &&
       [404].includes(err.response.status)
     ) {
-      SnackbarStore.update((s) => {
-        s.open = true;
-        s.message = err.response.data.message;
-        s.severity = "error";
+      ApplicationStore.update((s) => {
+        s.snackbar.open = true;
+        s.snackbar.message = err.response.data.message;
+        s.snackbar.severity = 'error';
       });
     }
 
     return Promise.reject(err);
-  }
+  },
 );

package/src/context/ConfirmDialogProvider.tsx

@@ -0,0 +1,70 @@
+import { ConfirmDialog, ConfirmDialogType } from '@campxdev/react-blueprint';
+import { createContext, ReactNode } from 'react';
+import { ApplicationStore } from './application-store';
+
+interface ConfirmStateProps {
+  showConfirmDialog: (
+    title: string,
+    message: string,
+    onConfirm: () => void,
+    onCancel: () => void,
+    type?: ConfirmDialogType,
+  ) => void;
+}
+
+const ConfirmContext = createContext<ConfirmStateProps>({
+  showConfirmDialog: () => {},
+});
+
+export const ConfirmDialogProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const confirmDialog = ApplicationStore.useState((s) => s.confirmDialog);
+
+  const showConfirmDialog = (
+    title: string,
+    message: string,
+    onConfirm: () => void,
+    onCancel: () => void,
+    type: ConfirmDialogType = 'confirm',
+  ) => {
+    ApplicationStore.update((s) => {
+      s.confirmDialog = {
+        isOpen: true,
+        title,
+        message,
+        onConfirm,
+        onCancel,
+        type,
+      };
+    });
+  };
+
+  const handleCloseDialog = () => {
+    ApplicationStore.update((s) => {
+      s.confirmDialog.isOpen = false;
+    });
+  };
+
+  return (
+    <ConfirmContext.Provider value={{ showConfirmDialog }}>
+      {children}
+      <ConfirmDialog
+        isOpen={confirmDialog.isOpen}
+        title={confirmDialog.title}
+        message={confirmDialog.message}
+        type={confirmDialog.type}
+        onConfirm={() => {
+          confirmDialog.onConfirm();
+          handleCloseDialog();
+        }}
+        onCancel={() => {
+          confirmDialog.onCancel();
+          handleCloseDialog();
+        }}
+      />
+    </ConfirmContext.Provider>
+  );
+};

package/src/context/Providers.tsx

@@ -1,22 +1,13 @@
-import { lightTheme, MuiThemeProvider } from "@campxdev/react-blueprint";
-import { LocalizationProvider } from "@mui/x-date-pickers";
-import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
-import Cookies from "js-cookie";
-import { ReactNode, useEffect } from "react";
-import { QueryClient, QueryClientProvider } from "react-query";
-import { BrowserRouter } from "react-router-dom";
-import { ErrorBoundary } from "./export";
-import { SnackbarProvider } from "./SnackbarProvider";
+import { lightTheme, MuiThemeProvider } from '@campxdev/react-blueprint';
+import Cookies from 'js-cookie';
+import { ReactNode, useEffect } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { BrowserRouter } from 'react-router-dom';
+import { ConfirmDialogProvider } from './ConfirmDialogProvider';
+import { ErrorBoundary } from './export';
+import { SnackbarProvider } from './SnackbarProvider';
 
-export const Providers = ({
-  children,
-  basename,
-  theme = lightTheme,
-}: {
-  children: ReactNode;
-  basename?: string;
-  theme?: any;
-}) => {
+export const Providers = ({ children, basename, theme = lightTheme }: { children: ReactNode; basename?: string; theme?: any }) => {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
@@ -27,17 +18,12 @@ export const Providers = ({
     },
   });
 
-  var tenantCode =
-    window.location.hostname === "localhost"
-      ? Cookies.get("campx_tenant")
-      : window.location.hostname.split(".")[0];
+  var tenantCode = window.location.hostname === 'localhost' ? Cookies.get('campx_tenant') : window.location.hostname.split('.')[0];
   var institutionCode =
-    window.location.pathname.split("/")[1] !== ""
-      ? window.location.pathname.split("/")[1]
-      : Cookies.get("campx_institution");
-  var baseName = tenantCode && institutionCode ? `/${institutionCode}` : "/";
+    window.location.pathname.split('/')[1] !== '' ? window.location.pathname.split('/')[1] : Cookies.get('campx_institution');
+  var baseName = tenantCode && institutionCode ? `/${institutionCode}` : '/';
   useEffect(() => {
-    if (window.location.pathname === "/" && institutionCode && tenantCode) {
+    if (window.location.pathname === '/' && institutionCode && tenantCode) {
       window.location.replace(window.location.origin + `/${institutionCode}`);
     }
   }, []);
@@ -47,9 +33,9 @@ export const Providers = ({
       <QueryClientProvider client={queryClient}>
         <MuiThemeProvider theme={theme}>
           <SnackbarProvider>
-            <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <ConfirmDialogProvider>
               <ErrorBoundary>{children}</ErrorBoundary>
-            </LocalizationProvider>
+            </ConfirmDialogProvider>
           </SnackbarProvider>
         </MuiThemeProvider>
       </QueryClientProvider>

package/src/context/SnackbarProvider.tsx

@@ -1,31 +1,26 @@
-import { Severity, Snackbar } from "@campxdev/react-blueprint";
-import { Store } from "pullstate";
-import { createContext, ReactNode } from "react";
+import { Severity, Snackbar } from '@campxdev/react-blueprint';
+import { createContext, ReactNode } from 'react';
+import { ApplicationStore } from './application-store';
 
 interface SnackbarContextProps {
   showSnackbar: (message: string, severity?: Severity) => void;
 }
 
 const SnackbarContext = createContext<SnackbarContextProps | undefined>(
-  undefined
+  undefined,
 );
 
 interface SnackbarProviderProps {
   children: ReactNode;
 }
-export const SnackbarStore = new Store({
-  open: false,
-  message: "",
-  severity: "success" as Severity,
-});
 
 export const SnackbarProvider = ({ children }: SnackbarProviderProps) => {
-  const snackbar = SnackbarStore.useState((s) => s);
-  const showSnackbar = (message: string, severity: Severity = "info") => {
-    SnackbarStore.update((s) => {
-      s.open = true;
-      s.message = message;
-      s.severity = severity;
+  const snackbar = ApplicationStore.useState((s) => s.snackbar);
+  const showSnackbar = (message: string, severity: Severity = 'info') => {
+    ApplicationStore.update((s) => {
+      s.snackbar.open = true;
+      s.snackbar.message = message;
+      s.snackbar.severity = severity;
     });
   };
   return (
@@ -37,8 +32,8 @@ export const SnackbarProvider = ({ children }: SnackbarProviderProps) => {
         severity={snackbar.severity}
         autoHideDuration={1500}
         onClose={() => {
-          SnackbarStore.update((s) => {
-            s.open = false;
+          ApplicationStore.update((s) => {
+            s.snackbar.open = false;
           });
         }}
       />

package/src/context/application-store.ts

@@ -1,12 +1,39 @@
-import { Store } from "pullstate";
+import { ConfirmDialogType, Severity } from '@campxdev/react-blueprint';
+import { Store } from 'pullstate';
 
 export type ApplicationStoreType = {
   isLoginDialogOpen: boolean;
+  snackbar: {
+    open: boolean;
+    message: string;
+    severity: Severity;
+  };
+  confirmDialog: {
+    isOpen: boolean;
+    title: string;
+    message: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    type: ConfirmDialogType;
+  };
 };
 
 export const initialApplicationState: ApplicationStoreType = {
   isLoginDialogOpen: false,
+  snackbar: {
+    open: false,
+    message: '',
+    severity: 'success',
+  },
+  confirmDialog: {
+    isOpen: false,
+    title: '',
+    message: '',
+    onConfirm: () => {},
+    onCancel: () => {},
+    type: 'confirm',
+  },
 };
 export const ApplicationStore = new Store<ApplicationStoreType>(
-  initialApplicationState
+  initialApplicationState,
 );

package/src/context/export.ts

@@ -1,4 +1,4 @@
-export * from "./application-store";
-export * from "./ErrorBoundary/ErrorBoundary";
-export * from "./Providers";
-export * from "./SnackbarProvider";
+export * from './application-store';
+export * from './ErrorBoundary/ErrorBoundary';
+export * from './Providers';
+export * from './SnackbarProvider';

package/src/hooks/export.ts

@@ -0,0 +1 @@
+export * from "./useConfirm";

package/src/hooks/useConfirm.ts

@@ -0,0 +1,51 @@
+import { ConfirmDialogType } from '@campxdev/react-blueprint';
+import { ApplicationStore } from '../context/application-store';
+
+const defaultConfirmDialogState = {
+  isOpen: false,
+  title: '',
+  message: '',
+  type: 'confirm' as ConfirmDialogType,
+  onConfirm: () => {},
+  onCancel: () => {},
+};
+
+const useConfirm = () => {
+  const isConfirmed = ({
+    title,
+    message,
+    type = 'confirm',
+  }: {
+    title: string;
+    message: string;
+    type?: ConfirmDialogType;
+  }): Promise<boolean> =>
+    new Promise((resolve) => {
+      ApplicationStore.update((s) => {
+        s.confirmDialog = {
+          isOpen: true,
+          title,
+          message,
+          type,
+          onConfirm: () => {
+            resolve(true);
+            resetDialog();
+          },
+          onCancel: () => {
+            resolve(false);
+            resetDialog();
+          },
+        };
+      });
+    });
+
+  const resetDialog = () => {
+    ApplicationStore.update((s) => {
+      s.confirmDialog = defaultConfirmDialogState;
+    });
+  };
+
+  return isConfirmed;
+};
+
+export default useConfirm;

package/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -18,13 +14,9 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["node"]
   },
-  "include": [
-    "src",
-    "./types"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["src", "./types"],
+  "exclude": ["node_modules", ".yalc"]
 }