seperate concerns, make hook for videoDetails

src/component/video/use-video-details.tsx

@@ -0,0 +1,98 @@
+import * as gql from "railbird-gql";
+import { useCallback, useState } from "react";
+// @ts-ignore
+import { useCameraPermission } from "react-native-vision-camera";
+import { showAlert } from "../../lib/alert-messages";
+
+interface VideoFlowInputParams {
+	sessionName?: string;
+	gameType: string;
+	tableSize: string;
+	videoId?: number;
+}
+
+export const useVideoDetails = ({ mode, videoId, params, navigation }) => {
+	const { hasPermission, requestPermission } = useCameraPermission();
+
+	// Initial state setup
+	const initialState = mode === "save-video" && params ? 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" },
+	]);
+
+	// 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" },
+	]);
+
+	// Toggle dropdowns mutually exclusive
+	const onGameTypeOpen = useCallback(() => setTableSizeOpen(false), []);
+	const onTableSizeOpen = useCallback(() => setGameTypeOpen(false), []);
+
+	// GraphQL Mutation
+	const [TerminateUploadStream, { loading, error }] =
+		gql.useTerminateUploadStreamMutation();
+
+	const handleSubmit = async () => {
+		if (mode === "start-video" && !hasPermission) {
+			requestPermission();
+			return showAlert("camera");
+		}
+
+		if (mode === "start-video") {
+			const params: VideoFlowInputParams = { sessionName, gameType, tableSize };
+			navigation.push("Camera", params);
+		} else {
+			try {
+				await TerminateUploadStream({
+					variables: { videoId, videoName: sessionName, tableSize, gameType },
+				});
+				navigation.push("Tabs");
+			} catch (err) {
+				showAlert("terminateUpload");
+			}
+		}
+	};
+
+	return {
+		sessionName,
+		setSessionName,
+		gameType,
+		setGameType,
+		gameTypeOpen,
+		setGameTypeOpen,
+		gameTypes,
+		setGameTypes,
+		onGameTypeOpen,
+		tableSize,
+		setTableSize,
+		setTableSizes,
+		tableSizeOpen,
+		setTableSizeOpen,
+		tableSizes,
+		onTableSizeOpen,
+		handleSubmit,
+		loading,
+		error,
+	};
+};

src/graphql/client.tsx

@@ -50,7 +50,6 @@ export const ClientProvider: React.FC<Props> = ({ children }) => {
 
 	const authMiddleware = new ApolloLink((operation, forward) => {
 		const { key, value } = authHeader;
-		console.log("Auth Key", key, "Value", value);
 		if (key && value) {
 			operation.setContext({
 				headers: {

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

@@ -1,5 +1,4 @@
-import * as gql from "railbird-gql";
+import React from "react";
-import React, { useCallback, useState } 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 { useVideoDetails } from "../../component/video/use-video-details";
-import { showAlert } from "../../lib/alert-messages";
+
 import { globalInputStyles } from "../../styles";
 import { recordStyles as styles } from "./styles";
-import { VideoFlowInputParams } from "./video-stack-types";
 
-// TerminateUploadStream
+export default function VideoDetails({ navigation, route }): React.JSX.Element {
-
-interface VideoDetailsProps {
-	navigation: any;
-	route?: any;
-}
-
-export default function VideoDetails({
-	navigation,
-	route,
-}: VideoDetailsProps): React.JSX.Element {
-	const { hasPermission, requestPermission } = useCameraPermission();
 	const { mode, videoId } = route.params;
-	if (mode === "start-video" && !hasPermission) {
+	const {
-		requestPermission();
+		sessionName,
-	}
+		setSessionName,
-
+		gameType,
-	// Initial state values based on mode
+		setGameType,
-	const initialState =
+		tableSize,
-		mode === "save-video" && route.params ? route.params : {};
+		setTableSize,
-
+		gameTypeOpen,
-	// Session name input
+		setGameTypeOpen,
-	// Should session name be required?
+		tableSizeOpen,
-	const [sessionName, setSessionName] = useState<string>(
+		setTableSizeOpen,
-		initialState.sessionName || "",
+		onGameTypeOpen,
-	);
+		onTableSizeOpen,
-
+		handleSubmit,
-	// Game type dropdown
+		loading,
-	const [gameTypeOpen, setGameTypeOpen] = useState<boolean>(false);
+		tableSizes,
-	const [gameType, setGameType] = useState<string | null>(
+		gameTypes,
-		initialState.gameType || null,
+		setGameTypes,
-	);
+		setTableSizes,
-	const [gameTypes, setGameTypes] = useState([
+	} = useVideoDetails({ mode, videoId, params: route.params, navigation });
-		{ 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 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;
-}