9.15

Author: dhatGuy

part9/courseinfo-ts/src/App.tsx

@@ -2,20 +2,41 @@ import React from "react";
 import Content from "./components/Content";
 import Header from "./components/Header";
 import Total from "./components/Total";
+import { CoursePart } from "./types";
 const App = () => {
   const courseName = "Half Stack application development";
-  const courseParts = [
+  const courseParts: CoursePart[] = [
     {
       name: "Fundamentals",
       exerciseCount: 10,
+      description: "This is the leisured course part",
+      type: "normal",
+    },
+    {
+      name: "Advanced",
+      exerciseCount: 7,
+      description: "This is the harded course part",
+      type: "normal",
     },
     {
       name: "Using props to pass data",
       exerciseCount: 7,
+      groupProjectCount: 3,
+      type: "groupProject",
     },
     {
       name: "Deeper type usage",
       exerciseCount: 14,
+      description: "Confusing description",
+      exerciseSubmissionLink: "https://fake-exercise-submit.made-up-url.dev",
+      type: "submission",
+    },
+    {
+      name: "Backend development",
+      exerciseCount: 21,
+      description: "Typing the backend",
+      requirements: ["nodejs", "jest"],
+      type: "special",
     },
   ];
 

part9/courseinfo-ts/src/components/Content.tsx

@@ -1,12 +1,16 @@
 import React from "react";
-import { ContentProps } from "../types";
+import { CoursePart } from "../types";
+import Part from "./Part";
 
-const Content = ({ courseParts }: ContentProps) => {
+const Content = ({ courseParts }: { courseParts: CoursePart[] }) => {
   return (
     <>
       {courseParts.map((coursePart) => (
         <p key={coursePart.name}>
-          {coursePart.name} {coursePart.exerciseCount}
+          <b>
+            {coursePart.name} {coursePart.exerciseCount}
+          </b>
+          <Part coursePart={coursePart} />
         </p>
       ))}
     </>

part9/courseinfo-ts/src/components/Part.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { CoursePart } from "../types";
+
+/**
+ * Helper function for exhaustive type checking
+ */
+const assertNever = (value: never): never => {
+  throw new Error(
+    `Unhandled discriminated union member: ${JSON.stringify(value)}`
+  );
+};
+
+const Part = ({ coursePart }: { coursePart: CoursePart }) => {
+  const render = (part: CoursePart) => {
+    switch (part.type) {
+      case "normal":
+        return (
+          <p>
+            <i>{part.description} </i>
+          </p>
+        );
+      case "groupProject":
+        return <p> project exercises {part.groupProjectCount}</p>;
+      case "submission":
+        return (
+          <p>
+            <i>{part.description} </i>
+            <p>submit to {part.exerciseSubmissionLink}</p>
+          </p>
+        );
+      case "special":
+        return (
+          <p>
+            <i>{part.description} </i>
+            <p>
+              skills
+              {part.requirements.map((req) => (
+                <ul>
+                  <li>{req}</li>
+                </ul>
+              ))}
+            </p>
+          </p>
+        );
+      default:
+        assertNever(part);
+    }
+  };
+  return <div>{render(coursePart)}</div>;
+};
+
+export default Part;

part9/courseinfo-ts/src/components/Total.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { ContentProps } from "../types";
+import { CoursePart } from "../types";
 
-const Total = ({ courseParts }: ContentProps) => {
+const Total = ({ courseParts }: { courseParts: CoursePart[] }) => {
   return (
     <>
       <p>

part9/courseinfo-ts/src/types.ts

@@ -1,6 +1,33 @@
-export interface ContentProps {
-  courseParts: {
-    name: string;
-    exerciseCount: number;
-  }[];
+interface CoursePartBase {
+  name: string;
+  exerciseCount: number;
+  type: string;
 }
+
+interface CoursePartDesc extends CoursePartBase {
+  description: string;
+}
+
+interface CourseNormalPart extends CoursePartDesc {
+  type: "normal";
+}
+interface CourseProjectPart extends CoursePartBase {
+  type: "groupProject";
+  groupProjectCount: number;
+}
+
+interface CourseSubmissionPart extends CoursePartDesc {
+  type: "submission";
+  exerciseSubmissionLink: string;
+}
+
+interface CoursePartRequirement extends CoursePartDesc {
+  requirements: string[];
+  type: "special";
+}
+
+export type CoursePart =
+  | CourseNormalPart
+  | CourseProjectPart
+  | CourseSubmissionPart
+  | CoursePartRequirement;