From d5e79272fbe161f6df582b6d3ce73bfb33576f50 Mon Sep 17 00:00:00 2001
From: NCanggoro <ansianggoro@gmail.com>
Date: Mon, 9 Oct 2023 20:13:28 +0700
Subject: [PATCH] fix fontsize for mobile

---
 src/pages/BestLocations/index.tsx |  6 +++-
 src/pages/Home/index.tsx          | 55 +++++++++++++++++++++++--------
 src/pages/Home/style.css          |  5 ++-
 3 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/src/pages/BestLocations/index.tsx b/src/pages/BestLocations/index.tsx
index f33d386..a145142 100644
--- a/src/pages/BestLocations/index.tsx
+++ b/src/pages/BestLocations/index.tsx
@@ -58,7 +58,11 @@ function BestLocation() {
 
   async function getTopLocations() {
     try {
-      const res = await getListTopLocationsService({ page: page, page_size: 20, order_by: pageState.filterScoreTypeidx, region_type: pageState.filterRegionType })
+      const res = await getListTopLocationsService({ 
+        page: page, page_size: 20, 
+        order_by: pageState.filterScoreTypeidx, 
+        region_type: pageState.filterRegionType 
+      })
       setTopLocations(res.data)
 
     } catch (err) {
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 8e9970b..7233ad5 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -5,7 +5,7 @@ import critics_users_pick from '../../datas/critics_users_best_pick.json';
 import popular_user_review from '../../datas/popular_user_reviews.json';
 import './style.css';
 import { useEffect, useState } from 'preact/hooks';
-import { getListRecentLocationsRatingsService } from '../../services';
+import { getListRecentLocationsRatingsService, getListTopLocationsService } from '../../services';
 import { useNavigate } from 'react-router-dom';
 import { LocationInfo } from '../../domains/LocationInfo';
 
@@ -19,6 +19,8 @@ type News = {
 
 function Home() {
   const [recentLocations, setRecentLocations] = useState<Array<LocationInfo>>([])
+  const [topCriticsLocations, setTopCriticsLocations] = useState<Array<LocationInfo>>([])
+  const [topUsersLocations, setTopUsersLocations] = useState<Array<LocationInfo>>([])
   // const [isLoading, setIsLoading] = useState<boolean>(true)
 
   const navigate = useNavigate()
@@ -34,6 +36,24 @@ function Home() {
     }
   }
 
+  async function getCrititsBestLocations() {
+    try {
+      const res = await getListTopLocationsService({ page: 1, page_size: 6, order_by: 2, region_type: 0})
+      setTopCriticsLocations(res.data)
+    }catch(err) {
+      console.log(err)
+    }
+  }
+
+  async function getUsersBestLocations() {
+    try { 
+      const res = await getListTopLocationsService({ page: 1, page_size: 6, order_by: 3, region_type: 0})
+      setTopUsersLocations(res.data)
+    }catch(err) {
+      console.log(err)
+    }
+  }
+
   function onNavigateToDetail(
     id: Number,
     critic_count: Number,
@@ -48,6 +68,8 @@ function Home() {
 
   useEffect(() => {
     getRecentLocations()
+    getCrititsBestLocations()
+    getUsersBestLocations()
   },[])
   return (
     <>
@@ -174,17 +196,21 @@ function Home() {
             </div>
             <div className={'col-span-2 lg:col-span-1'}>
               <SeparatorWithAnchor pageLink='#' pageName={"Critic's Best"} />
-              {critics_users_pick.critics.map((x) => (
-                <div className={"pt-2 text-sm"}>
+              {topCriticsLocations.map((x) => (
+                <div className={"pt-2 text-sm top-location-container"}>
                   <div className={'mr-2 critics-users-image'}>
-                    <img src={x.thumbnail} loading={'lazy'} style={{ height: '100%', width: '100%', borderRadius: 3}} />
+                    <img 
+                      src={x.thumbnail.Valid ? x.thumbnail.String.toString() : 'https://i.ytimg.com/vi/0DY1WSk8B9o/maxresdefault.jpg'} 
+                      loading={'lazy'} 
+                      style={{ height: '100%', width: '100%', borderRadius: 3}} 
+                    />
                   </div>
                   <p className={'location-title'}>{x.name}</p>
-                  <p className={'text-xs location-province location-title'}>{x.location}</p>
+                  <p className={'text-xs location-province location-title'}>{x.regency_name}</p>
                   <div className={'critics-users-rating-container'} style={{ display: 'inline-block' }}>
-                    <p className={'text-xs ml-2'}>{x.critic_rating}</p>
+                    <p className={'text-xs ml-2'}>{x.critic_score} <span className={'text-gray'}>({x.critic_count})</span></p>
                     <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
-                      <div style={{ height: 4, width: `${x.critic_rating}%`, backgroundColor: 'green' }} />
+                      <div style={{ height: 4, width: `${x.critic_score}%`, backgroundColor: 'green' }} />
                     </div>
                   </div>
                   <div style={{ clear: 'both'}} />
@@ -194,17 +220,20 @@ function Home() {
             </div>
             <div className={'col-span-2 lg:col-span-1'}>
               <SeparatorWithAnchor pageLink='#' pageName={"User's Best"} />
-              {critics_users_pick.users.map((x) => (
-                <div className={"pt-2 text-sm"}>
+              {topUsersLocations.map((x) => (
+                <div className={"pt-2 text-sm top-location-container"}>
                   <div className={'mr-2 critics-users-image'}>
-                    <img src={x.thumbnail} style={{ height: '100%', width: '100%', borderRadius: 3}} />
+                    <img 
+                      src={x.thumbnail.Valid ? x.thumbnail.String.toString() : 'https://i.ytimg.com/vi/0DY1WSk8B9o/maxresdefault.jpg'}
+                      style={{ height: '100%', width: '100%', borderRadius: 3}} 
+                    />
                   </div>
                   <p className={'location-title'}>{x.name}</p>
-                  <p className={'text-xs location-province location-title'}>{x.location}</p>
+                  <p className={'text-xs location-province location-title'}>{x.regency_name}</p>
                   <div className={'critics-users-rating-container'} style={{ display: 'inline-block' }}>
-                    <p className={'text-xs ml-2'}>{x.user_rating}</p>
+                    <p className={'text-xs ml-2'}>{x.user_score} <span className={'text-xs text-gray'}>({x.user_count})</span></p>
                     <div style={{ height: 4, width: 30, backgroundColor: "#72767d"}}>
-                      <div style={{ height: 4, width: `${x.user_rating}%`, backgroundColor: 'green' }} />
+                      <div style={{ height: 4, width: `${x.user_score}%`, backgroundColor: 'green' }} />
                     </div>
                   </div>
                   <div style={{ clear: 'both'}} />
diff --git a/src/pages/Home/style.css b/src/pages/Home/style.css
index 8742070..afef6a3 100644
--- a/src/pages/Home/style.css
+++ b/src/pages/Home/style.css
@@ -152,7 +152,6 @@
   .news-card {
     width: 100%;
   }
-
   .news-link {
     font-size: 0.75rem;
     line-height: 1rem;
@@ -178,4 +177,8 @@
     height: 100px;
   }
 
+  .top-location-container .location-title {
+    font-size: 0.685rem;
+  }
+
 }
\ No newline at end of file