Cleaned up Apps component. Delete App redux action. Apps edit mode with functionality do delete and pin apps

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

@@ -0,0 +1,62 @@
+.TableContainer {
+  width: 100%;
+}
+
+.Table {
+  border-collapse: collapse;
+  width: 100%;
+  text-align: left;
+  font-size: 16px;
+  color: var(--color-primary);
+}
+
+.Table th,
+.Table td {
+  /* border: 1px solid orange; */
+  padding: 10px;
+}
+
+/* Head */
+
+.Table th {
+  --header-radius: 4px;
+  background-color: var(--color-primary);
+  color: var(--color-background);
+}
+
+.Table th:first-child {
+  border-top-left-radius: var(--header-radius);
+  border-bottom-left-radius: var(--header-radius);
+}
+
+.Table th:last-child {
+  border-top-right-radius: var(--header-radius);
+  border-bottom-right-radius: var(--header-radius);
+}
+
+/* Body */
+
+.Table td {
+  /* opacity: 0.5; */
+  transition: all 0.2s;
+}
+
+/* .Table td:hover {
+  opacity: 1;
+} */
+
+/* Actions */
+
+.TableActions {
+  display: flex;
+  align-items: center;
+}
+
+
+.TableAction {
+  width: 22px;
+}
+
+.TableAction:hover {
+  cursor: pointer;
+}

client/src/components/Apps/AppTable/AppTable.tsx

@@ -0,0 +1,67 @@
+import { connect } from 'react-redux';
+import { App, GlobalState } from '../../../interfaces';
+import { pinApp, deleteApp } from '../../../store/actions';
+
+import classes from './AppTable.module.css';
+import Icon from '../../UI/Icon/Icon';
+
+interface ComponentProps {
+  apps: App[];
+  pinApp: (id: number, isPinned: boolean) => void;
+  deleteApp: (id: number) => void;
+}
+
+const AppTable = (props: ComponentProps): JSX.Element => {
+  const deleteAppHandler = (app: App): void => {
+    const proceed = window.confirm(`Are you sure you want to delete ${app.name} at ${app.url} ?`);
+
+    if (proceed) {
+      props.deleteApp(app.id);
+    }
+  }
+
+  return (
+    <div className={classes.TableContainer}>
+      <table className={classes.Table}>
+        <thead className={classes.TableHead}>
+          <tr>
+            <th>Name</th>
+            <th>Url</th>
+            <th>Icon</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody className={classes.TableBody}>
+          {props.apps.map((app: App): JSX.Element => {
+            return (
+              <tr key={app.id}>
+                <td>{app.name}</td>
+                <td>{app.url}</td>
+                <td>{app.icon}</td>
+                <td className={classes.TableActions}>
+                  <div
+                    className={classes.TableAction}
+                    onClick={() => deleteAppHandler(app)}>
+                    <Icon icon='mdiDelete' />
+                  </div>
+                  <div className={classes.TableAction}><Icon icon='mdiPencil' /></div>
+                  <div className={classes.TableAction} onClick={() => props.pinApp(app.id, app.isPinned)}>
+                    {app.isPinned? <Icon icon='mdiPinOff' color='var(--color-accent)' /> : <Icon icon='mdiPin' />}
+                  </div>
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+const mapStateToProps = (state: GlobalState) => {
+  return {
+    apps: state.app.apps
+  }
+}
+
+export default connect(mapStateToProps, { pinApp, deleteApp })(AppTable);