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

CHANGELOG.md

@@ -1,5 +1,8 @@
 ### v1.7.1 (TBA)
 - Fixed search action not being triggered by Numpad Enter
+- Added option to change date formatting ([#92](https://github.com/pawelmalak/flame/issues/92))
+- Added shortcuts (Esc and double click) to clear search bar ([#100](https://github.com/pawelmalak/flame/issues/100))
+- Added Traefik integration ([#102](https://github.com/pawelmalak/flame/issues/102))
 - Fixed search bar not redirecting to valid URL if it starts with capital letter ([#118](https://github.com/pawelmalak/flame/issues/118))
 - Performance improvements
 

client/src/App.tsx

@@ -16,7 +16,7 @@ import Settings from './components/Settings/Settings';
 import Bookmarks from './components/Bookmarks/Bookmarks';
 import NotificationCenter from './components/NotificationCenter/NotificationCenter';
 
-// Get config pairs from database
+// Load config
 store.dispatch<any>(getConfig());
 
 // Set theme

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" />

client/src/interfaces/Config.ts

@@ -19,4 +19,5 @@ export interface Config {
   dockerHost: string;
   kubernetesApps: boolean;
   unpinStoppedApps: boolean;
+  useAmericanDate: boolean;
 }

client/src/interfaces/Forms.ts

@@ -25,4 +25,5 @@ export interface OtherSettingsForm {
   dockerHost: string;
   kubernetesApps: boolean;
   unpinStoppedApps: boolean;
+  useAmericanDate: boolean;
 }

client/src/store/actions/config.ts

@@ -20,6 +20,9 @@ export const getConfig = () => async (dispatch: Dispatch) => {
 
     // Set custom page title if set
     document.title = res.data.data.customTitle;
+
+    // Store settings for priority UI elements
+    localStorage.setItem('useAmericanDate', `${res.data.data.useAmericanDate}`);
   } catch (err) {
     console.log(err);
   }
@@ -46,6 +49,9 @@ export const updateConfig = (formData: any) => async (dispatch: Dispatch) => {
       type: ActionTypes.updateConfig,
       payload: res.data.data,
     });
+
+    // Store settings for priority UI elements
+    localStorage.setItem('useAmericanDate', `${res.data.data.useAmericanDate}`);
   } catch (err) {
     console.log(err);
   }

client/src/utility/templateObjects/configTemplate.ts

@@ -21,4 +21,5 @@ export const configTemplate: Config = {
   dockerHost: 'localhost',
   kubernetesApps: false,
   unpinStoppedApps: false,
+  useAmericanDate: false,
 };

client/src/utility/templateObjects/settingsTemplate.ts

@@ -14,6 +14,7 @@ export const otherSettingsTemplate: OtherSettingsForm = {
   dockerHost: 'localhost',
   kubernetesApps: true,
   unpinStoppedApps: true,
+  useAmericanDate: false,
 };
 
 export const weatherSettingsTemplate: WeatherForm = {

controllers/category.js

@@ -15,14 +15,12 @@ exports.createCategory = asyncWrapper(async (req, res, next) => {
   let category;
 
   if (pinCategories) {
-    if (parseInt(pinCategories.value)) {
-      category = await Category.create({
-        ...req.body,
-        isPinned: true,
-      });
-    } else {
-      category = await Category.create(req.body);
-    }
+    category = await Category.create({
+      ...req.body,
+      isPinned: true,
+    });
+  } else {
+    category = await Category.create(req.body);
   }
 
   res.status(201).json({