seperate concerns, make hook for videoDetails
This commit is contained in:
Loewy
parent
b04c6aa345
commit
b9f821652c
98
src/component/video/use-video-details.tsx
Normal file
98
src/component/video/use-video-details.tsx
Normal 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,
|
||||
};
|
||||
};
|
||||
@ -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: {
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
export interface VideoFlowInputParams {
|
||||
sessionName?: string;
|
||||
gameType: string;
|
||||
tableSize: string;
|
||||
videoId?: number;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user