Apps actions and reducer

client/src/components/Apps/AppCard/AppCard.tsx

@@ -1,15 +1,31 @@
 import classes from './AppCard.module.css';
 import Icon from '../../UI/Icon/Icon';
 
-const AppCard = (): JSX.Element => {
+import { App } from '../../../interfaces';
+
+interface ComponentProps {
+  app: App;
+}
+
+const AppCard = (props: ComponentProps): JSX.Element => {
+  const iconParser = (mdiName: string): string => {
+    let parsedName = mdiName
+      .split('-')
+      .map((word: string) => `${word[0].toUpperCase()}${word.slice(1)}`)
+      .join('');
+    parsedName = `mdi${parsedName}`;
+
+    return parsedName;
+  }
+
   return (
     <div className={classes.AppCard}>
       <div className={classes.AppCardIcon}>
-        <Icon icon='mdiBookOpenBlankVariant' />
+        <Icon icon={iconParser(props.app.icon)} />
       </div>
       <div className={classes.AppCardDetails}>
-        <h5>plex</h5>
-        <a href="/">plex.example.com</a>
+        <h5>{props.app.name}</h5>
+        <a href="/">{props.app.url}</a>
       </div>
     </div>
   )

client/src/components/Apps/Apps.tsx

@@ -1,32 +1,59 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect } from 'react';
+import { Link } from 'react-router-dom';
 
+// Redux
+import { connect } from 'react-redux';
+import { getApps } from '../../store/actions';
+
+// Typescript
+import { App } from '../../interfaces';
+
+// CSS
 import classes from './Apps.module.css';
 
+// UI
 import { Container } from '../UI/Layout/Layout';
 import Headline from '../UI/Headlines/Headline/Headline';
+import Spinner from '../UI/Spinner/Spinner';
+
+// Subcomponents
 import AppCard from './AppCard/AppCard';
 
-const Apps = (): JSX.Element => {
+interface ComponentProps {
+  getApps: Function;
+  apps: App[];
+  loading: boolean;
+}
+
+const Apps = (props: ComponentProps): JSX.Element => {
+  useEffect(() => {
+    props.getApps()
+  }, [props.getApps]);
+
   return (
-    <div className={classes.Apps}>
-      <AppCard />
-      <AppCard />
-      <AppCard />
-      <AppCard />
-      <AppCard />
-      <AppCard />
-      <AppCard />
-      <AppCard />
-      <AppCard />
-      <AppCard />
-      <AppCard />
-      <AppCard />
-      <AppCard />
-      <AppCard />
-      <AppCard />
-      <AppCard />
-    </div>
+    <Container>
+      <Headline
+        title='Pinned Apps'
+        subtitle={<Link to='/'>Go back</Link>}
+      />
+      <Headline title='All Apps' />
+      <div className={classes.Apps}>
+        {props.loading
+          ? 'loading'
+          : props.apps.map((app: App): JSX.Element => {
+            return <AppCard key={app.id} app={app} />
+          })
+        }
+      </div>
+    </Container>
   )
 }
 
-export default Apps;
+const mapStateToProps = (state: any) => {
+  return {
+    apps: state.app.apps,
+    loading: state.app.loading
+  }
+}
+
+export default connect(mapStateToProps, { getApps })(Apps);

client/src/components/UI/Spinner/Spinner.module.css

@@ -0,0 +1,54 @@
+.Spinner,
+.Spinner:before,
+.Spinner:after {
+  background: var(--color-primary);
+  animation: load1 1s infinite ease-in-out;
+  width: 1em;
+  height: 4em;
+}
+
+.Spinner {
+  color: var(--color-primary);
+  text-indent: -9999em;
+  margin: 88px auto;
+  position: relative;
+  font-size: 11px;
+  transform: translateZ(0);
+  animation-delay: -0.16s;
+}
+
+.Spinner:before,
+.Spinner:after {
+  position: absolute;
+  top: 0;
+  content: '';
+}
+
+.Spinner:before {
+  left: -1.5em;
+  animation-delay: -0.32s;
+}
+
+.Spinner:after {
+  left: 1.5em;
+}
+
+@keyframes load1 {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 0;
+    height: 4em;
+  }
+  40% {
+    box-shadow: 0 -2em;
+    height: 5em;
+  }
+}
+
+.SpinnerWrapper {
+  height: 150px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

client/src/components/UI/Spinner/Spinner.tsx

@@ -0,0 +1,11 @@
+import classes from './Spinner.module.css';
+
+const Spinner = (): JSX.Element => {
+  return (
+    <div className={classes.SpinnerWrapper}>
+      <div className={classes.Spinner}>Loading...</div>
+    </div>
+  )
+}
+
+export default Spinner;