- start addressing Alans feedback

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -12,7 +12,7 @@ const SoundSettingsFields = () => {
   const hotlists: Hotlist[] = state.hotlists;
 
   const soundOptions = state?.soundOptions?.map((soundOption) => ({
-    value: soundOption?.name,
+    value: soundOption?.soundFile,
     label: soundOption?.name,
   }));
 
@@ -48,7 +48,7 @@ const SoundSettingsFields = () => {
             >
               {soundOptions?.map(({ value, label }) => {
                 return (
-                  <option key={value} value={value}>
+                  <option key={label} value={value}>
                     {label}
                   </option>
                 );
@@ -78,14 +78,8 @@ const SoundSettingsFields = () => {
                   <div className="w-full m-2">
                     {values?.hotlists?.length > 0 ? (
                       values?.hotlists?.map((hotlist, index) => (
-                        <div
+                        <div key={hotlist.name} className="flex items-center m-2 w-full justify-between">
-                          key={hotlist.name}
+                          <label htmlFor={`hotlists.${index}.sound`} className="w-32 shrink-0">
-                          className="flex items-center m-2 w-full justify-between"
-                        >
-                          <label
-                            htmlFor={`hotlists.${index}.sound`}
-                            className="w-32 shrink-0"
-                          >
                             {hotlist.name}
                           </label>
                           <Field

src/components/SightingModal/SightingModal.tsx

@@ -109,7 +109,7 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
                 onClick={handleAcknowledgeButton}
               >
                 <FontAwesomeIcon icon={faCheck} />
-                Accept
+                Acknowledge
               </button>
             )}
           </div>
@@ -157,18 +157,26 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
                   <dd className="font-medium text-2xl">{sighting?.seenCount ?? "-"}</dd>
                 </div>
 
-                <div>
+                {sighting?.make && (
-                  <dt className="text-gray-300">Make</dt>
+                  <div>
-                  <dd className="font-medium text-2xl">{sighting?.make ?? "-"}</dd>
+                    <dt className="text-gray-300">Make</dt>
-                </div>
+                    <dd className="font-medium text-2xl">{sighting?.make ?? "-"}</dd>
-                <div>
+                  </div>
-                  <dt className="text-gray-300">Model</dt>
+                )}
-                  <dd className="font-medium text-2xl">{sighting?.model ?? "-"}</dd>
+                {sighting?.model ||
-                </div>
+                  (!sighting?.model.trim() && (
-                <div className="sm:col-span-2">
+                    <div>
-                  <dt className="text-gray-300">Colour</dt>
+                      <dt className="text-gray-300">Model</dt>
-                  <dd className="font-medium text-2xl">{sighting?.color ?? "-"}</dd>
+                      <dd className="font-medium text-2xl">{sighting?.model ?? "-"}</dd>
-                </div>
+                    </div>
+                  ))}
+                {sighting?.color && (
+                  <div className="sm:col-span-2">
+                    <dt className="text-gray-300">Colour</dt>
+                    <dd className="font-medium text-2xl">{sighting?.color ?? "-"}</dd>
+                  </div>
+                )}
+
                 <div>
                   <dt className="text-gray-300">Time</dt>
                   <dd className="font-medium text-xl">{sighting?.timeStamp ?? "-"}</dd>
@@ -192,7 +200,7 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
                 onClick={handleAcknowledgeButton}
               >
                 <FontAwesomeIcon icon={faCheck} />
-                Accept
+                Acknowledge
               </button>
             )}
             {onDelete ? (

src/context/reducers/SoundContextReducer.ts

@@ -5,9 +5,13 @@ export const initialState: SoundState = {
   NPEDsound: "popup",
   hotlists: [{ name: "hotlistName", sound: "notification" }],
   soundOptions: [
-    { name: "switch (Default)", soundFile: null },
+    { name: "Switch (Default)", soundFile: "switch" },
-    { name: "popup", soundFile: null },
+    { name: "Popup", soundFile: "popup" },
-    { name: "notification", soundFile: null },
+    { name: "Notification", soundFile: "notification" },
+    { name: "Beep", soundFile: "beep" },
+    { name: "Ding", soundFile: "ding" },
+    { name: "Shutter", soundFile: "shutter" },
+    { name: "Warning (voice)", soundFile: "warning" },
   ],
 };
 

src/types/types.ts

@@ -43,9 +43,7 @@ export type CameraSettingValues = {
   id: number | string;
 };
 
-export type CameraSettingErrorValues = Partial<
+export type CameraSettingErrorValues = Partial<Record<keyof CameraSettingValues, string>>;
-  Record<keyof CameraSettingValues, string>
->;
 
 export type BearerTypeFieldType = {
   format: string;
@@ -291,7 +289,7 @@ export type FormValues = {
 
 export type SoundUploadValue = {
   name: string;
-  soundFile: File | null;
+  soundFile: string | undefined;
 };
 
 export type SoundState = {

src/utils/utils.ts

@@ -1,6 +1,11 @@
 import switchSound from "../assets/sounds/ui/switch.mp3";
 import popup from "../assets/sounds/ui/popup_open.mp3";
 import notification from "../assets/sounds/ui/notification.mp3";
+import beep from "../assets/sounds/ui/Beep.wav";
+import warning from "../assets/sounds/ui/Warning.wav";
+import ding from "../assets/sounds/ui/Ding.wav";
+import shutter from "../assets/sounds/ui/shutter.mp3";
+
 import type { HotlistMatches, SightingType } from "../types/types";
 
 export function getSoundFileURL(name: string) {
@@ -8,6 +13,10 @@ export function getSoundFileURL(name: string) {
     switch: switchSound,
     popup: popup,
     notification: notification,
+    beep: beep,
+    warning: warning,
+    ding: ding,
+    shutter: shutter,
   };
   return sounds[name] ?? null;
 }