Skip to content
Snippets Groups Projects
Commit 0be748c9 authored by danieldeng2's avatar danieldeng2
Browse files

Refactor code with props

parent 66906ce6
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 80 additions and 155 deletions
frontend/src/components/App.tsx
+ 23
− 19
View file @ 0be748c9
import React from "react"; import React from "react";
import "./App.scss"; import "./App.scss";
import ExampleCourses from "./pages/ExampleCourses"; import ExamplePage from "./templates/ExamplePage";
import ExampleExams from "./pages/ExampleExams";
import ExampleOther from "./pages/ExampleOther";
import ExampleTimetable from "./pages/ExampleTimetable";
import TopBar from "./organisms/TopBar/TopBar"; import TopBar from "./organisms/TopBar/TopBar";
import BottomBar from "./organisms/BottomBar/BottomBar"; import BottomBar from "./organisms/BottomBar/BottomBar";
import { Redirect, Switch, Route } from "react-router-dom"; import { Redirect, Switch, Route } from "react-router-dom";
import {
faBookOpen,
faEllipsisH,
faCalendarWeek,
faChalkboardTeacher,
} from "@fortawesome/free-solid-svg-icons";
const App: React.FC = () => { const App: React.FC = () => {
const horizontalBarPages = [
{ name: "Courses", path: "/courses", icon: faChalkboardTeacher },
{ name: "Timetable", path: "/timetable", icon: faCalendarWeek },
{ name: "Exams", path: "/exams", icon: faBookOpen },
{ name: "Other", path: "/other", icon: faEllipsisH },
];
const topBarRoutes = horizontalBarPages.map(({ name, path }) =>
<Route path={path} key={name}>
<ExamplePage name={name} />
</Route>
);
return ( return (
<> <>
<TopBar /> <TopBar pages={horizontalBarPages}/>
<Switch> <Switch>
<Route exact path="/" render={() => <Redirect to="/courses" />} /> <Route exact path="/" render={() => <Redirect to="/courses" />} />
{topBarRoutes}
<Route path="/courses">
<ExampleCourses />
</Route>
<Route path="/timetable">
<ExampleTimetable />
</Route>
<Route path="/exams">
<ExampleExams />
</Route>
<Route path="/other">
<ExampleOther />
</Route>
</Switch> </Switch>
<BottomBar /> <BottomBar pages={horizontalBarPages}/>
</> </>
); );
}; };
......
frontend/src/components/organisms/BottomBar/BottomBar.tsx
+ 28
− 16
View file @ 0be748c9
...@@ -8,33 +8,45 @@ import { ...@@ -8,33 +8,45 @@ import {
faEllipsisH, faEllipsisH,
faCalendarWeek, faCalendarWeek,
faChalkboardTeacher, faChalkboardTeacher,
IconDefinition,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { NavLink, Link } from "react-router-dom";
const BottomBar: React.FC = () => { export interface BottomBarProps {
pages: {
name: string;
path: string;
icon: IconDefinition;
}[];
}
const BottomBar: React.FC<BottomBarProps> = ({pages}: BottomBarProps) => {
const BottomBarItems = pages.map(({ name, path, icon }) => (
<Button
active
as={Link}
// activeClassName="button-active"
to={path}
id={"bottom-" + name}
key={name}
>
<div className="button-holder">
<FontAwesomeIcon icon={icon} size="lg" />
</div>
</Button>
));
return ( return (
<Navbar className="bottom-bar footer"> <Navbar className="bottom-bar footer">
<ButtonGroup aria-label="Basic example" className="bottom-bar-buttons"> <ButtonGroup aria-label="Basic example" className="bottom-bar-buttons">
{BottomBarItems}
<Button active className="button-active" id="bottom-courses"> <Button active className="button-active" id="bottom-courses">
<div className="button-holder"> <div className="button-holder">
<FontAwesomeIcon icon={faChalkboardTeacher} size="lg" /> <FontAwesomeIcon icon={faChalkboardTeacher} size="lg" />
</div> </div>
</Button> </Button>
<Button className="button-inactive" id="bottom-timetable">
<div className="button-holder">
<FontAwesomeIcon icon={faCalendarWeek} size="lg" />
</div>
</Button>
<Button className="button-inactive" id="bottom-exams">
<div className="button-holder">
<FontAwesomeIcon icon={faBookOpen} size="lg" />
</div>
</Button>
<Button className="button-inactive" id="bottom-other">
<div className="button-holder">
<FontAwesomeIcon icon={faEllipsisH} size="lg" />
</div>
</Button>
</ButtonGroup> </ButtonGroup>
</Navbar> </Navbar>
); );
......
frontend/src/components/organisms/TopBar/TopBar.tsx
+ 22
− 43
View file @ 0be748c9
...@@ -7,7 +7,27 @@ import userPic from "images/user.png"; ...@@ -7,7 +7,27 @@ import userPic from "images/user.png";
import "./style.scss"; import "./style.scss";
import { Link, NavLink } from "react-router-dom"; import { Link, NavLink } from "react-router-dom";
const TopBar: React.FC = () => { export interface TopBarProps {
pages: {
name: string;
path: string;
}[];
}
const TopBar: React.FC<TopBarProps> = ({ pages }: TopBarProps) => {
const NavItems = pages.map(({ name, path }) => (
<Nav.Item key={name}>
<Nav.Link
as={NavLink}
activeClassName="active"
to={path}
className="page-button"
>
{name}
</Nav.Link>
</Nav.Item>
));
return ( return (
<Navbar className="top-bar" sticky="top" expand="lg" variant="light"> <Navbar className="top-bar" sticky="top" expand="lg" variant="light">
<Container fluid> <Container fluid>
...@@ -23,48 +43,7 @@ const TopBar: React.FC = () => { ...@@ -23,48 +43,7 @@ const TopBar: React.FC = () => {
</Navbar.Brand> </Navbar.Brand>
<Navbar className="page-button-group m-auto" id="responsive-navbar-nav"> <Navbar className="page-button-group m-auto" id="responsive-navbar-nav">
<Nav variant="pills" defaultActiveKey="/timetable"> <Nav variant="pills">{NavItems}</Nav>
<Nav.Item>
<Nav.Link
as={NavLink}
activeClassName="active"
to="/courses"
className="page-button"
>
Courses
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
as={NavLink}
activeClassName="active"
to="/timetable"
className="page-button"
>
Timetable
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
as={NavLink}
activeClassName="active"
to="/exams"
className="page-button"
>
Exams
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link
as={NavLink}
activeClassName="active"
to="/other"
className="page-button"
>
Other
</Nav.Link>
</Nav.Item>
</Nav>
</Navbar> </Navbar>
<img <img
......
frontend/src/components/pages/ExampleExams.tsx deleted 100644 → 0
+ 0
− 25
View file @ 66906ce6
import React from "react";
import Jumbotron from "react-bootstrap/Jumbotron";
import Container from "react-bootstrap/Container";
import ButtonsShowcase from "components/molecules/Buttons";
import ToastsShowcase from "components/molecules/Toasts";
const ExamplePage: React.FC = () => {
return (
<Container className="p-3">
<Jumbotron>
<h1 className="header">
Welcome To Exams
</h1>
</Jumbotron>
<h2>Buttons</h2>
<ButtonsShowcase />
<h2>Toasts</h2>
<ToastsShowcase />
</Container>
);
};
export default ExamplePage;
frontend/src/components/pages/ExampleOther.tsx deleted 100644 → 0
+ 0
− 25
View file @ 66906ce6
import React from "react";
import Jumbotron from "react-bootstrap/Jumbotron";
import Container from "react-bootstrap/Container";
import ButtonsShowcase from "components/molecules/Buttons";
import ToastsShowcase from "components/molecules/Toasts";
const ExampleCourses: React.FC = () => {
return (
<Container className="p-3">
<Jumbotron>
<h1 className="header">
Welcome To Other
</h1>
</Jumbotron>
<h2>Buttons</h2>
<ButtonsShowcase />
<h2>Toasts</h2>
<ToastsShowcase />
</Container>
);
};
export default ExampleCourses;
frontend/src/components/pages/ExampleTimetable.tsx deleted 100644 → 0
+ 0
− 25
View file @ 66906ce6
import React from "react";
import Jumbotron from "react-bootstrap/Jumbotron";
import Container from "react-bootstrap/Container";
import ButtonsShowcase from "components/molecules/Buttons";
import ToastsShowcase from "components/molecules/Toasts";
const ExamplePage: React.FC = () => {
return (
<Container className="p-3">
<Jumbotron>
<h1 className="header">
Welcome To Timetable
</h1>
</Jumbotron>
<h2>Buttons</h2>
<ButtonsShowcase />
<h2>Toasts</h2>
<ToastsShowcase />
</Container>
);
};
export default ExamplePage;
frontend/src/components/pages/ExampleCourses.tsx → frontend/src/components/templates/ExamplePage.tsx
+ 7
− 2
View file @ 0be748c9
...@@ -6,12 +6,17 @@ import Container from "react-bootstrap/Container"; ...@@ -6,12 +6,17 @@ import Container from "react-bootstrap/Container";
import ButtonsShowcase from "components/molecules/Buttons"; import ButtonsShowcase from "components/molecules/Buttons";
import ToastsShowcase from "components/molecules/Toasts"; import ToastsShowcase from "components/molecules/Toasts";
const ExamplePage: React.FC = () => { export interface ExamplePageProps {
name: string;
}
const ExamplePage: React.FC<ExamplePageProps> = ({name} : ExamplePageProps) => {
return ( return (
<Container className="p-3"> <Container className="p-3">
<Jumbotron> <Jumbotron>
<h1 className="header"> <h1 className="header">
Welcome To Courses Welcome To {name}
</h1> </h1>
</Jumbotron> </Jumbotron>
<h2>Buttons</h2> <h2>Buttons</h2>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment