@campxdev/campx-web-utils 0.1.19 → 0.2.0

package/export.ts

@@ -0,0 +1,4 @@
+export * from './src/config/axios';
+export * from './src/context/export';
+export * from './src/hooks/export';
+export * from './src/utils/export';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@campxdev/campx-web-utils",
-  "version": "0.1.19",
-  "main": "./exports.ts",
+  "version": "0.2.0",
+  "main": "./export.ts",
   "private": false,
   "dependencies": {
     "@campxdev/react-blueprint": "1.1.8",

package/src/App.tsx

@@ -1,7 +1,7 @@
-import { useRoutes } from "react-router-dom";
+import { useRoutes } from 'react-router-dom';
 
-import { mainRoutes } from "./Pages/main";
-import { Providers } from "./context/export";
+import { mainRoutes } from './Pages/main';
+import { Providers } from './context/export';
 
 export default function App() {
   return (

package/src/Layout/AppLayout.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "react-router-dom";
+import { Outlet } from 'react-router-dom';
 
 const AppLayout = () => {
   return (

package/src/Pages/main.tsx

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

package/src/context/ErrorBoundary/ErrorBoundary.tsx

@@ -5,34 +5,34 @@ import {
   NoInterneConnection,
   PageNotFound,
   UnAuthorized,
-} from "@campxdev/react-blueprint";
-import { Alert, Box, styled } from "@mui/material";
-import Cookies from "js-cookie";
-import { ReactNode, useState } from "react";
-import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary";
-import { QueryErrorResetBoundary } from "react-query";
-import { useLocation, useNavigate } from "react-router-dom";
-import { Login } from "./Login";
+} from '@campxdev/react-blueprint';
+import { Alert, Box, styled } from '@mui/material';
+import Cookies from 'js-cookie';
+import { ReactNode, useState } from 'react';
+import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
+import { QueryErrorResetBoundary } from 'react-query';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Login } from './Login';
 
 export type ErrorBoundaryProps = {
   children: ReactNode;
 };
 
 const StyledAlert = styled(Alert)(({ theme }) => ({
-  height: "60px",
+  height: '60px',
   border: `1px solid ${theme.palette.error.main}`,
-  display: "flex",
-  alignItems: "center",
-  "& .MuiAlert-message": {
+  display: 'flex',
+  alignItems: 'center',
+  '& .MuiAlert-message': {
     padding: 0,
   },
-  "& .MuiTypography-root": {
+  '& .MuiTypography-root': {
     margin: 0,
   },
-  position: "relative",
-  "& .retryBtn": {
-    color: "#661B2A",
-    position: "absolute",
+  position: 'relative',
+  '& .retryBtn': {
+    color: '#661B2A',
+    position: 'absolute',
     right: 8,
     top: 8,
   },
@@ -68,12 +68,12 @@ const ErrorFallback = ({ error, resetErrorBoundary }: any) => {
     }
   }
 
-  if (error?.code === "ERR_NETWORK") {
+  if (error?.code === 'ERR_NETWORK') {
     return <NoInterneConnection resetBoundary={resetErrorBoundary} />;
   }
 
   return (
-    <Box sx={{ marginTop: "16px", padding: "20px" }}>
+    <Box sx={{ marginTop: '16px', padding: '20px' }}>
       <StyledAlert severity="error">
         {error?.response?.data?.message ?? error?.message}
         <Button
@@ -94,14 +94,14 @@ const UnAuth = () => {
   const navigate = useNavigate();
   const [isModalOpen, setModalOpen] = useState(false);
 
-  const sessionCookie = Cookies.get("campx_session_key");
+  const sessionCookie = Cookies.get('campx_session_key');
 
   const handleLoginClick = () => {
-    if (window.location.hostname == "localhost") {
+    if (window.location.hostname === 'localhost') {
       setModalOpen(true);
     } else {
       if (!sessionCookie) {
-        navigate("/auth/login");
+        navigate('/auth/login');
       }
     }
   };
@@ -112,7 +112,7 @@ const UnAuth = () => {
         <>
           <Button
             sx={{
-              marginTop: "20px",
+              marginTop: '20px',
             }}
             variant="contained"
             onClick={handleLoginClick}

package/src/context/ErrorBoundary/Login.tsx

@@ -1,14 +1,14 @@
-import { axios } from "@campxdev/campx-web-utils";
-import { Button, Icons, TextField } from "@campxdev/react-blueprint";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { Box, Stack } from "@mui/material";
-import DeviceDetector from "device-detector-js";
-import Cookies from "js-cookie";
-import { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { useMutation } from "react-query";
+import { axios } from '@campxdev/campx-web-utils';
+import { Button, Icons, TextField } from '@campxdev/react-blueprint';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Box, Stack } from '@mui/material';
+import DeviceDetector from 'device-detector-js';
+import Cookies from 'js-cookie';
+import { useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useMutation } from 'react-query';
 
-import * as Yup from "yup";
+import * as Yup from 'yup';
 
 type DeviceInformation = {
   deviceType: string;
@@ -33,16 +33,16 @@ type LoginDetails = {
 const performLogin = async (body: any) => {
   if (!body.latitude || !body.longitude) {
     const response = await fetch(
-      "https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyB2YCpo1yi107RYj1LdZu2DCcpcO93reFY",
+      'https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyB2YCpo1yi107RYj1LdZu2DCcpcO93reFY',
       {
-        method: "POST",
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-          considerIp: "true",
+          considerIp: 'true',
         }),
-      }
+      },
     );
     const data = await response.json();
     body.latitude = data.location.lat;
@@ -52,20 +52,20 @@ const performLogin = async (body: any) => {
 };
 
 const validationSchema = Yup.object().shape({
-  username: Yup.string().required("Username is required"),
-  password: Yup.string().required("Password is required"),
+  username: Yup.string().required('Username is required'),
+  password: Yup.string().required('Password is required'),
 });
 
 export const Login = ({ close }: { close: () => void }) => {
   const [deviceState, setDeviceState] = useState<DeviceState>({
     deviceInformation: {
-      deviceType: "browser",
-      clientName: "unknown",
-      os: "unknown",
-      osVersion: "unknown",
+      deviceType: 'browser',
+      clientName: 'unknown',
+      os: 'unknown',
+      osVersion: 'unknown',
       latitude: null,
       longitude: null,
-      tokenType: "WEB",
+      tokenType: 'WEB',
     },
     isLocationAllowed: true,
   });
@@ -82,9 +82,9 @@ export const Login = ({ close }: { close: () => void }) => {
       }));
     });
     navigator.permissions
-      .query({ name: "geolocation" })
+      .query({ name: 'geolocation' })
       .then((permissionStatus) => {
-        if (permissionStatus.state === "denied") {
+        if (permissionStatus.state === 'denied') {
           setDeviceState((s) => ({
             ...s,
             isLocationAllowed: false,
@@ -109,17 +109,19 @@ export const Login = ({ close }: { close: () => void }) => {
     handleSubmit,
     control,
     formState: { errors },
-  } = useForm<LoginDetails>({ resolver: yupResolver(validationSchema) });
+  } = useForm<LoginDetails>({
+    resolver: yupResolver<LoginDetails>(validationSchema),
+  });
 
   const { mutate, isLoading } = useMutation(performLogin, {
     onSuccess(data) {
       if (data.loginSuccessful) {
-        Cookies.remove("campx_session_key");
-        Cookies.remove("campx_tenant");
-        Cookies.remove("campx_institution");
-        Cookies.set("campx_session_key", data?.token);
-        Cookies.set("campx_tenant", data?.subDomain);
-        Cookies.set("campx_institution", data?.institutionCode);
+        Cookies.remove('campx_session_key');
+        Cookies.remove('campx_tenant');
+        Cookies.remove('campx_institution');
+        Cookies.set('campx_session_key', data?.token);
+        Cookies.set('campx_tenant', data?.subDomain);
+        Cookies.set('campx_institution', data?.institutionCode);
         close();
         window.location.reload();
       }
@@ -145,10 +147,10 @@ export const Login = ({ close }: { close: () => void }) => {
                   size="medium"
                   name="username"
                   sx={{
-                    width: "400px",
+                    width: '400px',
                   }}
                   placeholder="Enter Username or Email"
-                  containerProps={{ my: "0" }}
+                  containerProps={{ my: '0' }}
                   onChange={field.onChange}
                   label="Username or Email"
                   error={!!errors.username}
@@ -166,11 +168,11 @@ export const Login = ({ close }: { close: () => void }) => {
                   size="medium"
                   name="password"
                   sx={{
-                    width: "400px",
+                    width: '400px',
                   }}
                   placeholder="Enter password"
                   onChange={field.onChange}
-                  containerProps={{ my: "0" }}
+                  containerProps={{ my: '0' }}
                   label="Password"
                   type="password"
                   error={!!errors.password}
@@ -185,7 +187,7 @@ export const Login = ({ close }: { close: () => void }) => {
             color="primary"
             variant="contained"
             sx={{
-              width: "400px",
+              width: '400px',
             }}
             onClick={handleSubmit(onSubmit)}
             disabled={isLoading}

package/src/context/Providers.tsx

@@ -7,7 +7,15 @@ 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: {
@@ -18,15 +26,20 @@ export const Providers = ({ children, basename, theme = lightTheme }: { children
     },
   });
 
-  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');
+    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) {
       window.location.replace(window.location.origin + `/${institutionCode}`);
     }
-  }, []);
+  }, [institutionCode, tenantCode]);
 
   return (
     <BrowserRouter basename={basename ?? baseName}>

package/src/hooks/export.ts

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

package/src/index.tsx

@@ -5,12 +5,12 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById('root') as HTMLElement,
 );
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
 
 // If you want to start measuring performance in your app, pass a function

package/src/utils/breadcrumbs.ts

@@ -0,0 +1,23 @@
+export const getBreadcrumbsCharacter = () => {
+  const unicodeChar = String.fromCharCode(0x21e5);
+  const testElement = document.createElement('span');
+  testElement.innerHTML = unicodeChar;
+  document.body.appendChild(testElement);
+  const isRendered = testElement.offsetWidth > 0;
+  document.body.removeChild(testElement);
+
+  console.log(isRendered);
+
+  const fallbackChar = '~~';
+  const s = isRendered ? unicodeChar : fallbackChar;
+
+  return s;
+};
+
+interface GetUrlSegment {
+  name: string;
+  id: string | number;
+}
+export const getUrlSegment = ({ name, id }: GetUrlSegment) => {
+  return `${name}${getBreadcrumbsCharacter()}${id}`;
+};

package/src/utils/export.ts

@@ -0,0 +1 @@
+export * from './breadcrumbs';

package/exports.ts

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