Merge pull request #226 from pawelmalak/feature

Version 2.1.0

.env

@@ -1,5 +1,5 @@
 PORT=5005
 NODE_ENV=development
-VERSION=2.0.1
+VERSION=2.1.0
 PASSWORD=flame_password
 SECRET=e02eb43d69953658c6d07311d6313f2d4467672cb881f96b29368ba1f3f4da4b

CHANGELOG.md

@@ -1,3 +1,12 @@
+### v2.1.0 (2021-11-26)
+- Added option to set custom order for bookmarks ([#43](https://github.com/pawelmalak/flame/issues/43)) and ([#187](https://github.com/pawelmalak/flame/issues/187))
+- Added support for .ico files for custom icons ([#209](https://github.com/pawelmalak/flame/issues/209))
+- Empty apps and categories sections will now be hidden from guests ([#210](https://github.com/pawelmalak/flame/issues/210))
+- Fixed bug with fahrenheit degrees being displayed as float ([#221](https://github.com/pawelmalak/flame/issues/221))
+- Fixed bug with alphabetical order not working for bookmarks until the page was refreshed ([#224](https://github.com/pawelmalak/flame/issues/224))
+- Added option to change visibilty of apps, categories and bookmarks directly from table view
+- Password input will now autofocus when visiting /settings/app
+
 ### v2.0.1 (2021-11-19)
 - Added option to display humidity in the weather widget ([#136](https://github.com/pawelmalak/flame/issues/136))
 - Added option to set default theme for all new users ([#165](https://github.com/pawelmalak/flame/issues/165))

client/.env

@@ -1 +1 @@
-REACT_APP_VERSION=2.0.1
+REACT_APP_VERSION=2.1.0

client/src/components/Actions/TableActions.module.css

@@ -0,0 +1,12 @@
+.TableActions {
+  display: flex;
+  align-items: center;
+}
+
+.TableAction {
+  width: 22px;
+}
+
+.TableAction:hover {
+  cursor: pointer;
+}

client/src/components/Actions/TableActions.tsx

@@ -0,0 +1,81 @@
+import { Icon } from '../UI';
+import classes from './TableActions.module.css';
+
+interface Entity {
+  id: number;
+  name: string;
+  isPinned?: boolean;
+  isPublic: boolean;
+}
+
+interface Props {
+  entity: Entity;
+  deleteHandler: (id: number, name: string) => void;
+  updateHandler: (id: number) => void;
+  pinHanlder?: (id: number) => void;
+  changeVisibilty: (id: number) => void;
+  showPin?: boolean;
+}
+
+export const TableActions = (props: Props): JSX.Element => {
+  const {
+    entity,
+    deleteHandler,
+    updateHandler,
+    pinHanlder,
+    changeVisibilty,
+    showPin = true,
+  } = props;
+
+  const _pinHandler = pinHanlder || function () {};
+
+  return (
+    <td className={classes.TableActions}>
+      {/* DELETE */}
+      <div
+        className={classes.TableAction}
+        onClick={() => deleteHandler(entity.id, entity.name)}
+        tabIndex={0}
+      >
+        <Icon icon="mdiDelete" />
+      </div>
+
+      {/* UPDATE */}
+      <div
+        className={classes.TableAction}
+        onClick={() => updateHandler(entity.id)}
+        tabIndex={0}
+      >
+        <Icon icon="mdiPencil" />
+      </div>
+
+      {/* PIN */}
+      {showPin && (
+        <div
+          className={classes.TableAction}
+          onClick={() => _pinHandler(entity.id)}
+          tabIndex={0}
+        >
+          {entity.isPinned ? (
+            <Icon icon="mdiPinOff" color="var(--color-accent)" />
+          ) : (
+            <Icon icon="mdiPin" />
+          )}
+        </div>
+      )}
+
+      {/* VISIBILITY */}
+      <div
+        className={classes.TableAction}
+        onClick={() => changeVisibilty(entity.id)}
+        tabIndex={0}
+      >
+        {entity.isPublic ? (
+          <Icon icon="mdiEyeOff" color="var(--color-accent)" />
+        ) : (
+          <Icon icon="mdiEye" />
+        )}
+      </div>
+    </td>
+  );
+};

client/src/components/Apps/AppForm/AppForm.tsx

@@ -1,36 +1,41 @@
 import { useState, useEffect, ChangeEvent, SyntheticEvent } from 'react';
-import { useDispatch } from 'react-redux';
-import { App, NewApp } from '../../../interfaces';
+import { useDispatch, useSelector } from 'react-redux';
+import { NewApp } from '../../../interfaces';
 
 import classes from './AppForm.module.css';
 
 import { ModalForm, InputGroup, Button } from '../../UI';
 import { inputHandler, newAppTemplate } from '../../../utility';
 import { bindActionCreators } from 'redux';
 import { actionCreators } from '../../../store';
+import { State } from '../../../store/reducers';
 
 interface Props {
   modalHandler: () => void;
-  app?: App;
 }
 
-export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
+export const AppForm = ({ modalHandler }: Props): JSX.Element => {
+  const { appInUpdate } = useSelector((state: State) => state.apps);
+
   const dispatch = useDispatch();
-  const { addApp, updateApp } = bindActionCreators(actionCreators, dispatch);
+  const { addApp, updateApp, setEditApp } = bindActionCreators(
+    actionCreators,
+    dispatch
+  );
 
   const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
   const [customIcon, setCustomIcon] = useState<File | null>(null);
   const [formData, setFormData] = useState<NewApp>(newAppTemplate);
 
   useEffect(() => {
-    if (app) {
+    if (appInUpdate) {
       setFormData({
-        ...app,
+        ...appInUpdate,
       });
     } else {
       setFormData(newAppTemplate);
     }
-  }, [app]);
+  }, [appInUpdate]);
 
   const inputChangeHandler = (
     e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
@@ -66,7 +71,7 @@ export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
       return data;
     };
 
-    if (!app) {
+    if (!appInUpdate) {
       if (customIcon) {
         const data = createFormData();
         addApp(data);
@@ -76,14 +81,15 @@ export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
     } else {
       if (customIcon) {
         const data = createFormData();
-        updateApp(app.id, data);
+        updateApp(appInUpdate.id, data);
       } else {
-        updateApp(app.id, formData);
+        updateApp(appInUpdate.id, formData);
         modalHandler();
       }
     }
 
     setFormData(newAppTemplate);
+    setEditApp(null);
   };
 
   return (
@@ -154,7 +160,7 @@ export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
             id="icon"
             required
             onChange={(e) => fileChangeHandler(e)}
-            accept=".jpg,.jpeg,.png,.svg"
+            accept=".jpg,.jpeg,.png,.svg,.ico"
           />
           <span
             onClick={() => {
@@ -182,7 +188,7 @@ export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
         </select>
       </InputGroup>
 
-      {!app ? (
+      {!appInUpdate ? (
         <Button>Add new application</Button>
       ) : (
         <Button>Update application</Button>

client/src/components/Apps/AppGrid/AppGrid.module.css

@@ -20,21 +20,3 @@
     grid-template-columns: repeat(4, 1fr);
   }
 }
-
-.GridMessage {
-  color: var(--color-primary);
-}
-
-.GridMessage a {
-  color: var(--color-accent);
-  font-weight: 600;
-}
-
-.AppsMessage {
-  color: var(--color-primary);
-}
-
-.AppsMessage a {
-  color: var(--color-accent);
-  font-weight: 600;
-}

client/src/components/Apps/AppGrid/AppGrid.tsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { App } from '../../../interfaces/App';
 
 import { AppCard } from '../AppCard/AppCard';
+import { Message } from '../../UI';
 
 interface Props {
   apps: App[];
@@ -13,36 +14,32 @@ interface Props {
 export const AppGrid = (props: Props): JSX.Element => {
   let apps: JSX.Element;
 
-  if (props.apps.length > 0) {
-    apps = (
-      <div className={classes.AppGrid}>
-        {props.apps.map((app: App): JSX.Element => {
-          return <AppCard key={app.id} app={app} />;
-        })}
-      </div>
-    );
+  if (props.searching || props.apps.length) {
+    if (!props.apps.length) {
+      apps = <Message>No apps match your search criteria</Message>;
+    } else {
+      apps = (
+        <div className={classes.AppGrid}>
+          {props.apps.map((app: App): JSX.Element => {
+            return <AppCard key={app.id} app={app} />;
+          })}
+        </div>
+      );
+    }
   } else {
     if (props.totalApps) {
-      if (props.searching) {
-        apps = (
-          <p className={classes.AppsMessage}>
-            No apps match your search criteria
-          </p>
-        );
-      } else {
-        apps = (
-          <p className={classes.AppsMessage}>
-            There are no pinned applications. You can pin them from the{' '}
-            <Link to="/applications">/applications</Link> menu
-          </p>
-        );
-      }
+      apps = (
+        <Message>
+          There are no pinned applications. You can pin them from the{' '}
+          <Link to="/applications">/applications</Link> menu
+        </Message>
+      );
     } else {
       apps = (
-        <p className={classes.AppsMessage}>
+        <Message>
           You don't have any applications. You can add a new one from{' '}
           <Link to="/applications">/applications</Link> menu
-        </p>
+        </Message>
       );
     }
   }