@campxdev/campx-web-utils 0.1.6 → 0.1.8

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@campxdev/campx-web-utils",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "main": "./exports.ts",
   "private": false,
   "dependencies": {
-    "@campxdev/react-blueprint": "^1.0.6",
+    "@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",

package/src/AppContent.tsx

@@ -2,7 +2,15 @@ import { useQuery } from "react-query";
 import { axios } from "./config/axios";
 
 const fetchClubRequests = () => {
-  return axios.get(`/square/clubs`).then((res) => res.data);
+  return axios
+    .get(`/hrms/departments`, {
+      headers: {
+        "x-tenant-id": "aupulse",
+        "X-Institution-Code": "aupulse",
+        campx_session_key: "66a36c752e28b1200876b034",
+      },
+    })
+    .then((res) => res.data);
 };
 
 function AppContent() {

package/src/ErrorBoundary/ErrorBoundary.tsx

@@ -1,9 +1,8 @@
-import { PageNotFound } from "@campxdev/react-blueprint";
 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 { Typography } from "@campxdev/react-blueprint/src/components/DataDisplay/Typography/Typography";
 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";
@@ -16,9 +15,28 @@ export type ErrorBoundaryProps = {
   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();
-  console.log(location?.pathname, "kkk");
   return (
     <QueryErrorResetBoundary>
       {({ reset }) => (
@@ -35,33 +53,36 @@ export const ErrorBoundary = (props: ErrorBoundaryProps) => {
 };
 
 export const ErrorFallback = ({ error, resetErrorBoundary }: any) => {
+  console.log(error, "llll");
   if (error?.response?.status) {
-    console.log(error?.response?.status);
     switch (error?.response?.status) {
       case 401:
         return <UnAuth resetErrorBoundary={resetErrorBoundary} />;
 
       case 500:
         return <InternalServerError resetBoundary={resetErrorBoundary} />;
-
-      case 404:
-        return <PageNotFound resetErrorBoundary={resetErrorBoundary} />;
-
-      default:
-        return <InternalServerError resetBoundary={resetErrorBoundary} />;
     }
   }
 
-  if (error?.message === "Network Error") {
+  if (error?.code === "ERR_NETWORK") {
     return <NoInterneConnection resetBoundary={resetErrorBoundary} />;
   }
 
   return (
-    <>
-      <Typography>
+    <Box sx={{ marginTop: "16px", padding: "20px" }}>
+      <StyledAlert severity="error">
         {error?.response?.data?.message ?? error?.message}
-      </Typography>
-    </>
+        <Button
+          className="retryBtn"
+          onClick={() => resetErrorBoundary()}
+          size="small"
+          color="error"
+          variant="outlined"
+        >
+          Try Again
+        </Button>
+      </StyledAlert>
+    </Box>
   );
 };
 

package/src/Layout/AppLayout.tsx

@@ -1,12 +1,9 @@
 import { Outlet } from "react-router-dom";
-import { ErrorBoundary } from "../ErrorBoundary/export";
 
 const AppLayout = () => {
   return (
     <>
-      <ErrorBoundary>
-        <Outlet />
-      </ErrorBoundary>
+      <Outlet />
     </>
   );
 };

package/src/config/axios.ts

@@ -1,5 +1,6 @@
 import Axios, { InternalAxiosRequestConfig } from "axios";
 import Cookies from "js-cookie";
+import { SnackbarStore } from "../context/SnackbarProvider";
 
 const isDevelopment = process.env.NODE_ENV == "development";
 
@@ -53,9 +54,30 @@ axios.interceptors.request.use(
 
 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

@@ -2,6 +2,8 @@ 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: {
@@ -19,7 +21,11 @@ export default function Providers({ children }: { children: ReactNode }) {
   return (
     <BrowserRouter basename={baseName}>
       <QueryClientProvider client={queryClient}>
-        <MuiThemeProvider>{children}</MuiThemeProvider>
+        <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>
+  );
+};