@campxdev/campx-web-utils 0.1.5 → 0.1.7

package/.env

@@ -0,0 +1,2 @@
+REACT_APP_API_HOST=https://api.campx.dev
+PORT=3082

package/craco.config.js

@@ -0,0 +1,25 @@
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+
+const path = require("path");
+const deps = require("./package.json").dependencies;
+const { getLoader, loaderByName } = require("@craco/craco");
+const packages = [];
+packages.push(path.dirname(require.resolve("@campxdev/react-blueprint")));
+module.exports = {
+  webpack: {
+    configure: (webpackConfig) => {
+      const { isFound, match } = getLoader(
+        webpackConfig,
+        loaderByName("babel-loader")
+      );
+      if (isFound) {
+        const include = Array.isArray(match.loader.include)
+          ? match.loader.include
+          : [match.loader.include];
+        match.loader.include = include.concat(packages);
+      }
+
+      return webpackConfig;
+    },
+  },
+};

package/exports.ts

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

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@campxdev/campx-web-utils",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "main": "./exports.ts",
   "private": false,
   "dependencies": {
-    "@campxdev/react-blueprint": "^0.1.41",
+    "@campxdev/react-blueprint": "^1.0.14",
+    "@mui/x-date-pickers": "^7.11.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "react-toastify": "^9.0.1",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
@@ -18,17 +18,32 @@
     "pullstate": "^1.25.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-query": "^3.39.3",
     "react-scripts": "5.0.1",
+    "react-toastify": "^9.0.1",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },
   "devDependencies": {
-    "@types/js-cookie": "^3.0.2"
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@craco/craco": "^7.1.0",
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__generator": "^7.6.8",
+    "@types/babel__template": "^7.4.4",
+    "@types/babel__traverse": "^7.20.6",
+    "@types/bonjour": "^3.5.13",
+    "@types/js-cookie": "^3.0.2",
+    "@types/lodash": "^4.17.5",
+    "@types/prettier": "^3.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-query": "^1.2.9",
+    "@types/react-router-dom": "^5.3.3"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

package/src/App.tsx

@@ -1,26 +1,15 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { useRoutes } from "react-router-dom";
+import Providers from "./context/Providers";
+import { mainRoutes } from "./Pages/main";
 
-function App() {
+export default function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Providers>
+      <AppRouter />
+    </Providers>
   );
 }
-
-export default App;
+const AppRouter = () => {
+  const app = useRoutes(mainRoutes);
+  return app;
+};

package/src/AppContent.tsx

