Skip to content

Commit

Permalink
ench: improve search
Browse files Browse the repository at this point in the history
  • Loading branch information
@twiddli
twiddli committed Apr 30, 2023
1 parent f207dea commit 179140d
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 101 deletions.
104 changes: 42 additions & 62 deletions packages/client/components/Search.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import classNames from 'classnames';
import _ from 'lodash';
import React, {
useCallback,
useContext,
Expand Down Expand Up @@ -67,8 +66,7 @@ function TagsLine({ onClick }: { onClick: (text: string) => void }) {
className={classNames(
styles.searchline,
'small-padding-segment no-margins'
)}
>
)}>
<Icon
name="heart"
color="red"
Expand All @@ -82,8 +80,7 @@ function TagsLine({ onClick }: { onClick: (text: string) => void }) {
slidesPerView={'auto'}
freeMode
mousewheel
spaceBetween={0}
>
spaceBetween={0}>
<SwiperSlide className={styles.tagsline_swipeslide}>
<Label.Group className={classNames(styles.tagsline_labels)}>
{data?.data?.items?.map?.((t: ServerNamespaceTag) => {
Expand All @@ -107,8 +104,7 @@ function TagsLine({ onClick }: { onClick: (text: string) => void }) {
const n = tag ? `"${ns}":"${tag}"` : `"${ns}"`;
ev.preventDefault();
onClick?.(n);
}}
>
}}>
{ns}
{!!tag && <Label.Detail>{tag}</Label.Detail>}
</Label>
Expand Down Expand Up @@ -143,8 +139,7 @@ function RecentSearch({ onClick }: { onClick: (text: string) => void }) {
className={classNames(
styles.searchline,
'small-padding-segment no-margins'
)}
>
)}>
<Icon
name="history"
size="small"
Expand Down Expand Up @@ -187,15 +182,13 @@ function SearchResult({
},
[text, onClick]
)}
className={classNames('no-left-padding no-left-margin', className)}
>
className={classNames('no-left-padding no-left-margin', className)}>
<Label
className={classNames('no-left-margin')}
basic={basic}
size="small"
color={color}
{...props}
>
{...props}>
{type}
</Label>
<span className="small-padding-segment">{children}</span>
Expand All @@ -215,8 +208,7 @@ function ArtistSearchResult({
type={t`Artist`}
color="blue"
onClick={onClick}
text={`artist:"${item?.names?.[0]?.name}"`}
>
text={`artist:"${item?.names?.[0]?.name}"`}>
{item?.names?.[0]?.name}
</SearchResult>
);
Expand Down Expand Up @@ -276,42 +268,41 @@ function SearchResults({
}
);

const searchItems = useCallback(
_.debounce((query: string, position: number) => {
if (query) {
const t = replaceTextAtPosition(query, '', position, {
quotation: true,
});
const searchItems = useCallback((query: string, position: number) => {
if (query) {
const t = replaceTextAtPosition(query, '', position, {
quotation: true,
});

const q = query.slice(t.startPosition, t.endPosition);
const q = query.slice(t.startPosition, t.endPosition);

setSearchQuery(q.toString());
}
}, 150),
[]
);
setSearchQuery(q.toString());
}
}, []);

useEffect(() => {
const target = context.ref.current.querySelector('input');
searchItems(context.query, target.selectionStart);
}, [context.query]);
useDebounce(
() => {
const target = context.ref.current.querySelector('input');
searchItems(context.query, target.selectionStart);
},
300,
[context.query]
);

return (
<Segment
onClick={onClick}
onContextMenu={onClick}
basic
className={classNames('no-margins no-padding-segment')}
>
className={classNames('no-margins no-padding-segment')}>
<TagsLine onClick={onSelect} />
<RecentSearch onClick={onSelect} />
<List
relaxed
divided
verticalAlign="middle"
selection
className="no-margins small-padding-segment max-200-h overflow-y-auto"
>
className="no-margins small-padding-segment max-200-h overflow-y-auto">
{!!context.query &&
data?.data?.items?.map?.((i) => {
const color = itemColor(i.__type__);
Expand Down Expand Up @@ -363,8 +354,7 @@ function SearchResults({
onClick={onSelect}
basic={basic}
text={text}
color={color}
>
color={color}>
{i?.name}
</SearchResult>
);
Expand Down Expand Up @@ -431,8 +421,7 @@ function SearchOptions({
}
hoverable
on="click"
hideOnScroll
>
hideOnScroll>
<List>
<List.Item>
<Checkbox
Expand Down Expand Up @@ -597,10 +586,10 @@ export function ItemSearch({
const onSubmit = useCallback(
(ev?) => {
ev?.preventDefault?.();
onSearch?.(deferredQuery, {});
onSearch?.(query, {});
setFocused(false);
},
[deferredQuery]
[query]
);

const onClear = useCallback(() => {
Expand Down Expand Up @@ -635,11 +624,11 @@ export function ItemSearch({
}
},
debounce,
[dynamic, deferredQuery, onSubmit]
[dynamic, onSubmit]
);

useEffect(() => {
if (deferredQuery) {
if (query) {
onSubmit();
}
}, [options]);
Expand All @@ -648,21 +637,16 @@ export function ItemSearch({
(text) => {
const target = ref.current.querySelector('input');
target.focus();
const t = replaceTextAtPosition(
deferredQuery,
text,
target.selectionStart,
{
quotation: true,
}
);
const t = replaceTextAtPosition(query, text, target.selectionStart, {
quotation: true,
});
target.value = t.text;
target.focus();
// document.getSelection().collapse(ref.current, t.newPosition)
target.setSelectionRange(t.newEndPosition, t.newEndPosition);
setQuery(t.text);
},
[deferredQuery]
[query]
);

const optionsEl = useMemo(
Expand All @@ -679,15 +663,12 @@ export function ItemSearch({

return (
<SearchContext.Provider
value={useMemo(
() => ({ query: deferredQuery, stateKey, ref }),
[deferredQuery]
)}
>
value={useMemo(() => ({ query: deferredQuery, stateKey, ref }), [
deferredQuery,
])}>
<form
onSubmit={onSubmit}
className={classNames({ fullwidth: fluid }, className)}
>
className={classNames({ fullwidth: fluid }, className)}>
<div className={classNames('ui search', size, { fluid })}>
<Ref innerRef={ref}>
<Input
Expand All @@ -702,7 +683,7 @@ export function ItemSearch({
[]
)}
tabIndex={0}
value={deferredQuery}
value={query}
onChange={useCallback((ev, d) => {
ev.preventDefault();
setFocused(true);
Expand All @@ -714,8 +695,7 @@ export function ItemSearch({
<div
className={classNames('results transition', {
visible: resultsVisible,
})}
>
})}>
<SearchResults
itemTypes={itemTypes}
onClick={onSearchResultClick}
Expand Down
82 changes: 43 additions & 39 deletions packages/client/state/_statehelpers.ts
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,38 @@
import { RecoilState } from 'recoil';
import { RecoilState, RecoilValue } from 'recoil';

import { getCookies, removeCookies, setCookies } from '../client/utility';

export const stateEffect = <T>(recoilValue: RecoilValue<T>) => ({ setSelf, onSet, getLoadable }) => {
setSelf(getLoadable(recoilValue).getValue());
}

export const localStorageEffect =
(
key?: string | ((node: RecoilState<any>) => string),
options?: { session?: boolean }
) =>
({ setSelf, onSet, node }) => {
const storage = options?.session ? sessionStorage : localStorage;
({ setSelf, onSet, node }) => {
const storage = options?.session ? sessionStorage : localStorage;

let k: string;
if (typeof key === 'function') {
k = key(node);
} else if (!key) {
k = node.key;
} else {
k = key;
}
let k: string;
if (typeof key === 'function') {
k = key(node);
} else if (!key) {
k = node.key;
} else {
k = key;
}

const savedValue = storage.getItem(k);
const savedValue = storage.getItem(k);

if (savedValue != null) {
setSelf(savedValue !== 'undefined' ? JSON.parse(savedValue) : undefined);
}
if (savedValue != null) {
setSelf(savedValue !== 'undefined' ? JSON.parse(savedValue) : undefined);
}

onSet((newValue) => {
storage.setItem(k, JSON.stringify(newValue));
});
};
onSet((newValue) => {
storage.setItem(k, JSON.stringify(newValue));
});
};

export const cookieEffect =
(
Expand All @@ -38,27 +42,27 @@ export const cookieEffect =
removeIfNoInitialValue?: boolean;
}
) =>
({ setSelf, onSet, node }) => {
let k: string;
if (typeof key === 'function') {
k = key(node);
} else if (!key) {
k = node.key;
} else {
k = key;
}
({ setSelf, onSet, node }) => {
let k: string;
if (typeof key === 'function') {
k = key(node);
} else if (!key) {
k = node.key;
} else {
k = key;
}

const savedValue = getCookies(undefined, k);
const savedValue = getCookies(undefined, k);

if (savedValue !== undefined) {
if (!options?.noInitialValue) {
setSelf(savedValue);
if (savedValue !== undefined) {
if (!options?.noInitialValue) {
setSelf(savedValue);
}
} else if (options?.removeIfNoInitialValue) {
removeCookies(undefined, k);
}
} else if (options?.removeIfNoInitialValue) {
removeCookies(undefined, k);
}

onSet((newValue) => {
setCookies(undefined, k, newValue);
});
};
onSet((newValue) => {
setCookies(undefined, k, newValue);
});
};

0 comments on commit 179140d

Please sign in to comment.