Fix: Redundant new route removal (#450)

* modal (#446) * modal * Update index.jsx * Update index.jsx * Update index.jsx * Update index.jsx * Update index.jsx * Update index.jsx * Update index.jsx * Update index.jsx * Update index.jsx * Fix: prettier error resolution for build --------- Co-authored-by: Diya Therese Shibu <[email protected]>
IEDCMEC · Sep 23, 2024 · 4fb5439 · 4fb5439
1 parent a244f00
commit 4fb5439
Show file tree

Hide file tree

Showing 21 changed files with 5,229 additions and 1,998 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,10 +1,10 @@
 module.exports = {
   root: true,
   // This tells ESLint to load the config from the package `eslint-config-custom`
-  extends: ["custom"],
+  extends: ['custom'],
   settings: {
     next: {
-      rootDir: ["apps/*/"],
+      rootDir: ['apps/*/'],
     },
   },
 };
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -1,18 +1,18 @@
 version: 2
 updates:
-  - package-ecosystem: "npm"
-    directory: "/apps/core-admin"
+  - package-ecosystem: 'npm'
+    directory: '/apps/core-admin'
     schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/apps/core-auth0-actions"
+      interval: 'weekly'
+  - package-ecosystem: 'npm'
+    directory: '/apps/core-auth0-actions'
     schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/apps/web-admin"
+      interval: 'weekly'
+  - package-ecosystem: 'npm'
+    directory: '/apps/web-admin'
     schedule:
-      interval: "weekly"
-  - package-ecosystem: "npm"
-    directory: "/"
+      interval: 'weekly'
+  - package-ecosystem: 'npm'
+    directory: '/'
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -28,7 +28,7 @@ jobs:
         run: |
           curl -X GET ${{ secrets.DEV_CORE_ADMIN_DEPLOY_HOOK }}
           curl -X GET ${{ secrets.PROD_CORE_ADMIN_DEPLOY_HOOK }}
-          
+
   build-and-push-core-auth0-actions:
     runs-on: ubuntu-latest
 

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,7 +1,7 @@
 module.exports = {
-    semi: true,
-    trailingComma: 'all',
-    singleQuote: true,
-    printWidth: 100,
-    tabWidth: 2,
-  };
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 100,
+  tabWidth: 2,
+};
diff --git a/README.md b/README.md
@@ -1,4 +1,3 @@
-
 <div align="center">
   <h1 align="center">Techno Event Management</h1>
   <h3>A powerful event management suite.</h3>

diff --git a/apps/web-admin/components.json b/apps/web-admin/components.json
@@ -13,4 +13,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/attributes/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/attributes/index.jsx
@@ -1,14 +1,20 @@
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-
-import { Button } from '@chakra-ui/react';
-
+import {
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+} from '@chakra-ui/react';
 import DashboardLayout from '@/layouts/DashboardLayout';
-
 import { useFetch } from '@/hooks/useFetch';
 import { useAlert } from '@/hooks/useAlert';
-
 import DataDisplay from '@/components/DataDisplay';
+import NewAttributeForm from './new';
 
 const columns = [
   { field: 'name', headerName: 'Name', width: 200 },
@@ -23,10 +29,9 @@ export default function Attributes() {
   const router = useRouter();
   const { orgId, eventId } = router.query;
   const showAlert = useAlert();
-
+  const { isOpen, onOpen, onClose } = useDisclosure();
   const { loading, get } = useFetch();
 
-  const [event, setEvent] = useState([]);
   const [attributes, setAttributes] = useState([]);
 
   useEffect(() => {
@@ -53,12 +58,7 @@ export default function Attributes() {
       previousPage={`/organizations/${orgId}/events/${eventId}`}
       headerButton={
         <>
-          <Button
-            onClick={() => {
-              router.push(`/${orgId}/events/${eventId}/attributes/new`);
-            }}
-            isLoading={loading}
-          >
+          <Button onClick={onOpen} isLoading={loading}>
             Add Attribute
           </Button>
         </>
@@ -73,6 +73,17 @@ export default function Attributes() {
           router.push(`/${orgId}/events/${eventId}/attributes/${row.id}`);
         }}
       />
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Add Attribute</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <NewAttributeForm onClose={onClose} />
+          </ModalBody>
+        </ModalContent>
+      </Modal>
     </DashboardLayout>
   );
 }
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/attributes/new/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/attributes/new/index.jsx
@@ -1,17 +1,12 @@
 import { useState } from 'react';
 import { useRouter } from 'next/router';
-
 import { Button, FormControl, FormLabel, Input } from '@chakra-ui/react';
-
-import DashboardLayout from '@/layouts/DashboardLayout';
-
 import { useAlert } from '@/hooks/useAlert';
 import { useFetch } from '@/hooks/useFetch';
 
-export default function NewAttribute() {
+export default function NewAttributeForm({ onClose }) {
   const { loading, post } = useFetch();
   const showAlert = useAlert();
-
   const router = useRouter();
   const { orgId, eventId } = router.query;
 
@@ -22,16 +17,15 @@ export default function NewAttribute() {
     const { data, status } = await post(
       `/core/organizations/${orgId}/events/${eventId}/attributes`,
       {},
-      {
-        name,
-      },
+      { name },
     );
     if (status === 200) {
       showAlert({
         title: 'Success',
         description: 'Attribute has been added successfully.',
         status: 'success',
       });
+      onClose();
       router.push(`/${orgId}/events/${eventId}/attributes`);
     } else {
       showAlert({
@@ -43,26 +37,22 @@ export default function NewAttribute() {
   };
 
   return (
-    <DashboardLayout
-      pageTitle="Add Attribute"
-      previousPage={`/organizations/${orgId}/events/${eventId}/attributes`}
-    >
-      <form onSubmit={handleSubmit}>
-        <FormControl isRequired my={4}>
-          <FormLabel>Name</FormLabel>
-          <Input
-            type="text"
-            name="name"
-            value={name}
-            onChange={(e) => {
-              setName(e.target.value);
-            }}
-          />
-        </FormControl>
-        <Button type="submit" width="100%" my="4" isLoading={loading} loadingText="Please Wait">
-          Add
-        </Button>
-      </form>
-    </DashboardLayout>
+    <form onSubmit={handleSubmit}>
+      <FormControl isRequired my={4}>
+        <FormLabel>Name</FormLabel>
+        <Input type="text" name="name" value={name} onChange={(e) => setName(e.target.value)} />
+      </FormControl>
+
+      <Button
+        type="submit"
+        width="100%"
+        my="4"
+        isLoading={loading}
+        loadingText="Please Wait"
+        colorScheme="teal"
+      >
+        Add
+      </Button>
+    </form>
   );
 }
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/extras/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/extras/index.jsx
@@ -1,14 +1,20 @@
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-
-import { Button } from '@chakra-ui/react';
-
+import {
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+} from '@chakra-ui/react';
 import DashboardLayout from '@/layouts/DashboardLayout';
-
 import { useFetch } from '@/hooks/useFetch';
 import { useAlert } from '@/hooks/useAlert';
-
 import DataDisplay from '@/components/DataDisplay';
+import NewExtraForm from './new'; // Import the form component
 
 const columns = [
   { field: 'name', headerName: 'Name', width: 200 },
@@ -28,7 +34,7 @@ export default function Extras() {
   const router = useRouter();
   const { orgId, eventId } = router.query;
   const showAlert = useAlert();
-
+  const { isOpen, onOpen, onClose } = useDisclosure(); // Chakra UI hook for modal control
   const { loading, get } = useFetch();
 
   const [extras, setExtras] = useState([]);
@@ -55,12 +61,7 @@ export default function Extras() {
       previousPage={`/organizations/${orgId}/events/${eventId}`}
       headerButton={
         <>
-          <Button
-            onClick={() => {
-              router.push(`/${orgId}/events/${eventId}/extras/new`);
-            }}
-            isLoading={loading}
-          >
+          <Button onClick={onOpen} isLoading={loading}>
             Add Extra
           </Button>
         </>
@@ -75,6 +76,19 @@ export default function Extras() {
           router.push(`/${orgId}/events/${eventId}/extras/${row.id}`);
         }}
       />
+
+      {/* Modal for creating a new extra */}
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Add Extra</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            {/* Render the form from new/index.js */}
+            <NewExtraForm onClose={onClose} />
+          </ModalBody>
+        </ModalContent>
+      </Modal>
     </DashboardLayout>
   );
 }
diff --git a/apps/web-admin/src/pages/[orgId]/events/[eventId]/extras/new/index.jsx b/apps/web-admin/src/pages/[orgId]/events/[eventId]/extras/new/index.jsx
@@ -1,17 +1,13 @@
 import { useState } from 'react';
 import { useRouter } from 'next/router';
-
 import { Button, FormControl, FormLabel, Input } from '@chakra-ui/react';
-
-import DashboardLayout from '@/layouts/DashboardLayout';
-
 import { useAlert } from '@/hooks/useAlert';
 import { useFetch } from '@/hooks/useFetch';
 
-export default function NewExtra() {
+export default function NewExtraForm({ onClose }) {
+  // Accept onClose to close the modal
   const { loading, post } = useFetch();
   const showAlert = useAlert();
-
   const router = useRouter();
   const { orgId, eventId } = router.query;
 
@@ -22,17 +18,16 @@ export default function NewExtra() {
     const { data, status } = await post(
       `/core/organizations/${orgId}/events/${eventId}/extras`,
       {},
-      {
-        name,
-      },
+      { name },
     );
     if (status === 200) {
       showAlert({
         title: 'Success',
         description: 'Extra has been added successfully.',
         status: 'success',
       });
-      router.push(`/${orgId}/events/${eventId}/extras`);
+      onClose(); // Close the modal after success
+      router.push(`/${orgId}/events/${eventId}/extras`); // Redirect to extras list
     } else {
       showAlert({
         title: 'Error',
@@ -43,26 +38,21 @@ export default function NewExtra() {
   };
 
   return (
-    <DashboardLayout
-      pageTitle="Add Extra"
-      previousPage={`/organizations/${orgId}/events/${eventId}/extras`}
-    >
-      <form onSubmit={handleSubmit}>
-        <FormControl isRequired my={4}>
-          <FormLabel>Name</FormLabel>
-          <Input
-            type="text"
-            name="name"
-            value={name}
-            onChange={(e) => {
-              setName(e.target.value);
-            }}
-          />
-        </FormControl>
-        <Button type="submit" width="100%" my="4" isLoading={loading} loadingText="Please Wait">
-          Add
-        </Button>
-      </form>
-    </DashboardLayout>
+    <form onSubmit={handleSubmit}>
+      <FormControl isRequired my={4}>
+        <FormLabel>Name</FormLabel>
+        <Input type="text" name="name" value={name} onChange={(e) => setName(e.target.value)} />
+      </FormControl>
+      <Button
+        type="submit"
+        width="100%"
+        my="4"
+        isLoading={loading}
+        loadingText="Please Wait"
+        colorScheme="teal"
+      >
+        Add
+      </Button>
+    </form>
   );
 }