@@ -0,0 +1,37 @@
+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);
+};
+
+function AppContent() {
+  const {
+    data: requests,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery("club-requests", () => fetchClubRequests());
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  // 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
+  // }
+
+  return <></>;
+}
+
+export default AppContent;

package/src/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,125 @@
+import { InternalServerError } from "@campxdev/react-blueprint/src/components/Assets/ErrorPages/InternalServerError";
+import { NoInterneConnection } from "@campxdev/react-blueprint/src/components/Assets/ErrorPages/NoInternetConnection";
+import { UnAuthorized } from "@campxdev/react-blueprint/src/components/Assets/ErrorPages/UnAuthorized";
+import { Button } from "@campxdev/react-blueprint/src/components/Input/Button/Button";
+import { Alert, Box, styled } from "@mui/material";
+import Cookies from "js-cookie";
+import { ReactNode } from "react";
+import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary";
+import { QueryErrorResetBoundary } from "react-query";
+import { useLocation, useNavigate } from "react-router-dom";
+import { axios } from "../config/axios";
+
+export type ErrorBoundaryProps = {
+  children: ReactNode;
+  resetKey?: string;
+};
+
+const StyledAlert = styled(Alert)(({ theme }) => ({
+  height: "60px",
+  border: `1px solid ${theme.palette.error.main}`,
+  display: "flex",
+  alignItems: "center",
+  "& .MuiAlert-message": {
+    padding: 0,
+  },
+  "& .MuiTypography-root": {
+    margin: 0,
+  },
+  position: "relative",
+  "& .retryBtn": {
+    color: "#661B2A",
+    position: "absolute",
+    right: 8,
+    top: 8,
+  },
+}));
+
+export const ErrorBoundary = (props: ErrorBoundaryProps) => {
+  const location = useLocation();
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ReactErrorBoundary
+          key={location?.pathname}
+          onReset={reset}
+          FallbackComponent={ErrorFallback}
+        >
+          {props.children}
+        </ReactErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
+};
+
+export const ErrorFallback = ({ error, resetErrorBoundary }: any) => {
+  console.log(error, "llll");
+  if (error?.response?.status) {
+    switch (error?.response?.status) {
+      case 401:
+        return <UnAuth resetErrorBoundary={resetErrorBoundary} />;
+
+      case 500:
+        return <InternalServerError resetBoundary={resetErrorBoundary} />;
+    }
+  }
+
+  if (error?.code === "ERR_NETWORK") {
+    return <NoInterneConnection resetBoundary={resetErrorBoundary} />;
+  }
+
+  return (
+    <Box sx={{ marginTop: "16px", padding: "20px" }}>
+      <StyledAlert severity="error">
+        {error?.response?.data?.message ?? error?.message}
+        <Button
+          className="retryBtn"
+          onClick={() => resetErrorBoundary()}
+          size="small"
+          color="error"
+          variant="outlined"
+        >
+          Try Again
+        </Button>
+      </StyledAlert>
+    </Box>
+  );
+};
+
+const UnAuth = ({ resetBoundary }: any) => {
+  const navigate = useNavigate();
+
+  const sessionCookie = Cookies.get("campx_session_key");
+
+  const appinit = async () => {
+    await axios.get("/auth/my-permissions").catch((e: any) => {
+      navigate("/auth/login");
+    });
+  };
+
+  const handleLoginClick = () => {
+    if (!sessionCookie) {
+      navigate("/auth/login");
+    } else {
+      appinit();
+    }
+  };
+
+  return (
+    <UnAuthorized
+      component={
+        <>
+          <Button
+            sx={{
+              marginTop: "20px",
+            }}
+            variant="contained"
+            onClick={handleLoginClick}
+          >
+            Click Here To Login
+          </Button>
+        </>
+      }
+    />
+  );
+};

package/src/ErrorBoundary/GlobalNetworkLoadingIndicator.tsx

@@ -0,0 +1,13 @@
+import { LinearProgress } from "@mui/material";
+import { Store } from "pullstate";
+
+export const NetworkStore = new Store({
+  loading: false,
+});
+
+export default function GlobalNetworkLoadingIndicator() {
+  const { loading } = NetworkStore.useState();
+
+  if (loading) return <LinearProgress />;
+  if (loading) return null;
+}

package/src/ErrorBoundary/export.ts

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

package/src/Layout/AppLayout.tsx

@@ -0,0 +1,11 @@
+import { Outlet } from "react-router-dom";
+
+const AppLayout = () => {
+  return (
+    <>
+      <Outlet />
+    </>
+  );
+};
+
+export default AppLayout;

package/src/Pages/main.tsx

@@ -0,0 +1,20 @@
+import { Navigate } from "react-router-dom";
+import AppContent from "../AppContent";
+import AppLayout from "../Layout/AppLayout";
+
+export const mainRoutes = [
+  {
+    path: "/",
+    element: <AppLayout />,
+    children: [
+      {
+        index: true,
+        element: <Navigate to={"app-content"} />,
+      },
+      {
+        path: "app-content",
+        element: <AppContent />,
+      },
+    ],
+  },
+];

package/src/config/axios.ts

@@ -1,15 +1,22 @@
-import Axios from "axios";
+import Axios, { InternalAxiosRequestConfig } from "axios";
 import Cookies from "js-cookie";
+import { SnackbarStore } from "../context/SnackbarProvider";
 
 const isDevelopment = process.env.NODE_ENV == "development";
 
-const sessionKey = Cookies.get("campx_session_key");
 const tenantCode = isDevelopment
   ? Cookies.get("campx_tenant")
   : window.location.hostname.split(".")[0];
 const institutionCode = window.location.pathname.split("/")[1];
 
-const openPaymentsKey = Cookies.get("campx_open_payments_key");
+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,
@@ -17,9 +24,60 @@ export const axios = Axios.create({
   headers: {
     "x-tenant-id": tenantCode,
     "x-institution-code": institutionCode,
-    campx_session_key: sessionKey,
-    ...(openPaymentsKey && {
-      campx_open_payments_key: openPaymentsKey,
-    }),
   },
 });
+
+axios.interceptors.request.use(
+  function (config: InternalAxiosRequestConfig) {
+    const params = formatParams(config?.params);
+
+    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);
+    }
+
+    if (openPaymentsKey) {
+      config.headers.set("campx_open_payments_key", openPaymentsKey);
+    }
+
+    return {
+      ...config,
+      params,
+    };
+  },
+  function (error) {
+    return Promise.reject(error);
+  }
+);
+
+axios.interceptors.response.use(
+  function (response) {
+    console.log(response);
+    if (
+      response.config.method &&
+      ["put", "post", "delete", "patch"].includes(response.config.method) &&
+      [200, 202].includes(response.status)
+    ) {
+      SnackbarStore.update((s) => {
+        s.open = true;
+        s.message = response.data.message;
+        s.variant = "success";
+      });
+    }
+
+    return response;
+  },
+  function (err) {
+    if ([400, 404, 422].includes(err.response.status)) {
+      SnackbarStore.update((s) => {
+        s.open = true;
+        s.message = err.response.data.message || "Bad Request";
+        s.variant = "alert";
+      });
+    }
+
+    return Promise.reject(err);
+  }
+);

