Merge pull request 'Implement Containers for fetching shots' (#15) from get-shot-with-fragment into master
Reviewed-on: billnerds/rn-playground#15
This commit is contained in:
commit
83a648eb90
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;
|
@ -7,6 +7,8 @@ import {
|
|||||||
from,
|
from,
|
||||||
} from "@apollo/client";
|
} from "@apollo/client";
|
||||||
import { API_URI } from "@env";
|
import { API_URI } from "@env";
|
||||||
|
import { SHOT_FEATURES_FRAGMENT } from "./fragment/shot";
|
||||||
|
import { createFragmentRegistry } from "@apollo/client/cache";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
@ -16,10 +18,13 @@ const ClientProvider: React.FC<Props> = ({ children }) => {
|
|||||||
const httpLink = new HttpLink({
|
const httpLink = new HttpLink({
|
||||||
uri: API_URI,
|
uri: API_URI,
|
||||||
});
|
});
|
||||||
|
const cache = new InMemoryCache({
|
||||||
|
fragments: createFragmentRegistry(SHOT_FEATURES_FRAGMENT),
|
||||||
|
});
|
||||||
|
|
||||||
const client = new ApolloClient({
|
const client = new ApolloClient({
|
||||||
link: from([httpLink]),
|
link: from([httpLink]),
|
||||||
cache: new InMemoryCache(),
|
cache: cache,
|
||||||
});
|
});
|
||||||
|
|
||||||
return <ApolloProvider client={client}>{children}</ApolloProvider>;
|
return <ApolloProvider client={client}>{children}</ApolloProvider>;
|
||||||
|
13
graphql/fragment/shot.ts
Normal file
13
graphql/fragment/shot.ts
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { gql } from "@apollo/client";
|
||||||
|
|
||||||
|
export const SHOT_FEATURES_FRAGMENT = gql`
|
||||||
|
fragment ShotFeatures on ShotFeaturesGQL {
|
||||||
|
cueObjectDistance @include(if: $includeCueObjectDistance)
|
||||||
|
targetPocketDistance @include(if: $includeTargetPocketDistance)
|
||||||
|
cueObjectAngle @include(if: $includeCueObjectAngle)
|
||||||
|
cueBallSpeed @include(if: $includeCueBallSpeed)
|
||||||
|
intendedPocket @include(if: $includeIntendedPocket)
|
||||||
|
shotDirection @include(if: $includeShotDirection)
|
||||||
|
didMake @include(if: $includeDidMake)
|
||||||
|
}
|
||||||
|
`;
|
25
graphql/query.ts
Normal file
25
graphql/query.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { gql } from "@apollo/client";
|
||||||
|
|
||||||
|
export const GET_SHOTS = gql`
|
||||||
|
query GetShots(
|
||||||
|
$includeCueObjectDistance: Boolean! = false
|
||||||
|
$includeTargetPocketDistance: Boolean! = false
|
||||||
|
$includeCueObjectAngle: Boolean! = false
|
||||||
|
$includeCueBallSpeed: Boolean! = false
|
||||||
|
$includeIntendedPocket: Boolean! = false
|
||||||
|
$includeShotDirection: Boolean! = false
|
||||||
|
$includeDidMake: Boolean! = false
|
||||||
|
) {
|
||||||
|
getShots {
|
||||||
|
id
|
||||||
|
videoId
|
||||||
|
startFrame
|
||||||
|
endFrame
|
||||||
|
createdAt
|
||||||
|
updatedAt
|
||||||
|
features {
|
||||||
|
...ShotFeatures
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
@ -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