feat: implement context api

anartzdev · anartzdev · commit 90b514d48f84 · 2024-04-22T10:38:01.000+02:00
diff --git a/src/components/game/choices/index.tsx b/src/components/game/choices/index.tsx
@@ -1,9 +1,9 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, useContext } from '@builder.io/qwik';
 import { gamePlay } from '~/helpers/game';
-import { GameProps } from '~/models/game';
+import { CONTEXT_GAME } from '~/routes';
 
-export const Choices = component$<GameProps>((props) => {
-  const { game } = props;
+export const Choices = component$(() => {
+  const game = useContext(CONTEXT_GAME);
   const gameChoices = Object.keys(game.choices);
   return (
     <div class='choices'>
@@ -14,7 +14,11 @@ export const Choices = component$<GameProps>((props) => {
           option: string;
         };
         return (
-          <span key={'choice_game_' + index} class='choice' onClick$={() => gamePlay(option, game)}>
+          <span
+            key={'choice_game_' + index}
+            class='choice'
+            onClick$={() => gamePlay(option, game)}
+          >
             <img src={img} width={200} height={200} alt={alt} />
           </span>
         );
diff --git a/src/components/game/game-status/index.tsx b/src/components/game/game-status/index.tsx
@@ -1,11 +1,8 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, useContext } from '@builder.io/qwik';
 import { GameProps } from '~/models/game';
+import { CONTEXT_GAME } from '~/routes';
 
-export const GameStatus = component$((store: GameProps) => {
-  const {
-    game: {
-      data: { result },
-    },
-  } = store;
+export const GameStatus = component$(() => {
+  const {data: {result}} = useContext(CONTEXT_GAME);
   return <p class='info-game'>{result}</p>;
 });
diff --git a/src/components/game/score-board/index.tsx b/src/components/game/score-board/index.tsx
@@ -1,9 +1,9 @@
-import { component$ } from '@builder.io/qwik';
-import { GameProps } from '~/models/game';
+import { component$, useContext } from '@builder.io/qwik';
 import { Badge } from '~/components/game/badge';
+import { CONTEXT_GAME } from '~/routes';
 
-export const ScoreBoard = component$<GameProps>((props) => {
-  const { game } = props;
+export const ScoreBoard = component$(() => {
+  const game = useContext(CONTEXT_GAME);
   return (
     <div class='score-board'>
       <Badge />
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -1,4 +1,12 @@
-import { component$, useStore, useStyles$ } from '@builder.io/qwik';
+import {
+  Signal,
+  component$,
+  createContextId,
+  useContextProvider,
+  useSignal,
+  useStore,
+  useStyles$,
+} from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
 
 import indexCss from './index.css?inline';
@@ -7,17 +15,22 @@ import indexCss from './index.css?inline';
 import { Title, GameStatus, Choices, ScoreBoard } from '~/components';
 
 import { gameInitialData } from '~/constants/game-data';
+import { GameStore } from '~/models/game';
+
+export const CONTEXT_GAME = createContextId<GameStore>('game');
 
 export default component$(() => {
   useStyles$(indexCss);
   const game = useStore(gameInitialData);
 
+  useContextProvider(CONTEXT_GAME, game);
+
   return (
     <>
       <Title />
-      <ScoreBoard game={game} />
-      <GameStatus game={game} />
-      <Choices game={game} />
+      <ScoreBoard />
+      <GameStatus />
+      <Choices />
     </>
   );
 });
