Next.js 13 w Praktyce: Logika do obliczania statystyk sumarycznych

0:00Teraz, kiedy mamy już komponent do pojedynczych statystyk,

0:03możemy zająć się zbudowaniem tej części Dashboard związany ze statystykami.

0:08Jeżeli spojrzymy sobie na to, co chcielibyśmy tutaj wyświetlać, no to

0:12mamy tutaj sumę opłat w tym miesiącu, sumę opłat w zeszłym miesiącu.

0:17Mamy to, co już zostało zapłacone, to co jest ciągle do zapłacenia.

0:21No i mamy miesiąc i rok.

0:23Czyli tak naprawdę będziemy potrzebować na pewno.

0:26Patrząc na to, że te subskrypcje tutaj, które użytkownik sobie tutaj sumuje, w tej

0:31aplikacji są w różnych walutach, prawdopodobnie będziemy musieli sobie

0:35tutaj policzyć sumę dla każdej z walut i potem

0:40przerobić to po kursie danej waluty na walutę główną danego użytkownika, w której

0:45będziemy wyświetlać sobie nasze statystyki.

0:47Przypominam, że w naszej aplikacji

0:50my póki co nie mamy modułu do ustawień użytkownika.

0:54Tak naprawdę na sztywno sobie wpiszemy

0:56walutę, którą chcemy używać i będzie to waluta polska złotówka.

1:00Czyli będziemy musieli sobie policzyć sumę subskrypcji w euro.

1:04Pomnożyć to razy to ile kosztuje jedno euro w złotówkach?

1:08Tak samo będziemy musieli sobie policzyć sumę subskrypcji w dolarach.

1:12Pomnożyć to potem razy.

1:13To ile kosztuje dana suma w złotówkach?

1:16Ile jest kurs wymiany dolara na złotówki?

1:20Wtedy mając tę sumę sumujemy to wszystko.

1:22Będziemy mieli tutaj całą sumę, jaką

1:24użytkownik musi zapłacić w danym miesiącu za swoje subskrypcje, z których korzysta.

1:30Jeżeli chodzi o te to które już są zapłacone i które są do

1:33zapłacenia, to też będziemy musieli sobie je tutaj odróżnić.

1:37Patrząc na nasze dane, które mamy.

1:39Przejdźmy do naszej przeglądarki.

1:41Jeżeli sobie tutaj otworzymy Prisma Studio

1:43to zauważ, że jeżeli sobie zobaczymy Payments,

1:47no to niektóre z tych payments są not paid, niektóre są płatne.

1:51Dlatego też musimy sobie w zależności od

1:53tego policzyć te, które już są zapłacone, te które jeszcze nie są zapłacone, No i

1:59pokazać odpowiednie statystyki naszemu użytkownikowi.

2:03Przejdźmy teraz do edytora kodu i zaczniemy sobie od funkcji, która sumuje

2:08nam tak naprawdę wszystkie subskrypcje dla danej waluty.

2:12Natomiast zanim to zrobimy, to widząc nasz

2:15design i to co mamy już tutaj przygotowane.

2:18Myślę, że rozsądnym byłoby teraz

2:21przeniesienie tego komponentu, zbudowanie już osobnego komponentu np.

2:25Dashboard stats albo Dashboard main.

2:28I możemy sobie tam już wrzucić tą całą naszą logikę i wszystkie funkcje.

2:31Bo nagle jak zaczniemy sobie tutaj dodawać

2:33kolejne funkcje związane z liczeniem tej logiki dla statystyk,

2:37to zacznie nam się tutaj ten widok dashboard strasznie rozrastać.

2:40A to też nie o to chodzi.

2:42Myślę, że możemy sobie tutaj spokojnie teraz przejść do komponentów

2:46i stworzyć już tutaj nowy komponent, czyli Dashboard Main Stats Test X.

2:51I tutaj możemy sobie stworzyć klasyczny

2:54komponent, czyli Export default function i nazwa.

2:59Będzie dashboard.

3:01No i możemy jako tak naprawdę jako return wrzucić sobie całą naszą tutaj logikę.

3:07Czyli jak sobie to wytniemy z tego miejsca wklejamy tutaj.

3:11No to oczywiście musimy sobie odpowiednie rzeczy po importować, czyli funkcje z Date

3:16News Nasz komponent Stack komponent Nasz typ subskrypcji Currency.

3:22Myślę, że na chwilę obecną jest to ok.

3:23Teraz tutaj w to miejsce, w której

3:25powinniśmy mieć statystyki, możemy użyć nasz dashboard Main stats.

