(EmptyGlobalState)
12 |
13 | return (
14 | {children}
15 | )
16 | }
17 |
18 |
--------------------------------------------------------------------------------
/src/guard/PrivateGuard.tsx:
--------------------------------------------------------------------------------
1 | import { Navigate, Outlet } from "react-router-dom";
2 |
3 | export const PrivateGuard = () => {
4 | const token = localStorage.getItem("token")
5 |
6 | return token ? :
7 | }
8 |
9 |
--------------------------------------------------------------------------------
/src/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export * from './useFetch'
2 |
--------------------------------------------------------------------------------
/src/hooks/useApi.ts:
--------------------------------------------------------------------------------
1 | import { UseApiCall } from "@/models";
2 | import { useCallback, useEffect, useState } from "react";
3 |
4 | type UseApiOptions = {
5 | autoFetch?: boolean;
6 | params: P
7 | }
8 |
9 |
10 | type Data = T | null;
11 | type CustomError = Error | null;
12 |
13 | interface UseApiResult {
14 | loading: boolean;
15 | data: Data;
16 | error: CustomError;
17 | fetch: (param: P) => void;
18 | }
19 |
20 | export const useApi = (apiCall: (param: P) => UseApiCall, options?: UseApiOptions): UseApiResult => {
21 | const [loading, setLoading] = useState(false)
22 | const [data, setData] = useState>(null)
23 | const [error, setError] = useState(null)
24 |
25 | const fetch = useCallback((param: P) => {
26 | const { call, controller } = apiCall(param);
27 | setLoading(true);
28 |
29 | call.then((response) => {
30 | setData(response.data);
31 | setError(null);
32 | }).catch((err) => {
33 | setError(err)
34 | }).finally(() => {
35 | setLoading(false)
36 | })
37 | return () => controller.abort()
38 | }, [apiCall])
39 |
40 | useEffect(() => {
41 | if (options?.autoFetch) {
42 | return fetch(options.params);
43 | }
44 |
45 | }, [fetch, options?.autoFetch, options?.params])
46 |
47 | return { loading, data, error, fetch }
48 | }
49 |
--------------------------------------------------------------------------------
/src/hooks/useFetch.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | type Data = T | null;
4 | type ErrorType = Error | null;
5 |
6 | interface Params {
7 | data: Data;
8 | loading: boolean;
9 | error: ErrorType;
10 | }
11 |
12 | export const useFetch = (url: string): Params => {
13 | const [data, setData] = useState>(null)
14 | const [loading, setLoading] = useState(true)
15 | const [error, setError] = useState(null)
16 |
17 | useEffect(() => {
18 | const controller = new AbortController();
19 |
20 | setLoading(true)
21 |
22 | const fetchData = async () => {
23 | try {
24 | const response = await fetch(url, controller);
25 |
26 | if (!response.ok) {
27 | throw new Error("Error en la petición")
28 | }
29 |
30 | const jsonData: T = await response.json();
31 |
32 | setData(jsonData)
33 | setError(null);
34 | } catch (err) {
35 | setError(err as Error)
36 | } finally {
37 | setLoading(false)
38 | }
39 | }
40 |
41 | fetchData();
42 |
43 | return () => {
44 | controller.abort();
45 | }
46 |
47 | }, [url])
48 |
49 | return { data, loading, error }
50 | }
51 |
52 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: light dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | }
15 |
16 | a {
17 | font-weight: 500;
18 | color: #646cff;
19 | text-decoration: inherit;
20 | }
21 | a:hover {
22 | color: #535bf2;
23 | }
24 |
25 | body {
26 | margin: 0;
27 | display: flex;
28 | place-items: center;
29 | min-width: 320px;
30 | min-height: 100vh;
31 | }
32 |
33 | h1 {
34 | font-size: 3.2em;
35 | line-height: 1.1;
36 | }
37 |
38 | button {
39 | border-radius: 8px;
40 | border: 1px solid transparent;
41 | padding: 0.6em 1.2em;
42 | font-size: 1em;
43 | font-weight: 500;
44 | font-family: inherit;
45 | background-color: #1a1a1a;
46 | cursor: pointer;
47 | transition: border-color 0.25s;
48 | }
49 | button:hover {
50 | border-color: #646cff;
51 | }
52 | button:focus,
53 | button:focus-visible {
54 | outline: 4px auto -webkit-focus-ring-color;
55 | }
56 |
57 | @media (prefers-color-scheme: light) {
58 | :root {
59 | color: #213547;
60 | background-color: #ffffff;
61 | }
62 | a:hover {
63 | color: #747bff;
64 | }
65 | button {
66 | background-color: #f9f9f9;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from "react";
2 | import { createRoot } from "react-dom/client";
3 | import "./index.css";
4 | import { initAxios } from "./services/axios.service.ts";
5 | import AppHookContainer from "./AppHookContainer.tsx";
6 |
7 | initAxios();
8 |
9 | createRoot(document.getElementById("root")!).render(
10 |
11 |
12 | ,
13 | );
14 |
--------------------------------------------------------------------------------
/src/models/character.model.ts:
--------------------------------------------------------------------------------
1 | export interface Character {
2 | name: string;
3 | gender: string;
4 | status: string;
5 | }
6 |
7 | export const emptyCharacter: Character = {
8 | name: "",
9 | gender: "",
10 | status: ""
11 | }
12 |
--------------------------------------------------------------------------------
/src/models/index.ts:
--------------------------------------------------------------------------------
1 | export * from './user.model'
2 | export * from './character.model'
3 | export * from './useApi.model'
4 | export * from './routes.model'
5 |
6 |
--------------------------------------------------------------------------------
/src/models/routes.model.ts:
--------------------------------------------------------------------------------
1 | export const AppRoutes = {
2 | login: '/login',
3 | private: {
4 | root: '/private',
5 | dashboard: '/dashboard',
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/src/models/useApi.model.ts:
--------------------------------------------------------------------------------
1 | import { AxiosResponse } from "axios";
2 |
3 | export interface UseApiCall {
4 | call: Promise>,
5 | controller: AbortController
6 | }
7 |
--------------------------------------------------------------------------------
/src/models/user.model.ts:
--------------------------------------------------------------------------------
1 | export interface User {
2 | name: string
3 | lastName: string
4 | }
5 |
--------------------------------------------------------------------------------
/src/private/Dashboard/Dashboard.tsx:
--------------------------------------------------------------------------------
1 | export const Dashboard = () => {
2 | return Esto es el Dashboard !
3 | }
4 |
--------------------------------------------------------------------------------
/src/private/PrivateRouter.tsx:
--------------------------------------------------------------------------------
1 | import { Navigate, Route, Routes } from "react-router-dom"
2 | import { Dashboard } from "./Dashboard/Dashboard"
3 | import { RoutesWithNotFound } from "@/components/RoutesWithNotFound/RoutesWithNotFound"
4 | import { AppRoutes } from "@/models"
5 |
6 | export const PrivateRouter = () => {
7 | return (
8 |
9 | } />
10 | } />
11 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/src/public/Login/Login.tsx:
--------------------------------------------------------------------------------
1 | export const Login = () => {
2 | return Esto es el Login !!!
3 | }
4 |
--------------------------------------------------------------------------------
/src/services/api.service.ts:
--------------------------------------------------------------------------------
1 | const BASE_URL = "https://rickandmortyapi.com/api"
2 | import { Character, UseApiCall } from "@/models"
3 | import { loadAbort } from "../utilities"
4 | import axios from "axios"
5 |
6 | export const getCharacter = (id: number): UseApiCall => {
7 | const controller = loadAbort();
8 |
9 | return {
10 | call: axios.get(`${BASE_URL}/character/${id}`, { signal: controller.signal }),
11 | controller
12 | };
13 | }
14 |
15 | export const newCharacter = (character: Character): UseApiCall => {
16 | const controller = loadAbort();
17 |
18 | return {
19 | call: axios.post(`${BASE_URL}/characters`, character, { signal: controller.signal }),
20 | controller
21 | }
22 | }
23 |
24 |
--------------------------------------------------------------------------------
/src/services/axios.service.ts:
--------------------------------------------------------------------------------
1 | import axios, { AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from "axios";
2 |
3 | let axiosInstance: AxiosInstance;
4 |
5 | const createAxios = (baseURL: string) => {
6 | axiosInstance = axios.create({ baseURL })
7 | }
8 |
9 | const setupInterceptors = () => {
10 | axiosInstance.interceptors.request.use(
11 | (config: InternalAxiosRequestConfig) => {
12 | const token = localStorage.get("token");
13 | if (token) {
14 | config.headers.set(`Authorization Bearer: ${token}`)
15 | }
16 | console.log(`Request made to: ${config.url}`)
17 | return config;
18 | },
19 | (error) => {
20 | return Promise.reject(error)
21 | }
22 | );
23 |
24 | axiosInstance.interceptors.response.use(
25 | (response: AxiosResponse) => {
26 | console.log(`Response from: ${response.config.url}`, {
27 | data: response.data,
28 | status: response.status,
29 | });
30 | return response;
31 | }, (error) => {
32 | if (error.response) {
33 | console.error(`Error response from: ${error.response.config.url}`)
34 | } {
35 | console.error(`Error: ${error.message}`)
36 | }
37 | return Promise.reject(error)
38 | }
39 | )
40 | }
41 |
42 |
43 | export const initAxios = () => {
44 | createAxios('https://rickandmortyapi.com/api');
45 | setupInterceptors();
46 | return axiosInstance
47 | }
48 |
--------------------------------------------------------------------------------
/src/services/index.ts:
--------------------------------------------------------------------------------
1 | export * from './share-value-children.service'
2 |
--------------------------------------------------------------------------------
/src/services/share-value-children.service.ts:
--------------------------------------------------------------------------------
1 | export class SharedValueChildren {
2 | private value: string;
3 |
4 | constructor(value: string) {
5 | this.value = value;
6 | }
7 |
8 | getValue() {
9 | return this.value
10 | }
11 |
12 | setValue(value: string) {
13 | if (value.length < 1) {
14 | throw new Error("value has to be a string and has to have at least a character");
15 | }
16 | this.value = value
17 | }
18 | }
19 |
20 | export const sharedValueChildren = new SharedValueChildren("");
21 |
--------------------------------------------------------------------------------
/src/utilities/index.ts:
--------------------------------------------------------------------------------
1 | export * from './loadAbort.utility'
2 |
--------------------------------------------------------------------------------
/src/utilities/loadAbort.utility.ts:
--------------------------------------------------------------------------------
1 | export const loadAbort = () => {
2 | return new AbortController();
3 | }
4 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "isolatedModules": true,
13 | "moduleDetection": "force",
14 | "noEmit": true,
15 | "jsx": "react-jsx",
16 |
17 | /* Linting */
18 | "strict": true,
19 | "noUnusedLocals": true,
20 | "noUnusedParameters": true,
21 | "noFallthroughCasesInSwitch": true,
22 | "baseUrl": ".",
23 | "paths": {
24 | "@/*": ["./src/*"]
25 | }
26 | },
27 | "include": ["src"]
28 | }
29 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [],
3 | "references": [
4 | {
5 | "path": "./tsconfig.app.json"
6 | },
7 | {
8 | "path": "./tsconfig.node.json"
9 | }
10 | ],
11 | "compilerOptions": {
12 | "baseUrl": ".",
13 | "paths": {
14 | "@": [
15 | "src/*"
16 | ]
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2022",
4 | "lib": ["ES2023"],
5 | "module": "ESNext",
6 | "skipLibCheck": true,
7 |
8 | /* Bundler mode */
9 | "moduleResolution": "bundler",
10 | "allowImportingTsExtensions": true,
11 | "isolatedModules": true,
12 | "moduleDetection": "force",
13 | "noEmit": true,
14 |
15 | /* Linting */
16 | "strict": true,
17 | "noUnusedLocals": true,
18 | "noUnusedParameters": true,
19 | "noFallthroughCasesInSwitch": true
20 | },
21 | "include": ["vite.config.ts"]
22 | }
23 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react-swc'
3 | import path from "path";
4 |
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [react()],
8 | resolve: {
9 | alias: {
10 | '@': path.resolve(__dirname, 'src')
11 | }
12 | }
13 | })
14 |
--------------------------------------------------------------------------------