Add loading context and loading bar component; integrate axios for API calls and update routing for locker registration

package-lock.json

@@ -8,6 +8,7 @@
       "name": "osaka",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.7.9",
         "clsx": "^2.1.1",
         "i18next": "^23.15.1",
         "i18next-browser-languagedetector": "^8.0.0",
@@ -1664,6 +1665,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -1718,6 +1725,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1934,6 +1952,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2117,6 +2147,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2817,6 +2856,26 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2844,6 +2903,20 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -3933,6 +4006,27 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4572,6 +4666,12 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.9",
     "clsx": "^2.1.1",
     "i18next": "^23.15.1",
     "i18next-browser-languagedetector": "^8.0.0",

src/App.jsx

@@ -1,10 +1,13 @@
-import { useOutlet } from "react-router";
+import { useLocation, useOutlet } from "react-router";
 import { useState } from "react";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import { AnimatePresence } from "motion/react";
 import { motion } from "motion/react";
-import { useLocation } from "react-router";
+import { ToastProvider } from "./contexts/Toast";
+import { useLoading } from "./hooks/useLoading";
+import LoadingBar from "./components/LoadingBar";
+import { LoadingProvider } from "./contexts/Loading";
 
 const AnimatedOutlet = () => {
   const o = useOutlet();
@@ -13,12 +16,20 @@ const AnimatedOutlet = () => {
   return <div>{outlet}</div>;
 };
 
+function LoadingBarWrapper() {
+  const { isLoading } = useLoading();
+  return isLoading ? <LoadingBar /> : null;
+}
+
 function App() {
   const location = useLocation();
   return (
+    <LoadingProvider>
       <div className="flex flex-col min-h-screen">
         <Header />
-        <main className="overflow-hidden flex flex-grow transition-color-mode md:p-7 2xl:p-12 bg-surface dark:bg-surface-dark">
+        <LoadingBarWrapper />
+        <main className="overflow-hidden flex flex-grow transition-color-mode md:p-10 2xl:px-70 bg-surface dark:bg-surface-dark">
+          <ToastProvider>
             <AnimatePresence mode="popLayout">
               <motion.div
                 className="w-full ovwerflow-hidden"
@@ -30,9 +41,11 @@ function App() {
                 <AnimatedOutlet />
               </motion.div>
             </AnimatePresence>
+          </ToastProvider>
         </main>
         <Footer />
       </div>
+    </LoadingProvider>
   );
 }
 

src/components/FormBox.jsx

@@ -15,7 +15,7 @@ function FormBox({ title, children, alt = false }) {
         className={clsx(
           alt &&
             "bg-surface dark:bg-surface-dark border-3 border-secondary-variant dark:border-secondary-variant-dark",
-          "font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full"
+          "font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full z-20"
         )}
       >
         {title}

src/components/LoadingBar.jsx

@@ -0,0 +1,15 @@
+import { motion } from "framer-motion";
+
+function LoadingBar() {
+  return (
+    <div className="h-1 bg-grey relative overflow-hidden">
+      <motion.div
+        className="bg-primary dark:bg-primary-dark w-full h-full rounded-sm absolute"
+        animate={{ x: ["-100%", "100%"] }}
+        transition={{ repeat: Infinity, duration: 2, ease: "anticipate" }}
+      ></motion.div>
+    </div>
+  );
+}
+
+export default LoadingBar;

src/contexts/Loading.jsx

@@ -0,0 +1,19 @@
+import { createContext, useState } from 'react';
+import PropTypes from 'prop-types';
+
+export const LoadingContext = createContext();
+
+export function LoadingProvider({ children }) {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <LoadingContext.Provider value={{ isLoading, setIsLoading }}>
+      {children}
+    </LoadingContext.Provider>
+  );
+}
+
+LoadingProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+

src/hooks/useLoading.js

@@ -0,0 +1,4 @@
+import { useContext } from "react";
+import { LoadingContext } from "../contexts/Loading";
+
+export const useLoading = () => useContext(LoadingContext);

src/hooks/useToast.js

@@ -1,4 +1,4 @@
 import { useContext } from "react";
-import { ToastContext } from "../components/Toast";
+import { ToastContext } from "../contexts/Toast";
 
 export const useToast = () => useContext(ToastContext);

src/main.jsx

@@ -1,38 +1,41 @@
-import { StrictMode } from 'react'
+import { StrictMode } from "react";
-import { createRoot } from 'react-dom/client'
+import { createRoot } from "react-dom/client";
-import App from './App.jsx'
+import App from "./App.jsx";
-import './index.css'
+import "./index.css";
-import './i18n'
+import "./i18n";
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import Home from './pages/Home.jsx'
+import Home from "./pages/Home.jsx";
-import CabinetMaintenace from './pages/CabinetMaintenance.jsx'
+import CabinetMaintenace from "./pages/CabinetMaintenance.jsx";
-import CabinetCreation from './pages/CabinetCreation.jsx'
+import CabinetCreation from "./pages/CabinetCreation.jsx";
+import LockersRegistration from "./pages/LockersRegistration.jsx";
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <App/>,
+    element: <App />,
     children: [
       {
         index: true,
-        element: <Home />
+        element: <Home />,
       },
       {
-        path: 'operation/cabinet',
+        path: "operation/cabinet",
-        element: <CabinetMaintenace />
+        element: <CabinetMaintenace />,
       },
       {
-        path: 'operation/cabinet/create',
+        path: "operation/cabinet/create",
-        element: <CabinetCreation />
+        element: <CabinetCreation />,
-      }
+      },
-    ]
+      {
-  }
+        path: "operation/cabinet/create/register-lockers",
-]
+        element: <LockersRegistration />,
-);
+      },
+    ],
+  },
+]);
 
