From b429501780706d15fee3ed42fc6707ce8c3f9446 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Sat, 5 Sep 2020 05:05:46 +0100
Subject: [PATCH] Dynamically generate the number of weeks
---
src/components/pages/Timeline/index.tsx | 41 +++++++++++--------
.../pages/Timeline/style.module.scss | 2 -
src/utils/functions.ts | 10 ++++-
3 files changed, 33 insertions(+), 20 deletions(-)
diff --git a/src/components/pages/Timeline/index.tsx b/src/components/pages/Timeline/index.tsx
index f32a92029..9687d1632 100644
--- a/src/components/pages/Timeline/index.tsx
+++ b/src/components/pages/Timeline/index.tsx
@@ -6,6 +6,7 @@ import ModuleHeading from "./components/ModuleHeading";
import WeekHeading from "./components/WeekHeading";
import { modulesList } from "../ModuleList/list";
import classNames from "classnames";
+import { addDays } from "utils/functions";
interface TimelineProps {
initSideBar: () => void;
@@ -23,6 +24,7 @@ type ModuleTracks = {
interface TimelineState {
moduleTracks: ModuleTracks;
}
+
class Timeline extends React.Component<TimelineProps, TimelineState> {
constructor(props: TimelineProps) {
super(props);
@@ -42,18 +44,7 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
this.props.revertSideBar();
}
- addDays(date: Date, days: number) {
- let result = new Date(date);
- result.setDate(result.getDate() + days);
- return result;
- }
-
- render() {
- const termStart = new Date("2020-09-28");
- const activeDay = new Date("2020-10-07");
- const numWeeks = 12;
- const trackHeight = 4.25;
-
+ generateGridItems(numWeeks: number, trackHeight: number) {
let timelineBackgrounds: ReactElement[] = [];
let moduleHeadings: ReactElement[] = [];
@@ -89,6 +80,18 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
}
}
}
+ return [moduleHeadings, timelineBackgrounds];
+ }
+
+ render() {
+ const termStart = new Date("2020-09-28");
+ const activeDay = new Date("2020-10-07");
+ const numWeeks = 11;
+ const trackHeight = 4.25;
+ const [moduleHeadings, timelineBackgrounds] = this.generateGridItems(
+ numWeeks,
+ trackHeight
+ );
return (
<div className={styles.timelineContainer}>
<MyBreadcrumbs />
@@ -96,20 +99,26 @@ class Timeline extends React.Component<TimelineProps, TimelineState> {
<div className={styles.timelineTermSwitcher}>
<TermSwitcher />
</div>
- <div className={styles.timelineWeekRow}>
+ <div
+ className={styles.timelineWeekRow}
+ style={{ gridTemplateColumns: `repeat(${numWeeks}, 15rem)` }}
+ >
{[...Array(numWeeks)].map((_, i) => (
<div className={styles.weekHeading} key={i}>
<WeekHeading
weekNumber={i + 1}
- dateRangeStart={this.addDays(termStart, i * 7)}
- dateRangeEnd={this.addDays(termStart, i * 7 + 4)}
+ dateRangeStart={addDays(termStart, i * 7)}
+ dateRangeEnd={addDays(termStart, i * 7 + 4)}
activeDay={activeDay}
/>
</div>
))}
</div>
<div className={styles.timelineModuleColumn}>{moduleHeadings}</div>
- <div className={styles.timelineWeekBackground}>
+ <div
+ className={styles.timelineWeekBackground}
+ style={{ gridTemplateColumns: `repeat(${numWeeks}, 15rem)` }}
+ >
{timelineBackgrounds}
</div>
</div>
diff --git a/src/components/pages/Timeline/style.module.scss b/src/components/pages/Timeline/style.module.scss
index 231aa360d..d91df054b 100644
--- a/src/components/pages/Timeline/style.module.scss
+++ b/src/components/pages/Timeline/style.module.scss
@@ -69,7 +69,6 @@
grid-area: weeks;
display: grid;
grid-auto-flow: row;
- grid-template-columns: repeat(12, 15rem);
grid-gap: 0.625rem;
padding-right: 0.625rem;
top: 0;
@@ -96,7 +95,6 @@
.timelineWeekBackground {
display: grid;
grid-area: background;
- grid-template-columns: repeat(12, 15rem);
grid-template-rows: auto;
column-gap: 0.625rem;
row-gap: 0;
diff --git a/src/utils/functions.ts b/src/utils/functions.ts
index e9ba8cff7..d7c81256a 100644
--- a/src/utils/functions.ts
+++ b/src/utils/functions.ts
@@ -3,5 +3,11 @@ export function titleCase(string: string) {
for (var i = 0; i < sentence.length; i++) {
sentence[i] = sentence[i][0].toUpperCase() + sentence[i].slice(1);
}
- return sentence.join(' ');
-}
\ No newline at end of file
+ return sentence.join(" ");
+}
+
+export function addDays(date: Date, days: number) {
+ let result = new Date(date);
+ result.setDate(result.getDate() + days);
+ return result;
+}
--
GitLab