From 4b3829894a74ddd670f6ac9599a06d42b4c3b65c Mon Sep 17 00:00:00 2001
From: Jared He <66887902+jaredjhe@users.noreply.github.com>
Date: Wed, 7 Sep 2022 22:15:17 -0400
Subject: [PATCH] Code review fixes

---
 components/Timeline.module.css |  1 -
 components/Timeline.tsx        | 15 ++-------------
 pages/playground.tsx           |  2 +-
 3 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/components/Timeline.module.css b/components/Timeline.module.css
index f3bb6ef..6e46450 100644
--- a/components/Timeline.module.css
+++ b/components/Timeline.module.css
@@ -12,7 +12,6 @@
 
 .timelineSections {
   width: 100%;
-  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
diff --git a/components/Timeline.tsx b/components/Timeline.tsx
index 65e81ac..8abc616 100644
--- a/components/Timeline.tsx
+++ b/components/Timeline.tsx
@@ -9,8 +9,6 @@ interface TimelineData {
 
 interface TimelineProps {
   data: TimelineData[];
-  /** Width of the entire timeline, in pixels. */
-  width: number;
   /** Whether the time is transformed to uppercase. */
   isTimeUppercase?: boolean;
   /** Width of the middle timeline line, in pixels */
@@ -30,7 +28,6 @@ interface TimelineProps {
 
 export default function Timeline({
   data,
-  width,
   isTimeUppercase = true,
   lineWidth = 5,
   outerCircleWidth = 30,
@@ -40,17 +37,9 @@ export default function Timeline({
   gap = 50,
   className,
 }: TimelineProps) {
-  const largerMiddleElemeent =
+  const largerMiddleElement =
     outerCircleWidth > lineWidth ? outerCircleWidth : lineWidth;
-  const requestedWidth =
-    timeWidth + gap + largerMiddleElemeent + gap + textWidth;
-  if (requestedWidth > width) {
-    throw new Error(
-      `<Timeline /> - timeWidth + gap + ${
-        outerCircleWidth > lineWidth ? "outerCircleWidth" : "lineWidth"
-      } + gap + textWidth  (${timeWidth} + ${gap} + ${largerMiddleElemeent} + ${gap} + ${textWidth} = ${requestedWidth}) is larger than width (${width})`
-    );
-  }
+  const width = timeWidth + gap + largerMiddleElement + gap + textWidth;
   if (innerCircleWidth > outerCircleWidth) {
     throw new Error(
       `<Timeline /> - innerCircleWidth (${innerCircleWidth}) is larger than outerCircleWidth (${outerCircleWidth})`
diff --git a/pages/playground.tsx b/pages/playground.tsx
index 895cbc3..f4d8179 100644
--- a/pages/playground.tsx
+++ b/pages/playground.tsx
@@ -68,7 +68,7 @@ export default function Home() {
       <h2>
         <code>{"<Timeline />"}</code>
       </h2>
-      <Timeline data={mockTimelineData} width={800} />
+      <Timeline data={mockTimelineData} />
     </div>
   );
 }