add search

TODO

@@ -0,0 +1,4 @@
+SITE DESIGN:
+
+- Discover / Cards
+	https://www.looria.com/category/backpack

package.json

@@ -16,11 +16,10 @@
     "interweave": "^13.1.0",
     "interweave-autolink": "^5.1.0",
     "interweave-emoji": "^7.0.0",
-    "moment": "^2.29.4",
     "preact": "^10.16.0",
-    "react": "^18.2.0",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.16.0",
+    "react-select": "^5.8.0",
     "react-textarea-autosize": "^8.5.3",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.4.2",

src/app.tsx

@@ -3,7 +3,7 @@ import { BrowserRouter as Router } from 'react-router-dom'
 import './app.css'
 import { DefaultLayout } from './layouts'
 import "yet-another-react-lightbox/styles.css";
-import { Login, NotFound, Submissions } from './pages'
+import { Login, NotFound } from './pages'
 import { Provider } from 'react-redux'
 import { persistore, store } from './store/config'
 import { PersistGate } from 'redux-persist/integration/react'

src/components/CustomInterweave/index.tsx

@@ -35,13 +35,13 @@ export default function CustomInterweave({
     instagram,
     ...props
 }: Props) {
-    let hashtagUrl = '';
+    // let hashtagUrl = '';
 
-    if (twitter) {
+    // if (twitter) {
-        hashtagUrl = 'https://twitter.com/hashtag/{{hashtag}}';
+    //     hashtagUrl = 'https://twitter.com/hashtag/{{hashtag}}';
-    } else if (instagram) {
+    // } else if (instagram) {
-        hashtagUrl = 'https://instagram.com/explore/tags/{{hashtag}}';
+    //     hashtagUrl = 'https://instagram.com/explore/tags/{{hashtag}}';
-    }
+    // }
 
     return (
         <Interweave 

src/components/Header/index.tsx

@@ -3,8 +3,10 @@ import { useState } from "preact/hooks";
 import { useSelector, useDispatch } from "react-redux";
 import { UserRootState } from "../../store/type";
 import { logout } from '../../actions';
+import AsyncSelect from 'react-select/async';
 import './style.css';
 import { logoutService } from "../../services";
+import { getSearchLocationService } from "../../services/locations";
 
 
 function Header() {
@@ -17,9 +19,9 @@ function Header() {
   const dispatch = useDispatch();
   const user = useSelector((state: UserRootState) => state.auth)
 
-  const onInput = (e: React.ChangeEvent<HTMLInputElement>): void => {
+  const onInput = (val: string): void => {
-    const val = e.target as HTMLInputElement;
+    // const val = e.target as HTMLInputElement;
-    setSearchVal(val.value)
+    setSearchVal(val.toLowerCase())
   }
 
   const handleLogout = async (): Promise<void> => {
@@ -36,6 +38,29 @@ function Header() {
     e.preventDefault();
   }
 
+  const onSelectedSearchOption = (val) => {
+    console.log(val)
+  }
+
+  const onLoadSelectOptions = async (inputValue: string) => {
+    try {
+      const results = await getSearchLocationService({
+        name: inputValue,
+        page: 1,
+        page_size: 7
+      })
+      const resultData = results.data.map((x: any) => {
+        return {
+          value: x.id,
+          label: x.name
+        }
+      })
+      return resultData
+    } catch (err) {
+      alert(err)
+    }
+  }
+
   const onDropdown = (): void => {
     document.body.style.overflow = "hidden"
 
@@ -69,19 +94,61 @@ function Header() {
                 <a href={'#'} onClick={handleLogout}><div className={'p-2'}>Logout</div></a>
                 {/* <div className={'p-2'}><a href={'#'}>Halo</a></div> */}
                 {/* <div className={'p-2'}><a href={'#'}>Halo</a></div> */}
-              </div>
+                </div>
-          }
+            }
-        </div>
+          </div>
-        <form onSubmit={onSearchSubmit} className={`header-search-input ${dropdown ? "search-input-dropdown" : ""}`}>
+          <form onSubmit={onSearchSubmit} className={`header-search-input ${dropdown ? "search-input-dropdown" : ""}`}>
-          <label>
+        <AsyncSelect
-            <input
+            onInputChange={onInput}
-              type="text"
+            inputValue={searchVal}
-              value={searchVal}
+            isSearchable
-              onInput={onInput}
+            placeholder={"Candi Borobudur, Tunjungan Plaza, ...."}
-              placeholder="Yogyakarta, Pantai Cidaun ..."
+
-              class="text-input-search"
+            components={{
-            />
+              DropdownIndicator: () => null,
-          </label>
+              NoOptionsMessage: () => null,
+              IndicatorSeparator: () => null
+            }}
+            loadOptions={onLoadSelectOptions}
+            cacheOptions
+            classNames={{
+              control: () => "bg-secondary text-input-search",
+              menuList: () => "bg-secondary text-sm text-left",
+            }}
+            styles={{
+              singleValue: (base, _props) => ({
+                color: '#797979',
+                textTransform: 'capitalize',
+                ...base,
+              }),
+              input: (base, _props) => ({
+                ...base,
+                width: 325,
+                color: 'white',
+                padding: 0,
+              }),
+              control: (base, _props) => ({
+                ...base,
+                backgroundColor: '#red',
+                color: 'white',
+                border: 0,
+                padding: 0,
+                boxShadow: 'none',
+                textAlign: 'left',
+                minHeight: 45
+              }),
+              option: (base, {isFocused}) => ({
+                ...base,
+                backgroundColor: isFocused ? '#202225' : 'none',
+              }),
+              //   container: (base, props) => ({
+              //     ...base,
+              //     border: 0,
+              //     color: "white"
+              //   })
+            }}
+            onChange={onSelectedSearchOption}
+          />
         </form>
         <button onClick={onDropdown} className={`dropdown-menu bg-secondary ${dropdown ? 'ml-auto' : ''}`} style={{ padding: 5, borderRadius: 10 }}>
           <svg xmlns="http://www.w3.org/2000/svg" height="30" fill="white" viewBox="0 -960 960 960" width="30"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg>

src/constants/api.ts

@@ -1,8 +1,8 @@
-const BASE_URL = "http://localhost:8888"
+const BASE_URL = "http://localhost:8888";
 
-const SIGNUP_URI                            = `${BASE_URL}/user/signup`
+const SIGNUP_URI                            = `${BASE_URL}/user/signup`;
-const LOGIN_URI                             = `${BASE_URL}/user/login`
+const LOGIN_URI                             = `${BASE_URL}/user/login`;
-const LOGOUT_URI                            = `${BASE_URL}/user/logout`
+const LOGOUT_URI                            = `${BASE_URL}/user/logout`;
 
 const GET_REGIONS                           = `${BASE_URL}/regions`;
 const GET_REGENCIES                         = `${BASE_URL}/region/regencies`;
@@ -11,22 +11,23 @@ const GET_PROVINCES                         = `${BASE_URL}/region/provinces`;
 const GET_CURRENT_USER_STATS                = `${BASE_URL}/user/profile`;
 const PATCH_USER_AVATAR                     = `${BASE_URL}/user/avatar`;
 const PATCH_USER_INFO                       = `${BASE_URL}/user`;
-const DELETE_USER_AVATAR                    = `${BASE_URL}/user/avatar`
+const DELETE_USER_AVATAR                    = `${BASE_URL}/user/avatar`;
 
 const GET_NEWS_EVENTS_URI                   = `${BASE_URL}/news-events`;
-const POST_NEWS_EVENTS_URI                  = GET_NEWS_EVENTS_URI
+const POST_NEWS_EVENTS_URI                  = GET_NEWS_EVENTS_URI;
 
 const GET_LIST_LOCATIONS_URI                = `${BASE_URL}/locations`;
-const GET_LIST_TOP_LOCATIONS                = `${BASE_URL}/locations/top-ratings`
+const GET_SEARCH_LOCATIONS_URI              = `${BASE_URL}/locations/search`;
-const GET_LIST_RECENT_LOCATIONS_RATING_URI  = `${BASE_URL}/locations/recent`
+const GET_LIST_TOP_LOCATIONS                = `${BASE_URL}/locations/top-ratings`;
+const GET_LIST_RECENT_LOCATIONS_RATING_URI  = `${BASE_URL}/locations/recent`;
 const GET_LOCATION_URI                      = `${BASE_URL}/location`;
-const GET_LOCATION_TAGS_URI                 = `${BASE_URL}/location/tags`
+const GET_LOCATION_TAGS_URI                 = `${BASE_URL}/location/tags`;
 const POST_CREATE_LOCATION                  = GET_LIST_LOCATIONS_URI;
 
-const GET_IMAGES_BY_LOCATION_URI            = `${BASE_URL}/images/location`
+const GET_IMAGES_BY_LOCATION_URI            = `${BASE_URL}/images/location`;
 
-const POST_REVIEW_LOCATION_URI              = `${BASE_URL}/review/location`
+const POST_REVIEW_LOCATION_URI              = `${BASE_URL}/review/location`;
-const GET_CURRENT_USER_REVIEW_LOCATION_URI  = `${BASE_URL}/user/review/location`
+const GET_CURRENT_USER_REVIEW_LOCATION_URI  = `${BASE_URL}/user/review/location`;
 
 export {
   BASE_URL,
@@ -43,6 +44,7 @@ export {
   GET_LIST_TOP_LOCATIONS,
   GET_LIST_LOCATIONS_URI,
   GET_LOCATION_URI,
+  GET_SEARCH_LOCATIONS_URI,
   GET_LOCATION_TAGS_URI,
   GET_IMAGES_BY_LOCATION_URI,
   GET_CURRENT_USER_REVIEW_LOCATION_URI,

src/domains/LocationInfo.ts

@@ -3,7 +3,7 @@ import { NullValueRes } from '../types/common';
 export type LocationInfo = {
   id: Number,
   name: string,
-  thumbnail: NullValueRes<'String', string>,
+  thumbnail: string | null,
   regency_name: String,
   province_name: String,
   critic_score: Number,

src/pages/Home/index.tsx

@@ -81,7 +81,7 @@ function Home() {
             <div className={"recently-added-section-card"}>
               <a onClick={() => onNavigateToDetail(x.id, x.critic_count, x.critic_score, x.user_count, x.user_score)}>
                 <div className={'border-secondary recently-img-container'}>
-                  <img alt={x.name} src={x.thumbnail.String.toString()} loading="lazy" style={{ width: '100%', height: '100%' }} />
+                  <img alt={x.name} src={x.thumbnail ? x.thumbnail : ''} loading="lazy" style={{ width: '100%', height: '100%' }} />
                 </div>
               </a>
               <div className={"border-primary pb-2 location-container text-sm mb-2 mt-2"}>
@@ -199,7 +199,7 @@ function Home() {
                 <div className={"pt-2 text-sm top-location-container"}>
                   <div className={'mr-2 critics-users-image'}>
                     <img 
-                      src={x.thumbnail.Valid ? x.thumbnail.String.toString() : 'https://i.ytimg.com/vi/0DY1WSk8B9o/maxresdefault.jpg'} 
+                      src={x.thumbnail ? x.thumbnail : 'https://i.ytimg.com/vi/0DY1WSk8B9o/maxresdefault.jpg'} 
                       loading={'lazy'} 
                       style={{ height: '100%', width: '100%', borderRadius: 3}} 
                     />
@@ -223,7 +223,7 @@ function Home() {
                 <div className={"pt-2 text-sm top-location-container"}>
                   <div className={'mr-2 critics-users-image'}>
                     <img 
-                      src={x.thumbnail.Valid ? x.thumbnail.String.toString() : 'https://i.ytimg.com/vi/0DY1WSk8B9o/maxresdefault.jpg'}
+                      src={x.thumbnail ? x.thumbnail : 'https://i.ytimg.com/vi/0DY1WSk8B9o/maxresdefault.jpg'}
                       style={{ height: '100%', width: '100%', borderRadius: 3}} 
                     />
                   </div>

src/pages/NewsEvent/index.tsx

@@ -10,7 +10,6 @@ import { IHttpResponse } from "../../../src/types/common";
 import { useSelector } from "react-redux";
 import { UserRootState } from "src/store/type";
 import "./style.css"
-import useCallbackState from "../../../src/types/state-callback";
 
 function NewsEvent() {
   const [news, setNews] = useState<Array<News>>([]);

src/pages/UserSettings/index.tsx

@@ -3,7 +3,7 @@ import { DefaultButton, TitleSeparator, WarningButton } from "../../components";
 import { UserRootState } from "../../store/type";
 import { DEFAULT_AVATAR_IMG } from "../../constants/default";
 import { ChangeEvent, TargetedEvent, useRef } from "preact/compat";
-import { useState } from "react";
+import { useState } from "preact/compat";
 import { enumKeys, useAutosizeTextArea } from "../../utils";
 import { SocialMediaEnum } from "../../types/common";
 import { SocialMedia, UserInfo } from "../../../src/domains/User";

src/services/locations.ts

@@ -5,6 +5,7 @@ import {
   GET_LIST_TOP_LOCATIONS, 
   GET_LOCATION_TAGS_URI, 
   GET_LOCATION_URI,
+  GET_SEARCH_LOCATIONS_URI,
   POST_CREATE_LOCATION
 } from "../constants/api";
 import { client } from "./config";
@@ -21,6 +22,10 @@ interface GetListLocationsArg extends GetRequestPagination {
   region_type?: number
 }
 
+interface GetSearchLocations extends GetRequestPagination {
+  name: string
+}
+
 async function getListLocationsService({ page, page_size }: GetListLocationsArg) {
   const newState = { ...initialState };
   const url = `${GET_LIST_LOCATIONS_URI}?page=${page}&page_size=${page_size}`
@@ -126,8 +131,29 @@ async function createLocationService(data: FormData): Promise<IHttpResponse> {
   }
 }
 
+async function getSearchLocationService(arg: GetSearchLocations): Promise<IHttpResponse> {
+  const newState: IHttpResponse = { data: null, error: null};
+
+  try {
+    const response = await client({ 
+      method: 'GET', 
+      url: `${GET_SEARCH_LOCATIONS_URI}?name=${arg.name}&limit=${arg.page_size}&offset=${arg.page}`
+    })
+
+    newState.data = response.data;
+    newState.status = response.status;
+    return newState;
+  } catch(error) {
+    const err = error as AxiosError;
+    newState.error = err;
+    newState.status = err.status;
+    return newState;
+  }
+}
+
 export {
   getListLocationsService,
+  getSearchLocationService,
   getListRecentLocationsRatingsService,
   getListTopLocationsService,
   getLocationTagsService,

src/services/review.ts

@@ -1,6 +1,7 @@
 import { AxiosError } from "axios"
 import { client } from "./config";
 import { GET_CURRENT_USER_REVIEW_LOCATION_URI, POST_REVIEW_LOCATION_URI } from "../constants/api";
+import { IHttpResponse } from "src/types/common";
 
 const initialState: IHttpResponse = {
   data: null,

src/types/state-callback.ts

@@ -1,5 +1,5 @@
 // https://medium.com/geekculture/usecallbackstate-the-hook-that-let-you-run-code-after-a-setstate-operation-finished-25f40db56661
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "preact/compat";
 
 type CallBackType<T> = (updatedValue: T) => void;
 

src/utils/useAutosizeTextArea.ts

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect } from "preact/compat";
 
 // Updates the height of a <textarea> when the value changes.
 const useAutosizeTextArea = (