From 7378bf338a07bc0aa15bef26fc44706d3b41ec68 Mon Sep 17 00:00:00 2001 From: Visakh Vijayan Date: Sun, 26 May 2024 01:10:42 +0530 Subject: [PATCH] final changes for the loading state --- src/App.tsx | 50 ++++----- src/components/app-header/index.tsx | 37 +++++++ src/components/auth0-login-button/index.tsx | 2 +- src/components/auth0-logout-button/index.tsx | 6 +- src/components/header/index.tsx | 2 +- src/components/index.ts | 4 +- src/components/loader/index.tsx | 2 +- src/index.css | 8 -- src/pages/Categories.tsx | 80 ++++++++------ src/pages/Login.tsx | 13 ++- src/pages/Trivia.tsx | 109 +++++++++++-------- src/services/gemini.ts | 4 +- 12 files changed, 195 insertions(+), 122 deletions(-) create mode 100644 src/components/app-header/index.tsx diff --git a/src/App.tsx b/src/App.tsx index 64641cc..fd40ac9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,37 +1,35 @@ import "./App.css"; // import BrainIcon from './assets/brain_ai.svg'; -import { BrowserRouter, Routes, Route } from "react-router-dom"; +import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; import { Categories, Login, NotFound, Trivia } from "./pages"; +import { useAuth0 } from "@auth0/auth0-react"; +import { Loader } from "./components"; // import { Coin, Header, Hero, Logo, Trivia } from "./components/index"; function App() { + const { isLoading, isAuthenticated } = useAuth0(); + return ( - - - } /> - } /> - } /> - } /> - - - //
- //
- //
- // - // - //
- //
- // - //
- // - //  trivia.ai - //
- // - //
- // - //
- //
+ <> + {isLoading && } + {!isLoading && ( + + + } /> + : } + /> + : } + /> + } /> + + + )} + ); } diff --git a/src/components/app-header/index.tsx b/src/components/app-header/index.tsx new file mode 100644 index 0000000..a4639b4 --- /dev/null +++ b/src/components/app-header/index.tsx @@ -0,0 +1,37 @@ +import React from "react"; +import Header from "../header"; +import { BrainIcon } from "../../assets"; +import Auth0LogoutButton from "../auth0-logout-button"; +import { useNavigate } from "react-router-dom"; + +const AppHeader: React.FC = () => { + const navigate = useNavigate(); + + const onLogout = () => { + localStorage.clear(); + navigate("/"); + }; + + return ( +
+
+
+ navigate("/categories")} + className="border border-black rounded-full p-1 h-10 cursor-pointer" + src={BrainIcon} + /> +
+ trivia.ai + Endless Knowledge +
+
+
+ +
+
+
+ ); +}; + +export default AppHeader; diff --git a/src/components/auth0-login-button/index.tsx b/src/components/auth0-login-button/index.tsx index 09ad925..e8be7b4 100644 --- a/src/components/auth0-login-button/index.tsx +++ b/src/components/auth0-login-button/index.tsx @@ -22,7 +22,7 @@ const Auth0LoginButton: React.FC = ({ onLogin }) => { return (
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx index 9d528f5..5673ffa 100644 --- a/src/components/header/index.tsx +++ b/src/components/header/index.tsx @@ -2,7 +2,7 @@ import React, { PropsWithChildren } from "react"; const Header: React.FC = ({ children }) => { return ( -
+
{children}
); diff --git a/src/components/index.ts b/src/components/index.ts index 2939ef8..f08885b 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,3 +1,4 @@ +import AppHeader from "./app-header"; import Auth0LoginButton from "./auth0-login-button"; import Auth0LogoutButton from "./auth0-logout-button"; import Coin from "./coin"; @@ -7,4 +8,5 @@ import Loader from "./loader"; import Logo from "./logo"; import Trivia from "./trivia"; -export { Auth0LoginButton, Hero, Auth0LogoutButton, Trivia, Loader, Header, Coin, Logo }; + +export { Auth0LoginButton, Hero, Auth0LogoutButton, Trivia, Loader, Header, Coin, Logo, AppHeader }; diff --git a/src/components/loader/index.tsx b/src/components/loader/index.tsx index 0dd3c99..dc30dfe 100644 --- a/src/components/loader/index.tsx +++ b/src/components/loader/index.tsx @@ -6,7 +6,7 @@ const Loader: React.FC = () => {

- Getting the Next Question + Sit Tight! Loading

diff --git a/src/index.css b/src/index.css index 5887508..3c77058 100644 --- a/src/index.css +++ b/src/index.css @@ -43,20 +43,12 @@ h1 { button { border-radius: 8px; - border: 1px solid transparent; font-size: 1em; font-weight: 500; font-family: inherit; cursor: pointer; transition: border-color 0.25s; } -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} @media (prefers-color-scheme: light) { :root { diff --git a/src/pages/Categories.tsx b/src/pages/Categories.tsx index 3061550..3832caa 100644 --- a/src/pages/Categories.tsx +++ b/src/pages/Categories.tsx @@ -1,12 +1,14 @@ import React, { useEffect, useState } from "react"; import { getTriviaCategoriesFromGemini } from "../services/gemini"; import { useNavigate } from "react-router-dom"; +import { AppHeader, Loader } from "../components"; const Categories: React.FC = () => { const [categories, setCategories] = useState( (JSON.parse(localStorage.getItem("categories") as string) as string[]) || [] ); const [selectedCategories, setSelectedCategories] = useState([]); + const [isLoading, setIsLoading] = useState(false); const navigate = useNavigate(); @@ -15,11 +17,13 @@ const Categories: React.FC = () => { localStorage.removeItem("selectedCategories"); if (!categories.length) { + setIsLoading(true); getTriviaCategoriesFromGemini().then((result) => { const sortedResults = result.sort(); localStorage.setItem("categories", JSON.stringify(sortedResults)); setCategories(sortedResults); + setIsLoading(false); }); } }, []); @@ -48,40 +52,50 @@ const Categories: React.FC = () => { }; return ( -
- Categories - Choose the one(s) you think you are good at -
- {categories.map((category, _index) => { - return ( - - ); - })} + <> + +
+ Categories + + Pick Your Strengths and Showcase Your Knowledge + + {isLoading && } + {!isLoading && ( + <> +
+ {categories.map((category, _index) => { + return ( + + ); + })} +
+
+ +
+ + )}
-
- -
-
+ ); }; diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index db2d7c4..4210ed4 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -1,7 +1,8 @@ import React, { useEffect } from "react"; -import { Auth0LoginButton, Logo } from "../components"; +import { Auth0LoginButton } from "../components"; import { useNavigate } from "react-router-dom"; import { useAuth0 } from "@auth0/auth0-react"; +import { BrainIcon } from "../assets/index"; const Login: React.FC = () => { const navigate = useNavigate(); @@ -18,8 +19,14 @@ const Login: React.FC = () => { }, []); return ( -
- +
+ +
+ +  trivia.ai + + Discover Smart, Fun & Endless Knowledge +
); diff --git a/src/pages/Trivia.tsx b/src/pages/Trivia.tsx index 0a1b628..e0260b4 100644 --- a/src/pages/Trivia.tsx +++ b/src/pages/Trivia.tsx @@ -3,6 +3,7 @@ import Loader from "../components/loader/index"; import { useQuery } from "@tanstack/react-query"; import { useCoinContext } from "../context/coin"; import { getTriviaFromGemini } from "../services/gemini"; +import { AppHeader } from "../components"; const Trivia: React.FC = () => { const { isLoading, data, refetch, isRefetching } = useQuery({ @@ -47,56 +48,74 @@ const Trivia: React.FC = () => { }, [isLoading, isRefetching]); return ( -
- {(isLoading || isRefetching) && } - {!isLoading && !isRefetching && ( -
-
-

{data?.question}

-
-
- {data?.options?.map((option, index) => ( - - ))} -
- {isAttempted && ( + <> + +
+ {(isLoading || isRefetching) && } + {!isLoading && !isRefetching && ( +
+
+ + # + {data?.category + ?.toLowerCase() + .replace(/[^a-z]/g, "") + .split(" ") + .map((word, index) => + index === 0 + ? word + : word.charAt(0).toUpperCase() + word.slice(1) + ) + .join()} + +
-
-

{data?.summary}

-
-
+

{data?.question}

+
+
+ {data?.options?.map((option, index) => ( -
+ ))}
- )} -
- )} -
+ {isAttempted && ( +
+
+

{data?.summary}

+
+
+ +
+
+ )} +
+ )} +
+ ); }; diff --git a/src/services/gemini.ts b/src/services/gemini.ts index c0e5de9..cdb7878 100644 --- a/src/services/gemini.ts +++ b/src/services/gemini.ts @@ -42,7 +42,7 @@ export const getTriviaFromGemini = async (categories: string[] = []): Promise => { }); const result = await chat.sendMessage( - "Give me a list of 20 trivia categories as an array of strings", + "Give me a list of 15 trivia categories as an array of strings", ); const response = result.response;