Next.js 13 w Praktyce: Logika do obliczania serwisów opłaconych i do opłacenia

0:00Teraz, jeżeli mamy już naszą pierwszą statystykę, którą chcemy wyświetlać

0:04naszemu użytkownikowi, może naprawimy sobie ten problem z wyświetlaniem.

0:08Generalnie to powinno być przesunięte do prawej strony.

0:10Jest to związane z tym, że

0:12nie zapakowaliśmy tych naszych dwóch statystyk w jeden

0:16wrapper, który byłby odpowiedzialny za to, żeby one były koło siebie.

0:20No i oczywiście ten wrapper musimy sobie też odpowiednio oscylować.

0:24W naszym przypadku to wystarczy Flex i Items Center.

0:30No i jeszcze zrobić nowy GAP na przykład na wartość 6.

0:35Zapiszemy to sobie.

0:35No i już mamy to tutaj dużo lepiej usytuowane.

0:38Jeżeli chodzi o tą pierwszą statystykę, to możemy się jej pozbyć na chwilę obecną.

0:43No bo generalnie to była nasza próbna, kiedy budowaliśmy ten nasz komponent.

0:47Pozbędziemy się teraz tego na chwilę.

0:49Zapiszemy sobie nasz komponent i zajmiemy

0:51się teraz kolejną porcją statystyk, które chcemy wyświetlić naszemu użytkownikowi.

0:55Mianowicie to, ile już zapłacił i to ile ciągle ma do zapłaty w tym miesiącu to

1:00będą dwie kolejne statystyki, które wyświetlimy.

1:02Przejdźmy więc do implementacji tej logiki.

1:05Wróćmy do naszego edytora kodu.

1:07Teraz przyda nam się funkcja, która pozwoli nam liczyć

1:12sumę opłaconych i nie opłaconych subskrypcji dla danej waluty.

1:16Będzie troszkę bardziej rozbudowana wersja funkcji, którą mieliśmy tutaj także

1:21function i w naszym przypadku niech to będzie samo Payment mount.

1:28No i jeżeli chodzi o property, które chcemy przekazać, no to będzie to

1:33analogicznie do tej funkcji takie same dane przekazujemy.

1:37Jeżeli chodzi o logikę tej funkcji tutaj,

1:40to w środku musimy sobie stworzyć kilka rzeczy.

1:43Na pewno będziemy potrzebowali kilku zmiennych total paid in euro i nadpłaty na

1:48euro i analogicznie dla wszystkich naszych walut.

1:51Czyli mamy wartości wszystkich zapłaconych

1:55opłat w euro, dolarach, w złotówkach, tutaj

1:58niezapłaconych w euro, niezapłaconych w dolarach i niezapłaconych w złotówkach.

2:02Teraz oczywiście analogicznie jak w poprzedniej funkcji stworzymy sobie pętlę

2:06for gdzie i równe zero i będzie mniejszy niż jeden lęk i plus plus.

2:14To jest pierwsza część naszej Pięknej,

2:16gdzie wchodzimy do środka i sterujemy sobie przez wszystkie nasze subskrypcje.

2:20Kolejna rzecz, przez którą będziemy musieli sobie i sterować to nasze payment.

2:25Tak, musimy sprawdzić ile opłat ma dana substytucja w sobie wrzuconych.

2:30My na chwilę obecną mamy tak naprawdę 1 Payment person skrypcie.

2:34Natomiast jeżeli nasza aplikacja będzie

2:35się rozrastać, użytkownik będzie dłużej miał konto Nasze aplikacje to będziemy

2:39mieli historyczne dane dotyczące jego opłata.

2:42Tego też będzie tutaj trzeba kierować

2:44poprzez wszystkie payment czyli let i od równa się 0 zrobimy w tym

2:51przypadku dalej zrobimy sobie J jest mniejsze niż subskrypcje payment.

2:57Tylko w tym przypadku potrzebujemy nasze i naszą wybraną subskrypcję.

3:01Tutaj będą payment i lęk i j + +.

3:07Czyli tutaj Teraz wchodzimy w środek i sterowania po opłatach.

3:12No i tutaj teraz możemy sobie zrobić

3:14instrukcję warunkową IF, gdzie pierwszym elementem to będzie subskrypcja.

3:20Możemy sobie zrobić tak naprawdę tak.

3:23Skopiować tą część tutaj w Payments tutaj będzie j.

