Skip to content

Commit 90b514d

Browse files
committedApr 22, 2024
feat: implement context api
1 parent fe809b4 commit 90b514d

File tree

4 files changed

+34
-20
lines changed

4 files changed

+34
-20
lines changed
 

‎src/components/game/choices/index.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { component$ } from '@builder.io/qwik';
1+
import { component$, useContext } from '@builder.io/qwik';
22
import { gamePlay } from '~/helpers/game';
3-
import { GameProps } from '~/models/game';
3+
import { CONTEXT_GAME } from '~/routes';
44

5-
export const Choices = component$<GameProps>((props) => {
6-
const { game } = props;
5+
export const Choices = component$(() => {
6+
const game = useContext(CONTEXT_GAME);
77
const gameChoices = Object.keys(game.choices);
88
return (
99
<div class='choices'>
@@ -14,7 +14,11 @@ export const Choices = component$<GameProps>((props) => {
1414
option: string;
1515
};
1616
return (
17-
<span key={'choice_game_' + index} class='choice' onClick$={() => gamePlay(option, game)}>
17+
<span
18+
key={'choice_game_' + index}
19+
class='choice'
20+
onClick$={() => gamePlay(option, game)}
21+
>
1822
<img src={img} width={200} height={200} alt={alt} />
1923
</span>
2024
);
Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
import { component$ } from '@builder.io/qwik';
1+
import { component$, useContext } from '@builder.io/qwik';
22
import { GameProps } from '~/models/game';
3+
import { CONTEXT_GAME } from '~/routes';
34

4-
export const GameStatus = component$((store: GameProps) => {
5-
const {
6-
game: {
7-
data: { result },
8-
},
9-
} = store;
5+
export const GameStatus = component$(() => {
6+
const {data: {result}} = useContext(CONTEXT_GAME);
107
return <p class='info-game'>{result}</p>;
118
});

‎src/components/game/score-board/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { component$ } from '@builder.io/qwik';
2-
import { GameProps } from '~/models/game';
1+
import { component$, useContext } from '@builder.io/qwik';
32
import { Badge } from '~/components/game/badge';
3+
import { CONTEXT_GAME } from '~/routes';
44

5-
export const ScoreBoard = component$<GameProps>((props) => {
6-
const { game } = props;
5+
export const ScoreBoard = component$(() => {
6+
const game = useContext(CONTEXT_GAME);
77
return (
88
<div class='score-board'>
99
<Badge />

‎src/routes/index.tsx

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { component$, useStore, useStyles$ } from '@builder.io/qwik';
1+
import {
2+
Signal,
3+
component$,
4+
createContextId,
5+
useContextProvider,
6+
useSignal,
7+
useStore,
8+
useStyles$,
9+
} from '@builder.io/qwik';
210
import type { DocumentHead } from '@builder.io/qwik-city';
311

412
import indexCss from './index.css?inline';
@@ -7,17 +15,22 @@ import indexCss from './index.css?inline';
715
import { Title, GameStatus, Choices, ScoreBoard } from '~/components';
816

917
import { gameInitialData } from '~/constants/game-data';
18+
import { GameStore } from '~/models/game';
19+
20+
export const CONTEXT_GAME = createContextId<GameStore>('game');
1021

1122
export default component$(() => {
1223
useStyles$(indexCss);
1324
const game = useStore(gameInitialData);
1425

26+
useContextProvider(CONTEXT_GAME, game);
27+
1528
return (
1629
<>
1730
<Title />
18-
<ScoreBoard game={game} />
19-
<GameStatus game={game} />
20-
<Choices game={game} />
31+
<ScoreBoard />
32+
<GameStatus />
33+
<Choices />
2134
</>
2235
);
2336
});

0 commit comments

Comments
 (0)