Location Modal

frontend/src/components/LocationModal/LocationModal.tsx

@@ -1,12 +1,13 @@
 import { parseAddress } from 'addresser';
 import { ToastStatus, useToast } from '../../context/toastContext';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { Location, ObjectType, Tag } from '../../types/index';
 import { Button, Input, Label } from '../FormElements/FormElements';
 import Modal from '../Modal/Modal';
 import styles from './locationmodal.module.css';
 import axios from '../../util/axios';
+import { trash } from '../../icons/other';
 
 type LocationModalProps = {
   existingLocation?: Location;
@@ -62,25 +63,26 @@ const LocationModal: React.FC<LocationModalProps> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { showToast } = useToast();
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<FormData>();
+  const { register, handleSubmit, reset, formState } = useForm<FormData>();
+  const { errors } = formState;
 
   const modalTitle = existingLocation ? 'Edit Location' : 'Add a Location';
-  const submitButtonText = existingLocation ? 'Save' : 'Add';
+  const submitButtonText = existingLocation ? 'Save Locaation' : 'Add Location';
 
   const openModal = () => {
     setIsOpen(true);
   };
 
-  const closeModal = () => setIsOpen(false);
+  const closeModal = () => {
+    reset();
+    setIsOpen(false);
+  };
 
   const onSubmit: SubmitHandler<FormData> = async (data) => {
     const url = existingLocation
       ? `/api/locations/${existingLocation.id}`
       : '/api/locations';
+
     const method = existingLocation ? axios.put : axios.post;
 
     const newLocation = await method(url, data).then((res) => res.data);
@@ -89,9 +91,10 @@ const LocationModal: React.FC<LocationModalProps> = ({
       onAddLocation(newLocation.data);
       showToast('Location has been added.', ToastStatus.SUCCESS);
     } else if (existingLocation && onEditLocation) {
-      onEditLocation(newLocation);
+      onEditLocation(newLocation.data);
       showToast('Location has been updated.', ToastStatus.SUCCESS);
     }
+
     closeModal();
   };
 
@@ -115,69 +118,91 @@ const LocationModal: React.FC<LocationModalProps> = ({
           aria-labelledby="location-modal"
         >
           <div className={styles.inputContainer}>
-            <Label htmlFor="name">Name</Label>
-            <Input
-              {...register('name', { required: true })}
-              type="text"
-              id="name"
-              defaultValue={existingLocation?.name}
-              className={styles.input}
-              aria-required="true"
-            />
-            {errors.name && (
-              <p className={styles.errorMsg}>Please enter a name</p>
-            )}
-
-            <Label htmlFor="address">Address</Label>
-            <Input
-              {...register('address', { required: true, validate: isAddress })}
-              type="text"
-              id="address"
-              defaultValue={existingLocation?.address}
-              className={styles.input}
-              aria-required="true"
-            />
-            {errors.address && (
-              <p className={styles.errorMsg}>{errors.address.message}</p>
-            )}
-
-            <Label htmlFor="info">Pickup/Dropoff Info</Label>
-            <Input
-              {...register('info', { required: true })}
-              type="text"
-              id="info"
-              defaultValue={existingLocation?.info}
-              className={styles.input}
-              aria-required="true"
-            />
-            {errors.info && (
-              <p className={styles.errorMsg}>
-                Please enter pickup/dropoff info
-              </p>
-            )}
-
-            <Label htmlFor="tag">Tag</Label>
-            <select
-              {...register('tag', { required: true })}
-              id="tag"
-              defaultValue={existingLocation?.tag}
-              className={styles.inputContainer}
-              aria-required="true"
-            >
-              {Object.values(Tag).map((value) =>
-                value === 'custom' ? null : (
-                  <option key={value} value={value}>
-                    {value}
-                  </option>
-                )
+            <div className={styles.col1}>
+              <Label htmlFor="name">Name</Label>
+              <Input
+                {...register('name', { required: true })}
+                type="text"
+                id="name"
+                defaultValue={existingLocation?.name}
+                className={styles.input}
+                aria-required="true"
+              />
+              {errors.name && (
+                <p className={styles.errorMsg}>Please enter a name</p>
               )}
-            </select>
+            </div>
 
-            <div>
-              <Button className={styles.submit} type="submit">
-                {submitButtonText}
-              </Button>
+            <div className={styles.col2}>
+              <Label htmlFor="address">Address</Label>
+              <Input
+                {...register('address', {
+                  // error message if there's no input in address
+                  required: 'Please enter an address',
+                  validate: isAddress,
+                })}
+                type="text"
+                id="address"
+                defaultValue={existingLocation?.address}
+                className={styles.input}
+                aria-required="true"
+              />
+              {errors.address && (
+                // error message is triggered from enterting something in address
+                <p className={styles.errorMsg}>{errors.address.message}</p>
+              )}
             </div>
+
+            <div className={styles.col1}>
+              <Label htmlFor="info">Pickup/Dropoff Info</Label>
+              <textarea
+                {...register('info', { required: true })}
+                id="info"
+                defaultValue={existingLocation?.info}
+                className={styles.input}
+                aria-required="true"
+              ></textarea>
+
+              {errors.info && (
+                <p className={styles.errorMsg}>
+                  Please enter pickup/dropoff info
+                </p>
+              )}
+            </div>
+
+            <div className={styles.col2}>
+              <Label htmlFor="tag">Tag</Label>
+              <select
+                {...register('tag', {
+                  required: 'Select a Tag',
+                })}
+                id="tag"
+                // tag's default value is "Select a tag" unless it already has a tag set
+                defaultValue={existingLocation?.tag || ''}
+                className={styles.inputContainer}
+                aria-required="true"
+                style={{ height: '40px' }}
+              >
+                <option value="" disabled>
+                  Select a tag
+                </option>
+                {Object.values(Tag).map((value) =>
+                  value === Tag.CUSTOM ? null : (
+                    <option key={value} value={value}>
+                      {value}
+                    </option>
+                  )
+                )}
+              </select>
+              {errors.tag && (
+                <p className={styles.errorMsg}>Please select a tag</p>
+              )}
+            </div>
+          </div>
+          <div className={styles.locationButtons}>
+            <Button className={styles.submit} type="submit">
+              {submitButtonText}
+            </Button>
           </div>
         </form>
       </Modal>

frontend/src/components/LocationModal/locationmodal.module.css

@@ -1,32 +1,59 @@
-.inputContainer > input,
-.inputContainer > p {
-  display: block;
-  margin-bottom: 0.5rem;
+.inputContainer {
+  display: grid;
+  grid-gap: 1rem;
+  width: 36rem;
+  justify-content: space-between;
+}
+
+.col1 {
+  grid-column: 1;
+}
+
+.col2 {
+  grid-column: 2;
+}
+
+.col1 label,
+.col2 label {
+  color: #808080;
+}
+
+.inputContainer select {
+  width: 124px;
+  height: 31px;
+  border-radius: 6px;
+}
+
+textarea[name='info'] {
+  height: 170px;
+}
+
+input[name='address'] {
+  width: 298px;
 }
 
 .input {
-  font-size: 1.5rem;
-  min-height: 40px;
-  width: 280px;
+  border-radius: 6px;
+  border: 1px solid #808080;
+  display: flex;
+  flex-direction: column;
+  font-size: 0.875rem;
+  height: 40px;
+  width: 224px;
+  margin-top: 0.3rem;
 }
 
 .errorMsg {
   color: #eb0023;
   font-size: 0.8rem;
 }
 
-.styledSelect {
-  padding: 0.2rem;
-}
-
-.submit {
+.locationButtons {
   float: right;
+  justify-content: space-between;
+  margin-top: 30px;
 }
 
-.inputContainer {
-  min-height: 40px;
-  width: 280px;
-  font-size: 1.5rem;
-  display: block;
-  margin-bottom: 0.75rem;
+.locationButtons Button {
+  margin-left: 30px;
 }

frontend/src/components/Modal/modal.module.css

@@ -26,14 +26,15 @@
 }
 
 .closeBtn {
+  outline: none;
   border: none;
   cursor: pointer;
   background: none;
   padding: 0;
   margin-left: 0.75rem;
 }
 
-.closeBtn:focus {
+.closeBtn:active {
   outline: 3px solid black;
 }
 

frontend/src/components/RequestRideModal/RequestRideInfo.tsx

@@ -65,11 +65,11 @@ const RequestRideInfo: React.FC<RequestRideInfoProps> = ({
   useEffect(() => {
     if (ride) {
       const defaultStart =
-        ride.startLocation.tag === 'custom'
+        ride.startLocation.tag === 'Custom'
           ? 'Other'
           : ride.startLocation.id ?? '';
       const defaultEnd =
-        ride.endLocation.tag === 'custom' ? 'Other' : ride.endLocation.id ?? '';
+        ride.endLocation.tag === 'Custom' ? 'Other' : ride.endLocation.id ?? '';
       setValue('startLocation', defaultStart);
       setValue('endLocation', defaultEnd);
     }

frontend/src/types/index.ts

@@ -56,14 +56,14 @@ export type ObjectType = {
 export type Vehicle = VehicleType;
 
 export enum Tag {
-  EAST = 'east',
-  CENTRAL = 'central',
-  NORTH = 'north',
-  WEST = 'west',
-  CTOWN = 'ctown',
-  DTOWN = 'dtown',
-  INACTIVE = 'inactive',
-  CUSTOM = 'custom',
+  EAST = 'East',
+  CENTRAL = 'Central',
+  NORTH = 'North',
+  WEST = 'West',
+  CTOWN = 'C-Town',
+  DTOWN = 'Downtown',
+  INACTIVE = 'Inactive',
+  CUSTOM = 'Custom',
 }
 
 export type Location = LocationType;

server/src/models/location.ts

@@ -2,14 +2,14 @@ import dynamoose from 'dynamoose';
 import defaultModelConfig from '../util/modelConfig';
 
 export enum Tag {
-  EAST = 'east',
-  WEST = 'west',
-  CENTRAL = 'central',
-  NORTH = 'north',
-  CTOWN = 'ctown', // college town
-  DTOWN = 'dtown', // downtown
-  INACTIVE = 'inactive',
-  CUSTOM = 'custom',
+  EAST = 'East',
+  WEST = 'West',
+  CENTRAL = 'Central',
+  NORTH = 'North',
+  CTOWN = 'C-Town', // college town
+  DTOWN = 'Downtown', // downtown
+  INACTIVE = 'Inactive',
+  CUSTOM = 'Custom',
 }
 
 export type LocationType = {