nochill/hilingriviw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add search

Browse Source
This commit is contained in:
NCanggoro 2024-03-03 20:39:33 +07:00
parent 946bed296a
commit 42777b4e35
15 changed files with 2416 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
TODO Normal file
View File

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

3
package.json
View File

@ -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",

2273
pnpm-lock.yaml Normal file
View File

File diff suppressed because it is too large Load Diff

2
src/app.tsx
View File

@ -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'

12
src/components/CustomInterweave/index.tsx
View File

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

99
src/components/Header/index.tsx
View File

@ -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 val = e.target as HTMLInputElement;
setSearchVal(val.value)
const onInput = (val: string): void => {
// const val = e.target as HTMLInputElement;
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>
<form onSubmit={onSearchSubmit} className={`header-search-input ${dropdown ? "search-input-dropdown" : ""}`}>
<label>
<input
type="text"
value={searchVal}
onInput={onInput}
placeholder="Yogyakarta, Pantai Cidaun ..."
class="text-input-search"
/>
</label>
</div>
}
</div>
<form onSubmit={onSearchSubmit} className={`header-search-input ${dropdown ? "search-input-dropdown" : ""}`}>
<AsyncSelect
onInputChange={onInput}
inputValue={searchVal}
isSearchable
placeholder={"Candi Borobudur, Tunjungan Plaza, ...."}
components={{
DropdownIndicator: () => null,
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>

26
src/constants/api.ts
View File

@ -1,8 +1,8 @@
const BASE_URL = "http://localhost:8888"
const BASE_URL = "http://localhost:8888";
const SIGNUP_URI = `${BASE_URL}/user/signup`
const LOGIN_URI = `${BASE_URL}/user/login`
const LOGOUT_URI = `${BASE_URL}/user/logout`
const SIGNUP_URI = `${BASE_URL}/user/signup`;
const LOGIN_URI = `${BASE_URL}/user/login`;
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_LIST_RECENT_LOCATIONS_RATING_URI = `${BASE_URL}/locations/recent`
const GET_SEARCH_LOCATIONS_URI = `${BASE_URL}/locations/search`;
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 GET_CURRENT_USER_REVIEW_LOCATION_URI = `${BASE_URL}/user/review/location`
const POST_REVIEW_LOCATION_URI = `${BASE_URL}/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,

2
src/domains/LocationInfo.ts
View File

@ -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,

6
src/pages/Home/index.tsx
View File

@ -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>

1
src/pages/NewsEvent/index.tsx
View File

@ -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>>([]);

2
src/pages/UserSettings/index.tsx
View File

@ -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";

26
src/services/locations.ts
View File

@ -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,

1
src/services/review.ts
View File

@ -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,

2
src/types/state-callback.ts
View File

@ -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;

2
src/utils/useAutosizeTextArea.ts
View File

@ -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 = (