Create Production, List Productions

package.json

@@ -18,6 +18,7 @@
     "@types/react-router-dom": "^5.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.1",
     "react-router-dom": "^6.22.3"
   },
   "devDependencies": {

src/api/api.ts

@@ -3,13 +3,28 @@ const rootUrl = "https://intercom-manager.dev.eyevinn.technology/";
 
 type TCreateProductionOptions = {
   name: string;
-  lines: string[];
+  lines: { name: string }[];
 };
 
 type TCreateProductionResponse = {
-  productionId: string;
+  productionid: string;
 };
 
+type TLine = {
+  name: string;
+  id: string;
+  smbid: string;
+  connections: unknown;
+};
+
+type TFetchProductionResponse = {
+  name: string;
+  productionid: string;
+  lines: TLine[];
+};
+
+type TListProductionsResponse = TFetchProductionResponse[];
+
 // TODO create generic response/error converter and response data validator
 export const API = {
   createProduction: ({
@@ -23,17 +38,15 @@ export const API = {
       },
       body: JSON.stringify({
         name,
-        lines: lines.map((line) => ({
-          name: line,
-        })),
+        lines,
       }),
     }).then((response) => response.json()),
   // TODO add response types, headers
-  listProductions: () =>
+  listProductions: (): Promise<TListProductionsResponse> =>
     fetch(`${rootUrl}productions/`, { method: "GET" }).then((response) =>
       response.json()
     ),
-  fetchProduction: (id: number) =>
+  fetchProduction: (id: number): Promise<TFetchProductionResponse> =>
     fetch(`${rootUrl}productions/${id}`, { method: "GET" }).then((response) =>
       response.json()
     ),
@@ -45,7 +58,7 @@ export const API = {
     fetch(`${rootUrl}productions/${id}/lines`, { method: "GET" }).then(
       (response) => response.json()
     ),
-  fetchProductionLine: (productionId: number, lineId: number) =>
+  fetchProductionLine: (productionId: number, lineId: number): Promise<TLine> =>
     fetch(`${rootUrl}productions/${productionId}/lines/${lineId}`, {
       method: "GET",
     }).then((response) => response.json()),

src/components/landing-page/create-production.tsx

@@ -1,3 +1,6 @@
+import { SubmitHandler, useFieldArray, useForm } from "react-hook-form";
+import { useState } from "react";
+import styled from "@emotion/styled";
 import { DisplayContainerHeader } from "./display-container-header.tsx";
 import {
   DecorativeLabel,
@@ -6,24 +9,95 @@ import {
   FormLabel,
   SubmitButton,
 } from "./form-elements.tsx";
+import { API } from "../../api/api.ts";
 
+type FormValues = {
+  productionName: string;
+  defaultLine: string;
+  lines: { name: string }[];
+};
+
+const ProductionConfirmation = styled.div`
+  background: #91fa8c;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid #b2ffa1;
+  color: #1a1a1a;
+`;
 export const CreateProduction = () => {
+  const [createdProductionId, setCreatedProductionId] = useState<string | null>(
+    null
+  );
+  const {
+    formState: { errors },
+    control,
+    register,
+    handleSubmit,
+  } = useForm<FormValues>();
+  const { fields, append } = useFieldArray({
+    control,
+    name: "lines",
+    rules: {
+      minLength: 1,
+    },
+  });
+
+  const onSubmit: SubmitHandler<FormValues> = (value) => {
+    API.createProduction({
+      name: value.productionName,
+      lines: [{ name: value.defaultLine }, ...value.lines],
+    })
+      .then((v) => setCreatedProductionId(v.productionid))
+      .catch((e) => {
+        console.error(e);
+        // TODO error handling, display error in form or in global header?
+      });
+  };
+
   return (
     <FormContainer>
       <DisplayContainerHeader>Create Production</DisplayContainerHeader>
       <FormLabel>
         <DecorativeLabel>Production Name</DecorativeLabel>
-        <FormInput type="text" value="" placeholder="Production Name" />
+        <FormInput
+          // eslint-disable-next-line
+          {...register(`productionName`, { minLength: 1 })}
+          placeholder="Production Name"
+        />
       </FormLabel>
+      {errors.productionName && <div>BAD INPUT</div>}
       <FormLabel>
         <DecorativeLabel>Line</DecorativeLabel>
-        <FormInput type="text" value="Editorial" placeholder="Line Name" />
+        <FormInput
+          // eslint-disable-next-line
+          {...register(`defaultLine`, { minLength: 1 })}
+          type="text"
+          value="Editorial"
+          placeholder="Line Name"
+        />
       </FormLabel>
-      <FormLabel>
-        <DecorativeLabel>Line</DecorativeLabel>
-        <FormInput type="text" value="Production" placeholder="Line Name" />
-      </FormLabel>
-      <SubmitButton type="submit">Create Production</SubmitButton>
+      {fields.map((field, index) => (
+        <FormLabel key={field.id}>
+          <DecorativeLabel>Line</DecorativeLabel>
+          <FormInput
+            // eslint-disable-next-line
+            {...register(`lines.${index}.name`)}
+            type="text"
+          />
+        </FormLabel>
+      ))}
+      <SubmitButton type="button" onClick={() => append({ name: "" })}>
+        Add Line
+      </SubmitButton>
+
+      <SubmitButton type="submit" onClick={handleSubmit(onSubmit)}>
+        Create Production
+      </SubmitButton>
+      {createdProductionId !== null && (
+        <ProductionConfirmation>
+          The production ID is: {createdProductionId.toString()}
+        </ProductionConfirmation>
+      )}
     </FormContainer>
   );
 };

src/components/landing-page/form-elements.tsx

@@ -28,4 +28,7 @@ export const DecorativeLabel = styled.span`
 
 export const SubmitButton = styled.button`
   font-size: 1.6rem;
+  padding: 1rem;
+  display: block;
+  margin: 0 0 2rem 0;
 `;

src/components/landing-page/productions-list.tsx

@@ -1,4 +1,7 @@
 import styled from "@emotion/styled";
+import { useEffect, useState } from "react";
+import { API } from "../../api/api.ts";
+import { TProduction } from "../production/types.ts";
 
 const ProductionListContainer = styled.div`
   display: flex;
@@ -28,42 +31,57 @@ const ProductionId = styled.div`
 `;
 
 export const ProductionsList = () => {
+  const [productions, setProductions] = useState<TProduction[]>([]);
+
+  // TODO extract to separate hook file
+  // TODO trigger new fetch whenever a production is created
+  useEffect(() => {
+    let aborted = false;
+
+    API.listProductions()
+      .then((result) => {
+        if (aborted) return;
+
+        setProductions(
+          result
+            // pick laste 10 items
+            .slice(-10)
+            // display in reverse order
+            .toReversed()
+            // convert to local format
+            .map((prod) => {
+              return {
+                name: prod.name,
+                id: parseInt(prod.productionid, 10),
+                lines: prod.lines.map((l) => ({
+                  name: l.name,
+                  id: parseInt(l.id, 10),
+                  connected: false,
+                  connectionId: "1",
+                  participants: [],
+                })),
+              };
+            })
+        );
+      })
+      .catch(() => {
+        // TODO handle error/retry
+      });
+
+    return () => {
+      aborted = true;
+    };
+  }, []);
+
   return (
     <ProductionListContainer>
-      <ProductionItem>
-        <ProductionName>Mello</ProductionName>
-        <ProductionId>123</ProductionId>
-      </ProductionItem>
-      <ProductionItem>
-        <ProductionName>Bolibompa</ProductionName>
-        <ProductionId>4</ProductionId>
-      </ProductionItem>
-      <ProductionItem>
-        <ProductionName>Nyheterna</ProductionName>
-        <ProductionId>928</ProductionId>
-      </ProductionItem>
-      <ProductionItem>
-        <ProductionName>Sikta mot Stjärnorna</ProductionName>
-        <ProductionId>38974</ProductionId>
-      </ProductionItem>
-      <ProductionItem>
-        <ProductionName>Idol</ProductionName>
-        <ProductionId>5</ProductionId>
-      </ProductionItem>
-      <ProductionItem>
-        <ProductionName>
-          IdolIdol Idol Idol Idol Idol Idol Idol Idol Idol Idol Idol Idol Idol
-          Idol Idol Idol Idol Idol Idol Idol Idol Idol Idol
-        </ProductionName>
-        <ProductionId>5</ProductionId>
-      </ProductionItem>
-      <ProductionItem>
-        <ProductionName>
-          IdolIdolIdolIdolIdolIdolIdolIdolIdolIdolIdolIdolIdolIdol
-          IdolIdolIdolIdolIdolIdolIdolIdolIdolIdol
-        </ProductionName>
-        <ProductionId>5</ProductionId>
-      </ProductionItem>
+      {/* TODO add loading indicator */}
+      {productions.map((p) => (
+        <ProductionItem key={p.id}>
+          <ProductionName>{p.name}</ProductionName>
+          <ProductionId>{p.id}</ProductionId>
+        </ProductionItem>
+      ))}
     </ProductionListContainer>
   );
 };

src/components/production/types.ts

@@ -7,7 +7,6 @@ export type TLine = {
   name: string;
   id: number;
   connected: boolean;
-  connectionId: string;
   participants: TParticipant[];
 };
 

tsconfig.json

@@ -1,19 +1,17 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "esnext",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["esnext", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
@@ -22,5 +20,9 @@
   },
   "include": ["src"],
   "exclude": ["./node_modules"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }

yarn.lock

@@ -3018,6 +3018,11 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-hook-form@^7.51.1:
+  version "7.51.1"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.1.tgz#3ce5f8b5ef41903b4054a641cef8c0dc8bf8ae85"
+  integrity sha512-ifnBjl+kW0ksINHd+8C/Gp6a4eZOdWyvRv0UBaByShwU8JbVx5hTcTWEcd5VdybvmPTATkVVXk9npXArHmo56w==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"