Explore Characters
25 |
26 |
33 |
6 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/src/features/auth/SignInPage/SignInPage.tsx:
--------------------------------------------------------------------------------
1 | import { useAuthUser } from '@/contexts/userContext';
2 | import { logInWithEmailAndPassword, signInWithGoogle } from '@/services/firebase/auth';
3 | import { sendEmailVerification } from 'firebase/auth';
4 | import { FormEvent, useEffect, useRef } from 'react';
5 | import { Link, useNavigate } from 'react-router-dom';
6 |
7 | export default function SignInPage() {
8 | const formRef = useRef
38 |
69 | );
70 | }
71 |
--------------------------------------------------------------------------------
/src/features/auth/SignupPage/SignupPage.tsx:
--------------------------------------------------------------------------------
1 | import { registerWithEmailAndPassword } from '@/services/firebase/auth';
2 | import { sendEmailVerification } from 'firebase/auth';
3 | import { FormEvent } from 'react';
4 | import { useNavigate } from 'react-router-dom';
5 |
6 | export default function SignUpPage() {
7 | const navigate = useNavigate();
8 |
9 | const clickSubmitForm = (e: FormEventSign In
39 |Using Email & Password:
40 | 47 |OR
48 |
49 |
55 |
61 |
62 | 63 | Dont have an account yet?{' '} 64 | 65 | Create One 66 | 67 |
68 |
35 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/src/features/auth/VerifyEmailPage/VerifyEmailPage.tsx:
--------------------------------------------------------------------------------
1 | import { useAuthUser } from '@/contexts/userContext';
2 | import { sendEmailVerification } from 'firebase/auth';
3 | import { useEffect } from 'react';
4 | import { useNavigate } from 'react-router-dom';
5 |
6 | export default function VerifyEmail() {
7 | const user = useAuthUser();
8 | const navigate = useNavigate();
9 |
10 | const sendEmail = () => {
11 | if (user?.email) sendEmailVerification(user);
12 | };
13 |
14 | useEffect(() => {
15 | const interval = setInterval(() => {
16 | if (user?.emailVerified) navigate('/');
17 | else user?.reload();
18 | }, 1000);
19 | return () => clearInterval(interval);
20 | }, [navigate, user]);
21 |
22 | return (
23 | Sign Up
36 | 44 |
24 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/src/features/characters/CharacterDetailsPage/CharacterDetailsPage.tsx:
--------------------------------------------------------------------------------
1 | import { Link, useLoaderData, useParams } from 'react-router-dom';
2 | import { characterDetailsQuery, LoaderData } from './characterDetailsQuery';
3 | import { useQuery } from '@tanstack/react-query';
4 |
5 | export default function CharacterDetailsPage() {
6 | const data = useLoaderData() as LoaderData;
7 | const params = useParams();
8 |
9 | const query = useQuery({
10 | ...characterDetailsQuery(Number(params.characterId)),
11 | initialData: data,
12 | });
13 |
14 | return (
15 | Verify Your Email
25 |26 | We sent a verification code to your email: {user?.email} 27 |
28 |29 | Please check your inbox & spam folder, then click the link there, then come back to this 30 | page 31 |
32 | 38 |
16 |
17 | ⬅️ Back
18 |
19 | 
21 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/features/characters/CharacterDetailsPage/characterDetailsQuery.ts:
--------------------------------------------------------------------------------
1 | import { API } from '@/api';
2 | import { createLoader } from '@/router/createLoader';
3 | import { LoaderReturnType } from '@/utils/types/typeUtils';
4 |
5 | export const characterDetailsQuery = (id: number) => ({
6 | queryKey: ['character', id],
7 | queryFn: () => API.characters.getCharacterById(id),
8 | });
9 |
10 | export type LoaderData = LoaderReturnType{query.data.name}
20 |
22 |
26 | {query.data.species}
23 |{query.data.status}
24 |{query.data.gender}
25 |
49 | {props.isLoading && (
50 |
97 | );
98 | }
99 |
--------------------------------------------------------------------------------
/src/features/characters/CharactersPage/CharactersFiltersContext.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, ReactNode, FC, useContext, useState } from 'react';
2 |
3 | type StatusFilter = 'alive' | 'dead' | 'unknown';
4 | type GenderFilter = 'male' | 'female' | 'genderless' | 'unknown';
5 |
6 | interface ContextState {
7 | status: StatusFilter | undefined;
8 | gender: GenderFilter | undefined;
9 | setStatus: (value: this['status']) => void;
10 | setGender: (value: this['gender']) => void;
11 | }
12 |
13 | const Context = createContext
54 |
56 | )}
57 | Filters
58 |
59 |
96 |
60 |
61 |
77 |
78 |
79 |
95 |
13 |
15 | );
16 |
17 | return (
18 | Nothing here to show...
14 |-
19 | {characters.map((character) => (
20 |
-
21 |
26 |
27 |
28 |41 | 42 |{character.name}
29 |{character.species}
30 |{character.status}
31 |{character.gender}
32 | 33 | 34 | 40 |
43 | ))}
44 |
{query.data.name}
24 |{query.data.episode}
25 |{query.data.air_date}
26 |404
; 17 | 18 | return ( 19 |
20 |
21 | ⬅️ Back
22 |
23 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/features/episodes/EpisodesPage.tsx:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import { Suspense } from 'react';
3 | import {
4 | Await,
5 | Link,
6 | matchPath,
7 | matchRoutes,
8 | Outlet,
9 | useLoaderData,
10 | useLocation,
11 | } from 'react-router-dom';
12 | import EpisodeDetailsModal from './EpisodeDetailsModal';
13 | import EpisodeDetailsPage from './EpisodeDetailsPage';
14 | import { LoaderData } from './episodesPageQuery';
15 |
16 | export default function EpisodesPageWrapper() {
17 | const { pathname, state } = useLocation();
18 |
19 | const onDetailsPage = isOnDetailsPage(pathname);
20 | const openAsModal = state?.openModal;
21 |
22 | const whatToShow = onDetailsPage ? (openAsModal ? 'list + modal' : 'details_page') : 'list_page';
23 |
24 | if (whatToShow === 'list + modal')
25 | return (
26 | <>
27 | {query.data.name}
24 |{query.data.episode}
25 |{query.data.air_date}
26 |
44 | Loading episodes (deferred)...
48 | }
49 | >
50 |
51 | {(resolved: typeof data) => (
52 |
79 |
80 |
81 | );
82 | }
83 |
84 | function isOnDetailsPage(pathname: string) {
85 | return matchPath('/episodes/:episodeId', pathname);
86 | }
87 |
--------------------------------------------------------------------------------
/src/features/episodes/episodeDetailsQuery.ts:
--------------------------------------------------------------------------------
1 | import { API } from '@/api';
2 | import { createLoader } from '@/router/createLoader';
3 | import { LoaderReturnType } from '@/utils/types/typeUtils';
4 |
5 | export const episodeDetailsQuery = (id: number) => ({
6 | queryKey: ['episode', id],
7 | queryFn: () => API.episodes.getEpisodeById(id),
8 | });
9 |
10 | export type LoaderData = LoaderReturnTypeEpisodes
45 |-
53 | {resolved.results?.map((episode) => (
54 |
-
55 |
63 | 64 |73 | 74 |
{episode.name}
65 |{episode.episode}
66 |67 | {episode.air_date} 68 |
69 | 72 |
75 | ))}
76 |
Home Page
;
5 | }
6 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | :root {
6 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
7 | font-size: 16px;
8 | line-height: 24px;
9 | font-weight: 400;
10 |
11 | color-scheme: light dark;
12 | color: rgba(255, 255, 255, 0.87);
13 | background-color: theme(colors.gray.700);
14 |
15 | font-synthesis: none;
16 | text-rendering: optimizeLegibility;
17 | -webkit-font-smoothing: antialiased;
18 | -moz-osx-font-smoothing: grayscale;
19 | -webkit-text-size-adjust: 100%;
20 | }
21 |
22 | html {
23 | scrollbar-gutter: stable;
24 | }
25 |
26 | body {
27 | /* background-color: theme(colors.blue.500); */
28 | margin: 0;
29 | min-width: 320px;
30 | min-height: 100vh;
31 | }
32 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import App from './App';
4 | import './index.css';
5 | import { Wrapper } from './utils/wrapper';
6 |
7 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
8 |