seperate concerns, make hook for videoDetails

This commit is contained in:
Loewy 2024-02-16 15:10:56 -08:00
parent b04c6aa345
commit b9f821652c
4 changed files with 122 additions and 100 deletions

View File

@ -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,
};
};

View File

@ -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: {

View File

@ -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,

View File

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