seperate concerns, make hook for videoDetails

src/screens/video-stack/video-details.tsx

@@ -1,5 +1,4 @@
-import * as gql from "railbird-gql";
-import React, { useCallback, useState } from "react";
+import React from "react";
 import {
 	ActivityIndicator,
 	Keyboard,
@@ -11,101 +10,33 @@ import {
 } from "react-native";
 import DropDownPicker from "react-native-dropdown-picker";
 // @ts-ignore
-import { useCameraPermission } from "react-native-vision-camera";
-import { showAlert } from "../../lib/alert-messages";
+import { useVideoDetails } from "../../component/video/use-video-details";
+
 import { globalInputStyles } from "../../styles";
 import { recordStyles as styles } from "./styles";
-import { VideoFlowInputParams } from "./video-stack-types";
 
-// TerminateUploadStream
-
-interface VideoDetailsProps {
-	navigation: any;
-	route?: any;
-}
-
-export default function VideoDetails({
-	navigation,
-	route,
-}: VideoDetailsProps): React.JSX.Element {
-	const { hasPermission, requestPermission } = useCameraPermission();
+export default function VideoDetails({ navigation, route }): React.JSX.Element {
 	const { mode, videoId } = route.params;
-	if (mode === "start-video" && !hasPermission) {
-		requestPermission();
-	}
-
-	// Initial state values based on mode
-	const initialState =
-		mode === "save-video" && route.params ? route.params : {};
-
-	// Session name input
-	// Should session name be required?
-	const [sessionName, setSessionName] = useState<string>(
-		initialState.sessionName || "",
-	);
-
-	// Game type dropdown
-	const [gameTypeOpen, setGameTypeOpen] = useState<boolean>(false);
-	const [gameType, setGameType] = useState<string | null>(
-		initialState.gameType || null,
-	);
-	const [gameTypes, setGameTypes] = useState([
-		{ label: "Free Play", value: "freePlay" },
-		{ label: "Straight Pool", value: "straightPool" },
-		{ label: "Nine Ball", value: "nineBall" },
-	]);
-	const onGameTypeOpen = useCallback(() => {
-		setTableSizeOpen(false);
-	}, []);
-
-	// Table size dropdown
-	const [tableSizeOpen, setTableSizeOpen] = useState<boolean>(false);
-	const [tableSize, setTableSize] = useState<string>(
-		initialState.tableSize || "",
-	);
-	const [tableSizes, setTableSizes] = useState([
-		{ label: `9'`, value: "nineFoot" },
-		{ label: `8'`, value: "eightFoot" },
-		{ label: "7", value: "sevenFoot" },
-	]);
-	const onTableSizeOpen = useCallback(() => {
-		setGameTypeOpen(false);
-	}, []);
-
-	const [TerminateUploadStream, { loading, error }] =
-		gql.useTerminateUploadStreamMutation();
-
-	const handleSubmit = async () => {
-		if (mode === "start-video" && !hasPermission) {
-			return showAlert("camera");
-		}
-
-		if (mode === "start-video") {
-			const params: VideoFlowInputParams = {
-				sessionName: sessionName,
-				gameType: gameType,
-				tableSize: tableSize,
-			};
-			navigation.push("Camera", params);
-		} else {
-			try {
-				console.log(videoId, sessionName, tableSize, gameType);
-				const res = await TerminateUploadStream({
-					variables: {
-						videoId: videoId,
-						videoName: sessionName,
-						tableSize: tableSize,
-						gameType: gameType,
-					},
-				});
-				console.log(res);
-				navigation.push("Tabs");
-			} catch (err) {
-				console.error(error);
-				return showAlert("terminateUpload");
-			}
-		}
-	};
+	const {
+		sessionName,
+		setSessionName,
+		gameType,
+		setGameType,
+		tableSize,
+		setTableSize,
+		gameTypeOpen,
+		setGameTypeOpen,
+		tableSizeOpen,
+		setTableSizeOpen,
+		onGameTypeOpen,
+		onTableSizeOpen,
+		handleSubmit,
+		loading,
+		tableSizes,
+		gameTypes,
+		setGameTypes,
+		setTableSizes,
+	} = useVideoDetails({ mode, videoId, params: route.params, navigation });
 
 	const dropDownStyles = {
 		style: globalInputStyles.dropdownStyle,

src/screens/video-stack/video-stack-types.ts

@@ -1,6 +0,0 @@
-export interface VideoFlowInputParams {
-	sessionName?: string;
-	gameType: string;
-	tableSize: string;
-	videoId?: number;
-}