Skip to content

Commit b99d6ea

Browse files
varunsingh87varunsingh87
committed
Implement sidebar
1 parent a05701e commit b99d6ea

16 files changed

Lines changed: 159 additions & 156 deletions

‎.prettierrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
{
2+
}

‎src/AccountSettings/accountSettings.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import { useEffect } from "react";
22
import ChangePassword from "../ChangePassword/changePassword";
33
import Email from "../InlineFormElements/Email/email";
44
import FullName from "../InlineFormElements/FullName/fullName";
5-
import Layout from "../Layout/layout";
6-
import Sidebar from "../Sidebar/sidebar";
5+
import LoggedInLayout from "../Layout/loggedInLayout";
76
import accountSettings from "./accountSettings.module.css";
87

98
export default function AccountSettings() {
@@ -12,13 +11,13 @@ export default function AccountSettings() {
1211
}, []);
1312

1413
return (
15-
<Layout sidebar={<Sidebar />}>
14+
<LoggedInLayout>
1615
<main className={accountSettings.container}>
1716
<h2>Account Settings</h2>
1817
<FullName />
1918
<Email />
2019
<ChangePassword />
2120
</main>
22-
</Layout>
21+
</LoggedInLayout>
2322
);
2423
}

‎src/ActivatedAppsList/activatedAppsList.js‎

Lines changed: 37 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,44 @@
11
import { useEffect, useState } from "react";
2-
import Layout from "../Layout/layout";
3-
import Sidebar from "../Sidebar/sidebar";
2+
import LoggedInLayout from "../Layout/loggedInLayout";
43
import activatedAppsList from "./activatedAppsList.module.css";
54

65
export default function ActivatedAppsList() {
7-
const [activatedApps, setActivatedApps] = useState([]);
6+
const [activatedApps, setActivatedApps] = useState(null);
87

9-
useEffect(() => {
10-
fetch(`http://localhost:8400/login`, {
11-
headers: {
12-
authorization: `Basic ${localStorage.getItem('apiKey')}`
13-
}
14-
}).then(response => {
15-
if (response.ok && response.status !== 204) {
16-
return response.json();
17-
}
18-
}).then(response => {
19-
setActivatedApps(response.data.filter(item => item.activated));
20-
});
8+
useEffect(() => {
9+
fetch(`http://localhost:8400/login`, {
10+
headers: {
11+
authorization: `Basic ${localStorage.getItem("apiKey")}`,
12+
},
13+
})
14+
.then((response) => {
15+
if (response.ok && response.status !== 204) {
16+
return response.json();
17+
}
18+
})
19+
.then((response) => {
20+
setActivatedApps(response.data.filter((item) => item.activated));
21+
});
2122

22-
document.title = "Activated Apps - Borum Sphere";
23-
}, []);
23+
document.title = "Activated Apps - Borum Sphere";
24+
}, []);
2425

25-
return (
26-
<Layout sidebar={<Sidebar />}>
27-
<main className={activatedAppsList.container}>
28-
<h2>Activated Borum Apps</h2>
29-
<p>{activatedApps.length} Activated Borum Apps</p>
30-
<ul>
31-
{activatedApps.map(item => <li key={item.name.replace(/\s/g, "")}><img width={50} src={item.logoSrc} alt={`${item.name} Logo`} />{item.name}</li>)}
32-
</ul>
33-
</main>
34-
</Layout>
35-
36-
);
37-
}
26+
return (
27+
<LoggedInLayout>
28+
<main className={activatedAppsList.container}>
29+
<h2>Activated Borum Apps</h2>
30+
<p>{activatedApps?.length || ''} Activated Borum Apps</p>
31+
<ul>
32+
{activatedApps?.map((item) => (
33+
<li key={item.name.replace(/\s/g, "")}>
34+
<a href={item.webLink} target="_blank" rel="noreferrer">
35+
<img width={50} src={item.logoSrc} alt={`${item.name} Logo`} />
36+
{item.name}
37+
</a>
38+
</li>
39+
)) || 'Loading...'}
40+
</ul>
41+
</main>
42+
</LoggedInLayout>
43+
);
44+
}