package/src/context/Providers.tsx

@@ -0,0 +1,32 @@
+import { MuiThemeProvider } from "@campxdev/react-blueprint";
+import { ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { BrowserRouter } from "react-router-dom";
+import { ErrorBoundary } from "../ErrorBoundary/ErrorBoundary";
+import { SnackbarProvider } from "./SnackbarProvider";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: false,
+      useErrorBoundary: true,
+    },
+  },
+});
+
+export default function Providers({ children }: { children: ReactNode }) {
+  var baseName = "/";
+
+  return (
+    <BrowserRouter basename={baseName}>
+      <QueryClientProvider client={queryClient}>
+        <MuiThemeProvider>
+          <SnackbarProvider>
+            <ErrorBoundary>{children}</ErrorBoundary>
+          </SnackbarProvider>
+        </MuiThemeProvider>
+      </QueryClientProvider>
+    </BrowserRouter>
+  );
+}

package/src/context/SnackbarProvider.tsx

@@ -0,0 +1,49 @@
+import { Snackbar } from "@campxdev/react-blueprint";
+import { Store } from "pullstate";
+import { createContext, ReactNode } from "react";
+
+type Variant = "success" | "info" | "warning" | "alert";
+
+interface SnackbarContextProps {
+  showSnackbar: (message: string, variant?: Variant) => void;
+}
+
+const SnackbarContext = createContext<SnackbarContextProps | undefined>(
+  undefined
+);
+
+interface SnackbarProviderProps {
+  children: ReactNode;
+}
+export const SnackbarStore = new Store({
+  open: false,
+  message: "",
+  variant: "success" as Variant,
+});
+
+export const SnackbarProvider = ({ children }: SnackbarProviderProps) => {
+  const snackbar = SnackbarStore.useState((s) => s);
+  const showSnackbar = (message: string, variant: Variant = "info") => {
+    SnackbarStore.update((s) => {
+      s.open = true;
+      s.message = message;
+      s.variant = variant;
+    });
+  };
+  return (
+    <SnackbarContext.Provider value={{ showSnackbar }}>
+      {children}
+      <Snackbar
+        open={snackbar.open}
+        message={snackbar.message}
+        variant={snackbar.variant}
+        autoHideDuration={1500}
+        onClose={() => {
+          SnackbarStore.update((s) => {
+            s.open = false;
+          });
+        }}
+      />
+    </SnackbarContext.Provider>
+  );
+};

package/tsconfig.json

@@ -21,6 +21,10 @@
     "jsx": "react-jsx"
   },
   "include": [
-    "src"
+    "src",
+    "./types"
+  ],
+  "exclude": [
+    "node_modules"
   ]
 }

package/types/theme.d.ts

@@ -0,0 +1,58 @@
+import "@mui/material/styles";
+
+declare module "@mui/material/styles" {
+  interface Theme {
+    palette: {
+      [x: string]: any;
+      primary: {
+        dark: string;
+        main: string;
+        light: string;
+      };
+      secondary: {
+        main: string;
+        light: string;
+        dark: string;
+      };
+      tertiary: {
+        main: string;
+      };
+      text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+      };
+      surface: {
+        defaultBackground: string;
+        paperBackground: string;
+        grey: string;
+      };
+      border: {
+        primary: string;
+      };
+      highlight: {
+        highlightGreen: string;
+        highlightOrange: string;
+        highlightBlue: string;
+        highlightRed: string;
+        highlightPink: string;
+        highlightYellow: string;
+        greenBackground: string;
+        orangeBackground: string;
+        blueBackground: string;
+        redBackground: string;
+        pinkBackground: string;
+        yellowBackground: string;
+      };
+    };
+  }
+  export function createTheme(options?: CustomThemeOptions): CustomTheme;
+}
+
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides {
+    label1: true;
+    label2: true;
+    subtitle3: true;
+  }
+}

package/src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});