package.json

@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.9",
     "@reduxjs/toolkit": "^1.9.5",
+    "@types/react-redux": "^7.1.26",
     "axios": "^1.5.0",
     "emojibase": "^15.0.0",
     "interweave": "^13.1.0",

src/app.css

@@ -60,10 +60,6 @@
   line-height: 1.25rem;
 }
 
-.input-checkbox:hover {
-  cursor: pointer;
-}
-
 @media screen and(max-width: 425px) {
   .users-score {
     font-size: .75rem;

src/app.tsx

@@ -14,6 +14,7 @@ import { getRoutes } from './routes';
 export function App() {
   const { routes } = getRoutes();
   return (
+    <>
       <Provider store={store}>
         <PersistGate persistor={persistore}>
           <Router>
@@ -24,6 +25,7 @@ export function App() {
                   let Element = element as any
                   if (protectedRoute === "user") {
                     return (
+                      <>
                         <Route
                           path={path}
                           id={name}
@@ -33,11 +35,14 @@ export function App() {
                             </UserProtectedRoute>
                           }
                         />
+                      </>
                     )
                   }
 
                   if (protectedRoute === "admin") {
                     return (
+                      <>
+                        <>
                           <Route
                             path={path}
                             id={name}
@@ -47,14 +52,18 @@ export function App() {
                               </AdminProtectedRoute>
                             }
                           />
+                        </>
+                      </>
                     )
                   }
                   return (
+                    <>
                       <Route
                         path={path}
                         id={name}
                         element={element}
                       />
+                    </>
                   )
                 })}
                 <Route path="*" element={<NotFound />} />
@@ -63,5 +72,6 @@ export function App() {
           </Router>
         </PersistGate>
       </Provider>
+    </>
   )
 }

src/components/Button/FilterButton/index.tsx

@@ -1,14 +0,0 @@
-import "./style.css";
-
-interface ComponentProps {
-  label: string
-  onClick: () => void;
-}
-
-const FilterButton = (props: ComponentProps) => (
-  <button onClick={props.onClick} className="button-container">
-    <div className="button-label">{props.label}</div>
-  </button>
-)
-
-export default FilterButton;

src/components/Button/FilterButton/style.css

@@ -1,20 +0,0 @@
-.button-label {
-  text-align: center; 
-  /* color: #85CE73; */
-}
-
-.button-container {
-  align-self: stretch; 
-  padding-left: 12px; 
-  padding-right: 12px; 
-  padding-top: 10px; 
-  padding-bottom: 10px; 
-  border-radius: 6px; 
-  border: 1px #58874d solid; 
-  color: #85CE73;
-}
-
-.button-container:hover {
-  background-color: #58874d;
-  color: #FFF;
-}

src/components/Card/LocationCard/index.tsx

@@ -1,47 +0,0 @@
-import { JSXInternal } from "node_modules/preact/src/jsx";
-import { LocationInfo } from "../../../domains";
-
-interface ComponentProps {
-  onCardClick: (id: Number) => void,
-  data: LocationInfo,
-  containerClass?: string,
-  containerStyle?: JSXInternal.CSSProperties
-}
-
-const LocationCard = (props: ComponentProps) => (
-  <div className={props.containerClass} style={props.containerStyle}>
-    <a onClick={() => props.onCardClick(props.data.id)}>
-      <div className={'border-secondary recently-img-container'}>
-        <img alt={props.data.name} src={props.data.thumbnail ? props.data.thumbnail : ''} loading="lazy" style={{ width: '100%', height: '100%' }} />
-      </div>
-    </a>
-    <div className={"border-primary pb-2 location-container text-sm mb-2 mt-2"}>
-      <p className={'location-title'}>{props.data.name}</p>
-      <p className={'text-xs mt-1'}>{props.data.regency_name}, {props.data.province_name}</p>
-    </div>
-    {props.data.critic_count !== 0 &&
-      <div className={"flex flex-row items-center mb-3"}>
-        <div className={'mr-3 users-score-bar'}>
-          <p className={'text-sm text-center'}>{props.data.critic_score}</p>
-          <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
-            <div style={{ height: 4, width: `${props.data.critic_score}%`, backgroundColor: 'green' }} />
-          </div>
-        </div>
-        <p className={"users-score"}>critic score ({props.data.critic_count})</p>
-      </div>
-    }
-    {props.data.user_score !== 0 &&
-      <div className={"flex flex-row items-center"}>
-        <div className={'mr-3 users-score-bar'}>
-          <p className={'text-sm text-center'}>{props.data.user_score}</p>
-          <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
-            <div style={{ height: 4, width: ` ${props.data.user_score}%`, backgroundColor: 'green' }} />
-          </div>
-        </div>
-        <p className={'users-score'}>user score ({props.data.user_count})</p>
-      </div>
-    }
-  </div>
-)
-
-export default LocationCard;

src/components/Header/index.tsx

@@ -8,7 +8,6 @@ import './style.css';
 import { logoutService } from "../../services";
 import { getSearchLocationService } from "../../services/locations";
 import { useNavigate } from "react-router-dom";
-import { ReactSelectData } from "src/types/common";
 
 
 function Header() {
@@ -41,8 +40,7 @@ function Header() {
     e.preventDefault();
   }
 
-  const onSelectedSearchOption = (v: ReactSelectData | unknown) => {
+  const onSelectedSearchOption = (val: any) => {
-    const val = v as ReactSelectData
     navigate(`/location/${val.value}`)
   }
 
@@ -141,7 +139,7 @@ function Header() {
                 textAlign: 'left',
                 minHeight: 45
               }),
-              option: (base, { isFocused }) => ({
+              option: (base, {isFocused}) => ({
                 ...base,
                 backgroundColor: isFocused ? '#202225' : 'none',
               }),
@@ -151,7 +149,7 @@ function Header() {
               //     color: "white"
               //   })
             }}
-            onChange={(v: ReactSelectData | unknown, _) => onSelectedSearchOption(v)}
+            onChange={onSelectedSearchOption}
           />
         </form>
         <button onClick={onDropdown} className={`dropdown-menu bg-secondary ${dropdown ? 'ml-auto' : ''}`} style={{ padding: 5, borderRadius: 10 }}>

src/components/Input/CheckboxInput/index.tsx

@@ -1,24 +0,0 @@
-import { capitalize } from "../../../types/common"
-
-interface ComponentProps {
-  value: string,
-  isSelected?: boolean
-  onChange: () => void,
-  inputName: string
-}
-
-const CheckboxInput = (props: ComponentProps) => (
-  <div style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
-    <input checked={props.isSelected} 
-      type={"checkbox"} 
-      style={{ width: 16, height: 16 }} 
-      className={"input-checkbox"} 
-      value={props.value} 
-      name={props.inputName} 
-      onChange={props.onChange} 
-    />
-    <div style="color: white; font-size: 14px; line-height: 21px; letter-spacing: 0.56px; word-wrap: break-word">{capitalize(props.value)}</div>
-  </div>
-)
-
-export default CheckboxInput

src/components/index.ts

@@ -15,12 +15,6 @@ import DropdownInput from "./DropdownInput";
 
 import SpinnerLoading from "./Loading/Spinner";
 
-import FilterButton from "./Button/FilterButton";
-
-import LocationCard from "./Card/LocationCard";
-
-import CheckboxInput from "./Input/CheckboxInput";
-
 export {
   Header,
   WarningButton,
@@ -36,11 +30,5 @@ export {
   CustomInterweave,
   DropdownInput,
 
-  CheckboxInput,
-
   SpinnerLoading,
-
-  LocationCard,
-
-  FilterButton,
 }

src/pages/BestLocations/index.tsx

@@ -2,8 +2,8 @@ import { TargetedEvent } from "preact/compat";
 import { useEffect, useState } from "preact/hooks";
 import { getListTopLocationsService } from "../../services";
 import { DefaultSeparator } from "../../components";
+import { NullValueRes } from "../../types/common";
 import './style.css';
-import { useClick, useFloating, useInteractions } from "@floating-ui/react";
 
 interface TopLocation {
   row_number: Number,
@@ -33,7 +33,7 @@ const REGIONS = [
   'Sulawesi',
 ];
 
-const REVIEWERS_TYPE = [
+const REVIEWERS_TYPE =[
   'All',
   'Critics',
   'Users'
@@ -47,7 +47,7 @@ const MIN_REVIEWS = [
 ]
 
 function BestLocation() {
-  const [page, _setPage] = useState<number>(1);
+  const [page, setPage] = useState<number>(1);
   const [topLocations, setTopLocations] = useState<Array<TopLocation>>([])
   const [pageState, setPageState] = useState({
     filterScoreType: 'all',
@@ -72,19 +72,21 @@ function BestLocation() {
 
   function onChangeReviewType(e: TargetedEvent<HTMLAnchorElement>, reviewer_type: string, i: number) {
     e.preventDefault()
-    setPageState({ ...pageState, filterScoreType: reviewer_type, filterScoreTypeidx: i })
+    setPageState({...pageState, filterScoreType: reviewer_type, filterScoreTypeidx: i })
   }
 
   function onChangeRegionType(e: TargetedEvent<HTMLAnchorElement>, region_name: string, type: number) {
     e.preventDefault();
-    setPageState({ ...pageState, filterRegionTypeName: region_name, filterRegionType: type })
+    setPageState({ ...pageState, filterRegionTypeName: region_name, filterRegionType: type})
   }
 
   useEffect(() => {
     getTopLocations()
   }, [pageState])
 
+
   return (
+    <>
       <div className={'content main-content mt-3'}>
         <section name={"Top locations header"}>
           <h1 className={'text-3xl mb-5 font-bold'}>Top Locations</h1>
@@ -96,7 +98,7 @@ function BestLocation() {
             </a>
             <div className={'dropdown-content text-sm'}>
               {REGIONS.map((x, index) => (
-              <a onClick={(e) => onChangeRegionType(e, x, index)} className={'block pt-1'}>{x}</a>
+                <a onClick={(e) => onChangeRegionType(e, x, index) } className={'block pt-1'}>{x}</a>
               ))}
             </div>
           </div>
@@ -129,7 +131,7 @@ function BestLocation() {
 
         <section name={'Main content'}>
           <div className={'flex flex-row pt-10 pb-10'}>
-          <div className={'mr-5'} style={{ flex: 1 }}>
+            <div className={'mr-5'} style={{ flex: 1}}>
               {topLocations.map(x => (
                 <>
                   {/* UNCOMMENT....IF THERES A PURPOSE FOR RIGHT THREE DOTS */}
@@ -149,10 +151,10 @@ function BestLocation() {
                   <div className={'text-md font-bold'}>{x.regency_name}</div>
                   <div className={'text-xs mb-2'}>{x.address}</div>
                   <div>$$$ (IDR 1000-12000)</div>
-                <a href={x.google_maps_link} target={'_'}><div className={'text-sm mt-2 items-center'}><svg style={{ display: 'inline-block', marginBottom: 3 }} xmlns="http://www.w3.org/2000/svg" height="12" fill={'white'} viewBox="0 -960 960 960" width="12  "><path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z" /></svg>Maps Location</div></a>
+                  <a href={x.google_maps_link} target={'_'}><div className={'text-sm mt-2 items-center'}><svg style={{ display: 'inline-block', marginBottom: 3}} xmlns="http://www.w3.org/2000/svg" height="12" fill={'white'} viewBox="0 -960 960 960" width="12  "><path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z"/></svg>Maps Location</div></a>
                   <div className={'mt-4'}>
                     <div className={'text-xs bg-secondary'} style={{ width: 160, display: 'inline-block', borderRadius: 5 }}>
-                    <div className={'text-center p-1 bg-tertiary text-primary'} style={{ borderTopRightRadius: 5, borderTopLeftRadius: 5 }}>CRITICS SCORE</div>
+                      <div className={'text-center p-1 bg-tertiary text-primary'} style={{ borderTopRightRadius: 5, borderTopLeftRadius: 5}}>CRITICS SCORE</div>
                       <div className={"flex flex-row items-center p-2"}>
                         <div className={'mr-3 users-score-bar'}>
                           <p className={`text-xl text-center ${x.critic_score !== 0 ? 'font-bold' : ''}`}>{x.critic_score !== 0 ? Number(x.critic_score) / Number(x.critic_count) * 10 : "N/A"}</p>
@@ -164,10 +166,10 @@ function BestLocation() {
                       </div>
                     </div>
                     <div className={'text-xs bg-secondary ml-3'} style={{ width: 160, display: 'inline-block', borderRadius: 5 }}>
-                    <div className={'text-center p-1 bg-tertiary text-primary'} style={{ borderTopLeftRadius: 5, borderTopRightRadius: 5 }}>USERS SCORE</div>
+                      <div className={'text-center p-1 bg-tertiary text-primary'} style={{ borderTopLeftRadius: 5, borderTopRightRadius: 5}}>USERS SCORE</div>
                       <div className={"flex flex-row items-center p-2"}>
                         <div className={'mr-3 users-score-bar'}>
-                        <p className={`text-xl text-center ${x.user_score !== 0 ? 'font-bold' : ''}`}>{x.user_score !== 0 ? x.user_score : "N/A"}</p>
+                          <p className={`text-xl text-center ${x.user_score !== 0 ? 'font-bold' : ''}`}>{x.user_score !== 0 ? x.user_score : "N/A" }</p>
                           <div className={"mt-1"} style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
                             <div style={{ height: 4, width: ` ${x.user_score !== 0 ? x.user_score : 0}%`, backgroundColor: 'green' }} />
                           </div>
@@ -176,17 +178,17 @@ function BestLocation() {
                       </div>
                     </div>
                   </div>
-                <div style={{ clear: 'both' }} />
+                  <div style={{ clear: 'both'}}/>
                 </>
               ))}
             </div>
-          <div className={'p-4 bg-secondary'} style={{ minWidth: 300 }}>
+            <div className={'p-4 bg-secondary'} style={{ minWidth: 300}}>
                 <div className={'h-30 bg-primary p-4 right-filter'}>
                   {REVIEWERS_TYPE.map((x, idx) => (
                   <a 
-                  onClick={(e) => onChangeReviewType(e, x.toLowerCase(), idx + 1)}
+                    onClick={(e) => onChangeReviewType(e, x.toLowerCase(), idx+1)} 
                     href={'#'}
-                  style={pageState.filterScoreType == x.toLowerCase() ? { pointerEvents: 'none' } : ''}
+                    style={ pageState.filterScoreType == x.toLowerCase() ? { pointerEvents: 'none'} : ''}
                   >
                     <div className={`pt-1 pb-1 ${pageState.filterScoreType == x.toLowerCase() ? 'pl-1 bg-tertiary selected-reviewer-filter' : ''}`}>{x} Score</div>
                   </a>
@@ -196,6 +198,7 @@ function BestLocation() {
           </div>
         </section>
       </div>
+    </>
   )
 
 }

src/pages/Discovery/index.tsx

@@ -1,304 +1,8 @@
-import { useEffect, useState } from "preact/hooks";
-import { CheckboxInput, DefaultSeparator, FilterButton, LocationCard } from "../../components";
-import { useClick, useFloating, useInteractions, Side, AlignedPlacement, flip, shift, useDismiss } from "@floating-ui/react";
-import { JSXInternal } from "node_modules/preact/src/jsx";
-import { getListRecentLocationsRatingsService, getRegenciesService, } from "../../services";
-import { LocationInfo, Regency } from "../../domains";
-import { ChangeEvent, TargetedEvent } from "preact/compat";
-import { LocationType, capitalize } from "../../types/common";
-import './style.css';
-import { enumKeys } from "../../utils";
-import { getSearchLocationService } from "../../services/locations";
-
-
-interface floatFilterArgs<T> {
-  isOpen: boolean,
-  placement: Side | AlignedPlacement,
-  outsidePress?: () => void,
-  onChecked: (e: TargetedEvent<HTMLInputElement, Event>, id: number) => void,
-  onClearFilter?: () => void,
-  onInputChange: (val: string) => void,
-  listData?: T[];
-}
-
-function FloatFilter(props: floatFilterArgs<Regency & { isSelected?: boolean }>) {
-  const [floatState, setFloatState] = useState({
-    searchValue: "",
-  })
-
-  const { refs, floatingStyles, context } = useFloating({
-    placement: props.placement,
-    open: props.isOpen,
-    middleware: [
-      flip({ fallbackAxisSideDirection: "end" }),
-      shift()
-    ]
-  });
-
-  const click = useClick(context);
-  const dismiss = useDismiss(context, {
-    outsidePress: () => {
-      props.outsidePress && props.outsidePress()
-      return false
-    }
-  });
-
-  const { getReferenceProps, getFloatingProps } = useInteractions([
-    click,
-    dismiss
-  ]);
-
-  const style: JSXInternal.CSSProperties = {
-    ...floatingStyles,
-    top: 210,
-    left: 'none',
-    marginLeft: 150,
-    width: 355,
-    zIndex: 1,
-  }
-
-  function onInputChange(e: ChangeEvent<HTMLInputElement>): void {
-    const input = e.target as HTMLInputElement;
-    setFloatState({ searchValue: input.value.toLowerCase() })
-    props.onInputChange(input.value)
-  }
-
-  if (props.isOpen) return (
-    <div
-      ref={refs.setFloating} {...getReferenceProps()}
-      style={style}
-      className={'bg-secondary float-filter-scroll'}
-      {...getFloatingProps()}
-    >
-      <div style={{ padding: 10 }}>
-        <input
-          type="text"
-          value={floatState.searchValue}
-          onChange={onInputChange}
-          placeholder={"Search ..."}
-          className={'bg-quartenary text-sm input-text mb-3'}
-        />
-      </div>
-      <div style={{ overflowY: 'scroll', height: 315, padding: 10 }} className={'float-filter-scroll'}>
-        {props.listData ?
-          <ul>
-            {props.listData.map(x => (
-              <div style={{ display: 'flex', alignItems: 'center', marginBottom: 5 }}>
-                <input
-                  type={"checkbox"}
-                  id={x.id.toString()}
-                  checked={x.isSelected}
-                  value={x.id}
-                  name={x.regency_name}
-                  className={'input-checkbox'}
-                  style={{ marginRight: 10, width: 18, height: 18 }}
-                  onChange={(e) => props.onChecked(e, x.id)}
-                />
-                <label htmlFor={x.id.toString()}>{x.regency_name}</label>
-              </div>
-            ))}
-          </ul>
-          : null}
-      </div>
-      <div style={{ display: 'flex', justifyContent: 'space-around', paddingBottom: 10, paddingTop: 10 }}>
-        <button onClick={props.onClearFilter}>Clear</button>
-        <button onClick={props.outsidePress} >Close</button>
-      </div>
-    </div>
-  )
-
-  return null
-}
-
-
 function Discovery() {
-
+  return(
-  interface DiscoveryState {
+    <>
-    filterQ: string,
+    <h1>Discovery</h1>
-    regencies: any[],
+    </>
-    searchRegencies: any[],
-    locations: LocationInfo[],
-    locationType: Array<{value: string, isSelected?: boolean}>
-  }
-
-  const [data, setData] = useState<DiscoveryState>({
-    filterQ: '',
-    regencies: [],
-    searchRegencies: [],
-    locations: [],
-    locationType: []
-  });
-  const [isFloatFilterOpen, setFloatFilterOpen] = useState(false)
-
-  useEffect(() => {
-    getLocationType()
-    getRecentLocations()
-    getRegion()
-  }, [])
-
-  async function getRegion() {
-    try {
-      const res = await getRegenciesService();
-      setData((prevState) => ({ ...prevState, regencies: res.data, searchRegencies: res.data }))
-    } catch (err) {
-      alert(err)
-    }
-  }
-
-  async function getRecentLocations() {
-    try {
-      const locations = await getListRecentLocationsRatingsService(15)
-      setData((prevState) => ({ ...prevState, locations: locations.data.locations }))
-    } catch (error) {
-      console.log(error)
-    }
-  }
-
-  function onCheckedRegencyFilter(_val: any, id: number) {
-    // const value = val as HTMLInputElement;
-    const dataRegencies = data.searchRegencies as (Regency & { isSelected?: boolean })[];
-    const regencyIdx = dataRegencies.findIndex(x => x.id == id);
-    dataRegencies[regencyIdx].isSelected = !dataRegencies[regencyIdx].isSelected
-    setData({
-      ...data,
-      regencies: dataRegencies,
-      searchRegencies: dataRegencies
-    })
-  }
-
-  function onClearFilter() {
-    const dataRegencies = data.searchRegencies as (Regency & { isSelected?: boolean })[];
-    const regencies = dataRegencies.map(x => ({ ...x, isSelected: false }))
-
-    setData({
-      ...data,
-      regencies: regencies,
-      searchRegencies: regencies
-    })
-  }
-
-
-  function onInputChange(search: string) {
-    const dataRegencies = data.regencies as (Regency & { isSelected?: boolean })[];
-    // console.log(dataRegencies.filter(x => x.regency_name.toLowerCase().includes(search)))
-    setData({
-      ...data,
-      searchRegencies: dataRegencies.filter(x => x.regency_name.toLowerCase().includes(search))
-    })
-  }
-
-
-  function onClickedTypeLocations(idx: number) {
-    const locType = data.locationType
-    locType[idx].isSelected = !locType[idx].isSelected
-    setData({
-      ...data,
-      locationType: locType
-    })
-  }
-
-  function onApplyFilter() {
-    const dataRegencies = data.regencies as (Regency & { isSelected?: boolean})[];
-    const selectedRegencies = dataRegencies.filter(x => x.isSelected)
-    const selectedLocType = data.locationType.filter(x => x.isSelected)
-    let regenciesQ = "";
-    let locTypeQ = ""
-
-    if(selectedRegencies.length > 0) {
-      regenciesQ = selectedRegencies.map(x => x.id).join(" OR ").replace(/\s+/g, '%20')
-    
-    }
-    if(selectedLocType.length > 0) {
-      const onJoin = selectedRegencies.length > 0 ? " AND " : " OR "
-      locTypeQ = selectedLocType.map(x => x.value).join(onJoin).replace(/\s+/g, '%20')
-
-      if(selectedRegencies.length > 0) locTypeQ = `%20AND%20${locTypeQ}`
-    }
-
-    const searchQ = `${regenciesQ}${locTypeQ}`
-
-    
-
-
-  }
-
-  function getLocationType() {
-    const type: Array<{value: string, isSelected?: boolean}> = []
-    for (const lt of enumKeys(LocationType)) {
-      type.push({value: LocationType[lt]});
-    }
-
-    setData((prevState) => ({ ...prevState, locationType: type }))
-
-  }
-
-  return (
-    <div className="content main-content mt-3">
-      <section name="header">
-        <h1 className={'text-3xl mb-5 font-bold'}>Discovery</h1>
-        <DefaultSeparator />
-      </section>
-      <section name="content">
-        <div style="padding-bottom: 24px; justify-content: flex-start; align-items: flex-start; display: inline-flex">
-          {/* FILTER */}
-          <section name="discovery filter">
-            <div className="filter-container">
-              <div style="align-self: stretch; padding-left: 12px; padding-right: 12px; padding-top: 8px; padding-bottom: 8px; background: #36383B; border-radius: 8px; justify-content: flex-start; align-items: center; gap: 10px; display: inline-flex">
-                <div style="flex: 1 1 0; color: white; font-size: 16px; line-height: 24px; letter-spacing: 0.64px; word-wrap: break-word">Filter</div>
-              </div>
-              <div style="align-self: stretch; padding-left: 12px; padding-right: 12px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex">
-                <div style="align-self: stretch; color: white; font-size: 14px; font-weight: 700; line-height: 21px; letter-spacing: 0.56px; word-wrap: break-word">Kota / Kabupaten </div>
-                <div style="align-self: stretch; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
-                  {data.regencies.filter(x => x.isSelected).map(x => (
-                    <div style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 12px; display: inline-flex">
-                      <div style="flex: 1 1 0; color: white; font-size: 14px; font-family: Poppins; font-weight: 500; line-height: 21px; letter-spacing: 0.56px; word-wrap: break-word">{x.regency_name}</div>
-                    </div>
-                  ))}
-                </div>
-                <div style="align-self: stretch; padding: 8px; border-radius: 6px; justify-content: center; align-items: center; gap: 4px; display: inline-flex">
-                  <button onClick={() => setFloatFilterOpen(!isFloatFilterOpen)} style="text-align: center; color: #85CE73; font-size: 14px; font-weight: 600; line-height: 21px; letter-spacing: 0.10px; word-wrap: break-word">Lihat Selengkapnya</button>
-                  <FloatFilter
-                    isOpen={isFloatFilterOpen}
-                    placement="right"
-                    listData={data.searchRegencies}
-                    outsidePress={() => setFloatFilterOpen(false)}
-                    onClearFilter={onClearFilter}
-                    onChecked={onCheckedRegencyFilter}
-                    onInputChange={onInputChange}
-                  />
-                </div>
-              </div>
-              <div style="align-self: stretch; height: 2px; background: #36383B; border-radius: 2px"></div>
-              <div style="align-self: stretch; height: 190px; padding-left: 12px; padding-right: 12px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex">
-                <div style="align-self: stretch; color: white; font-size: 14px; font-family: Poppins; font-weight: 700; line-height: 21px; letter-spacing: 0.56px; word-wrap: break-word">Tipe</div>
-                <div style="align-self: stretch; height: 153px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px; display: flex">
-                  {data.locationType.map((x, i) => (
-                    <CheckboxInput
-                      inputName="location_type"
-                      onChange={() => onClickedTypeLocations(i)}
-                      value={x.value}
-                      isSelected={x.isSelected}
-                    />
-                  ))}
-                </div>
-              </div>
-              <div style="align-self: stretch; height: 2px; background: #36383B; border-radius: 2px"></div>
-              <FilterButton onClick={onApplyFilter} label="Apply" />
-            </div>
-          </section>
-          {/*  FILTER END */}
-          <div>
-            {data.locations.map(x => (
-              <LocationCard
-                containerClass='card-list-container'
-                onCardClick={(id) => console.log(id)}
-                data={x}
-              />
-            ))}
-          </div>
-        </div>
-      </section>
-    </div>
   )
 
 }

src/pages/Discovery/style.css

@@ -1,112 +0,0 @@
-.float-filter-scroll::-webkit-scrollbar-track {
-  background: #e0e0e0;
-}
-
-/* Customizing the scrollbar handle */
-.float-filter-scroll::-webkit-scrollbar-thumb {
-  background: #888;
-}
-
-.float-filter-scroll::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-
-/* Customizing the scrollbar width */
-.float-filter-scroll::-webkit-scrollbar {
-  width: 12px;
-}
-
-/* For Firefox */
-.float-filter-scroll {
-  scrollbar-width: thin;
-  scrollbar-color: #a8adb3 #2f3136;
-}
-
-.card-list-container {
-  padding: 10px 1% 15px;
-  display: inline-block; 
-  margin: 0 0 15px; 
-  vertical-align: top; 
-  width: 20%;
-}
-
-.filter-container {
-  width: 195px; 
-  flex-direction: column; 
-  justify-content: 
-  flex-start; 
-  align-items: flex-start; 
-  gap: 24px; 
-  display: inline-flex;
-  margin-right: 20px;
-}
-
-@media screen and (max-width: 1300px) {
-  .card-list-container {
-    width: 24.3%;
-  }
-}
-
-@media screen and (max-width: 1135px) {
-  .card-list-container {
-    width: 25%;
-  }
-}
-
-@media screen and (max-width: 1100px) {
-  .card-list-container {
-    width: 33%;
-  }
-}
-
-@media screen and (max-width: 920px) {
-  .card-list-container {
-    width: 33%;
-  }
-  .filter-container {
-    display: none;
-  }
-}
-
-@media screen and (max-width: 625px) {
-  .card-list-container {
-    width: 50%;
-  }
-
-}
-
-/* 
-@media screen and (max-width: 425px) {
-  .news-card {
-    width: 100%;
-  }
-  .news-link {
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-
-  .recently-img-container {
-    height: 120px;
-    width: 100%;
-  }
-
-  .critics-users-image {
-    height: 60px;
-    width: 60px;
-  }
-
-  .location-province {
-    font-size: 10px !important;
-  }
-
-  .trending-image-container {
-    overflow: hidden;
-    border-radius: 7px;
-    height: 100px;
-  }
-
-  .top-location-container .location-title {
-    font-size: 0.685rem;
-  }
-
-} */

src/pages/Home/index.tsx

@@ -1,4 +1,4 @@
-import { LocationCard, SeparatorWithAnchor } from '../../components';
+import { SeparatorWithAnchor } from '../../components';
 import news from '../../datas/recent_news_event.json';
 import popular from '../../datas/popular.json';
 import popular_user_review from '../../datas/popular_user_reviews.json';
@@ -28,27 +28,27 @@ function Home() {
   async function getRecentLocations() {
     try {
       const locations = await getListRecentLocationsRatingsService(12)
-      setRecentLocations(locations.data.locations)
+      setRecentLocations(locations.data)
       // setIsLoading(false)
-    } catch (error) {
+    } catch(error) {
       console.log(error)
     }
   }
 
   async function getCrititsBestLocations() {
     try {
-      const res = await getListTopLocationsService({ page: 1, page_size: 6, order_by: 2, region_type: 0 })
+      const res = await getListTopLocationsService({ page: 1, page_size: 6, order_by: 2, region_type: 0})
       setTopCriticsLocations(res.data)
-    } catch (err) {
+    }catch(err) {
       console.log(err)
     }
   }
 
   async function getUsersBestLocations() {
     try { 
-      const res = await getListTopLocationsService({ page: 1, page_size: 6, order_by: 3, region_type: 0 })
+      const res = await getListTopLocationsService({ page: 1, page_size: 6, order_by: 3, region_type: 0})
       setTopUsersLocations(res.data)
-    } catch (err) {
+    }catch(err) {
       console.log(err)
     }
   }
@@ -61,52 +61,48 @@ function Home() {
     getRecentLocations()
     getCrititsBestLocations()
     getUsersBestLocations()
-  }, [])
+  },[])
   return (
+    <>
       <div className="content main-content mt-3">
 
         {/* RECENTLY ADDED SECTION */}
         <section about={"Recently added places"} className={'mt-3'}>
           <SeparatorWithAnchor pageLink='#' pageName='recently added' secondLink='#' />
           {recentLocations.map((x) => (
-          <LocationCard 
+            <div className={"recently-added-section-card"}>
-            containerClass='recently-added-section-card'
+              <a onClick={() => onNavigateToDetail(x.id)}>
-            onCardClick={onNavigateToDetail}
+                <div className={'border-secondary recently-img-container'}>
-            data={x}
+                  <img alt={x.name} src={x.thumbnail ? x.thumbnail : ''} loading="lazy" style={{ width: '100%', height: '100%' }} />
-          />
+                </div>
-          // <div className={"recently-added-section-card"}>
+              </a>
-          //   <a onClick={() => onNavigateToDetail(x.id)}>
+              <div className={"border-primary pb-2 location-container text-sm mb-2 mt-2"}>
-          //     <div className={'border-secondary recently-img-container'}>
+                <p className={'location-title'}>{x.name}</p>
-          //       <img alt={x.name} src={x.thumbnail ? x.thumbnail : ''} loading="lazy" style={{ width: '100%', height: '100%' }} />
+                <p className={'text-xs mt-1'}>{x.regency_name}, {x.province_name}</p>
-          //     </div>
+              </div>
-          //   </a>
+              { x.critic_count !== 0 && 
-          //   <div className={"border-primary pb-2 location-container text-sm mb-2 mt-2"}>
+                <div className={"flex flex-row items-center mb-3"}>
-          //     <p className={'location-title'}>{x.name}</p>
+                  <div className={'mr-3 users-score-bar'}>
-          //     <p className={'text-xs mt-1'}>{x.regency_name}, {x.province_name}</p>
+                    <p className={'text-sm text-center'}>{x.critic_score}</p>
-          //   </div>
+                    <div style={{ height: 4, width: 30, backgroundColor: "#72767d"}}>
-          //   {x.critic_count !== 0 &&
+                      <div style={{ height: 4, width: `${x.critic_score}%`, backgroundColor: 'green' }} />
-          //     <div className={"flex flex-row items-center mb-3"}>
+                    </div>
-          //       <div className={'mr-3 users-score-bar'}>
+                  </div>
-          //         <p className={'text-sm text-center'}>{x.critic_score}</p>
+                  <p className={"users-score"}>critic score ({x.critic_count})</p>
-          //         <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
+                </div>
-          //           <div style={{ height: 4, width: `${x.critic_score}%`, backgroundColor: 'green' }} />
+              }
-          //         </div>
+              { x.user_score !== 0 &&
-          //       </div>
+                <div className={"flex flex-row items-center"}>
-          //       <p className={"users-score"}>critic score ({x.critic_count})</p>
+                  <div className={'mr-3 users-score-bar'}>
-          //     </div>
+                    <p className={'text-sm text-center'}>{x.user_score}</p>
-          //   }
+                    <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
-          //   {x.user_score !== 0 &&
+                      <div style={{ height: 4, width: ` ${x.user_score}%`, backgroundColor: 'green' }} />
-          //     <div className={"flex flex-row items-center"}>
+                    </div>
-          //       <div className={'mr-3 users-score-bar'}>
+                  </div>
-          //         <p className={'text-sm text-center'}>{x.user_score}</p>
+                  <p className={'users-score'}>user score ({x.user_count})</p>
-          //         <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
+                </div>
-          //           <div style={{ height: 4, width: ` ${x.user_score}%`, backgroundColor: 'green' }} />
+              }
-          //         </div>
+            </div>
-          //       </div>
-          //       <p className={'users-score'}>user score ({x.user_count})</p>
-          //     </div>
-          //   }
-          // </div>
           ))}
         </section>
         {/* END RECENTLY ADDED SECTION */}
@@ -120,14 +116,14 @@ function Home() {
             {news.data.map((x: News) => (
               <div class={"text-sm news-card"}>
                 <div className={"image-news-container"}>
-                <img src={x.thumbnail} loading={'lazy'} className={"news-img"} />
+                  <img src={x.thumbnail} loading={'lazy'} className={"news-img"}/>
                 </div>
                 <a className={'news-link'} target="_blank" href={x.link}>{x.link.split("/")[2].replace(/www\./, '')}</a>
                 <p className={'mt-2 mb-2'}>{x.header}</p>
                 <div className={"flex flex-row user-engagement"}>
                   <svg xmlns="http://www.w3.org/2000/svg" fill={"gray"} height="18" viewBox="0 -960 960 960" width="18"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z" /></svg>
                   <p className={"mr-3 ml-1"}>{x.likes_count}</p>
-                <svg style={{ marginTop: 2 }} stroke="currentColor" fill="white" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32zM128 272c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg>
+                  <svg style={{ marginTop: 2}} stroke="currentColor" fill="white" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32zM128 272c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg>
                   <p className={"ml-1"}>{x.comments_count}</p>
                 </div>
               </div>
@@ -156,10 +152,10 @@ function Home() {
                     <div style={{ height: 4, width: `${x.rating}%`, backgroundColor: 'green' }} />
                   </div>
                 </div>
-              <div style={{ clear: 'both' }} className={'mb-3'} />
+                <div  style={{ clear: 'both'}} className={'mb-3'}/>
                 <div className={'text-sm'}>
                   {x.message}
-                <a className={'text-tertiary ml-2'} style={{ cursor: 'pointer' }}>read more</a>
+                  <a className={'text-tertiary ml-2'} style={{ cursor: 'pointer'}}>read more</a>
                 </div>
               </div>
             ))
@@ -197,7 +193,7 @@ function Home() {
                     <img 
                       src={x.thumbnail ? x.thumbnail : 'https://i.ytimg.com/vi/0DY1WSk8B9o/maxresdefault.jpg'} 
                       loading={'lazy'} 
-                    style={{ height: '100%', width: '100%', borderRadius: 3 }}
+                      style={{ height: '100%', width: '100%', borderRadius: 3}} 
                     />
                   </div>
                   <p className={'location-title'}>{x.name}</p>
@@ -208,7 +204,7 @@ function Home() {
                       <div style={{ height: 4, width: `${x.critic_score}%`, backgroundColor: 'green' }} />
                     </div>
                   </div>
-                <div style={{ clear: 'both' }} />
+                  <div style={{ clear: 'both'}} />
                 </div>
               ))
               }
@@ -220,18 +216,18 @@ function Home() {
                   <div className={'mr-2 critics-users-image'}>
                     <img 
                       src={x.thumbnail ? x.thumbnail : 'https://i.ytimg.com/vi/0DY1WSk8B9o/maxresdefault.jpg'}
-                    style={{ height: '100%', width: '100%', borderRadius: 3 }}
+                      style={{ height: '100%', width: '100%', borderRadius: 3}} 
                     />
                   </div>
                   <p className={'location-title'}>{x.name}</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_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: 30, backgroundColor: "#72767d"}}>
                       <div style={{ height: 4, width: `${x.user_score}%`, backgroundColor: 'green' }} />
                     </div>
                   </div>
-                <div style={{ clear: 'both' }} />
+                  <div style={{ clear: 'both'}} />
                 </div>
               ))
               }
@@ -239,6 +235,7 @@ function Home() {
           </div>
         </section>
       </div>
+    </>
 
   )
 }

src/pages/LocationDetail/index.tsx

@@ -33,7 +33,7 @@ function LocationDetail() {
   const [locationImages, setLocationImages] = useState<LocationResponse>(emptyLocationResponse())
   const [currentUserReview, setCurrentUserReview] = useState<CurrentUserLocationReviews>()
   const [lightboxOpen, setLightboxOpen] = useState<boolean>(false)
-  const [updatePage, setUpdatePage] = useState<boolean>(true)
+  const[updatePage, setUpdatePage] = useState<boolean>(true)
   const [pageState, setPageState] = useState({
     critic_filter_name: 'highest rated',
     critic_filter_type: 0,
@@ -61,7 +61,7 @@ function LocationDetail() {
     try {
       const res = await getLocationService(Number(id))
       setLocationDetail(res.data, (val) => {
-        if (val.detail.thumbnail) {
+        if(val.detail.thumbnail) {
           getImage(val.detail.thumbnail)
         }
       })
@@ -90,10 +90,10 @@ function LocationDetail() {
    try {
     const res = await getCurrentUserLocationReviewService(Number(id))
     setCurrentUserReview(res.data)
-      setPageState({ ...pageState, enable_post: false })
+    setPageState({ ...pageState, enable_post: false})
    } catch (error) {
     let err = error as IHttpResponse;
-      if (err.status == 404 || err.status == 401) {
+    if(err.status == 404 || err.status == 401 ) {
       return
     }
     alert(err.error.response.data.message)
@@ -193,12 +193,13 @@ function LocationDetail() {
   }, [])
   
   useEffect(() => {
-    if (updatePage || id) {
+    if(updatePage) {
       getLocationDetail()
     }
   }, [updatePage, id])
 
   return (
+    <>
       <div className={'content main-content mt-3'}>
         <section name={"HEADER LINK"}>
           <div className={'header-link text-tertiary'}>
@@ -390,7 +391,7 @@ function LocationDetail() {
                       {pageState.on_submit_loading ?
                         <SpinnerLoading />
                         :
-                      <span className={'text-xxs p-1 text-area-button'} style={pageState.enable_post ? '' : { display: 'none' }}>
+                        <span className={'text-xxs p-1 text-area-button'} style={pageState.enable_post ? '' : { display: 'none'}}>
                           <a href={'#'} onClick={handleSubmitReview}>
                             POST
                           </a>
@@ -469,13 +470,16 @@ function LocationDetail() {
                 </>
 
                 :
+                <>
                   <span className={'text-sm italic'}>No Critics review to display</span>
+                </>
+
                 }
               </div>
 
               <div name={'USERS REVIEW'} style={{ margin: '50px 0', textAlign: 'left' }}>
                 <SeparatorWithAnchor pageName={"User's review"} pageLink='#' secondLink={locationDetail.users_review.length > 0 ? '#' : ''} />
-              {locationDetail.users_review.length > 0 ?
+                { locationDetail.users_review.length > 0 ?
                   <>
                     {locationDetail.users_review.map(x => (
                       <div style={{ padding: '15px 0' }}>
@@ -536,12 +540,111 @@ function LocationDetail() {
                 }
               </div>
 
+
+              {/* <div name={'USERS REVIEW'} style={{ margin: '50px 0', textAlign: 'left' }}>
+                <SeparatorWithAnchor pageName={"Popular User's review"} pageLink='#' secondLink='#' />
+                <div className={''} style={{ padding: '15px 0' }}>
+                  <div className={'mr-5'} style={{ width: 45, float: 'left' }}>
+                    <a href="#">
+                      <img
+                        loading={'lazy'}
+                        style={{ width: '100%' }}
+                        src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'}
+                      />
+                    </a>
+                  </div>
+                  <div>
+                    <div style={{ fontWeight: 700, fontSize: 16, lineHeight: 'initial' }}>
+                      <a>
+                        <span>Benito Mussolini</span>
+                      </a>
+                    </div>
+                  </div>
+                  <div className={'inline-block'}>
+                    <div className={'text-sm text-center'} >80</div>
+                    <div style={{ height: 4, width: 25, position: 'relative', backgroundColor: '#d8d8d8' }}>
+                      <div style={{ height: 4, backgroundColor: '#85ce73', width: '90%' }} />
+                    </div>
+                  </div>
+                  <div style={{ fontSize: 15, lineHeight: '24px', margin: '10px 65px 1px', wordWrap: 'break-word' }}>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nihil dolor delectus ex minima aliquid quidem veniam officiis temporibus ipsum ea incidunt voluptatum a, repellat illum, cumque consequatur saepe assumenda.</p>
+                  </div>
+                  <div className={'reviewLinks'} style={{ marginLeft: 63 }}>
+                    <div className={'mr-2'} style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
+                      <a className={'text-sm'} href={'#'}>
+                        <svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
+                        <div className={'inline-block'}>Video</div>
+                      </a>
+                    </div>
+                    <div style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
+                      <a className={'text-sm'} href={'#'}>
+                        <svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
+                        <div className={'inline-block'}>Instagram</div>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+
+                <div className={''} style={{ padding: '15px 0', borderTop: '1px solid #38444d' }}>
+                  <div className={'mr-5'} style={{ width: 45, float: 'left' }}>
+                    <a href="#">
+                      <img
+                        loading={'lazy'}
+                        style={{ width: '100%' }}
+                        src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'}
+                      />
+                    </a>
+                  </div>
+                  <div>
+                    <div style={{ fontWeight: 700, fontSize: 16, lineHeight: 'initial' }}>
+                      <a>
+                        <span>Benito Mussolini</span>
+                      </a>
+                    </div>
+                  </div>
+                  <div className={'inline-block'}>
+                    <div className={'text-sm text-center'} >80</div>
+                    <div style={{ height: 4, width: 25, position: 'relative', backgroundColor: '#d8d8d8' }}>
+                      <div style={{ height: 4, backgroundColor: '#85ce73', width: '90%' }} />
+                    </div>
+                  </div>
+                  <div style={{ fontSize: 15, lineHeight: '24px', margin: '10px 65px 1px', wordWrap: 'break-word' }}>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nihil dolor delectus ex minima aliquid quidem veniam officiis temporibus ipsum ea incidunt voluptatum a, repellat illum, cumque consequatur saepe assumenda.</p>
+                  </div>
+                  <div className={'reviewLinks'} style={{ marginLeft: 63 }}>
+                    <div className={'mr-2'} style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
+                      <a className={'text-sm'} href={'#'}>
+                        <svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
+                        <div className={'inline-block'}>Video</div>
+                      </a>
+                    </div>
+                    <div style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
+                      <a className={'text-sm'} href={'#'}>
+                        <svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
+                        <div className={'inline-block'}>Instagram</div>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <div className={'review-more-button text-center text-sm mt-5'}>
+                  <a style={{ borderRadius: 15, padding: '8px 32px', border: '1px solid #d8d8d8' }}>
+                    More
+                  </a>
+                </div>
+              </div> */}
               <div className={'mb-5'}>
                 CONTRUBITION
                 <DefaultSeparator />
                 anoeantoeh aoenthaoe aoenth aot
               </div>
             </div>
+            {/* {screen.width >= 1024 &&
+              <div className={'bg-secondary'} style={{ display: 'table-cell', position: 'relative', verticalAlign: 'top', width: 330, textAlign: 'left', padding: 15, boxSizing: 'border-box', height: 1080 }}>
+              // ADD USER DISTRIBUTION SOMETHING LIKE THIS
+              // https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_user_rating
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit cumque aliquam doloribus in reiciendis? Laborum, ea assumenda, tempora dolore placeat aspernatur, cumque totam sequi debitis dolor nam eligendi suscipit aliquid?
+              </div>
+            } */}
           </div>
           <div style={{ clear: 'both' }} />
         </section>
@@ -557,6 +660,7 @@ function LocationDetail() {
           slides={locationImages?.images}
         />
       </div>
+    </>
   )
 }
 

src/pages/Stories/index.tsx

@@ -1,6 +1,8 @@
 function Story() {
   return(
+    <>
     <h1>Best PLaces</h1>
+    </>
   )
 
 }

src/pages/UserProfile/index.tsx

@@ -188,7 +188,9 @@ function UserProfile() {
                   ))}
                 </>
                 :
+                <>
                   <span className={'text-sm italic'}>No users review to display</span>
+                </>
               }
             </div>
           </div>