3:30Nie powinno to nam nic zmienić w

3:32wyświetlaniu naszej strony tak, że przejdziemy sobie do przeglądarki.

3:35Jeżeli sobie odświeżamy naszą stronę.

3:38I tu oczywiście musimy dodać Ritter Tag, musimy coś zwracać.

3:44No i zapisujemy to sobie.

3:45Już mamy nasz komponent statystyk na naszej stronie.

3:47Teraz możemy zająć się tutaj opracowywaniem dalszej logiki.

3:51Natomiast jeszcze zanim to,

3:53to jeżeli chodzi o nasz komponent Single Stack komponent ustawmy sobie walutę

3:58Polska złotówka jako waluta domyślna, która będzie tutaj wyświetlana.

4:01Czyli musimy sobie zrobić ten property tutaj jako property możemy zrobić jako

4:06opcjonalne, żeby nie musieć to ekstra podawać.

4:08Wróćmy do naszego interfejsu.

4:12Przeniesiemy sobie Property currency na dół tutaj.

4:15Jako że jest to property opcjonalne czy

4:17mamy je na końcu i w tym momencie musimy użyć znaku zapytania, czyli robimy to jako

4:23property opcjonalne i tutaj jako wartość domyślną wpiszemy PLN.

4:30Zapiszemy to sobie teraz jak usuniemy z tego komponentu ten property,

4:34to i tak naprawdę polska złotówka powinna zostać użyta jako domyślna wartość.

4:39Przypominam jeżeli chciałbyś to zrobić tak naprawdę w wersji produkcyjnej tej

4:43aplikacji, to warto byłoby pewnie tutaj uwzględnić jakiś panel do

4:49ustawień użytkownika, gdzie użytkownik mógłby sobie wybrać swoją główną walutę.

4:54I prawdopodobnie też będziesz musiał musiała zaimplementować sobie jakieś

4:57zewnętrzne API, które będzie dostarczało Ci kursu danej waluty w danym dniu.

5:01Jeżeli użytkownik otworzy sobie aplikację,

5:03żeby miał po prostu w danym dniu odpowiednie przeliczenie swoich opłat.

5:07Natomiast my tutaj przyjmujemy, że

5:09użytkownicy mają jakby główną walutą użytkownika jest złotówka.

5:13I tak samo jeżeli chodzi o kursy wymiany

5:14walut w naszych obliczeniach przyjmiemy sobie te kursy na stałe.

5:17Na dzień dzisiejszy nie będziemy podłączać się do zewnętrznego API, bo generalnie

5:21wyszli byśmy znacznie poza obszar tego kursu.

5:24Dobrze to teraz przed przystąpieniem do

5:26dalszej pracy możemy sobie wyczyścić tutaj ten komponent, czyli Organic import.

5:31I tutaj tak samo Morgana.

5:33Jest impuls, mamy te importy, które potrzebujemy tutaj mieć.

5:37I zaczniemy sobie od pisania logiki.

5:39Najpierw napiszemy sobie logikę, która

5:41sumuje nam cenę wszystkich subskrypcji w danych walutach.

5:45To będzie nam potrzebne później do obliczenia odpowiednich statystyk.

5:49Czyli zaczynamy Function i Sunrise Prices

5:54i tutaj będą subskrypcje i jako typ to będzie subskrypcja.

5:59Ściągniemy sobie typ z pryzmy i jest to

6:01tablica subskrypcji, którą będziemy podawać do tej funkcji.

6:04I jeżeli chodzi o logikę tej funkcji to musimy sobie zacząć.

6:07Let total euro niech będzie równe 0.

6:13Tak samo tutaj Let total USD niech będzie równe 0.

6:19I zróbmy sobie jeszcze Let Total PLN. Niech będzie równe zero.

6:24Mamy trzy typy tak naprawdę walut, którymi

6:27posługujemy się w naszej aplikacji i póki co mamy PLN, EUR, USD.

6:31Także warto, żebyśmy sobie opracowali funkcję, która zsumuje nam dla tych trzech

6:36typ walut sumy naszych subskrypcji, naszych opłat.

6:39I teraz pętla for i tutaj.

6:43W środku robimy letni.

6:47Równa się zero.

6:49Iteracja mniejsza niż subskrypcja.

6:53Lęk i i + +.

6:56Standardowa pętla for.

6:58I tutaj potrzebujemy logikę, która będzie nam dodawała odpowiednie sumy subskrypcji

7:03w zależności od tego, na jaką się trafimy, w jakiej ona jest walucie.

7:06No to chcemy tą sumę wrzucić tutaj.

