From 7bd55a02b62fd92a5817b4ac28a65aac42e6788c Mon Sep 17 00:00:00 2001 From: Visakh Vijayan Date: Mon, 13 May 2024 09:22:21 +0530 Subject: [PATCH] added context and coins --- src/App.tsx | 8 ++- src/assets/coin.svg | 92 +++++++++++++++++++++++++++++++++ src/components/coin/index.tsx | 16 ++++++ src/components/header/index.tsx | 11 ++++ src/components/index.ts | 5 +- src/components/logo/index.tsx | 7 +++ src/components/trivia/index.tsx | 10 +++- src/context/coin.tsx | 27 ++++++++++ src/context/index.ts | 3 ++ src/main.tsx | 5 +- 10 files changed, 180 insertions(+), 4 deletions(-) create mode 100644 src/assets/coin.svg create mode 100644 src/components/coin/index.tsx create mode 100644 src/components/header/index.tsx create mode 100644 src/components/logo/index.tsx create mode 100644 src/context/coin.tsx create mode 100644 src/context/index.ts diff --git a/src/App.tsx b/src/App.tsx index 0f22b00..0c28729 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,16 @@ import "./App.css"; -import { Trivia } from "./components/index"; +import { Coin, Header, Logo, Trivia } from "./components/index"; function App() { return (
+
+
+ + +
+
diff --git a/src/assets/coin.svg b/src/assets/coin.svg new file mode 100644 index 0000000..932c060 --- /dev/null +++ b/src/assets/coin.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/coin/index.tsx b/src/components/coin/index.tsx new file mode 100644 index 0000000..2ae22bf --- /dev/null +++ b/src/components/coin/index.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import { useCoinContext } from "../../context/coin"; +import CoinIcon from "../../assets/coin.svg"; + +const Coin: React.FC = () => { + const { coins } = useCoinContext(); + + return ( +
+ {coins}  + +
+ ); +}; + +export default Coin; diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx new file mode 100644 index 0000000..9d528f5 --- /dev/null +++ b/src/components/header/index.tsx @@ -0,0 +1,11 @@ +import React, { PropsWithChildren } from "react"; + +const Header: React.FC = ({ children }) => { + return ( +
+ {children} +
+ ); +}; + +export default Header; diff --git a/src/components/index.ts b/src/components/index.ts index 3e324ae..f56a4cf 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,6 +1,9 @@ import Auth0LoginButton from "./auth0-login-button"; import Auth0LogoutButton from "./auth0-logout-button"; +import Coin from "./coin"; +import Header from "./header"; import Loader from "./loader"; +import Logo from "./logo"; import Trivia from "./trivia"; -export { Auth0LoginButton, Auth0LogoutButton, Trivia, Loader }; +export { Auth0LoginButton, Auth0LogoutButton, Trivia, Loader, Header, Coin, Logo }; diff --git a/src/components/logo/index.tsx b/src/components/logo/index.tsx new file mode 100644 index 0000000..ccf5b22 --- /dev/null +++ b/src/components/logo/index.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const Logo: React.FC = () => { + return
; +}; + +export default Logo; diff --git a/src/components/trivia/index.tsx b/src/components/trivia/index.tsx index a42e43b..a7dc1e3 100644 --- a/src/components/trivia/index.tsx +++ b/src/components/trivia/index.tsx @@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react"; import { getTriviaFromGemini } from "../../services/gemini"; import Loader from "../loader"; import { useQuery } from "@tanstack/react-query"; +import { useCoinContext } from "../../context/coin"; const Trivia: React.FC = () => { const { isLoading, data, refetch, isRefetching } = useQuery({ @@ -10,6 +11,8 @@ const Trivia: React.FC = () => { queryFn: async () => getTriviaFromGemini(), }); + const { addCoin } = useCoinContext(); + const [isAttempted, setIsAttempted] = useState(false); const [correctOptionIndex, setCorrectOptionIndex] = useState(-1); @@ -18,6 +21,10 @@ const Trivia: React.FC = () => { const onOptionClick = (optionIndex: number) => { setClickedOptionIndex(optionIndex); setIsAttempted(true); + + if (correctOptionIndex === optionIndex) { + addCoin(1); + } }; const onNexTriviaClick = () => { @@ -26,6 +33,7 @@ const Trivia: React.FC = () => { }; useEffect(() => { + console.log(data); if (!isLoading && data?.correctOption) { setCorrectOptionIndex( data.options.findIndex( @@ -33,7 +41,7 @@ const Trivia: React.FC = () => { ) ); } - }, [isLoading]); + }, [isLoading, isRefetching]); return (
diff --git a/src/context/coin.tsx b/src/context/coin.tsx new file mode 100644 index 0000000..dca7898 --- /dev/null +++ b/src/context/coin.tsx @@ -0,0 +1,27 @@ +import { createContext, useContext, useState } from "react"; + +export type CoinContextProps = { + coins: number; + addCoin: (coin: number) => void; +}; + +const CoinContext = createContext({} as CoinContextProps); +export const useCoinContext = (): CoinContextProps => useContext(CoinContext); + +const CoinContextProvider: React.FC<{ children: React.ReactNode }> = ({ + children, +}) => { + const [coins, setCoins] = useState(0); + + const addCoin = (coin: number) => { + setCoins(coins + coin); + }; + + return ( + + {children} + + ); +}; + +export default CoinContextProvider; diff --git a/src/context/index.ts b/src/context/index.ts new file mode 100644 index 0000000..043ad8a --- /dev/null +++ b/src/context/index.ts @@ -0,0 +1,3 @@ +import CoinContextProvider from "./coin"; + +export { CoinContextProvider }; \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index a551499..459293a 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -4,6 +4,7 @@ import App from "./App.tsx"; import "./index.css"; import { Auth0Provider } from "@auth0/auth0-react"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { CoinContextProvider } from "./context/index.ts"; const queryClient = new QueryClient(); @@ -17,7 +18,9 @@ ReactDOM.createRoot(document.getElementById("root")!).render( redirect_uri: window.location.origin, }} > - + + +