Implement ActivatedAppsList

Author: varunsingh87

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "borum-sphere",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "The web app for Borum users to read, update, delete, and create their account and the Borum products that they're using",
   "private": true,
   "dependencies": {

package.json

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import ChangePassword from "../ChangePassword/changePassword";
+import Email from "../InlineFormElements/Email/email";
+import FullName from "../InlineFormElements/FullName/fullName";
+import Layout from "../Layout/layout";
+import Sidebar from "../Sidebar/sidebar";
+import accountSettings from "./accountSettings.module.css";
+
+export default function AccountSettings() {
+    useEffect(() => {
+        document.title = "Account Settings - Borum Sphere";
+    }, []);
+    
+    return (
+        <Layout sidebar={<Sidebar />}>
+            <main className={accountSettings.container}>
+                <h2>Account Settings</h2>
+                <FullName />
+                <Email />
+                <ChangePassword />
+            </main>
+        </Layout>
+    );
+}

src/AccountSettings/accountSettings.js

@@ -0,0 +1,5 @@
+@media only screen and (min-width: 600px) {
+    .container {
+        width: 500px;
+    }
+}

src/AccountSettings/accountSettings.module.css

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+import Layout from "../Layout/layout";
+import Sidebar from "../Sidebar/sidebar";
+import activatedAppsList from "./activatedAppsList.module.css";
+
+export default function ActivatedAppsList() {
+    const [activatedApps, setActivatedApps] = useState([]);
+
+    useEffect(() => {
+        fetch(`http://localhost:8400/login`, {
+            headers: {
+                authorization: `Basic ${localStorage.getItem('apiKey')}`
+            }
+        }).then(response => {
+            if (response.ok && response.status !== 204) {
+                return response.json();
+            }
+        }).then(response => {
+            setActivatedApps(response.data.filter(item => item.activated));
+        });
+
+        document.title = "Activated Apps - Borum Sphere";
+    }, []);
+
+    return (
+        <Layout sidebar={<Sidebar />}>
+            <main className={activatedAppsList.container}>
+                <h2>Activated Borum Apps</h2>
+                <p>{activatedApps.length} Activated Borum Apps</p>
+                <ul>
+                    {activatedApps.map(item => <li key={item.name.replace(/\s/g, "")}><img width={50} src={item.logoSrc} alt={`${item.name} Logo`} />{item.name}</li>)}
+                </ul>
+            </main>            
+        </Layout>
+
+    );
+}

src/ActivatedAppsList/activatedAppsList.js

@@ -0,0 +1,14 @@
+.container ul {
+    padding-inline-start: 0;
+}
+
+.container li {
+    list-style: none;
+    text-align: left;
+    display: flex;
+    align-items: center;
+}
+
+.container li img {
+    margin-right: 1em;
+}

src/ActivatedAppsList/activatedAppsList.module.css

@@ -6,6 +6,8 @@ import { Route, BrowserRouter, Switch } from "react-router-dom";
 import Dashboard from "./Dashboard/dashboard";
 import ForgotPassword from "./ForgotPassword/forgotPassword";
 import ResetPassword from "./ResetPassword/resetPassword";
+import AccountSettings from "./AccountSettings/accountSettings";
+import ActivatedAppsList from "./ActivatedAppsList/activatedAppsList";
 
 function App() {
 	return (
@@ -14,6 +16,12 @@ function App() {
 				<Route exact path="/">
 					<Dashboard />
 				</Route>
+				<Route path="/account">
+					<AccountSettings />
+				</Route>
+				<Route path="/apps">
+					<ActivatedAppsList />
+				</Route>
 				<Route path="/signup">
 					<Register />
 				</Route>

src/App.js

@@ -1,7 +1,6 @@
 import { Link, useHistory } from "react-router-dom";
-import ChangePassword from "../ChangePassword/changePassword";
-import Email from "../InlineFormElements/Email/email";
-import FullName from "../InlineFormElements/FullName/fullName";
+import AccountSettings from "../AccountSettings/accountSettings";
+import ActivatedApps from "../ActivatedAppsList/activatedAppsList";
 import Layout from "../Layout/layout";
 import dashboard from "./dashboard.module.css";
 
@@ -14,20 +13,16 @@ export default function Dashboard() {
 
 	return (
 		<Layout>
-			<article>
-				<h1>Borum Sphere Dashboard</h1>
-				<FullName />
-				<Email />
-				<ChangePassword />
-				<div className={dashboard.linkButtons}>
+			<AccountSettings />
+			<ActivatedApps />
+			<div className={dashboard.linkButtons}>
 					<button>
 						<Link to="/signup">Create new Borum Account</Link>
 					</button>
 					<button className={dashboard.signOut}>
 						<Link to="/logout">Log Out</Link>
 					</button>
 				</div>
-			</article>
 		</Layout>
 	);
 }

src/Dashboard/dashboard.js

@@ -1,15 +1,15 @@
 .linkButtons {
     display: flex;
-    flex-direction: column;
+    align-items: center;
 }
 
 .linkButtons button {
     background: white;
-    font-size: 2em;
+    font-size: 1em;
     border: 1px solid blue;
-    margin-bottom: 1em;
+    margin-right: 1em;
     padding: 1em;
-    border-radius: 25px;
+    border-radius: 10px;
 }
 
 .linkButtons button:hover {

src/Dashboard/dashboard.module.css

@@ -3,7 +3,8 @@ import layout from "./layout.module.css";
 export default function Layout(props) {
   return (
     <div className={layout.container}>
-      <section className="App">
+      <nav className={layout.sidebar}>{props.sidebar}</nav>
+      <section className={layout.app}>
         {props.children}
       </section>