Render fetched shots
This commit is contained in:
parent
376d695416
commit
5192212e0e
2
App.tsx
2
App.tsx
@ -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>
|
||||||
);
|
);
|
||||||
|
14
component/display-shot.tsx
Normal file
14
component/display-shot.tsx
Normal 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
16
component/shot.tsx
Normal 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
21
graphql/query.ts
Normal 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)
|
||||||
|
}
|
||||||
|
`;
|
@ -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);
|
|
||||||
});
|
|
||||||
});
|
|
Loading…
Reference in New Issue
Block a user