From f74d5bc51368051b4faaa7b5b1e7de4c1df40548 Mon Sep 17 00:00:00 2001 From: Barbara Gimeno Date: Thu, 2 Nov 2023 23:17:26 +0100 Subject: [PATCH 1/5] Create Loading.tsx --- public/images/logo.png | Bin 0 -> 2210 bytes src/components/App/App.tsx | 2 + src/components/Loading/Loading.test.tsx | 15 +++++ src/components/Loading/Loading.tsx | 18 +++++ src/components/Loading/LoadingStyled.ts | 85 ++++++++++++++++++++++++ src/styles/mainTheme.ts | 1 + src/styles/styled.d.ts | 1 + 7 files changed, 122 insertions(+) create mode 100644 public/images/logo.png create mode 100644 src/components/Loading/Loading.test.tsx create mode 100644 src/components/Loading/Loading.tsx create mode 100644 src/components/Loading/LoadingStyled.ts diff --git a/public/images/logo.png b/public/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..9af6a32223a0d4c154f545a2d1ac8facc5d1c8e5 GIT binary patch literal 2210 zcma)8c|6k(10IICh95CGwtkW#Lqa2GW3HSNIr_0C$~{NO6hgeNq@)6M=5KnN8)uzV1?E7N}D4UA!^gcwD?sC3sn4~PR6E0wjtNj z3AI(3@42?y^?jZ&1Udm6$?}b7>h30|Z31V0u;#qE5ZdqZ3h%^sfOmvXyk>f}$AJHYXEU9N&f5GRF4keA zy2(M1(KrDo_y6FSC#GZ96gV%%`YfemF|Fv)T?)GkV1uS*d`vc zt;2BSC!eKt_W!(k*0^YJKsZc-AREX1=UWtkcb8LE+3qgM2&;bDSrKze3J)Qv#U5gRb(G%Og{&$AoAe19KT}qno?#V6Yl`HF4Zm)3bbEj|d?X3Xu zM;F^`vP7cT1?o5`EjIa_qc%?@KWqw0aBR?{HHhr0>^_^5adgRthVmG3BIg1kG+Ot_ zOE%Xkqig=rKtd!SfDW>NTW2sX1kY#b#wmH~gNehZFgdP{|wTnc#iT^O7B*x#>k85jL0jwtvg zw>-CD71J=hJ*%|A09lzF?p8*7^C4M=O-YV(kO6PYPfKcfh@F zk_AENX9x)j9%<6TY@m0P#i2S{4~) z?b@A?BP)7`s}YH5d7;K5&gn9K`kK#6RpB-Orv;)3RJNw`;4W$AG{jx~=!B#YqIZ{Z zqYoe{3=0VHVcrpb%NZ4Ip1{AfWQ)tVhZR#jOTDs%`uZ$IzHao2pIq8uJjzq|HM2t; zj&OautQCd0?oyN>tcm%sLNc~dmgb{kQCYB@NS``YW%66H&rjk}*y67xrP!Rvr7uIA zUkQ&=^It01cUHUX=k!CckDxEJw%4p7-@?92C)@V>iIpCo$Pi^1hn!ps-edIk&tfOw?4KrWW2mrcp-GeWRIDdI+)6laoyPrvJm`sOy#g+p_-oz3k{hu&sfXgU< zYXwG>aTaR4ymK_=%vAmzHM*x$bI%RKaYl*vwIc9&ozrJ!+ zR=pxgBSjLguu5mjOs=7*EY{!Uh~3Sz?A_t}@b?JmG~irn`u&6 z?)6!1Q1@y_Ylpj0UhAeSw_<%ZH98{Y(x#TpDR$6R1V zf>LCnfyBoXCEC;BruxU)>pY542d>X}OL_NHNk|ilV3O1#ii9kldrzvMSCm}C*Y+0l z%S2Nu#?2|>FT~W3?n8D0Gux72c=ZokS48-x6S5^@|<5ojm*58Z)=GRX`%z}s2 zpC*C?7~rW4wxBtrg@trZFPfsBS{%l0+Rg6VoTaS}**Hu|{@R6W>^1u;KS~g-Ke7Dj zZdXfOakZ4}a+#EoC)rU(YuiBAeOsd}^H3J<#|H&uBVN32h}q zrAJ!MYTrqB_2rdxDFMy0PGPF-rLe};ZnmUZOaxQ+mc#d%*)1*qR0V}ekp#mZPDjET zU4s)Ll1MhVi0meE4%nX=v}+CYp*VO}E?P_pvS9A#}YM))K0N=(wcYzyuxEar#gB771I8p1F<{YV=- z^vTDC`moum5UEP;`(*uaEkIb~q0})gf=1hC{;Nlx>Gyav58Fqv9miqeFRplYT~?N@ z(Q*!+)5Y(n84!8Gh)myKI^`(RSw8CDnxkjX8d-Xi7|y$_?QqE`AQ!q>Mr?(%kO%1h c69aqj6gGZ%yeE`%cqu@ZX13@$Q?G=70Ux*_-T(jq literal 0 HcmV?d00001 diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index 0eb58a5..4334b8f 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -3,11 +3,13 @@ import Header from "../Header/Header"; import HomePage from "../../pages/HomePage/HomePage"; import MainStyled from "./AppStyles"; import NavigationBar from "../NavigationBar/NavigationBar"; +import Loading from "../Loading/Loading"; const App = (): React.ReactElement => { return (
+ } /> diff --git a/src/components/Loading/Loading.test.tsx b/src/components/Loading/Loading.test.tsx new file mode 100644 index 0000000..58498bf --- /dev/null +++ b/src/components/Loading/Loading.test.tsx @@ -0,0 +1,15 @@ +import { render, screen } from "@testing-library/react"; +import Loading from "./Loading"; + +describe("Given a Loading component", () => { + describe("When it receives an image with the alt property 'logo loading page'", () => { + test("Then it should show a circle image", () => { + render(); + + const expectedText = "logo loading page"; + const loadingPage = screen.getByAltText(expectedText); + + expect(loadingPage).toBeInTheDocument(); + }); + }); +}); diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx new file mode 100644 index 0000000..06194b8 --- /dev/null +++ b/src/components/Loading/Loading.tsx @@ -0,0 +1,18 @@ +const Loading = (): React.ReactElement => { + return ( +
+ logo loading page +
+
+
+
+
+
+
+
+
+
+ ); +}; + +export default Loading; diff --git a/src/components/Loading/LoadingStyled.ts b/src/components/Loading/LoadingStyled.ts new file mode 100644 index 0000000..9b3c186 --- /dev/null +++ b/src/components/Loading/LoadingStyled.ts @@ -0,0 +1,85 @@ +import styled from "styled-components"; + +const LoadingStyled = styled.div` + background-color: ${({ theme }) => theme.color.containerBackground}; + position: relative; + width: 200px; + height: 200px; + display: inline-block; + overflow: hidden; + + .logo__line--horizontal { + position: relative; + background-color: ${({ theme }) => theme.color.containerBackground}; + height: 5%; + width: 88%; + bottom: 25%; + left: 5.5%; + border-top-left-radius: 10px 0; + } + + .logo__line--vertical { + background-origin: border-box; + position: relative; + background-color: ${({ theme }) => theme.color.containerBackground}; + top: 1%; + height: 98%; + width: 10%; + left: 30%; + } + + .smash-logo { + left: 20%; + top: 20%; + position: absolute; + border-radius: 100%; + height: 60%; + width: 60%; + background: ${({ theme }) => theme.color.logoMain}; + object-fit: contain; + } + + .delta { + top: 50px; + position: absolute; + color: ${({ theme }) => theme.color.logoMain}; + } + + @keyframes logo__ld { + 0% { + transform: rotate(0deg); + } + + 50% { + transform: rotate(180deg); + } + + 100% { + transform: rotate(360deg); + } + } + + .logo__ld { + position: absolute; + animation: ldio-q5r0pxxaf6b 1s linear infinite; + width: 160px; + height: 160px; + top: 20px; + left: 20px; + border-radius: 50%; + box-shadow: 0 4px 0 0 var(--main-color); + transform-origin: 80px 82px; + box-sizing: content-box; + } + + .logo__ld { + width: 100%; + height: 100%; + position: relative; + transform: translateZ(0) scale(1); + backface-visibility: hidden; + transform-origin: 0 0; + } +`; + +export default LoadingStyled; diff --git a/src/styles/mainTheme.ts b/src/styles/mainTheme.ts index a9c7fd5..4f87585 100644 --- a/src/styles/mainTheme.ts +++ b/src/styles/mainTheme.ts @@ -10,6 +10,7 @@ const mainTheme: DefaultTheme = { mainFont: "#000", secondaryFont: "#fff", inputBackground: "#fff", + logoMain: "#FF000", }, typography: { mainFontFamily: "Verdana, Geneva, Tahoma, sans-serif", diff --git a/src/styles/styled.d.ts b/src/styles/styled.d.ts index 0d556d9..091439a 100644 --- a/src/styles/styled.d.ts +++ b/src/styles/styled.d.ts @@ -11,6 +11,7 @@ declare module "styled-components" { mainFont: string; secondaryFont: string; inputBackground: string; + logoMain: string; }; typography: { mainFontFamily: string; From c0c121eb0ca2baf7343df211adf35b76bc3888ed Mon Sep 17 00:00:00 2001 From: Barbara Gimeno Date: Fri, 3 Nov 2023 10:51:41 +0100 Subject: [PATCH 2/5] Delate useless div with classes --- src/components/Loading/Loading.test.tsx | 22 +++++-- src/components/Loading/Loading.tsx | 9 --- src/components/Loading/LoadingStyled.ts | 85 ------------------------- 3 files changed, 16 insertions(+), 100 deletions(-) delete mode 100644 src/components/Loading/LoadingStyled.ts diff --git a/src/components/Loading/Loading.test.tsx b/src/components/Loading/Loading.test.tsx index 58498bf..37db39c 100644 --- a/src/components/Loading/Loading.test.tsx +++ b/src/components/Loading/Loading.test.tsx @@ -1,15 +1,25 @@ import { render, screen } from "@testing-library/react"; import Loading from "./Loading"; +import { ThemeProvider } from "styled-components"; +import mainTheme from "../../styles/mainTheme"; +import { BrowserRouter } from "react-router-dom"; describe("Given a Loading component", () => { - describe("When it receives an image with the alt property 'logo loading page'", () => { - test("Then it should show a circle image", () => { - render(); + describe("When is render", () => { + test("Then it should show `logo loading page`", () => { + const expectedAltText = "logo loading page"; + const expectedImageSrc = "public/images/logo.png"; - const expectedText = "logo loading page"; - const loadingPage = screen.getByAltText(expectedText); + render( + + + + {" "} + , + ); - expect(loadingPage).toBeInTheDocument(); + const loadImage = screen.getByAltText(expectedAltText); + expect(loadImage).toHaveAttribute("src", expectedImageSrc); }); }); }); diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx index 06194b8..58a83c9 100644 --- a/src/components/Loading/Loading.tsx +++ b/src/components/Loading/Loading.tsx @@ -2,15 +2,6 @@ const Loading = (): React.ReactElement => { return (
logo loading page -
-
-
-
-
-
-
-
-
); }; diff --git a/src/components/Loading/LoadingStyled.ts b/src/components/Loading/LoadingStyled.ts deleted file mode 100644 index 9b3c186..0000000 --- a/src/components/Loading/LoadingStyled.ts +++ /dev/null @@ -1,85 +0,0 @@ -import styled from "styled-components"; - -const LoadingStyled = styled.div` - background-color: ${({ theme }) => theme.color.containerBackground}; - position: relative; - width: 200px; - height: 200px; - display: inline-block; - overflow: hidden; - - .logo__line--horizontal { - position: relative; - background-color: ${({ theme }) => theme.color.containerBackground}; - height: 5%; - width: 88%; - bottom: 25%; - left: 5.5%; - border-top-left-radius: 10px 0; - } - - .logo__line--vertical { - background-origin: border-box; - position: relative; - background-color: ${({ theme }) => theme.color.containerBackground}; - top: 1%; - height: 98%; - width: 10%; - left: 30%; - } - - .smash-logo { - left: 20%; - top: 20%; - position: absolute; - border-radius: 100%; - height: 60%; - width: 60%; - background: ${({ theme }) => theme.color.logoMain}; - object-fit: contain; - } - - .delta { - top: 50px; - position: absolute; - color: ${({ theme }) => theme.color.logoMain}; - } - - @keyframes logo__ld { - 0% { - transform: rotate(0deg); - } - - 50% { - transform: rotate(180deg); - } - - 100% { - transform: rotate(360deg); - } - } - - .logo__ld { - position: absolute; - animation: ldio-q5r0pxxaf6b 1s linear infinite; - width: 160px; - height: 160px; - top: 20px; - left: 20px; - border-radius: 50%; - box-shadow: 0 4px 0 0 var(--main-color); - transform-origin: 80px 82px; - box-sizing: content-box; - } - - .logo__ld { - width: 100%; - height: 100%; - position: relative; - transform: translateZ(0) scale(1); - backface-visibility: hidden; - transform-origin: 0 0; - } -`; - -export default LoadingStyled; From 76b13641633c0bf71073299cdccc9b30c3b26703 Mon Sep 17 00:00:00 2001 From: Barbara Gimeno Date: Fri, 3 Nov 2023 14:07:32 +0100 Subject: [PATCH 3/5] Create UiContex.ts --- src/main.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.tsx b/src/main.tsx index 75f1c6d..c8c3683 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -7,7 +7,7 @@ import mainTheme from "./styles/mainTheme"; import CharacarterWrapper from "./features/characters/store/CharactersWrapper"; import GlobalStyle from "./styles/GlobalStyle"; import "@fontsource-variable/changa"; -import UiContextWrapped from "./features/characters/Ui/store/UiContextWrapped"; +import UiContextWrapped from "./features/Ui/store/UiContextWrapped"; ReactDOM.createRoot(document.getElementById("root")!).render( From 6f8de7294016455ffdf5f466570f9180461e21cf Mon Sep 17 00:00:00 2001 From: Barbara Gimeno Date: Fri, 3 Nov 2023 15:45:09 +0100 Subject: [PATCH 4/5] Add modification to Loading.test.tsx --- src/components/Loading/Loading.test.tsx | 9 ++++++--- .../store/{UiContextWrapped.tsx => UiContextWrapper.tsx} | 2 +- src/main.tsx | 2 +- 3 files changed, 8 insertions(+), 5 deletions(-) rename src/features/Ui/store/{UiContextWrapped.tsx => UiContextWrapper.tsx} (84%) diff --git a/src/components/Loading/Loading.test.tsx b/src/components/Loading/Loading.test.tsx index 37db39c..c5a1df0 100644 --- a/src/components/Loading/Loading.test.tsx +++ b/src/components/Loading/Loading.test.tsx @@ -3,6 +3,7 @@ import Loading from "./Loading"; import { ThemeProvider } from "styled-components"; import mainTheme from "../../styles/mainTheme"; import { BrowserRouter } from "react-router-dom"; +import UiContextWrapped from "../../features/Ui/store/UiContextWrapper"; describe("Given a Loading component", () => { describe("When is render", () => { @@ -12,9 +13,11 @@ describe("Given a Loading component", () => { render( - - - {" "} + + + + {" "} + , ); diff --git a/src/features/Ui/store/UiContextWrapped.tsx b/src/features/Ui/store/UiContextWrapper.tsx similarity index 84% rename from src/features/Ui/store/UiContextWrapped.tsx rename to src/features/Ui/store/UiContextWrapper.tsx index 47ce872..6110be0 100644 --- a/src/features/Ui/store/UiContextWrapped.tsx +++ b/src/features/Ui/store/UiContextWrapper.tsx @@ -4,7 +4,7 @@ import { PropsWithChildren, useState } from "react"; const UiContextWrapped = ({ children, }: PropsWithChildren): React.ReactElement => { - const [isLoading, setIsLoading] = useState(false); + const [isLoading, setIsLoading] = useState(false); return ( diff --git a/src/main.tsx b/src/main.tsx index c8c3683..d8cc4f5 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -7,7 +7,7 @@ import mainTheme from "./styles/mainTheme"; import CharacarterWrapper from "./features/characters/store/CharactersWrapper"; import GlobalStyle from "./styles/GlobalStyle"; import "@fontsource-variable/changa"; -import UiContextWrapped from "./features/Ui/store/UiContextWrapped"; +import UiContextWrapped from "./features/Ui/store/UiContextWrapper"; ReactDOM.createRoot(document.getElementById("root")!).render( From 43d9488c28942ad9fd41e9303fa57a1ddad047b3 Mon Sep 17 00:00:00 2001 From: Barbara Gimeno Date: Fri, 3 Nov 2023 16:09:14 +0100 Subject: [PATCH 5/5] Modify wrapped to wrapper --- src/components/Loading/Loading.test.tsx | 8 ++++---- src/features/Ui/store/UiContextWrapper.tsx | 13 +++++-------- src/main.tsx | 6 +++--- 3 files changed, 12 insertions(+), 15 deletions(-) diff --git a/src/components/Loading/Loading.test.tsx b/src/components/Loading/Loading.test.tsx index c5a1df0..0311f34 100644 --- a/src/components/Loading/Loading.test.tsx +++ b/src/components/Loading/Loading.test.tsx @@ -3,7 +3,7 @@ import Loading from "./Loading"; import { ThemeProvider } from "styled-components"; import mainTheme from "../../styles/mainTheme"; import { BrowserRouter } from "react-router-dom"; -import UiContextWrapped from "../../features/Ui/store/UiContextWrapper"; +import UiContextWrapper from "../../features/Ui/store/UiContextWrapper"; describe("Given a Loading component", () => { describe("When is render", () => { @@ -13,11 +13,11 @@ describe("Given a Loading component", () => { render( - + - {" "} - + + , ); diff --git a/src/features/Ui/store/UiContextWrapper.tsx b/src/features/Ui/store/UiContextWrapper.tsx index 6110be0..27239c3 100644 --- a/src/features/Ui/store/UiContextWrapper.tsx +++ b/src/features/Ui/store/UiContextWrapper.tsx @@ -1,16 +1,13 @@ import UiContext from "./UiContext"; -import { PropsWithChildren, useState } from "react"; +import { PropsWithChildren, useMemo, useState } from "react"; -const UiContextWrapped = ({ +const UiContextWrapper = ({ children, }: PropsWithChildren): React.ReactElement => { const [isLoading, setIsLoading] = useState(false); + const uiValue = useMemo(() => ({ isLoading, setIsLoading }), [isLoading]); - return ( - - {children} - - ); + return {children}; }; -export default UiContextWrapped; +export default UiContextWrapper; diff --git a/src/main.tsx b/src/main.tsx index d8cc4f5..cccd6ad 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -7,11 +7,11 @@ import mainTheme from "./styles/mainTheme"; import CharacarterWrapper from "./features/characters/store/CharactersWrapper"; import GlobalStyle from "./styles/GlobalStyle"; import "@fontsource-variable/changa"; -import UiContextWrapped from "./features/Ui/store/UiContextWrapper"; +import UiContextWrapper from "./features/Ui/store/UiContextWrapper"; ReactDOM.createRoot(document.getElementById("root")!).render( - + @@ -20,6 +20,6 @@ ReactDOM.createRoot(document.getElementById("root")!).render( - + , );