3:27To jest nasz iterator.

3:29I jeżeli chodzi o.

3:32My sprawdzamy sobie amount, sprawdzamy sobie status statusu.

3:38Jeżeli status jest równy payment status zaczniemy od tych zapłaconych.

3:46Wejdziemy do środka w naszą logikę i else.

3:50Tutaj druga część, czyli te niezapłacone.

3:53To są dwa warunki, które musimy sobie tutaj obsłużyć.

3:57No i pierwsza część tutaj

3:59w środku dla zapłaconych jeszcze tutaj u góry wyciągnijmy amount dla danej

4:03subskrypcji, czyli kwotę, którą będziemy używać Let Amount.

4:10Niech będzie subskrypcja.

4:12Możemy sobie tak naprawdę to skopiować tylko na końcu użyjemy tutaj Amount.

4:17To jest wartość, którą będziemy sobie dopisywać do poszczególnej zmiennej.

4:21Zdarza się tego, gdzie wpadniemy tutaj w naszym warunku.

4:23I tutaj kolejna instrukcja.

4:25W środku możemy sobie zrobić kolejną instrukcję warunkową IF.

4:28Już na tym levelu zagnieżdżenia może to ograć też swój czas i tak.

4:33Natomiast tutaj myślę, że jest jak najbardziej w porządku.

4:38Na chwilę obecną

4:39nie mamy też dużo tych walut, czyli tutaj currency i równa się subskrypcja karencji.

4:46Jeżeli to od euro.

4:47Jeżeli to jest euro no to dopisujemy amount do total euro page.

4:52Tak, total euro paid total euro page i robimy sobie plus równa się amount.

4:59To jest pierwsza część.

5:01Teraz możemy sobie zrobić IF dla naszej

5:04drugiej, dla naszej drugiej waluty, czyli dla USB.

5:08No i w tym momencie w else if dopisujemy sobie total euro USD.

5:13Page Tak jest, mam.

5:15Teraz analogicznie musimy tutaj postąpić jeżeli chodzi o kolejną naszą wartość.

5:20Natomiast jeżeli chodzi o złotówki

5:22musimy sobie przypisać total PLN paid Tak total PLN.

5:26Jeżeli chodzi o opłacone już mamy to załatwione.

5:30Teraz tutaj wskoczymy w warunek gdzie subskrypcje nie są opłacone.

5:35Tak naprawdę możemy się tego pozbyć, bo to jest już jeżeli coś nie jest zapłacone.

5:39Mamy tylko dwa warunki.

5:40No i tutaj środku

5:42możemy sobie tak naprawdę skopiować tą logikę, żeby nie musieć się powtarzać.

5:46Natomiast w naszym przypadku będziemy

5:48tutaj musieli sobie dodać wartość total euro, no i złotówka.

5:55No i mamy logikę.

5:57Powtórzmy sobie jeszcze raz i to robimy po

5:59naszej subskrypcji i tolerujemy po opłatach te subskrypcje,

6:03bo przypominam, że to może być tablica opłat.

6:07No i jako pierwsza rzecz wyciągamy

6:09wartość danej opłaty, w którą akurat wskakujemy po indeksie J.

6:14I tutaj sprawdzamy najpierw status.

6:16Jeżeli status jest opłata jest zapłacona, no to musimy dla odpowiedniej

6:21dla odpowiedniej waluty dopisać tą wartość tutaj do naszej zmiennej.

6:25Natomiast w jednym przypadku musimy sobie

6:27dopisać tą wartość do nie opłaconej w danej walucie.

6:31No i teraz na końcu tutaj możemy sobie zwrócić tak naprawdę cały obiekt.

6:36Natomiast jeszcze zanim to, to myślę, że

6:40warto byłoby tutaj troszeczkę popracować sobie z tymi danymi.

6:44Po pierwsze moglibyśmy sobie skonwertować

6:48te amount do liczb z dwoma miejscami po przecinku.

6:53Myślę, że to będzie jak najbardziej potrzebne wyświetlaniu naszych statystyk i

6:57do tego tutaj musimy sobie skopiować tak naprawdę te nasze zmienne.

7:01To będzie szybsze kopiuj wklej, to tutaj zaznaczymy.

7:06Wszystko to możemy usunąć.

7:10Jeżeli chodzi o równa się to też tutaj logika będzie bardzo podobna.

7:15Będziemy potrzebowali parts float

