Render fetched shots

This commit is contained in:
Kat Huang 2024-01-08 22:14:21 -07:00
parent 376d695416
commit 5192212e0e
6 changed files with 53 additions and 14 deletions

2
.env
View File

@ -1,2 +0,0 @@
# .env.development
API_URI=https://api-dev.example.com/graphql

View File

@ -1,10 +1,12 @@
import React from "react"; import React from "react";
import { Text } from "react-native"; import { Text } from "react-native";
import ClientProvider from "./graphql/client"; import ClientProvider from "./graphql/client";
import ShotsContainer from "./component/shot";
const App: React.FC = () => { const App: React.FC = () => {
return ( return (
<ClientProvider> <ClientProvider>
<ShotsContainer />
<Text>test</Text> <Text>test</Text>
</ClientProvider> </ClientProvider>
); );

View File

@ -0,0 +1,14 @@
import { Text, View } from "react-native";
function DisplayShots({ data }) {
const renderShots = (shots) => {
return shots.map((shot) => (
<View key={shot.id}>
<Text>{shot.id}</Text>
</View>
));
};
return renderShots(data);
}
export default DisplayShots;

16
component/shot.tsx Normal file
View File

@ -0,0 +1,16 @@
import DisplayShots from "./display-shot";
import withQueryHandling from "./with-query-handling";
import { GET_SHOTS } from "../graphql/query";
const ShotsContainer = withQueryHandling({
WrappedComponent: DisplayShots,
query: GET_SHOTS,
dataKey: "getShots",
queryOptions: {
variables: {
includeCueObjectAngle: true,
},
},
});
export default ShotsContainer;

21
graphql/query.ts Normal file
View File

@ -0,0 +1,21 @@
import { gql } from "@apollo/client";
export const GET_SHOTS = gql`
query GetShots(
$includeCueObjectAngle: Boolean! = false
$includeCueObjectDistance: Boolean! = false
) {
getShots {
id
videoId
features {
...ShotFeatures
}
}
}
fragment ShotFeatures on ShotFeaturesGQL {
cueObjectAngle @include(if: $includeCueObjectAngle)
cueObjectDistance @include(if: $includeCueObjectDistance)
}
`;

View File

@ -1,12 +0,0 @@
import React from "react";
import renderer from "react-test-renderer";
import App from "../App";
describe("<App />", () => {
it("has 1 child", () => {
const tree = renderer.create(<App />).toJSON();
expect(tree.children.length).toBe(1);
});
});