7:08Do tego do tej zmiennej czyli if możemy posłużyć się instrukcją czy instytucją.

7:14Natomiast ja sobie tutaj za pomocą instrukcji if i tutaj skryptem.

7:19Tutaj mamy currency.

7:21Jeżeli równe.

7:23Subskrypcję MKS.

7:25Zacznijmy od Euro, tak jak to mamy tutaj.

7:28Jeżeli chodzi o nasze zmienne, to jeżeli

7:30currency jest równe euro, to chcemy to euro powiększyć o tę wartość.

7:36Czyli plus równa się i co?

7:40I i tutaj będziemy mieli price.

7:44Analogicznie robimy to dla złotówki i dla USD, czyli s f.

7:51Zapiszemy sobie naszą funkcję.

7:53Mamy już funkcję liczącą ceny subskrypcji.

7:57Możemy sobie teraz zwrócić rezultat, żebyśmy mogli się już tym posługiwać.

8:02I tu jako return zwrócimy total euro, które będzie wartością.

8:08Chcemy utrzymać 2 miejsca po przecinku,

8:11dlatego możemy zrobić od razu parę flot i nasze total euro.

8:17I tu fixed.

8:18Dwa miejsca po przecinku.

8:20To samo zrobimy jeżeli chodzi o total uzdę.

8:26Możemy sobie tak naprawdę skopiować tutaj tą logikę, bo tylko zmienna środku tutaj

8:30się zamieni i też tą linię kopiujemy i chcemy też uzyskać rezultat dla złotówek.

8:37Szkoda PLN, pln.

8:40To dobrze, mamy logikę jeżeli chodzi o sumowanie naszych cen.

8:45Czyli teraz bardzo łatwo będzie nam

8:47stworzyć tą część statystyk tutaj, która mówi nam o

8:52tym ile do zapłacenia dany użytkownik będzie miał w tym miesiącu.

8:56Mamy tutaj subskrypcję.

8:58Jeżeli chodzi o ten miesiąc

9:01w bazie danych mamy tylko i wyłącznie subskrypcje związane z tym miesiącem.

9:05Póki co użytkownik dopiero założył konto.

9:06Nie ma jakiś starych.

9:07Także nie musimy to jakoś tutaj ekstra sobie teraz filtrować.

9:11Dlatego teraz w naszym

9:13komponencie Dashboard możemy sobie zrobić zmienną Connect

9:17subskrypcje sam i tutaj wykorzystamy naszą.

9:23Samo Risk Prices.

9:24No i potrzebujemy danych, czyli do tego

9:27komponentu najlepiej jakbyśmy przekazywali subskrypcję

9:32tablicę subskrypcji to subskrypcję możemy sobie użyć jako nasze dane.

9:37Oczywiście teraz dostaniemy tutaj error w

9:38naszym dashboard, bo musimy przekazać naszą naszą datę, czyli subskrypcji.

9:45I tu mamy typ danych, który jest

9:47subskrypcja i rekord, który jest payments, bo pobieramy tutaj od razu opłaty.

9:53Dlatego musimy sobie zmienić.

9:54Na pewno typ danych, który jest tutaj wykorzystywany.

9:57Możemy sobie skopiować tutaj

9:58to co dostajemy jako rezultat jeżeli chodzi o nasze dane.

10:01Przeskoczyć sobie do naszych subskrypcji,

10:03do definicji tutaj naszego typu, który przekazujemy do naszego komponentu.

10:09I w tym miejscu możemy sobie podmienić to, co tutaj mamy.

10:13Natomiast jeżeli chodzi o jedną rzecz, to jest tutaj pewien problem, dlatego że

10:18prices oczekują pewnego typu danych, czy też możemy tutaj zmienić

10:24ten typ danych właśnie na to, co tak naprawdę do nas przychodzi.

10:29No i teraz musimy sobie sprawdzić, czy rzeczywiście tutaj może być undefined.

10:35Czyli musimy sobie ograć tutaj ten przypadek.

10:37Jeżeli chodzi o ten przypadek, no to myślę, że najłatwiej ogarniamy go

10:42tak naprawdę zwracając tutaj wcześniej cokolwiek, żeby jeżeli będzie subskrypcja.

10:47Jeżeli będą po prostu undefined, to po prostu chcemy zwrócić np.

10:51nasz komponent Loading.

10:53Czyli tutaj powyżej możemy sobie zrobić

10:56instrukcję warunkową i to jest data, czyli subskrypcja.

11:02No to zrobimy sobie return.

