Removed some minor errors that cause console errors

Frontend/src/components/input/input.tsx

@@ -1,5 +1,7 @@
+/* eslint-disable react/display-name */
 import { Input as AntInput } from "antd";
 import type { InputProps } from "antd";
+import React from "react";
 
 type PropsType = {
   label: string;
@@ -8,22 +10,23 @@ type PropsType = {
 } & InputProps;
 
 /**  This component renders a input field */
-export const Input: React.FC<PropsType> = ({
-  label,
-  password = false,
-  error = undefined,
-  ...props
-}) => {
-  return (
-    <div className="py-1">
-      <div className={"font-bold pb-2"}>{label}</div>
-      {password && (
-        <AntInput.Password status={error ? "error" : undefined} {...props} />
-      )}
-      {!password && (
-        <AntInput status={error ? "error" : undefined} {...props} />
-      )}
-      {error && <p className="text-danger">{error}</p>}
-    </div>
-  );
-};
+export const Input = React.forwardRef<HTMLInputElement, PropsType>(
+  ({ label, password = false, error = undefined, ...props }, ref) => {
+    return (
+      <div className="py-1">
+        <div className={"font-bold pb-2"}>{label}</div>
+        {password && (
+          <AntInput.Password
+            status={error ? "error" : undefined}
+            {...props}
+            ref={ref}
+          />
+        )}
+        {!password && (
+          <AntInput status={error ? "error" : undefined} {...props} ref={ref} />
+        )}
+        {error && <p className="text-danger">{error}</p>}
+      </div>
+    );
+  }
+);

Frontend/src/components/video-recording-screen/hls-player.tsx

@@ -1,4 +1,3 @@
-// src/components/HlsPlayer.js
 import React, { useEffect, useRef } from "react";
 import Hls from "hls.js";
 import { Camera } from "@/types";
@@ -14,7 +13,10 @@ const HlsPlayer = ({ camera }: { camera: Camera }) => {
     if (Hls.isSupported()) {
       const hls = new Hls({
         xhrSetup: (xhr) => {
-          xhr.setRequestHeader("Authorization", `Bearer ${session.accessToken}`);
+          xhr.setRequestHeader(
+            "Authorization",
+            `Bearer ${session.accessToken}`
+          );
         },
       });
       hls.loadSource(camera.url); // Replace with your HLS stream URL

Frontend/src/containers/video-stream-container.tsx

@@ -1,8 +1,10 @@
 "use client";
+import { useEffect } from "react";
 import type { FC } from "react";
 import { Tooltip } from "antd";
 import { VideoRecordingScreen } from "@/components";
 import { useCameraSlice } from "@/hooks";
+import { cameras as camerasData } from "@/data";
 import { FullscreenOutlined, FullscreenExitOutlined } from "@ant-design/icons";
 import React from "react";
 
@@ -13,7 +15,7 @@ type PropsType = {
 /* This container renders different video recording screens */
 export const VideoStreamContainer: FC<PropsType> = ({ sizePerScreen = 9 }) => {
   /* hooks */
-  const { cameras, isFullScreenGrid, toggleIsFullScreenGrid } =
+  const { cameras, isFullScreenGrid, toggleIsFullScreenGrid, setCameras } =
     useCameraSlice();
 
   /* event handlers */
@@ -30,6 +32,11 @@ export const VideoStreamContainer: FC<PropsType> = ({ sizePerScreen = 9 }) => {
     toggleIsFullScreenGrid();
   };
 
+  /* useEffect hooks */
+  useEffect(() => {
+    setCameras(camerasData);
+  }, []);
+
   return (
     <>
       <div className="grid grid-cols-3 auto-rows-auto gap-1 items-stretch min-h-[80vh]">

Frontend/src/data/camera-data.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { Camera } from "@/types";
 
 export const cameras: Camera[] = [

Frontend/src/hooks/use-camera-slice.ts

@@ -7,6 +7,7 @@ import {
   selectIsFullScreenGrid,
   updateCamera,
   toggleIsFullScreenGrid,
+  setCameras,
 } from "@/store";
 
 export const useCameraSlice = () => {
@@ -19,6 +20,10 @@ export const useCameraSlice = () => {
   const isFullScreenGrid: boolean = useAppSelector(selectIsFullScreenGrid);
 
   /* redux camera state updaters */
+  const setCamerasState = (cameras: Camera[]) => {
+    dispatch(setCameras(cameras));
+  };
+
   const updateCameraState = (updatedCamera: Camera) => {
     dispatch(updateCamera(updatedCamera));
   };
@@ -32,6 +37,7 @@ export const useCameraSlice = () => {
     cameraCount: cameraCount,
     activeCameraCount: activeCameraCount,
     isFullScreenGrid: isFullScreenGrid,
+    setCameras: setCamerasState,
     updateCamera: updateCameraState,
     toggleIsFullScreenGrid: toggleIsFullScreenGridState,
   };

Frontend/src/store/index.ts

@@ -6,6 +6,7 @@ export {
   selectCameraCount,
   selectActiveCameraCount,
   selectIsFullScreenGrid,
+  setCameras,
   updateCamera,
   toggleIsFullScreenGrid,
 } from "./slices/camera-slice";

Frontend/src/store/slices/camera-slice.ts

@@ -2,7 +2,7 @@
 import { createSlice } from "@reduxjs/toolkit";
 import type { PayloadAction } from "@reduxjs/toolkit";
 import type { RootState } from "../store";
-import { Camera } from "@/types";
+import type { Camera } from "@/types";
 import { cameras } from "@/data";
 
 // CameraSlice State type
@@ -15,7 +15,7 @@ type CameraStateType = {
 
 // Define the initial state using that type
 const initialState = {
-  cameras: cameras,
+  cameras: [],
   cameraCount: 8,
   activeCameraCount: 4,
   isFullScreenGrid: false,
@@ -27,6 +27,9 @@ export const cameraSlice = createSlice({
   initialState,
   reducers: {
     // Use the PayloadAction type to declare the contents of `action.payload`
+    setCameras: (state: CameraStateType, action: PayloadAction<Camera[]>) => {
+      state.cameras = [...action.payload];
+    },
     updateCamera: (state: CameraStateType, action: PayloadAction<Camera>) => {
       state.cameras = state.cameras.map((item) => {
         if (item.key === action.payload.key) {
@@ -41,7 +44,8 @@ export const cameraSlice = createSlice({
   },
 });
 
-export const { updateCamera, toggleIsFullScreenGrid } = cameraSlice.actions;
+export const { updateCamera, toggleIsFullScreenGrid, setCameras } =
+  cameraSlice.actions;
 
 // Other code such as selectors can use the imported `RootState` type
 export const selectCameras = (state: RootState) => state.camera.cameras;