Added option to change date formatting. Added shortcuts to clear search bar

client/src/components/Home/functions/dateTime.ts

@@ -1,8 +1,39 @@
 export const dateTime = (): string => {
-  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  const days = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+  ];
+  const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
 
   const now = new Date();
 
-  return `${days[now.getDay()]}, ${now.getDate()} ${months[now.getMonth()]} ${now.getFullYear()}`;
-}
+  const useAmericanDate = localStorage.useAmericanDate === 'true';
+
+  if (!useAmericanDate) {
+    return `${days[now.getDay()]}, ${now.getDate()} ${
+      months[now.getMonth()]
+    } ${now.getFullYear()}`;
+  } else {
+    return `${days[now.getDay()]}, ${
+      months[now.getMonth()]
+    } ${now.getDate()} ${now.getFullYear()}`;
+  }
+};

client/src/components/SearchBar/SearchBar.tsx

@@ -72,6 +72,7 @@ const SearchBar = (props: ComponentProps): JSX.Element => {
         type="text"
         className={classes.SearchBar}
         onKeyUp={(e) => searchHandler(e)}
+        onDoubleClick={clearSearch}
       />
     </div>
   );

client/src/components/Settings/OtherSettings/OtherSettings.tsx

@@ -92,6 +92,18 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           onChange={(e) => inputChangeHandler(e)}
         />
       </InputGroup>
+      <InputGroup>
+        <label htmlFor="useAmericanDate">Date formatting</label>
+        <select
+          id="useAmericanDate"
+          name="useAmericanDate"
+          value={formData.useAmericanDate ? 1 : 0}
+          onChange={(e) => inputChangeHandler(e, { isBool: true })}
+        >
+          <option value={1}>Friday, October 22 2021</option>
+          <option value={0}>Friday, 22 October 2021</option>
+        </select>
+      </InputGroup>
 
       {/* BEAHVIOR OPTIONS */}
       <SettingsHeadline text="App Behavior" />