11:04No i na chwilę obecną zróbmy. Zapiszemy to sobie.

11:08No teraz już mamy naszą sumę jeżeli chodzi

11:11o sumę subskrypcji do zapłacenia w tym miesiącu i przejdźmy do naszej firmy

11:16I możemy sobie wykorzystać i zbudować kolejną część naszej statystyki, czyli

11:22to co będzie pokazywało sumę w walucie naszego użytkownika w tym miesiącu.

11:26Czyli jeżeli mamy to przez sam musimy sobie zrobić const month sam PLN.

11:35Tak. I tutaj na pewno wykorzystamy ten obiekt.

11:40I musimy zrobić tak total euro razy.

11:43Załóżmy, że euro kosztuje 4 70.

11:45Na dzień dzisiejszy plusy.

11:46Później musimy sobie zrobić total już od razu.

11:51Załóżmy, że kurs dolara to jest 4.50 i plus total PLN.

11:58Będziemy mieli sumę do zapłacenia w tym miesiącu za nasze wszystkie subskrypcje.

12:03No i tutaj jeżeli chodzi o nasz komponent,

12:05możemy sobie to teraz zdublować, przeskoczyć tutaj

12:10I jeżeli chodzi o sumę tutaj, którą chcemy wyświetlić, no to możemy sobie wyświetlić

12:15właśnie to, co mamy tutaj w postaci naszego number.

12:19Jeżeli chodzi o opis, to wróćmy jeszcze do naszej firmy Month.

12:24Są to. Wróćmy tutaj.

12:27Jeżeli chodzi o wartość, którą tutaj

12:29przekazujemy, to tak naprawdę możemy sobie zrobić, gdyż jest Pan sam.

12:34Już przejdźmy do naszej aplikacji.

12:36Już mamy.

12:37Dysponent sam jest równy zero.

12:38Sprawdźmy, czy rzeczywiście jest to równe 0.

12:42Oczywiście jeszcze tutaj musimy

12:44zrestrukturyzować nasz nasz property i to będzie typu.

12:52Zapisujemy to sobie już mamy sumę w tym miesiącu jeżeli chodzi o PLN.

12:57Natomiast możemy sobie też tutaj wykorzystać tą.

13:00Mamy tutaj tą sumę jeżeli chodzi o mamy 3 miejsca po przecinku, natomiast w

13:05naszej aplikacji jeżeli widzimy design to tutaj designer starał się przekazać nam

13:10informację taką, że to powinny być dwa miejsca po przecinku.

13:12Dlatego też możemy sobie przejść tutaj do tej cyfry, którą wykorzystujemy i tu.

13:18Fixed i dwa miejsca po przecinku.

13:22Zapisujemy to sobie, sprawdźmy o co tutaj teraz chodzi.

13:25String jest stały, bo number oczywiście są tutaj.

13:29W naszym przypadku mamy tu fixed.

13:31Oczywiście możemy sobie zamienić to znowu

13:33na liczbę, natomiast też dużo łatwiej możemy tutaj przekazać.

13:37Tak naprawdę nie ma znaczenia czy to będzie string czy number dla

13:40naszego komponentu, bo jest tylko komponent do wyświetlenia tych danych.

13:43Dlatego tutaj jak najbardziej możemy sobie zapisać.

13:48Jeszcze przejdźmy do definicji tej funkcji i parametrów, które przekazujemy.

13:54Oczywiście tutaj nie chcemy mieć undefined

13:56w żadnym wypadku, dlatego też możemy sobie zapisać to w taki sposób.

13:59Mamy już pierwszą statystykę, którą chcemy używać.

14:03Kolejna rzecz, która będzie ważna dla nas to kolejne statystyki.

14:07To sprawdźmy sobie na firmę Last Month sam zostawimy sobie.

14:11Jest to nowo założone konto, dlatego też nie będziemy tutaj bawić się w

14:15filtrowanie płatności za zeszły miesiąc z tego względu, że znajdowaliśmy naszą bazę

14:20tylko i wyłącznie płatnościami w tym miesiącu.

14:23Natomiast możemy teraz zrobić te dwie statystyki.

14:26Jedna mówi to, ile użytkownik jeszcze ma do zapłacenia, czyli wszystkie

14:31opcje, które są ze statusem NOT musimy sobie sumować.

14:34Natomiast druga statystyka mówi to, ile użytkownik już zapłacił, czyli wszystkie

14:39te, które są już zapłacone, możemy sobie zsumować.

14:41I teraz zajmiemy się właśnie wyświetleniem

14:44tych dwóch statystyk każdemu użytkownikowi.