7:19oczywiście w produkcyjnej wersji tej aplikacji.

7:21Moglibyśmy sobie tą logikę jakoś zrobić bardziej globalnie.

7:25Natomiast myślę, że na chwilę obecną jest to jak najbardziej ok.

7:29Jeszcze tutaj będziemy, bo tutaj to jest w dwóch miejscach po przecinku.

7:34No i jako nasze wartości staram wartość tych zmiennych, tak?

7:38Czyli jak widzisz to jest pierwszy draft takich statystyk.

7:41Myślę, że

7:42w wersji produkcyjnej pewnie potrzebna byłaby tu jakaś znacząca refaktoryzacji.

7:47Natomiast na chwilę obecną możemy sobie

7:48zrzucić ten obiekt w postaci naszych zmiennych, które mamy tutaj.

7:55Czyli możemy sobie zrobić po raz drugi coś takiego.

7:58I tutaj zamiast

8:00tych znaków użyjemy sobie przecinków i tutaj wszystkie kasujemy dobrze, mamy

8:07dane, które już nam będą potrzebne do tego, żeby obliczyć sobie

8:11kolejne sumy, czyli totalne jeżeli chodzi o zapłacone i jeżeli chodzi o nie.

8:17Także możemy sobie teraz zrobić tutaj kolejne const const sam

8:24i tutaj wykorzystamy sobie naszą nową funkcję const.

8:29Payment Amount i tutaj wykorzystamy naszą najnowszą funkcję, którą stworzyliśmy.

8:35Samo Right Payment amount tak.

8:37Nie przekazujemy też subskrypcji.

8:40I teraz jeżeli chodzi o Page sam możemy

8:43sobie zrobić logikę związaną z tym, że payment mając total euro też razy 4 7.

8:52Jeżeli wykorzystujemy drugi raz to samo to

8:54myślę, że ma to teraz sens jak najbardziej sobie tutaj zrobić kurs czyli EUR tu.

9:04Bezrobocie PLN to jest 4,7

9:09to kont usd, pln to jest 4,5.

9:16Te dwie rzeczy będziemy potrzebowali w tym momencie.

9:18Możemy sobie to tutaj zamienić.

9:21To jest nasz kurs euro do złotówki, to jest nasz kurs USD do złotówki.

9:26I tutaj też analogicznie możemy wykorzystać już te zmienne.

9:30Czyli jeżeli chodzi o pages, będziemy potrzebowali trzy rzeczy sumować.

9:36Tutaj potrzebujemy USD.

9:40I tutaj oczywiście potrzebujemy zmiennej PSD jeżeli chodzi o kurs.

9:45No i + ostatnia wartość.

9:48Czyli jeżeli jakaś subskrypcja byłaby w złotówce to total template.

9:53Analogicznie jeżeli chodzi o sumy subskrypcji, które nie zostały

9:59jeszcze zapłacone przez danego użytkownika czyli Page sam albo Steal to ok.

10:07I wszystkie Payment amount.

10:11Możemy tutaj korzystać z Not bad.

10:16Zapisujemy to sobie.

10:18Teraz wykorzystamy nasz komponent ponownie.

10:22Tutaj najpierw zrobimy sobie tapetę sam.

10:28Czyli pat tekst i jeżeli chodzi o nasz

10:32MOK to było already pat czyli tutaj pat.

10:40I analogicznie możemy sobie wrzucić

10:42statystykę dotyczącą tego, co jeszcze tutaj będzie do zapłacenia.

10:48Styl.

10:51Zapisujemy to sobie. Przejdźmy do naszej aplikacji.

10:54Mamy już kolejne statystyki, które

10:56odzwierciedlają sytuację tak naprawdę aktualną, jeżeli chodzi o nasze dane.

11:02Zobacz, że jeżeli chodzi o rzeczy, które

11:05mamy do zapłacenia, to mamy tutaj cztery dokładnie sztuki.

11:09Jedna kosztuje tutaj 5 69, 89, 999.

11:17Natomiast jeżeli chodzi o te zapłacone, to jest tego troszkę tutaj więcej.

11:24Dlatego też jeżeli przyjrzymy się naszym

11:26statystykom, to myślę, że jak najbardziej te wartości się zgadzają.

11:32Teraz przejdziemy do kolejnego elementu.

11:35Mianowicie zaczniemy budować tą drugą część związaną ze statystykami dla

11:42poszczególnych kategorii naszych subskrypcji.