Now load more button adds more pokemon • working on pricing structure…

… • Starting work on theming

apps/api/src/api/v1/cart/database/cart.database.ts

@@ -13,7 +13,6 @@ export const getCartDataCall = async (): Promise<CartDataApi> => {
 export const updateCartDataCall = async (data): Promise<CartDataApi> => {
   return new Promise((resolve) => {
     setTimeout(() => {
-      console.log('data', data);
       cartDatabase.data = data.data;
       cartDatabase.total = data.total;
       cartDatabase.counter = data.counter;

apps/api/src/api/v1/cart/services/cart.service.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { CartApiPayload, CartDataApi } from '@pokemon-pet-shop/typing';
+import { CartApiPayload, CartDataApi, PricingApi } from '@pokemon-pet-shop/typing';
+import { pricingFormatUtil } from '@pokemon-pet-shop/utils';
 import { clone } from 'lodash';
 
 import {
@@ -8,6 +9,8 @@ import {
 } from '../../../../utils/err.format.response.util';
 import { getPokemonSpeciesService } from '../../pokemon';
 import { getPokemonDetailService } from '../../pokemon/services/pokemon.detail.service';
+import { getPokemonEvolutionChainService } from '../../pokemon/services/pokemon.evolution.chain.service';
+import { getPricingService } from '../../pricing/services/pricing.service';
 import { getCartDataCall, updateCartDataCall } from '../database/cart.database';
 
 const doesItemExistKeyFn = (data, id) => {
@@ -58,6 +61,7 @@ const updateCartItemService = async (payload: CartApiPayload) => {
     })
   );
   const data = clone(currentCartData.data);
+
   const { key, counter, total } = doesItemExistKeyFn(data, payload?.id);
   const currentObj = data[key];
 
@@ -69,10 +73,38 @@ const updateCartItemService = async (payload: CartApiPayload) => {
     });
   }
 
+  const pricingData: PricingApi = await getPricingService().catch(() => {
+    throw errFormat500ResponseUtil();
+  });
+  const speciesData = await getSpeciesDetail(payload?.id).catch(() => {
+    throw errFormat500ResponseUtil();
+  });
+
+  const evolutionChainSplit = speciesData?.evolution_chain?.url?.split('/');
+
+  const evolutionData = await getPokemonEvolutionChainService({
+    id: evolutionChainSplit[evolutionChainSplit.length - 2],
+  }).catch(() => {
+    throw errFormat500ResponseUtil();
+  });
+
+  const pokemonPrice = Number(
+    pricingFormatUtil(
+      {
+        name: speciesData?.name,
+        isLegendary: speciesData?.is_legendary,
+        isMythical: speciesData?.is_mythical,
+        chainData: evolutionData?.chain,
+      },
+      pricingData,
+      true
+    )
+  );
+
   if (key !== null) {
     currentObj.quantity = payload.addToCart ? currentObj.quantity + 1 : currentObj.quantity - 1;
     currentCartData.counter = payload.addToCart ? counter + 1 : counter - 1;
-    currentCartData.total = payload.addToCart ? total + 500 : total - 500;
+    currentCartData.total = payload.addToCart ? total + pokemonPrice : total - pokemonPrice;
 
     await updateCartDataCall(currentCartData).catch(() => {
       throw errFormat500ResponseUtil();
@@ -89,21 +121,17 @@ const updateCartItemService = async (payload: CartApiPayload) => {
     });
   }
 
-  const additionalData = await getSpeciesDetail(payload?.id).catch(() => {
-    throw errFormat500ResponseUtil();
-  });
-
   const finalPayload = {
     id: payload?.id,
-    name: additionalData?.name,
-    price: 500,
+    name: speciesData?.name,
+    price: pokemonPrice,
     quantity: 1,
-    image: additionalData?.sprites?.other?.['official-artwork']?.front_default,
-    isLegendary: additionalData?.is_legendary,
-    isMythical: additionalData?.is_mythical,
+    image: speciesData?.sprites?.other?.['official-artwork']?.front_default,
+    isLegendary: speciesData?.is_legendary,
+    isMythical: speciesData?.is_mythical,
   };
   currentCartData.counter = counter + 1;
-  currentCartData.total = total + 500;
+  currentCartData.total = total + pokemonPrice;
 
   currentCartData.data.push(finalPayload);
 

apps/api/src/api/v1/pokemon/controllers/pokemon.list.controller.ts

@@ -4,7 +4,7 @@ import {
   errFormat500ResponseUtil,
   errFormatResponseUtil,
 } from '../../../../utils/err.format.response.util';
-import { DEFAULT_LIMIT } from '../const/default.prop.const';
+import { DEFAULT_LIMIT, DEFAULT_OFFSET } from '../const/default.prop.const';
 import { PokemonListQueryProps } from '../interface/pokemon.interface';
 import { getPokemonDetailService } from '../services/pokemon.detail.service';
 import { getPokemonListService } from '../services/pokemon.list.service';
@@ -24,16 +24,18 @@ const getPokemonListController = async (
 ) => {
   try {
     const limitQuery = req?.query?.limit || DEFAULT_LIMIT;
+    const offset = req?.query?.offset || DEFAULT_OFFSET;
+
     const pokemonList = await getPokemonListService({
-      offset: req?.query?.offset,
+      offset,
       limit: limitQuery,
     }).catch(() => {
       throw errFormat500ResponseUtil();
     });
 
-    const limitNumberQuery = Number(limitQuery) + 1;
+    const limitNumberQuery = Number(limitQuery) + 1 + Number(offset);
     const detailPromises = [];
-    for (let loop = 0; loop < limitNumberQuery; loop++) {
+    for (let loop = Number(offset); loop < limitNumberQuery; loop++) {
       const id = String(loop);
       detailPromises.push(
         await getPokemonDetailService({

apps/api/src/api/v1/pricing/database/pricing.database.ts

@@ -2,8 +2,8 @@ import { PricingApi } from '@pokemon-pet-shop/typing';
 
 export const pricingDatabase = {
   stages: { '1': { price: 49999 }, '2': { price: 99999 }, '3': { price: 149999 } },
-  legendary: { price: 150000 },
-  mythical: { price: 150000 },
+  legendary: { price: 15000000 },
+  mythical: { price: 15000000 },
 };
 
 export const getPricingDataCall = async (): Promise<PricingApi> => {

apps/mobile-app/src/app/homepage.module.ts

@@ -2,11 +2,6 @@ import { StyleSheet } from 'react-native';
 
 export const styles = StyleSheet.create({
   contentWrapper: {
-    display: 'flex',
-    alignContent: 'space-between',
-    gap: 25,
-    flexWrap: 'wrap',
     marginTop: 25,
-    justifyContent: 'center',
   },
 });

apps/mobile-app/src/app/homepage.tsx

@@ -2,7 +2,6 @@ import { ReactElement } from 'react';
 
 import { UiPokemonList } from '@pokemon-pet-shop/features';
 import { UiContainer, UiElementLayout, UiTypography } from '@pokemon-pet-shop/ui';
-import { Text } from 'react-native';
 
 import { styles } from './homepage.module';
 

apps/web-app/src/pages/homepage/homepage.module.css

@@ -1,8 +1,3 @@
 .contentWrapper {
-  display: flex;
-  align-content: space-between;
-  gap: 25px;
-  flex-wrap: wrap;
   margin-top: 25px;
-  justify-content: center;
 }

apps/web-app/src/styles/styles.css

@@ -1 +1,12 @@
-/* You can add global styles to this file, and also import other style files */
+:root,
+html[data-theme='light'] {
+  --background-color: #fff;
+  --text-color: #121416d8;
+  --link-color: #543fd7;
+}
+
+html[data-theme='dark'] {
+  --background-color: #212a2e;
+  --text-color: #f7f8f8;
+  --link-color: #828fff;
+}

libs/features/src/lib/cart/cart.modal/cart.modal.view.tsx

@@ -10,6 +10,7 @@ import {
   mobSrcTypeEnum,
   TypographyTypeEnum,
 } from '@pokemon-pet-shop/ui';
+import { pricingFormatUSD } from '@pokemon-pet-shop/utils';
 
 import styles from './cart.modal.module.css';
 import useCartModalLogic from './use.cart.modal.logic';
@@ -39,7 +40,7 @@ const CartModal = (): ReactElement => {
                     {el?.name}
                   </UiTypography>
                   <UiTypography typographyType={TypographyTypeEnum.SPAN} className={styles.price}>
-                    {el?.price}
+                    {pricingFormatUSD(el?.price)}
                   </UiTypography>
                   <UiElementLayout>
                     <UiIcon
@@ -67,7 +68,7 @@ const CartModal = (): ReactElement => {
       </UiElementLayout>
       <UiElementLayout className={styles.totalContent}>
         <UiTypography>Total</UiTypography>
-        <UiTypography>{data?.total}</UiTypography>
+        <UiTypography>{pricingFormatUSD(data?.total)}</UiTypography>
       </UiElementLayout>
     </UiElementLayout>
   );

libs/features/src/lib/navigation/header/header.tsx

@@ -9,7 +9,7 @@ import {
   UiIcon,
   IconTypeEnum,
   UiInput,
-  UiSwitch,
+  UiSwitchTheme,
   UiTypography,
   TypographyTypeEnum,
   UiContainer,
@@ -59,7 +59,7 @@ const Header = () => {
         </UiElementLayout>
 
         <UiHideInMobile>
-          <UiSwitch
+          <UiSwitchTheme
             className={styles.switchTheme}
             iconLeft={IconTypeEnum.ICON_SUN}
             iconRight={IconTypeEnum.ICON_MOON}

libs/features/src/lib/navigation/nav.mobile/nav.mobile.tsx

@@ -7,7 +7,7 @@ import {
   IconTypeEnum,
   UiTypography,
   UiModal,
-  UiSwitch,
+  UiSwitchTheme,
 } from '@pokemon-pet-shop/ui';
 
 import { NavMobileModalProps } from './nav.mobile.interface';
@@ -27,7 +27,7 @@ const NavMobileModal = ({ isModalShown = false }: NavMobileModalProps): ReactEle
         </UiElementLayout>
       </UiElementLayout>
       <UiElementLayout className={styles.dropdownBtm}>
-        <UiSwitch
+        <UiSwitchTheme
           className={styles.switchTheme}
           iconLeft={IconTypeEnum.ICON_SUN}
           iconRight={IconTypeEnum.ICON_MOON}

libs/features/src/lib/pokemon/pokemon.list/pokemon.list.module.css

@@ -0,0 +1,7 @@
+.cardListWrapper {
+  display: flex;
+  align-content: space-between;
+  gap: 25px;
+  flex-wrap: wrap;
+  justify-content: center;
+}

libs/features/src/lib/pokemon/pokemon.list/pokemon.list.module.native.ts

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  cardListWrapper: {
+    display: 'flex',
+    alignContent: 'space-between',
+    gap: 25,
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  },
+});

libs/features/src/lib/pokemon/pokemon.list/pokemon.list.module.ts

@@ -0,0 +1,3 @@
+import styles from './pokemon.list.module.css';
+
+export { styles };

libs/features/src/lib/pokemon/pokemon.list/pokemon.list.view.tsx

@@ -1,18 +1,46 @@
-import { memo, ReactElement } from 'react';
+import { Fragment, memo, ReactElement } from 'react';
 
 import { PokemonListApi } from '@pokemon-pet-shop/typing';
+import { UiButton, UiElementLayout } from '@pokemon-pet-shop/ui';
 
 import { UiPokemonCard } from '../pokemon.card';
 
+import { styles } from './pokemon.list.module';
 import usePokemonList from './use.pokemon.list.logic';
 
 /** Use tanstack virtual for long lists -> https://tanstack.com/virtual/latest/docs/introduction  */
 const PokemonList = (): ReactElement => {
-  const { data, isError, isLoading, isFetching } = usePokemonList();
+  const { data, isError, isLoading, isFetching, isFetchingNextPage, hasNextPage, onFetchNextPage } =
+    usePokemonList();
 
-  return (data || []).map((el: PokemonListApi): ReactElement => {
-    return <UiPokemonCard key={el?.name} data={el} />;
-  });
+  return (
+    <>
+      <UiElementLayout className={styles.cardListWrapper}>
+        {(data || []).map((arr: PokemonListApi[], i: number): ReactElement => {
+          return (
+            <Fragment key={i}>
+              {arr.map((el: PokemonListApi) => (
+                <UiPokemonCard key={el?.name} data={el} />
+              ))}
+            </Fragment>
+          );
+        })}
+      </UiElementLayout>
+      <UiButton
+        isDisabled={!hasNextPage || isFetchingNextPage}
+        text={
+          isFetchingNextPage
+            ? 'Loading more...'
+            : hasNextPage
+              ? 'Load More'
+              : 'Nothing more to load'
+        }
+        onClick={() => {
+          onFetchNextPage((old: number) => old + 1);
+        }}
+      />
+    </>
+  );
 };
 
 export default memo(PokemonList);

libs/features/src/lib/pokemon/pokemon.list/use.pokemon.list.logic.ts

@@ -7,16 +7,33 @@ interface PokemonListReturn {
   isError: boolean;
   isLoading: boolean;
   isFetching: boolean;
+  isPlaceholderData?: boolean;
+  isFetchingNextPage?: boolean;
+  hasNextPage?: boolean;
+  onFetchNextPage: any;
 }
 
 const usePokemonList = (): PokemonListReturn => {
-  const { data, isError, isLoading, isFetching } = useGetPokemonList();
+  const {
+    data,
+    isError,
+    isLoading,
+    isFetching,
+    isPlaceholderData,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+  } = useGetPokemonList();
 
   return {
-    data: data?.pages[0],
+    data: data?.pages,
     isError,
     isLoading,
     isFetching,
+    isPlaceholderData,
+    isFetchingNextPage,
+    hasNextPage,
+    onFetchNextPage: fetchNextPage,
   };
 };
 

libs/services/src/lib/pokemon/api.pokemon.service.ts

@@ -11,6 +11,6 @@ export const getPokemonList = async ({ pageParam }: { pageParam: number }) => {
   ).data;
 };
 
-export const getPokemonSpecies = async (id: number) => {
+export const getPokemonSpecies = async (id: string | undefined) => {
   return (await axiosInstance.get<PokemonSpeciesApi>(`pokemon/species/${id}`)).data;
 };

libs/store/src/index.ts

@@ -1,4 +1,3 @@
 export * from './lib/theme.store';
 export * from './lib/modal.store';
-export * from './lib/cart.store';
 export * from './lib/loading.submit.store';