From d808ee45b7919f962eee4bc75e6abe925527cc3a Mon Sep 17 00:00:00 2001 From: Saelmala Date: Mon, 13 Jan 2025 15:08:25 +0100 Subject: [PATCH] fix: ifb changes --- src/api/api.ts | 3 +- src/assets/icons/icon.tsx | 3 - .../use-add-production-line.ts | 2 +- .../production-line/production-line.tsx | 2 +- .../manage-production-buttons.tsx | 68 +++++++++++++++---- .../production-list/production-list-item.tsx | 2 - 6 files changed, 59 insertions(+), 21 deletions(-) diff --git a/src/api/api.ts b/src/api/api.ts index 2712dd4..82e25f9 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -134,7 +134,7 @@ export const API = { }) ), addProductionLine: ( - productionId: number, + productionId: string, name: string, programOutputLine?: boolean ): Promise => @@ -163,6 +163,7 @@ export const API = { }, }) ), + offerAudioSession: ({ productionId, lineId, diff --git a/src/assets/icons/icon.tsx b/src/assets/icons/icon.tsx index e4829a6..ac33724 100644 --- a/src/assets/icons/icon.tsx +++ b/src/assets/icons/icon.tsx @@ -5,7 +5,6 @@ import RemoveSvg from "./clear.svg?react"; 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 RefreshSvg from "./refresh.svg?react"; import Settings from "./settings.svg?react"; import NoSound from "./no_sound.svg?react"; @@ -33,8 +32,6 @@ export const SpeakerOn = () => ; export const UserIcon = () => ; -export const ConfirmIcon = () => ; - export const RefreshIcon = () => ; export const SettingsIcon = () => ; diff --git a/src/components/manage-productions-page/use-add-production-line.ts b/src/components/manage-productions-page/use-add-production-line.ts index f9b55ef..81bae31 100644 --- a/src/components/manage-productions-page/use-add-production-line.ts +++ b/src/components/manage-productions-page/use-add-production-line.ts @@ -2,7 +2,7 @@ import { useEffect, useState } from "react"; import { API } from "../../api/api"; type TUseAddProductionLine = ( - productionId: number | null, + productionId: string | null, linesData: { lines: { name: string; programOutputLine: boolean }[]; } | null diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx index 6fb7fab..b9bd099 100644 --- a/src/components/production-line/production-line.tsx +++ b/src/components/production-line/production-line.tsx @@ -407,7 +407,7 @@ export const ProductionLine = ({ useEffect(() => { if (line?.programOutputLine && joinProductionOptions?.isProgramUser) { - muteOutput(); + setIsOutputMuted(true); } else if ( line?.programOutputLine && !joinProductionOptions?.isProgramUser diff --git a/src/components/production-list/manage-production-buttons.tsx b/src/components/production-list/manage-production-buttons.tsx index abcbd50..ee05705 100644 --- a/src/components/production-list/manage-production-buttons.tsx +++ b/src/components/production-list/manage-production-buttons.tsx @@ -1,5 +1,6 @@ +import styled from "@emotion/styled"; import { ErrorMessage } from "@hookform/error-message"; -import { useForm } from "react-hook-form"; +import { useForm, Controller, SubmitHandler } from "react-hook-form"; import { FC, useEffect, useState } from "react"; import { RemoveIcon } from "../../assets/icons/icon"; import { ListItemWrapper } from "../create-production/create-production"; @@ -24,12 +25,22 @@ import { useDeleteProduction } from "../manage-productions-page/use-delete-produ import { useGlobalState } from "../../global-state/context-provider"; import { ConfirmationModal } from "../verify-decision/confirmation-modal"; import { TBasicProductionResponse } from "../../api/api"; +import { Checkbox } from "../checkbox/checkbox"; interface ManageProductionButtonsProps { production: TBasicProductionResponse; isDeleteProductionDisabled: boolean; } +type FormValues = { + lines: { name: string; programOutputLine: boolean }[]; +}; + +const CheckboxWrapper = styled.div` + margin-bottom: 3rem; + margin-top: 0.5rem; +`; + export const ManageProductionButtons: FC = ( props ) => { @@ -39,18 +50,27 @@ export const ManageProductionButtons: FC = ( const [removeProductionId, setRemoveProductionId] = useState(""); const [displayConfirmationModal, setDisplayConfirmationModal] = useState(false); - const [lineName, setLineName] = useState(""); const [addLineOpen, setAddLineOpen] = useState(false); + const [updateLines, setUpdateLines] = useState(null); const { formState: { errors }, register, handleSubmit, + control, setValue, - } = useForm<{ lineName: string }>({ + } = useForm({ + defaultValues: { + lines: [ + { + name: "", + programOutputLine: false, + }, + ], + }, resetOptions: { - keepDirtyValues: true, // user-interacted input will be retained - keepErrors: true, // input errors will be retained with value update + keepDirtyValues: true, + keepErrors: true, }, }); @@ -58,7 +78,7 @@ export const ManageProductionButtons: FC = ( loading: createLineLoading, successfullCreate: successfullCreateLine, error: lineCreateError, - } = useAddProductionLine(production.productionId, lineName); + } = useAddProductionLine(production.productionId, updateLines); const { loading: deleteProductionLoading, @@ -80,14 +100,21 @@ export const ManageProductionButtons: FC = ( dispatch({ type: "PRODUCTION_UPDATED", }); - setValue("lineName", ""); - setLineName(""); setAddLineOpen(false); + setUpdateLines(null); } - }, [successfullCreateLine, setValue, dispatch]); + }, [successfullCreateLine, dispatch]); - const onSubmit = (values: { lineName: string }) => { - if (values.lineName) setLineName(values.lineName); + const onSubmit: SubmitHandler = (values) => { + if (values.lines[0].name) { + setUpdateLines(values); + } + }; + + const handleAddLineOpen = () => { + setAddLineOpen(!addLineOpen); + setValue("lines.0.name", ""); + setValue("lines.0.programOutputLine", false); }; return ( @@ -102,7 +129,7 @@ export const ManageProductionButtons: FC = ( setAddLineOpen(!addLineOpen)} + onClick={handleAddLineOpen} > Add Line @@ -132,12 +159,27 @@ export const ManageProductionButtons: FC = ( + + ( + ) => + controllerField.onChange(e.target.checked) + } + /> + )} + /> + (false); const navigate = useNavigate(); - const [open, setOpen] = useState(false); const [showFullUserList, setShowFullUserList] = useState(false); const [selectedLine, setSelectedLine] = useState(); const [lineRemoveId, setLineRemoveId] = useState("");