-
+createRoot(document.getElementById("root")).render(
-createRoot(document.getElementById('root')).render(
   <StrictMode>
     <RouterProvider router={router} />
-  </StrictMode>,
+  </StrictMode>
-)
+);

src/pages/LockersRegistration.jsx

@@ -0,0 +1,262 @@
+import { useLocation } from "react-router-dom";
+import { useState } from "react";
+import clsx from "clsx";
+import FormBox from "../components/FormBox";
+import Button from "../components/Button";
+import { useToast } from "../hooks/useToast";
+import { lockersService } from "../services/locker.service";
+import { Copy } from "lucide-react";
+import { AnimatePresence } from "motion/react";
+import { motion } from "motion/react";
+import { useLoading } from "../hooks/useLoading";
+
+function LockersRegistration() {
+  const location = useLocation();
+  const showToast = useToast();
+  const { setIsLoading } = useLoading();
+
+  const { noOfLockers, cabinetId } = location.state;
+  const [submitting, setSubmitting] = useState(false);
+  const [notification, setNotification] = useState({
+    visible: false,
+    message: "",
+    type: "",
+  });
+
+  const initLockers = Array(parseInt(noOfLockers))
+    .fill()
+    .map(() => ({
+      id: "",
+      size: "",
+      keyId: "",
+      idValid: true,
+      sizeValid: true,
+      keyIdValid: true,
+    }));
+  const [lockerValues, setLockerValues] = useState(initLockers);
+
+  const handleSubmit = async (e) => {
+    console.log("submitting");
+    e.preventDefault();
+    const idRegex = /^[A-Z]{2}[0-9]{4}$/;
+    let valid = true;
+
+    // Helper function to find duplicates
+    const findDuplicates = (arr, key) => {
+      const values = arr.map((item) => item[key]);
+      return values.filter((item, index) => values.indexOf(item) !== index);
+    };
+
+    // Find duplicates
+    const duplicateLockerIds = findDuplicates(lockerValues, "id");
+    const duplicateKeyIds = findDuplicates(lockerValues, "keyId");
+
+    const newValues = lockerValues.map((locker) => {
+      const newLocker = { ...locker };
+
+      // Check ID
+      if (
+        locker.id === "" ||
+        !idRegex.test(locker.id) ||
+        duplicateLockerIds.includes(locker.id)
+      ) {
+        newLocker.idValid = false;
+        valid = false;
+      } else {
+        newLocker.idValid = true;
+      }
+
+      // Check size
+      if (locker.size === "") {
+        newLocker.sizeValid = false;
+        valid = false;
+      } else {
+        newLocker.sizeValid = true;
+      }
+
+      // Check keyId
+      if (
+        locker.keyId === "" ||
+        !idRegex.test(locker.keyId) ||
+        duplicateKeyIds.includes(locker.keyId)
+      ) {
+        newLocker.keyIdValid = false;
+        valid = false;
+      } else {
+        newLocker.keyIdValid = true;
+      }
+
+      return newLocker;
+    });
+
+    setLockerValues(newValues);
+
+    if (!valid) {
+      const errorMessage =
+        duplicateLockerIds.length || duplicateKeyIds.length
+          ? "Please ensure all IDs are unique."
+          : "Inavlid Ids";
+      showToast(errorMessage, "error");
+      return;
+    }
+
+    try {
+      setSubmitting(true);
+      setIsLoading(true);
+      const response = await lockersService.registerLockers(
+        cabinetId,
+        lockerValues
+      );
+      setNotification({
+        visible: true,
+        message: `Cabinet creation successful. Cabinet ID: ${response.data.cabinetId}`,
+        type: "success",
+      });
+    } catch (error) {
+      console.error(error);
+      setNotification({
+        visible: true,
+        message: `Error registering lockers. ${error.message}`,
+        type: "error",
+      });
+      return;
+    } finally {
+      setIsLoading(false);
+      setSubmitting(false);
+    }
+  };
+
+  const lockerDetails = lockerValues.map((locker, index) => {
+    return (
+      <div key={index} className="flex gap-12 items-center">
+        <label className="text-lg text-bold dark:text-primary-dark">{`Locker ${
+          index + 1
+        }`}</label>
+
+        <input
+          value={locker.id}
+          disabled={submitting}
+          className={clsx(
+            "w-64 h-9 px-2 rounded-full dark:bg-white dark:text-grey border-2 text-grey focus:outline-grey",
+            !locker.idValid && "border-error text-error"
+          )}
+          onChange={(e) => {
+            const newValues = [...lockerValues];
+            newValues[index] = {
+              ...newValues[index],
+              id: e.target.value.toUpperCase(),
+              idValid: true,
+            };
+            setLockerValues(newValues);
+          }}
+          placeholder="Locker ID"
+          type="text"
+          maxLength={6}
+        />
+
+        <select
+          value={locker.size}
+          disabled={submitting}
+          className={clsx(
+            "w-64 h-9 px-2 rounded-full dark:bg-white dark:text-grey border-2 text-grey focus:outline-grey",
+            !locker.sizeValid && "border-error"
+          )}
+          onChange={(e) => {
+            const newValues = [...lockerValues];
+            newValues[index] = {
+              ...newValues[index],
+              size: e.target.value,
+              sizeValid: true,
+            };
+            setLockerValues(newValues);
+          }}
+        >
+          <option value="" disabled>
+            Size
+          </option>
+          <option value="small">Small</option>
+          <option value="medium">Medium</option>
+          <option value="large">Large</option>
+        </select>
+
+        <input
+          value={locker.keyId}
+          disabled={submitting}
+          className={clsx(
+            "w-64 h-9 px-2 rounded-full dark:bg-white dark:text-grey border-2 text-grey focus:outline-grey",
+            !locker.keyIdValid && "border-error"
+          )}
+          onChange={(e) => {
+            const newValues = [...lockerValues];
+            newValues[index] = {
+              ...newValues[index],
+              keyId: e.target.value.toUpperCase(),
+              keyIdValid: true,
+            };
+            setLockerValues(newValues);
+          }}
+          placeholder="Key ID"
+          type="text"
+          maxLength={6}
+        />
+      </div>
+    );
+  });
+
+  return (
+    <div>
+      <AnimatePresence>
+        {notification.visible && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className={clsx(
+              "p-4 mb-8 font-body text-center text-xl rounded-2xl flex items-center justify-center gap-2",
+              notification.type === "error"
+                ? "bg-error-surface text-error"
+                : "bg-success-surface text-success"
+            )}
+          >
+            {notification.message.split(":").map((msg, index) => {
+              return index === 1 ? (
+                <span key={index} className="border-b border-dashed">
+                  {msg}
+                </span>
+              ) : (
+                <span key={index}>{msg}</span>
+              );
+            })}
+            <Copy
+              cursor={"pointer"}
+              size={15}
+              onClick={navigator.clipboard.writeText(
+                notification.message.split(":")[1].trim()
+              )}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+      <div className="relative">
+        {notification.type === "success" && (
+          <div className="absolute inset-0 bg-[#fff]/50 z-10 rounded-3xl" />
+        )}
+        <FormBox title="Locker Registration" disabled={submitting}>
+          <div className="px-4 pt-7 text-2xl font-bold text-primary dark:text-primary-dark">
+            {cabinetId}
+          </div>
+          <div className="flex flex-col gap-4 p-4">{lockerDetails}</div>
+          <Button
+            disabled={submitting}
+            text="Register"
+            onClick={(e) => {
+              handleSubmit(e);
+            }}
+          />
+        </FormBox>
+      </div>
+    </div>
+  );
+}
+
+export default LockersRegistration;

src/services/api.js

@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: "http://localhost:8081/api/v1",
+  headers: {
+    'Content-Type': 'application/json'
+  }
+});
+
+export default api;

src/services/locker.service.js

@@ -0,0 +1,14 @@
+import api from './api';
+
+export const lockersService = {
+  registerLockers: async (cabinetId, lockers) => {
+    return api.post('/cabinet', {
+      cabinetId,
+      lockers: lockers.map(({ id, size, keyId }) => ({
+        id,
+        size,
+        keyId
+      }))
+    });
+  },
+};

tailwind.config.js

@@ -70,6 +70,12 @@ export default {
           '0%': { opacity: '1' },
           '100%': { opacity: '0' },
         },
+        loading: {
+          '0%': { left: '-10%' },
+          '30%': { width: '30%' },
+          '80%': { width: '10%' },
+          '100%': { left: '100%' },
+        }
       },
     },
   },