From 2155161887a1961075f8da9653e13793118876cb Mon Sep 17 00:00:00 2001
From: Tianyi LIANG <tianyi@igem.org>
Date: Sat, 18 May 2024 01:05:00 +0800
Subject: [PATCH] refactor: code cleanup
---
src/containers/App/App.tsx | 118 +++++++++++-------------------------
src/pages.ts | 44 ++++++++++++++
src/utils/getPathMapping.ts | 13 +++-
3 files changed, 90 insertions(+), 85 deletions(-)
diff --git a/src/containers/App/App.tsx b/src/containers/App/App.tsx
index 7e0b2b3..aef8396 100644
--- a/src/containers/App/App.tsx
+++ b/src/containers/App/App.tsx
@@ -3,28 +3,6 @@ import "bootstrap/dist/css/bootstrap.min.css";
import { Route, Routes } from "react-router-dom";
import { Footer, Header, Navbar, NotFound } from "../../components";
import { getPathMapping, stringToSlug, useDocumentTitle } from "../../utils";
-import {
- AttributionsPage,
- ContributionPage,
- DescriptionPage,
- EducationPage,
- EngineeringPage,
- EntrepreneurshipPage,
- ExperimentsPage,
- HardwarePage,
- HomePage,
- HumanPracticesPage,
- InclusivityPage,
- MeasurementPage,
- ModelPage,
- NotebookPage,
- PlantPage,
- ResultsPage,
- SafetyPage,
- SoftwarePage,
- SustainablePage,
- TeamPage,
-} from "../../contents";
const App = () => {
const pathMapping = getPathMapping();
@@ -40,70 +18,46 @@ const App = () => {
return (
<>
- {/* Navigation */}
- <Navbar />
+ <>
+ {/* Navigation */}
+ <Navbar />
- {/* Header */}
- <Routes>
- {Object.keys(pathMapping).map((path) => {
- const title = pathMapping[path].title;
- const lead = pathMapping[path].lead;
- return (
- <Route
- key={path}
- path={path}
- element={<Header title={title || ""} lead={lead || ""} />}
- />
- );
- })}
- <Route
- path="*"
- element={
- <Header
- title="Not Found"
- lead="The page you are looking for does not exist."
- />
- }
- />
- </Routes>
-
- {/* Page Content */}
- <div className="container">
+ {/* Header and PageContent */}
<Routes>
- {/* Home */}
- <Route path="/" element={<HomePage />} />
- {/* Team */}
- <Route path="/team" element={<TeamPage />} />
- <Route path="/attributions" element={<AttributionsPage />} />
- {/* Project */}
- <Route path="/contribution" element={<ContributionPage />} />
- <Route path="/description" element={<DescriptionPage />} />
- <Route path="/engineering" element={<EngineeringPage />} />
- <Route path="/experiments" element={<ExperimentsPage />} />
- <Route path="/notebook" element={<NotebookPage />} />
- <Route path="/results" element={<ResultsPage />} />
- {/* Safety */}
- <Route path="/safety" element={<SafetyPage />} />
- {/* Human Practices */}
- <Route path="/human-practices" element={<HumanPracticesPage />} />
- {/* Awards */}
- <Route path="/education" element={<EducationPage />} />
- <Route path="/entrepreneurship" element={<EntrepreneurshipPage />} />
- <Route path="/hardware" element={<HardwarePage />} />
- <Route path="/inclusivity" element={<InclusivityPage />} />
- <Route path="/measurement" element={<MeasurementPage />} />
- <Route path="/model" element={<ModelPage />} />
- <Route path="/plant" element={<PlantPage />} />
- <Route path="/software" element={<SoftwarePage />} />
- <Route path="/sustainable" element={<SustainablePage />} />
- {/* 404 */}
- <Route path="*" element={<NotFound />} />
+ {Object.entries(pathMapping).map(
+ ([path, { title, lead, component: Component }]) => (
+ <Route
+ key={path}
+ path={path}
+ element={
+ <>
+ <Header title={title || ""} lead={lead || ""} />
+ <div className="container">
+ <Component />
+ </div>
+ </>
+ }
+ />
+ ),
+ )}
+ <Route
+ path="*"
+ element={
+ <>
+ <Header
+ title="Not Found"
+ lead="The page you are looking for does not exist."
+ />
+ <NotFound />
+ </>
+ }
+ />
</Routes>
- </div>
- {/* Footer */}
- {/* MUST mention license AND have a link to team wiki's repository on gitlab.igem.org */}
- <Footer />
+ {/* Footer */}
+ {/* MUST mention license AND have a link to team wiki's repository on gitlab.igem.org */}
+ <Footer />
+ </>
</>
);
};
diff --git a/src/pages.ts b/src/pages.ts
index e425ee3..453226a 100644
--- a/src/pages.ts
+++ b/src/pages.ts
@@ -1,3 +1,26 @@
+import {
+ AttributionsPage,
+ ContributionPage,
+ DescriptionPage,
+ EngineeringPage,
+ ExperimentsPage,
+ HomePage,
+ HumanPracticesPage,
+ NotebookPage,
+ ResultsPage,
+ SafetyPage,
+ TeamPage,
+ EducationPage,
+ EntrepreneurshipPage,
+ HardwarePage,
+ InclusivityPage,
+ MeasurementPage,
+ ModelPage,
+ PlantPage,
+ SoftwarePage,
+ SustainablePage,
+} from "./contents";
+
interface Base {
name: string | undefined;
}
@@ -11,6 +34,7 @@ class Page implements Base {
name: string | undefined;
title: string | undefined;
path: string | undefined;
+ component: React.FC | undefined;
lead: string | undefined;
}
@@ -19,6 +43,7 @@ const Pages: (Page | Folder)[] = [
name: "Home",
title: "Home",
path: "/",
+ component: HomePage,
lead: "Welcome to iGEM 2024! Your team has been approved and you are ready to start the iGEM season!",
},
{
@@ -28,12 +53,14 @@ const Pages: (Page | Folder)[] = [
name: "Team",
title: "Team",
path: "/team",
+ component: TeamPage,
lead: "On this page you can introduce your team members, instructors, and advisors.",
},
{
name: "Attributions",
title: "Attributions",
path: "/attributions",
+ component: AttributionsPage,
lead: "This page must show the attribution form of your project. This includes the work done by each of the student members on your team and any work that was done by people outside of your team, including the host labs, advisors, instructors, and individuals not on the team roster. This requirement is not about literature references - these can and should be displayed throughout your wiki.",
},
],
@@ -45,36 +72,42 @@ const Pages: (Page | Folder)[] = [
name: "Contribution",
title: "Contribution",
path: "/contribution",
+ component: ContributionPage,
lead: "Make a useful contribution for future iGEM teams. Use this page to document that contribution.",
},
{
name: "Description",
title: "Project Description",
path: "/description",
+ component: DescriptionPage,
lead: "Describe how and why you chose your iGEM project.",
},
{
name: "Engineering",
title: "Engineering Success",
path: "/engineering",
+ component: EngineeringPage,
lead: "Demonstrate engineering success in a part of your project by going through at least one iteration of the engineering design cycle.",
},
{
name: "Experiments",
title: "Experiments",
path: "/experiments",
+ component: ExperimentsPage,
lead: "Describe the research, experiments, and protocols you used in your iGEM project.",
},
{
name: "Notebook",
title: "Notebook",
path: "/notebook",
+ component: NotebookPage,
lead: "Document the dates you worked on your project. This should be a detailed account of the work done each day for your project.",
},
{
name: "Results",
title: "Results",
path: "/results",
+ component: ResultsPage,
lead: "You can describe the results of your project and your future plans here.",
},
],
@@ -83,12 +116,14 @@ const Pages: (Page | Folder)[] = [
name: "Safety",
title: "Safety",
path: "/safety",
+ component: SafetyPage,
lead: "Describe all the safety issues of your project.",
},
{
name: "Human Practices",
title: "Human Practices",
path: "/human-practices",
+ component: HumanPracticesPage,
lead: "We ask every team to think deeply and creatively about whether their project is responsible and good for the world. Consider how the world affects your work and how your work affects the world.",
},
{
@@ -98,54 +133,63 @@ const Pages: (Page | Folder)[] = [
name: "Education",
title: "Education",
path: "/education",
+ component: EducationPage,
lead: "Innovative educational tools and outreach activities have the ability to establish a two-way dialogue with new communities by discussing public values and the science behind synthetic biology.",
},
{
name: "Entrepreneurship",
title: "Entrepreneurship",
path: "/entrepreneurship",
+ component: EntrepreneurshipPage,
lead: "The entrepreneurship prize recognizes exceptional effort to build a business case and commercialize an iGEM project.",
},
{
name: "Hardware",
title: "Hardware",
path: "/hardware",
+ component: HardwarePage,
lead: "Hardware in iGEM should make synthetic biology based on standard parts easier, faster, better, or more accessible to our community.",
},
{
name: "Inclusivity",
title: "Diversity and Inclusion",
path: "/inclusivity",
+ component: InclusivityPage,
lead: "Every individual, regardless of background or experience, should have an equal opportunity to engage with scientific knowledge and technological development.",
},
{
name: "Measurement",
title: "Measurement",
path: "/measurement",
+ component: MeasurementPage,
lead: "Synthetic Biology needs great measurement approaches for characterizing parts, and efficient new methods for characterizing many parts at once. Describe your measurement approaches on this page.",
},
{
name: "Model",
title: "Model",
path: "/model",
+ component: ModelPage,
lead: "Explain your model's assumptions, data, parameters, and results in a way that anyone could understand.",
},
{
name: "Plant",
title: "Plant",
path: "/plant",
+ component: PlantPage,
lead: "This award is designed to celebrate exemplary work done in plant synthetic biology.",
},
{
name: "Software",
title: "Software",
path: "/software",
+ component: SoftwarePage,
lead: "Software in iGEM should make synthetic biology based on standard parts easier, faster, better or more accessible to our community.",
},
{
name: "Sustainable",
title: "Sustainable Development Goals",
path: "/sustainable",
+ component: SustainablePage,
lead: "Describe how you have evaluated your project ideas against one or more of the SDGs.",
},
],
diff --git a/src/utils/getPathMapping.ts b/src/utils/getPathMapping.ts
index b8ea3ce..0c0a6c2 100644
--- a/src/utils/getPathMapping.ts
+++ b/src/utils/getPathMapping.ts
@@ -5,17 +5,24 @@ const getPathMapping = () => {
[key: string]: {
name: string | undefined;
title: string | undefined;
+ component: React.FC;
lead: string | undefined;
};
}>((map, item) => {
- if ("path" in item && item.path) {
- map[item.path] = { name: item.name, title: item.title, lead: item.lead };
+ if ("path" in item && item.path && item.component) {
+ map[item.path] = {
+ name: item.name,
+ title: item.title,
+ component: item.component,
+ lead: item.lead,
+ };
} else if ("folder" in item && item.folder) {
item.folder.forEach((page) => {
- if (page.path) {
+ if (page.path && page.component) {
map[page.path] = {
name: page.name,
title: page.title,
+ component: page.component,
lead: page.lead,
};
}
--
GitLab