task/WG-74: Create Map React Modal

react/package.json

@@ -28,6 +28,7 @@
         "@testing-library/react": "^13.4.0",
         "@types/leaflet.markercluster": "^1.5.1",
         "axios": "^1.6.2",
+        "bootstrap": "^5.3.2",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-jsx-a11y": "^6.6.1",
         "eslint-plugin-prettier": "^4.2.1",
@@ -45,7 +46,8 @@
         "react-router-dom": "^6.3.0",
         "react-table": "^7.8.0",
         "reactstrap": "^9.2.1",
-        "uuid": "^9.0.1"
+        "uuid": "^9.0.1",
+        "yup": "^1.3.3"
     },
     "devDependencies": {
         "@redux-devtools/core": "^3.13.1",

react/src/components/MapModal/MapModal.test.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Button } from 'reactstrap';
+import MapModal from './MapModal';
+
+const ModalTestPage: React.FC = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const toggleModal = () => setIsModalOpen(!isModalOpen);
+
+  // Dummy onSubmit function for testing
+  const dummyOnSubmit = () => {
+    // No operation (noop)
+  };
+
+  return (
+    <div>
+      <Button color="secondary" onClick={toggleModal}>
+        Open Map Modal
+      </Button>
+      <MapModal
+        isOpen={isModalOpen}
+        toggle={toggleModal}
+        onSubmit={dummyOnSubmit}
+        isCreating={false}
+      />
+    </div>
+  );
+};
+
+export default ModalTestPage;

react/src/components/MapModal/MapModal.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import {
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  FormGroup,
+  Label,
+  Input,
+} from 'reactstrap';
+import { Formik, Form, Field, ErrorMessage } from 'formik';
+import * as Yup from 'yup';
+
+type MapModalProps = {
+  isOpen: boolean;
+  toggle: () => void;
+  onSubmit: (values: any) => void;
+  isCreating: boolean;
+};
+
+// Yup validation schema
+const validationSchema = Yup.object({
+  name: Yup.string().required('Name is required'),
+  description: Yup.string().required('Description is required'),
+  system_file: Yup.string()
+    .matches(
+      /^[A-Za-z0-9-_]+$/,
+      'Only letters, numbers, hyphens, and underscores are allowed'
+    )
+    .required('Custom file name is required'),
+});
+
+const MapModal: React.FC<MapModalProps> = ({
+  isOpen,
+  toggle,
+  onSubmit,
+  isCreating,
+}) => {
+  return (
+    <Modal isOpen={isOpen} toggle={toggle}>
+      <ModalHeader toggle={toggle}>Create a New Map</ModalHeader>
+      <ModalBody>
+        <Formik
+          initialValues={{
+            name: '',
+            description: '',
+            system_file: '',
+            syncFolder: false,
+          }}
+          validationSchema={validationSchema}
+          onSubmit={(values, actions) => {
+            console.log('Form data', values);
+            onSubmit(values);
+            actions.setSubmitting(false);
+          }}
+        >
+          {({ errors, touched, values, handleChange }) => (
+            <Form>
+              <FormGroup>
+                <Label for="name">Name</Label>
+                <Field
+                  name="name"
+                  as={Input}
+                  invalid={touched.name && !!errors.name}
+                />
+                <ErrorMessage
+                  name="name"
+                  component="div"
+                  className="invalid-feedback"
+                />
+              </FormGroup>
+              <FormGroup>
+                <Label for="description">Description</Label>
+                <Field
+                  name="description"
+                  as={Input}
+                  invalid={touched.description && !!errors.description}
+                />
+                <ErrorMessage
+                  name="description"
+                  component="div"
+                  className="invalid-feedback"
+                />
+              </FormGroup>
+              <FormGroup>
+                <Label for="system_file">Custom File Name</Label>
+                <div className="input-group">
+                  <Field
+                    name="system_file"
+                    as={Input}
+                    className="col-sm-8"
+                    invalid={touched.system_file && !!errors.system_file}
+                  />
+                  <span className="input-group-text col-sm-4">.hazmapper</span>
+                </div>
+                {/* Alt solution to render error message bc input group was causing text to not display properly */}
+                {touched.system_file && errors.system_file && (
+                  <div
+                    className="custom-error-message"
+                    style={{
+                      marginTop: '0.25rem',
+                      fontSize: '0.875em',
+                      color: 'var(--bs-danger)',
+                    }}
+                  >
+                    {errors.system_file}
+                  </div>
+                )}
+              </FormGroup>
+              <FormGroup className="row align-items-center">
+                <Label className="col-sm-4">Save Location:</Label>
+                <div className="col-sm-8 text-primary">/tgrafft</div>
+              </FormGroup>
+              <FormGroup className="row mb-2">
+                <Label className="col-sm-4 col-form-label pt-0">
+                  Sync Folder:
+                </Label>
+                <div className="col-sm-8">
+                  <div className="form-check">
+                    <Field
+                      type="checkbox"
+                      name="syncFolder"
+                      id="syncFolder"
+                      className="form-check-input"
+                      checked={values.syncFolder}
+                      onChange={handleChange}
+                    />
+                  </div>
+                  <Label
+                    className="form-check-label"
+                    for="syncFolder"
+                    style={{ fontStyle: 'italic' }}
+                  >
+                    When enabled, files in this folder are automatically synced
+                    into the map periodically.
+                  </Label>
+                </div>
+              </FormGroup>
+              <ModalFooter className="justify-content-start">
+                <Button color="warning" type="button" onClick={toggle}>
+                  Close
+                </Button>
+                <Button color="primary" type="submit" disabled={isCreating}>
+                  {isCreating ? 'Creating...' : 'Create'}
+                </Button>
+              </ModalFooter>
+            </Form>
+          )}
+        </Formik>
+      </ModalBody>
+    </Modal>
+  );
+};
+
+export default MapModal;

react/src/components/MapModal/index.ts

@@ -0,0 +1 @@
+export { default } from './MapModal';

react/src/hooks/projects/useCreateProject.ts

@@ -0,0 +1,33 @@
+import { usePost } from '../../requests';
+import { Project } from '../../types';
+
+type ProjectData = {
+  // TO-DO: Make sure project data structure is correct for API
+  name: string;
+  description: string;
+  system_file: string;
+};
+
+// type ProjectData = {
+//     id: number;
+//     name: string;
+//     description: string;
+//     public: boolean;
+//     uuid: string;
+//     system_file: string;
+//     system_id: string;
+//     system_path: string;
+//     deletable: boolean;
+//   };
+
+const useCreateProject = () => {
+  const baseUrl = 'https://agave.designsafe-ci.org/geo/v2';
+  const endpoint = '/projects/';
+
+  return usePost<ProjectData, Project>({
+    endpoint,
+    baseUrl,
+  });
+};
+
+export default useCreateProject;

react/src/pages/MainMenu/MainMenu.tsx

@@ -1,13 +1,37 @@
-import React from 'react';
+import React, { useState } from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
 import {
   LoadingSpinner,
   InlineMessage,
   SectionHeader,
 } from '../../core-components';
 import { useProjects } from '../../hooks';
+import MapModal from '../../components/MapModal';
+import { Button } from 'reactstrap';
+import useCreateProject from '../../hooks/projects/useCreateProject';
 
 function MainMenu() {
   const { data, isLoading, error } = useProjects();
+  const { mutate: createProject, isLoading: isCreatingProject } =
+    useCreateProject();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const toggleModal = () => setIsModalOpen(!isModalOpen);
+
+  const handleCreateProject = (projectData) => {
+    createProject(projectData, {
+      onSuccess: () => {
+        // TO-ADD: Handle success (e.g., show success message, refetch projects, etc.)
+        console.log('Data after submit', projectData);
+        toggleModal();
+      },
+      onError: (err) => {
+        // Handle error (e.g., show error message)
+        console.error('Error creating project:', err);
+      },
+    });
+  };
+
   if (isLoading) {
     return (
       <>
@@ -27,6 +51,19 @@ function MainMenu() {
   return (
     <>
       <SectionHeader isNestedHeader>Main Menu</SectionHeader>
+      <Button
+        color="primary"
+        onClick={toggleModal}
+        disabled={isCreatingProject}
+      >
+        Create Map
+      </Button>
+      <MapModal
+        isOpen={isModalOpen}
+        toggle={toggleModal}
+        onSubmit={handleCreateProject}
+        isCreating={isCreatingProject}
+      />
 
       <table>
         <thead>Projects</thead>

react/src/requests.ts

@@ -1,7 +1,13 @@
 import axios from 'axios';
 import store from './redux/store';
 import { AxiosError } from 'axios';
-import { useQuery, UseQueryOptions, QueryKey } from 'react-query';
+import {
+  useQuery,
+  useMutation,
+  UseQueryOptions,
+  UseMutationOptions,
+  QueryKey,
+} from 'react-query';
 
 type UseGetParams<ResponseType> = {
   endpoint: string;
@@ -13,6 +19,12 @@ type UseGetParams<ResponseType> = {
   baseUrl: string;
 };
 
+type UsePostParams<RequestType, ResponseType> = {
+  endpoint: string;
+  options?: UseMutationOptions<ResponseType, AxiosError, RequestType>;
+  baseUrl: string;
+};
+
 export function useGet<ResponseType>({
   endpoint,
   key,
@@ -35,3 +47,26 @@ export function useGet<ResponseType>({
   };
   return useQuery<ResponseType, AxiosError>(key, () => getUtil(), options);
 }
+
+export function usePost<RequestType, ResponseType>({
+  endpoint,
+  options = {},
+  baseUrl,
+}: UsePostParams<RequestType, ResponseType>) {
+  const client = axios;
+  const state = store.getState();
+  const token = state.auth.token?.token;
+
+  const postUtil = async (requestData: RequestType) => {
+    const response = await client.post<ResponseType>(
+      `${baseUrl}${endpoint}`,
+      requestData,
+      {
+        headers: { Authorization: `Bearer ${token}` },
+      }
+    );
+    return response.data;
+  };
+
+  return useMutation<ResponseType, AxiosError, RequestType>(postUtil, options);
+}