Implement login screen design

[misslecter]

Úkolem je implementovat úvodní stránku ve frameworku React s použitím Typescriptu dle navrženého designu. Pro snadnější odečtení barev, fontů a velikostí je design k nalezení na odkazu: https://xd.adobe.com/view/736a6f80-45d4-4311-8a53-623f5685573d-2639/

1. Po spuštění aplikace by měl být uživatel přesměrován na stránku /login, kde se mu zobrazí obrazovka odpovídající designu (s dodržením fontů, barev a velikostí).
2. Přepnutím mezi "Chci se objednat na vyšetření" a "Chci si objednat recept" se změní popisek v Call-To-Action tlačítku.
3. Po kliknutí na CTA tlačítko aplikace uloží volbu uživatele do globálního stavu aplikace a přesměruje ho na stránku /.
4. Na stránce / se volba uživatele načte z globálního stavu pomocí vlastního useUser hooku a zobrazí se libovolným způsobem. V hooku by mělo být ošetřen stav, kdy uživatel zatím nezvolil žádnou možnost (v tomto případě aplikace hodí Error).
5. Před odevzdáním úkolu by v projektu měly bez problémů projít příkazy yarn run prettier-check a yarn run lint-check.

Úkol by měl být odevzdán formou pull requestu do větve master.

[renekliment]

@misslecter Dobrý den, děkuji za zadání, jdu se do toho pustit. 🙂 Mám k tomu otázky pro ujasnění. Pár drobných a jednu větší.

1. Po spuštění aplikace by měl být uživatel přesměrován na stránku /login

   Předpokládám, že se tím myslí, že když půjdu na /, tak mě to hodí na /login, pokud jsem ještě nic nevybral?

2. Po kliknutí na CTA tlačítko aplikace uloží volbu uživatele do globálního stavu aplikace a přesměruje ho na stránku /.

   Předpokládám, že na globální stav můžu použít cokoliv co budu chtít (useState/useReducer (samotný, či s useContext), redux(-toolkit), ...)?

3. Na stránce / se volba uživatele načte z globálního stavu pomocí vlastního useUser hooku .... V hooku by mělo být ošetřen stav, kdy uživatel zatím nezvolil žádnou možnost (v tomto případě aplikace hodí Error).

   Tady už je můj hlavní dotaz. 🐱

   1. Hook se má jmenovat useUser, předpokládám tedy, že stav aplikace bude mít klíč user, který bude nějaký objekt, který bude mít property něco jako orderType (co chce uživatel objednat), pokud by to měl být jen skalár s typem objednávky, předpokládám, že by se měl jmenovat jinak. Nebo podle typu objednávky budeme uživatele rozlišovat jako třeba "patient" (vyšetření) a "customer" (recept)?
   2. Myslel bych si, že když uživatel nezvolil žádnou možnost, tak hook vrátí jako stav null (a v podmínce můžu následně přesměrovat jinam, nebo zůstat, pokud mám stav), ale klidně můžu vyhodit JS Error (throw new Error("...")).
      Pak musím komponentu na stránce /, která hook používá obalit do Error Boundary. Jelikož při spuštění aplikace jde uživatel na /, pokud tedy platí moje domněnka z bodu 1, uživatel ještě nic nezvolil, hook vyhodí JS chybu a v Error Boundary při handlování chyby přesměruji uživatele na /login. A zároveň při tomto návrhu uživateli nikde žádnou chybu nezobrazuji, protože k tomu nemám moc důvod, ani data. Což se mi zdá trochu crazy způsob pro realizaci té flow 🤪, tak se chci ujistit, jestli jsem něco nepochopil špatně. Tedy v kontextu aplikace/flow moc nerozumím větě "v tomto případě aplikace hodí Error". 🙏

4. Pokud se vrátím z / na stránku /login, měl by se držet stav vybrané položky, že?

5. Zpět na web mild.blue má házet na /, nebo externě na https://mild.blue?

Děkuji. 🙏

[renekliment]

Čtu zadání ještě jednou a všiml jsem si (samozřejmě až po odeslání předchozí zprávy, i když jsem zadání předtím četl hodněkrát) a je tam

v tomto případě aplikace hodí Error

ne nutně samotný hook, který tedy klidně může vrátit null a nemusím řešit error boundary, nicméně pokud / zobrazuje jak vybraný stav i přesměrovává na login, pokud není nic vybráno, tak tam mám stále konflikt a nejasnost co znamená to "aplikace hodí Error" - kdy, jak, ...

🙏

[renekliment]

Jen píši update, aby bylo vidět, že jsem začal.

Mám nějaký prototyp, ke kterému mi zbývá dodělat nějaké věci dle zadání a za sebe a ty věci na které jsem jsem se ptal výše. Přidal jsem si na to TODOčko. Ještě to není na koukání/review (protože ty věci v TODO), tak ještě neotevírám pull request. Ale případně se dá při zájmu na to kouknout čistě jako preview, že to zhruba funguje při ignoraci kódu a toho, že vizuál nesedí úplně.

Teď musím na cca 4 hodiny zmizet mimo PC, ale až se vrátím, tak mám v plánu to dnes dodělat a otevřít PR ať už s vyjasněnými a zapracovanými věcmi z dotazů výše, či bez (tedy se zpracovanými věcmi za mě).

[renekliment]

Nakonec posílám PR až teď, hodilo se mi o většině víkendu využít čas jinak než dolazováním kódu a stejně potřebuji pro dokončení zodpovězené otázky k zadání. Více již v otevřeném #8. 🙏