Feat/with added pagination

src/api/api.ts

@@ -34,7 +34,12 @@ type TFetchProductionResponse = TBasicProductionResponse & {
   lines: TLine[];
 };
 
-type TListProductionsResponse = TBasicProductionResponse[];
+export type TListProductionsResponse = {
+  productions: TBasicProductionResponse[];
+  offset: 0;
+  limit: 0;
+  totalItems: 0;
+};
 
 type TOfferAudioSessionOptions = {
   productionId: number;
@@ -77,9 +82,13 @@ export const API = {
         }),
       })
     ),
-  listProductions: (): Promise<TListProductionsResponse> =>
+  listProductions: ({
+    searchParams,
+  }: {
+    searchParams: string;
+  }): Promise<TListProductionsResponse> =>
     handleFetchRequest<TListProductionsResponse>(
-      fetch(`${API_URL}production/`, {
+      fetch(`${API_URL}productionlist?${searchParams}`, {
         method: "GET",
         headers: {
           ...(API_KEY ? { Authorization: `Bearer ${API_KEY}` } : {}),

src/assets/icons/icon.tsx

@@ -6,6 +6,8 @@ import VolumeOn from "./volume_on.svg?react";
 import VolumeOff from "./volume_off.svg?react";
 import UserSvg from "./user.svg?react";
 import ConfirmSvg from "./done.svg?react";
+import StepLeftSvg from "./chevron_left.svg?react";
+import StepRightSvg from "./navigate_next.svg?react";
 
 export const MicMuted = () => <MicMute />;
 
@@ -22,3 +24,7 @@ export const SpeakerOn = () => <VolumeOn />;
 export const UserIcon = () => <UserSvg />;
 
 export const ConfirmIcon = () => <ConfirmSvg />;
+
+export const StepLeftIcon = () => <StepLeftSvg />;
+
+export const StepRightIcon = () => <StepRightSvg />;

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,24 +46,22 @@ 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>
-      {!!productions.length && <ManageProductionButton />}
+      <ListWrapper>
+        <ProductionsList
+          productions={productions?.productions.slice(0, 10)}
+          error={error}
+        />
+      </ListWrapper>
+      {!!productions?.productions.length && <ManageProductionButton />}
     </>
   );
 };

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

@@ -1,10 +1,14 @@
 import { useEffect, useState } from "react";
 import { useGlobalState } from "../../global-state/context-provider";
-import { API } from "../../api/api.ts";
-import { TBasicProduction } from "../production-line/types.ts";
+import { API, TListProductionsResponse } from "../../api/api.ts";
 
-export const useFetchProductionList = () => {
-  const [productions, setProductions] = useState<TBasicProduction[]>([]);
+export type GetProductionListFilter = {
+  limit?: string;
+  offset?: string;
+};
+
+export const useFetchProductionList = (filter?: GetProductionListFilter) => {
+  const [productions, setProductions] = useState<TListProductionsResponse>();
   const [doInitialLoad, setDoInitialLoad] = useState(true);
   const [intervalLoad, setIntervalLoad] = useState<boolean>(false);
   const [error, setError] = useState<Error | null>(null);
@@ -15,15 +19,15 @@ export const useFetchProductionList = () => {
     let aborted = false;
 
     if (reloadProductionList || intervalLoad || doInitialLoad) {
-      API.listProductions()
+      const filterSearchParams = new URLSearchParams(filter);
+
+      const searchParams = new URLSearchParams(filterSearchParams).toString();
+
+      API.listProductions({ searchParams })
         .then((result) => {
           if (aborted) return;
 
-          setProductions(
-            result
-              // pick last 10 items and display newest first
-              .slice(0, 10)
-          );
+          setProductions(result);
 
           dispatch({
             type: "PRODUCTION_LIST_FETCHED",
@@ -45,7 +49,7 @@ export const useFetchProductionList = () => {
     return () => {
       aborted = true;
     };
-  }, [dispatch, intervalLoad, reloadProductionList, doInitialLoad]);
+  }, [dispatch, intervalLoad, reloadProductionList, doInitialLoad, filter]);
 
   return {
     productions,

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;
 `;