Feat/add productions list to manage view

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

@@ -92,7 +92,7 @@ export const CreateProduction = () => {
         lines: [],
       });
       dispatch({
-        type: "PRODUCTION_CREATED",
+        type: "PRODUCTION_UPDATED",
       });
     }
   }, [createdProductionId, dispatch, reset]);

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

@@ -1,6 +1,6 @@
 import { JoinProduction } from "./join-production.tsx";
 import { CreateProduction } from "./create-production.tsx";
-import { ProductionsList } from "./productions-list.tsx";
+import { ProductionsListContainer } from "./productions-list-container.tsx";
 import { useNavigateToProduction } from "./use-navigate-to-production.ts";
 import { DisplayContainer, FlexContainer } from "../generic-components.ts";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
@@ -23,7 +23,7 @@ export const LandingPage = () => {
           </DisplayContainer>
         )}
       </FlexContainer>
-      <ProductionsList />
+      <ProductionsListContainer />
     </>
   );
 };

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

@@ -6,41 +6,24 @@ import { useRefreshAnimation } from "./use-refresh-animation.ts";
 import { DisplayContainerHeader } from "./display-container-header.tsx";
 import { DisplayContainer } from "../generic-components.ts";
 import { ManageProductionButton } from "./manage-production-button.tsx";
-import { LocalError } from "../error.tsx";
 import { useFetchProductionList } from "./use-fetch-production-list.ts";
-
-const ProductionListContainer = styled.div`
-  display: flex;
-  padding: 0 0 2rem 2rem;
-  flex-wrap: wrap;
-`;
+import { ProductionsList } from "../productions-list.tsx";
 
 const HeaderContainer = styled(DisplayContainer)`
   padding: 0 2rem 0 2rem;
 `;
 
-const ProductionItem = styled.div`
-  flex: 1 0 calc(25% - 2rem);
-  min-width: 20rem;
-  border: 1px solid #424242;
-  border-radius: 0.5rem;
-  padding: 2rem;
-  margin: 0 2rem 2rem 0;
+const LoaderWrapper = styled.div`
+  padding-bottom: 1rem;
 `;
 
-const ProductionName = styled.div`
-  font-size: 1.4rem;
-  font-weight: bold;
-  margin: 0 0 1rem;
-  word-break: break-word;
-`;
-
-const ProductionId = styled.div`
-  font-size: 2rem;
-  color: #9e9e9e;
+const ListWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 0 0 2rem;
 `;
 
-export const ProductionsList = () => {
+export const ProductionsListContainer = () => {
   const [{ reloadProductionList }] = useGlobalState();
 
   const { productions, doInitialLoad, error, setIntervalLoad } =
@@ -63,23 +46,18 @@ export const ProductionsList = () => {
 
   return (
     <>
-      <LoaderDots
-        className={showRefreshing ? "active" : "in-active"}
-        text="refreshing"
-      />
+      <LoaderWrapper>
+        <LoaderDots
+          className={showRefreshing ? "active" : "in-active"}
+          text="refreshing"
+        />
+      </LoaderWrapper>
       <HeaderContainer>
         <DisplayContainerHeader>Production List</DisplayContainerHeader>
       </HeaderContainer>
-      <ProductionListContainer>
-        {error && <LocalError error={error} />}
-        {!error &&
-          productions.map((p) => (
-            <ProductionItem key={p.productionId}>
-              <ProductionName>{p.name}</ProductionName>
-              <ProductionId>{p.productionId}</ProductionId>
-            </ProductionItem>
-          ))}
-      </ProductionListContainer>
+      <ListWrapper>
+        <ProductionsList productions={productions} error={error} />
+      </ListWrapper>
       {!!productions.length && <ManageProductionButton />}
     </>
   );

src/components/landing-page/use-fetch-production-list.ts

@@ -5,6 +5,7 @@ import { TBasicProduction } from "../production-line/types.ts";
 
 export const useFetchProductionList = () => {
   const [productions, setProductions] = useState<TBasicProduction[]>([]);
+  const [allProductions, setAllProductions] = useState<TBasicProduction[]>([]);
   const [doInitialLoad, setDoInitialLoad] = useState(true);
   const [intervalLoad, setIntervalLoad] = useState<boolean>(false);
   const [error, setError] = useState<Error | null>(null);
@@ -21,10 +22,12 @@ export const useFetchProductionList = () => {
 
           setProductions(
             result
-              // pick last 10 items and display newest first
+              // pick last 10 items
               .slice(0, 10)
           );
 
+          setAllProductions(result);
+
           dispatch({
             type: "PRODUCTION_LIST_FETCHED",
           });
@@ -48,6 +51,7 @@ export const useFetchProductionList = () => {
   }, [dispatch, intervalLoad, reloadProductionList, doInitialLoad]);
 
   return {
+    allProductions,
     productions,
     doInitialLoad,
     error,

src/components/landing-page/use-refresh-animation.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 
 type TUseRefreshAnimationOptions = {
-  reloadProductionList: boolean;
+  reloadProductionList?: boolean;
   doInitialLoad: boolean;
 };
 

src/components/manage-productions/manage-lines.tsx

@@ -37,7 +37,7 @@ const Container = styled.div`
   max-width: 45rem;
   min-width: 35rem;
   padding: 2rem;
-  margin-right: 2rem;
+  margin: 0 2rem 2rem 0;
   border-radius: 1rem;
   border: 0.2rem solid #434343;
 `;