@campxdev/campx-web-utils 0.1.4 → 0.1.6

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.4",
+  "version": "0.1.6",
   "main": "./exports.ts",
   "private": false,
   "dependencies": {
-    "@campxdev/react-blueprint": "^0.1.41",
+    "@campxdev/react-blueprint": "^1.0.6",
+    "@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,29 @@
+import { useQuery } from "react-query";
+import { axios } from "./config/axios";
+
+const fetchClubRequests = () => {
+  return axios.get(`/square/clubs`).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,104 @@
+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 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;
+};
+
+export const ErrorBoundary = (props: ErrorBoundaryProps) => {
+  const location = useLocation();
+  console.log(location?.pathname, "kkk");
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ReactErrorBoundary
+          key={location?.pathname}
+          onReset={reset}
+          FallbackComponent={ErrorFallback}
+        >
+          {props.children}
+        </ReactErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
+};
+
+export const ErrorFallback = ({ error, resetErrorBoundary }: any) => {
+  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") {
+    return <NoInterneConnection resetBoundary={resetErrorBoundary} />;
+  }
+
+  return (
+    <>
+      <Typography>
+        {error?.response?.data?.message ?? error?.message}
+      </Typography>
+    </>
+  );
+};
+
+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,14 @@
+import { Outlet } from "react-router-dom";
+import { ErrorBoundary } from "../ErrorBoundary/export";
+
+const AppLayout = () => {
+  return (
+    <>
+      <ErrorBoundary>
+        <Outlet />
+      </ErrorBoundary>
+    </>
+  );
+};
+
+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,18 +1,13 @@
 import Axios, { InternalAxiosRequestConfig } from "axios";
 import Cookies from "js-cookie";
-import { toast } from "react-toastify";
-// import { NetworkStore } from "../components/ErrorBoundary/GlobalNetworkLoadingIndicator";
 
 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) => [
@@ -22,58 +17,45 @@ export const formatParams = (params: any) => {
   );
 };
 
-let axios = Axios.create({
+export const axios = Axios.create({
   baseURL: process.env.REACT_APP_API_HOST,
   withCredentials: true,
   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);
-    // NetworkStore.update((s) => {
-    //   s.loading = true;
-    // });
-    return { ...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) {
-    // NetworkStore.update((s) => {
-    //   s.loading = false;
-    // });
     return Promise.reject(error);
   }
 );
 
 axios.interceptors.response.use(
   function (response) {
-    // NetworkStore.update((s) => {
-    //   s.loading = false;
-    // });
     return response;
   },
   function (err) {
-    // NetworkStore.update((s) => {
-    //   s.loading = false;
-    // });
     return Promise.reject(err);
   }
 );
-
-export default axios;
-
-export const axiosErrorToast = (error: any, fallback?: string) => {
-  const fallbackMessage = fallback ?? "Something went wrong.";
-  const errorMessage =
-    typeof error?.response?.data?.message !== "string"
-      ? error?.response?.data?.message?.join("\n") ?? fallbackMessage
-      : error?.response?.data?.message;
-
-  return toast.error(errorMessage);
-};

package/src/context/Providers.tsx

@@ -0,0 +1,26 @@
+import { MuiThemeProvider } from "@campxdev/react-blueprint";
+import { ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { BrowserRouter } from "react-router-dom";
+
+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>{children}</MuiThemeProvider>
+      </QueryClientProvider>
+    </BrowserRouter>
+  );
+}

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();
-});