‎src/ActivatedAppsList/activatedAppsList.module.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
.container li {
66
list-style: none;
77
text-align: left;
8+
}
9+
10+
.container li a {
811
display: flex;
912
align-items: center;
1013
}

‎src/App.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import Login from "./Login/login";
33
import Logout from "./Logout/logout";
44
import "./App.css";
55
import { Route, BrowserRouter, Switch } from "react-router-dom";
6-
import Dashboard from "./Dashboard/dashboard";
76
import ForgotPassword from "./ForgotPassword/forgotPassword";
87
import ResetPassword from "./ResetPassword/resetPassword";
98
import AccountSettings from "./AccountSettings/accountSettings";
@@ -14,7 +13,7 @@ function App() {
1413
<BrowserRouter>
1514
<Switch>
1615
<Route exact path="/">
17-
<Dashboard />
16+
<AccountSettings />
1817
</Route>
1918
<Route path="/account">
2019
<AccountSettings />

‎src/Dashboard/dashboard.js‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎src/Dashboard/dashboard.module.css‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎src/Footer/footer.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import footer from "./footer.module.css";
2+
3+
export default function Footer() {
4+
return (
5+
<footer className={footer.footer}>
6+
<a
7+
className={footer.vercelText}
8+
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
9+
target="_blank"
10+
rel="noopener noreferrer"
11+
>
12+
Powered by{" "}
13+
<img src="/vercel.svg" alt="Vercel Logo" className={footer.logo} />
14+
</a>
15+
<p>&copy; 2021 Borum Tech</p>
16+
<ul className={footer.legalLinks}>
17+
{/* <li className={layout.privacyPolicy}>
18+
<Link to="/legal/PrivacyPolicy">
19+
<a>Privacy Policy</a>
20+
</Link>
21+
</li> */}
22+
</ul>
23+
</footer>
24+
);
25+
}

‎src/Footer/footer.module.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.footer {
2+
grid-row: 3;
3+
grid-column: 1 / -1;
4+
padding: 5px 0.5em 0 0.5em;
5+
align-self: flex-end;
6+
min-height: 70px;
7+
width: 100%;
8+
border-top: 1px solid #eaeaea;
9+
display: flex;
10+
flex-wrap: wrap;
11+
justify-content: space-between;
12+
align-items: center;
13+
}
14+
15+
.footer img {
16+
margin-left: 0.5rem;
17+
}
18+
19+
.vercelText {
20+
min-width: 200px;
21+
}
22+
23+
.logo {
24+
height: 1em;
25+
}
26+
27+
.legalLinks {
28+
list-style-type: none;
29+
}

‎src/Layout/layout.js‎

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,14 @@
1+
import Footer from "../Footer/footer";
12
import layout from "./layout.module.css";
23

34
export default function Layout(props) {
45
return (
56
<div className={layout.container}>
6-
<nav className={layout.sidebar}>{props.sidebar}</nav>
7-
<section className={layout.app}>
7+
<section className="App">
88
{props.children}
99
</section>
1010

11-
<footer className={layout.footer}>
12-
<a
13-
className={layout.vercelText}
14-
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Powered by{" "}
19-
<img src="/vercel.svg" alt="Vercel Logo" className={layout.logo} />
20-
</a>
21-
<p>&copy; 2021 Borum Tech</p>
22-
<ul className={layout.legalLinks}>
23-
{/* <li className={layout.privacyPolicy}>
24-
<Link to="/legal/PrivacyPolicy">
25-
<a>Privacy Policy</a>
26-
</Link>
27-
</li> */}
28-
</ul>
29-
</footer>
11+
<Footer />
3012
</div>
3113
);
3214
}

0 commit comments

Comments
 (0)