diff --git a/src/components/flow/FlowHero/index.tsx b/src/components/flow/FlowHero/index.tsx deleted file mode 100644 index 3ae87ca8..00000000 --- a/src/components/flow/FlowHero/index.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { IFlowState } from '~/redux/flow/reducer'; -import classNames from 'classnames'; - -import styles from './styles.module.scss'; -import { getURL } from '~/utils/dom'; -import { RouteComponentProps, useHistory, withRouter } from 'react-router'; -import { PRESETS, URLS } from '~/constants/urls'; -import { Icon } from '~/components/input/Icon'; -import { INode } from '~/redux/types'; - -type IProps = RouteComponentProps & { - heroes: IFlowState['heroes']; -}; - -const FlowHeroUnconnected: FC = ({ heroes }) => { - const preset = useMemo(() => (window.innerWidth <= 768 ? PRESETS.cover : PRESETS.small_hero), []); - const [limit, setLimit] = useState(6); - const [current, setCurrent] = useState(0); - const [loaded, setLoaded] = useState[]>([]); - const timer = useRef(null); - const history = useHistory(); - - const onLoad = useCallback( - (i: number) => { - setLoaded([...loaded, heroes[i]]); - }, - [heroes, loaded, setLoaded] - ); - - const items = Math.min(heroes.length, limit); - - const title = useMemo(() => { - return loaded[current]?.title || ''; - }, [loaded, current]); - - const onNext = useCallback(() => { - if (heroes.length > limit) setLimit(limit + 1); - setCurrent(current < items - 1 ? current + 1 : 0); - }, [current, items, limit, heroes.length]); - const onPrev = useCallback(() => setCurrent(current > 0 ? current - 1 : items - 1), [ - current, - items, - ]); - - const goToNode = useCallback(() => { - history.push(URLS.NODE_URL(loaded[current].id)); - }, [current, history, loaded]); - - useEffect(() => { - timer.current = setTimeout(onNext, 5000); - return () => clearTimeout(timer.current); - }, [current, onNext]); - - useEffect(() => { - if (loaded.length === 1) onNext(); - }, [loaded, onNext]); - - return ( -
-
- {heroes.slice(0, items).map((hero, i) => ( - onLoad(i)} - alt="" - /> - ))} -
- - {loaded.length > 0 && ( -
-
{title}
- -
-
- -
-
- -
-
-
- )} - - {loaded.slice(0, limit).map((hero, index) => ( -
- {hero.thumbnail} -
- ))} -
- ); -}; - -const FlowHero = withRouter(FlowHeroUnconnected); - -export { FlowHero }; diff --git a/src/components/flow/FlowHero/styles.module.scss b/src/components/flow/FlowHero/styles.module.scss deleted file mode 100644 index f5112fd1..00000000 --- a/src/components/flow/FlowHero/styles.module.scss +++ /dev/null @@ -1,162 +0,0 @@ -@import "src/styles/variables"; - -.wrap { - width: 100%; - height: 100%; - position: relative; - background: $content_bg; - border-radius: $cell_radius; - overflow: hidden; - user-select: none; - - &::after { - content: ' '; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: url('../../../sprites/stripes.svg') rgba(0, 0, 0, 0.3); - z-index: 4; - pointer-events: none; - box-shadow: inset transparentize($color: white, $amount: 0.85) 0 1px; - touch-action: none; - border-radius: $radius; - } - - &::before { - content: ' '; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient( - 182deg, - transparentize($cell_shade, 1) 50%, - transparentize($cell_shade, 0) 95% - ); - z-index: 4; - pointer-events: none; - touch-action: none; - } -} - -.hero { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 150%; - display: none; - transition: opacity 2s, transform linear 5s 2s; - background: 50% 50% no-repeat; - background-size: cover; - border-radius: $cell_radius; - z-index: 2; - opacity: 0; - cursor: pointer; - transform: translate(0, 0); - - img { - width: 0; - height: 0; - opacity: 0; - pointer-events: none; - touch-action: none; - } - - &.is_visible { - display: block; - } - - &.is_active { - opacity: 1; - z-index: 3; - will-change: transform; - // animation: rise 5s forwards; - transform: translate(0, -10%); - transition: opacity 2s, transform linear 5s; - } -} - -.info { - display: flex; - position: absolute; - bottom: 0; - right: 0; - width: 100%; - padding: $gap; - box-sizing: border-box; - z-index: 5; - flex-direction: row; - align-items: flex-end; - pointer-events: none; - touch-action: none; -} - -.title_wrap { - flex: 1; - white-space: nowrap; - display: flex; - margin-right: $gap; - overflow: hidden; - font: $font_hero_title; - text-transform: uppercase; - text-overflow: ellipsis; - line-height: 1.2em; - - @include tablet { - white-space: initial; - word-wrap: break-word; - font: $font_32_bold; - max-height: 3.6em; - } - - @include phone { - white-space: initial; - word-wrap: break-word; - font: $font_24_bold; - max-height: 3.6em; - } -} - -.buttons { - display: flex; - align-items: center; - justify-content: center; - height: 48px; - flex-direction: row; - width: 96px; - border-radius: $radius; - pointer-events: all; - touch-action: auto; - - .button { - cursor: pointer; - flex: 0 0 48px; - display: flex; - align-items: center; - justify-content: center; - - svg { - width: 40px; - height: 40px; - } - } -} - -.loaders { - position: absolute; - top: 0; - left: 0; - opacity: 0; - pointer-events: none; - touch-action: none; - - img { - position: absolute; - left: 0; - top: 0; - } -} diff --git a/src/components/flow/FlowRecent/index.tsx b/src/components/flow/FlowRecent/index.tsx index 755e4d04..74bbf90c 100644 --- a/src/components/flow/FlowRecent/index.tsx +++ b/src/components/flow/FlowRecent/index.tsx @@ -1,11 +1,11 @@ import React, { FC } from 'react'; -import { IFlowState } from '~/redux/flow/reducer'; import { FlowRecentItem } from '../FlowRecentItem'; import styles from './styles.module.scss'; +import { IFlowNode } from '~/redux/types'; interface IProps { - recent: IFlowState['recent']; - updated: IFlowState['updated']; + recent: IFlowNode[]; + updated: IFlowNode[]; } const FlowRecent: FC = ({ recent, updated }) => { diff --git a/src/components/flow/FlowSearchResults/index.tsx b/src/components/flow/FlowSearchResults/index.tsx index d6b7be3d..cc1d1fb7 100644 --- a/src/components/flow/FlowSearchResults/index.tsx +++ b/src/components/flow/FlowSearchResults/index.tsx @@ -1,37 +1,18 @@ -import React, { FC, useCallback } from 'react'; +import React, { FC } from 'react'; import styles from './styles.module.scss'; -import { LoaderCircle } from '~/components/input/LoaderCircle'; import { FlowRecentItem } from '../FlowRecentItem'; import { Icon } from '~/components/input/Icon'; import { INode } from '~/redux/types'; +import { InfiniteScroll } from '~/components/containers/InfiniteScroll'; interface IProps { isLoading: boolean; results: INode[]; + hasMore: boolean; onLoadMore: () => void; } -const FlowSearchResults: FC = ({ results, isLoading, onLoadMore }) => { - const onScroll = useCallback( - event => { - const el = event.target; - const bottom = el.scrollHeight - el.scrollTop - el.clientHeight; - - if (bottom > 100) return; - - onLoadMore(); - }, - [onLoadMore] - ); - - if (isLoading) { - return ( -
- -
- ); - } - +const FlowSearchResults: FC = ({ results, isLoading, onLoadMore, hasMore }) => { if (!results.length) { return (
@@ -42,10 +23,12 @@ const FlowSearchResults: FC = ({ results, isLoading, onLoadMore }) => { } return ( -
- {results.map(node => ( - - ))} +
+ + {results.map(node => ( + + ))} +
); }; diff --git a/src/components/flow/FlowSwiperHero/index.tsx b/src/components/flow/FlowSwiperHero/index.tsx index b44450f7..9989f18b 100644 --- a/src/components/flow/FlowSwiperHero/index.tsx +++ b/src/components/flow/FlowSwiperHero/index.tsx @@ -7,18 +7,18 @@ import styles from './styles.module.scss'; import SwiperCore, { Autoplay, EffectFade, Lazy, Navigation } from 'swiper'; import { Icon } from '~/components/input/Icon'; -import { IFlowState } from '~/redux/flow/reducer'; import { getURLFromString } from '~/utils/dom'; import { PRESETS, URLS } from '~/constants/urls'; import SwiperClass from 'swiper/types/swiper-class'; import { LoaderCircle } from '~/components/input/LoaderCircle'; import { useHistory } from 'react-router'; import classNames from 'classnames'; +import { IFlowNode } from '~/redux/types'; SwiperCore.use([EffectFade, Lazy, Autoplay, Navigation]); interface Props { - heroes: IFlowState['heroes']; + heroes: IFlowNode[]; } export const FlowSwiperHero: FC = ({ heroes }) => { diff --git a/src/components/main/Header/index.tsx b/src/components/main/Header/index.tsx index d343a561..130688f8 100644 --- a/src/components/main/Header/index.tsx +++ b/src/components/main/Header/index.tsx @@ -21,8 +21,9 @@ import isBefore from 'date-fns/isBefore'; import { Authorized } from '~/components/containers/Authorized'; import { useShallowSelect } from '~/hooks/data/useShallowSelect'; import { selectLabUpdatesNodes } from '~/redux/lab/selectors'; -import { selectFlowUpdated } from '~/redux/flow/selectors'; import { Button } from '~/components/input/Button'; +import { useFlowStore } from '~/store/flow/useFlowStore'; +import { observer } from 'mobx-react'; const mapStateToProps = (state: IState) => ({ user: pick(['username', 'is_user', 'photo', 'last_seen_boris'])(selectUser(state)), @@ -39,7 +40,7 @@ const mapDispatchToProps = { type IProps = ReturnType & typeof mapDispatchToProps & {}; -const HeaderUnconnected: FC = memo( +const HeaderUnconnected: FC = observer( ({ user, user: { is_user, last_seen_boris }, @@ -51,7 +52,7 @@ const HeaderUnconnected: FC = memo( }) => { const [is_scrolled, setIsScrolled] = useState(false); const labUpdates = useShallowSelect(selectLabUpdatesNodes); - const flowUpdates = useShallowSelect(selectFlowUpdated); + const { updated: flowUpdates } = useFlowStore(); const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]); const onScroll = useCallback(() => { diff --git a/src/containers/flow/FlowStamp/index.tsx b/src/containers/flow/FlowStamp/index.tsx index 2ef863ae..84eb9230 100644 --- a/src/containers/flow/FlowStamp/index.tsx +++ b/src/containers/flow/FlowStamp/index.tsx @@ -21,11 +21,11 @@ interface IProps { const FlowStamp: FC = ({ isFluid, onToggleLayout }) => { const { searchText, - searchTotal, + hasMore: searchHasMore, searchIsLoading, searchResults, - onSearchChange, - onSearchLoadMore, + setSearchText, + loadMore: onSearchLoadMore, } = useSearchContext(); const { recent, updates } = useFlowContext(); @@ -34,7 +34,7 @@ const FlowStamp: FC = ({ isFluid, onToggleLayout }) => { event.preventDefault(); }, []); - const onClearSearch = useCallback(() => onSearchChange(''), [onSearchChange]); + const onClearSearch = useCallback(() => setSearchText(''), [setSearchText]); const onKeyUp = useCallback( event => { @@ -61,7 +61,7 @@ const FlowStamp: FC = ({ isFluid, onToggleLayout }) => { @@ -73,11 +73,11 @@ const FlowStamp: FC = ({ isFluid, onToggleLayout }) => {
Результаты поиска - {!searchIsLoading && searchTotal}
{ const { loadMore, isSyncing } = useFlowLoader(); @@ -15,16 +13,11 @@ export const useFlow = () => { const { nodes, heroes, recent, updated } = useFlowStore(); const { isFluid, toggleLayout } = useFlowLayout(); const labUpdates = useShallowSelect(selectLabUpdatesNodes); - const dispatch = useDispatch(); useInfiniteLoader(loadMore, isSyncing); const updates = useMemo(() => [...updated, ...labUpdates].slice(0, 10), [updated, labUpdates]); - const onChangeCellView = useCallback( - (id: INode['id'], val: FlowDisplay) => dispatch(flowSetCellView(id, val)), - [dispatch] - ); - + const onChangeCellView = useFlowSetCellView(); return { nodes, heroes, recent, updates, isFluid, toggleLayout, onChangeCellView }; }; diff --git a/src/hooks/node/useUpdateNode.ts b/src/hooks/node/useUpdateNode.ts index f294211c..cd702b19 100644 --- a/src/hooks/node/useUpdateNode.ts +++ b/src/hooks/node/useUpdateNode.ts @@ -2,7 +2,6 @@ import { useLoadNode } from '~/hooks/node/useLoadNode'; import { useCallback } from 'react'; import { INode } from '~/redux/types'; import { apiPostNode } from '~/api/node'; -import { selectFlowNodes } from '~/redux/flow/selectors'; import { selectLabListNodes } from '~/redux/lab/selectors'; import { labSetList } from '~/redux/lab/actions'; import { useShallowSelect } from '~/hooks/data/useShallowSelect'; diff --git a/src/hooks/search/useSearch.ts b/src/hooks/search/useSearch.ts index dad36945..fbb64bcc 100644 --- a/src/hooks/search/useSearch.ts +++ b/src/hooks/search/useSearch.ts @@ -1,24 +1,69 @@ -import { useCallback } from 'react'; -import { flowChangeSearch, flowLoadMoreSearch } from '~/redux/flow/actions'; -import { useDispatch } from 'react-redux'; -import { useShallowSelect } from '~/hooks/data/useShallowSelect'; -import { selectFlow } from '~/redux/flow/selectors'; +import { useCallback, useEffect, useState } from 'react'; +import useSWRInfinite from 'swr/infinite'; +import { flatten } from 'ramda'; +import { getSearchResults } from '~/redux/flow/api'; +import { KeyLoader } from 'swr'; +import { INode } from '~/redux/types'; +import { GetSearchResultsRequest } from '~/redux/flow/types'; +import { COMMENTS_DISPLAY } from '~/constants/node'; + +const RESULTS_COUNT = 20; + +const getKey: (text: string) => KeyLoader = text => (pageIndex, previousPageData) => { + if ((pageIndex > 0 && !previousPageData?.length) || !text) return null; + + const props: GetSearchResultsRequest = { + text, + skip: pageIndex * RESULTS_COUNT, + take: RESULTS_COUNT, + }; + + return JSON.stringify(props); +}; export const useSearch = () => { - const dispatch = useDispatch(); - const { search } = useShallowSelect(selectFlow); + const [searchText, setSearchText] = useState(''); + const [debouncedSearchText, setDebouncedSearchText] = useState(''); - const onSearchLoadMore = useCallback(() => { - if (search.is_loading_more) return; - dispatch(flowLoadMoreSearch()); - }, [search.is_loading_more, dispatch]); + const { data, size, setSize, mutate, isValidating } = useSWRInfinite( + getKey(debouncedSearchText), + async (key: string) => { + const props: GetSearchResultsRequest = key && JSON.parse(key); - const onSearchChange = useCallback( - (text: string) => { - dispatch(flowChangeSearch({ text })); - }, - [dispatch] + if (!props) { + return [] as INode[]; + } + + const result = await getSearchResults(props); + + return result.nodes; + } ); - return { onSearchChange, onSearchLoadMore, search }; + const loadMore = useCallback(() => setSize(size + 1), [setSize, size]); + const hasMore = (data?.[size - 1]?.length || 0) >= RESULTS_COUNT; + + const results = flatten(data || []); + + useEffect(() => { + const timeout = setTimeout(async () => { + setDebouncedSearchText(searchText.length > 2 ? searchText : ''); + await setSize(0); + await mutate([]); + }, 300); + + return () => clearTimeout(timeout); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [searchText]); + + console.log({ hasMore, data }); + + return { + results, + searchText, + setSearchText, + hasMore, + loadMore, + isLoading: isValidating, + }; }; diff --git a/src/layouts/ProfileLayout/index.tsx b/src/layouts/ProfileLayout/index.tsx index f20ca4f0..9d273211 100644 --- a/src/layouts/ProfileLayout/index.tsx +++ b/src/layouts/ProfileLayout/index.tsx @@ -9,53 +9,56 @@ import { ProfilePageLeft } from '~/containers/profile/ProfilePageLeft'; import { Container } from '~/containers/main/Container'; import { FlowGrid } from '~/components/flow/FlowGrid'; import { Sticky } from '~/components/containers/Sticky'; -import { selectFlow } from '~/redux/flow/selectors'; import { ProfilePageStats } from '~/containers/profile/ProfilePageStats'; import { Card } from '~/components/containers/Card'; +import { useFlowStore } from '~/store/flow/useFlowStore'; +import { observer } from 'mobx-react'; type Props = RouteComponentProps<{ username: string }> & {}; -const ProfileLayout: FC = ({ - match: { - params: { username }, - }, -}) => { - const { nodes } = useShallowSelect(selectFlow); - const user = useShallowSelect(selectUser); +const ProfileLayout: FC = observer( + ({ + match: { + params: { username }, + }, + }) => { + const { nodes } = useFlowStore(); + const user = useShallowSelect(selectUser); - const dispatch = useDispatch(); + const dispatch = useDispatch(); - useEffect(() => { - dispatch(authLoadProfile(username)); - }, [dispatch, username]); + useEffect(() => { + dispatch(authLoadProfile(username)); + }, [dispatch, username]); - const profile = useShallowSelect(selectAuthProfile); + const profile = useShallowSelect(selectAuthProfile); - return ( - -
- -
- -
- - {!!profile.user?.description && ( + return ( + +
+
- {profile.user.description} +
- )} -
- -
- -
+ {!!profile.user?.description && ( +
+ {profile.user.description} +
+ )} -
- -
- - ); -}; +
+ +
+ +
+ +
+ +
+ + ); + } +); export { ProfileLayout }; diff --git a/src/redux/flow/actions.ts b/src/redux/flow/actions.ts deleted file mode 100644 index 33f99580..00000000 --- a/src/redux/flow/actions.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { FLOW_ACTIONS } from './constants'; -import { IFlowState } from './reducer'; -import { INode } from '../types'; - -export const flowSetCellView = (id: INode['id'], flow: INode['flow']) => ({ - type: FLOW_ACTIONS.SET_CELL_VIEW, - id, - flow, -}); - -export const flowSetSearch = (search: Partial) => ({ - type: FLOW_ACTIONS.SET_SEARCH, - search, -}); - -export const flowChangeSearch = (search: Partial) => ({ - type: FLOW_ACTIONS.CHANGE_SEARCH, - search, -}); - -export const flowLoadMoreSearch = () => ({ - type: FLOW_ACTIONS.LOAD_MORE_SEARCH, -}); diff --git a/src/redux/flow/api.ts b/src/redux/flow/api.ts index 98516836..9efbc830 100644 --- a/src/redux/flow/api.ts +++ b/src/redux/flow/api.ts @@ -18,7 +18,7 @@ export const postCellView = ({ id, flow }: PostCellViewRequest) => .post(API.NODE.SET_CELL_VIEW(id), { flow }) .then(cleanResult); -export const getSearchResults = ({ text, skip = 0 }: GetSearchResultsRequest) => +export const getSearchResults = ({ text, skip, take }: GetSearchResultsRequest) => api - .get(API.SEARCH.NODES, { params: { text, skip } }) + .get(API.SEARCH.NODES, { params: { text, skip, take } }) .then(cleanResult); diff --git a/src/redux/flow/constants.ts b/src/redux/flow/constants.ts deleted file mode 100644 index 73946bf3..00000000 --- a/src/redux/flow/constants.ts +++ /dev/null @@ -1,9 +0,0 @@ -const prefix = 'FLOW.'; - -export const FLOW_ACTIONS = { - SET_CELL_VIEW: `${prefix}SET_CELL_VIEW`, - - SET_SEARCH: `${prefix}SET_SEARCH`, - CHANGE_SEARCH: `${prefix}CHANGE_SEARCH`, - LOAD_MORE_SEARCH: `${prefix}LOAD_MORE_SEARCH`, -}; diff --git a/src/redux/flow/handlers.ts b/src/redux/flow/handlers.ts deleted file mode 100644 index 64f8557c..00000000 --- a/src/redux/flow/handlers.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { FLOW_ACTIONS } from './constants'; -import { flowSetSearch } from './actions'; -import { IFlowState } from './reducer'; - -const setSearch = ( - state: IFlowState, - { search }: ReturnType -): IFlowState => ({ - ...state, - search: { - ...state.search, - ...search, - }, -}); - -export const FLOW_HANDLERS = { - [FLOW_ACTIONS.SET_SEARCH]: setSearch, -}; diff --git a/src/redux/flow/reducer.ts b/src/redux/flow/reducer.ts deleted file mode 100644 index 5325fcdf..00000000 --- a/src/redux/flow/reducer.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { createReducer } from '~/utils/reducer'; -import { IError, IFlowNode, INode } from '../types'; -import { FLOW_HANDLERS } from './handlers'; - -export type IFlowState = Readonly<{ - isLoading: boolean; - nodes: IFlowNode[]; - heroes: IFlowNode[]; - recent: IFlowNode[]; - updated: IFlowNode[]; - search: { - text: string; - results: INode[]; - total: number; - is_loading: boolean; - is_loading_more: boolean; - }; - error: IError; -}>; - -const INITIAL_STATE: IFlowState = { - nodes: [], - heroes: [], - recent: [], - updated: [], - search: { - text: '', - results: [], - total: 0, - is_loading: false, - is_loading_more: false, - }, - isLoading: false, - error: '', -}; - -export default createReducer(INITIAL_STATE, FLOW_HANDLERS); diff --git a/src/redux/flow/sagas.ts b/src/redux/flow/sagas.ts deleted file mode 100644 index 4a480d7d..00000000 --- a/src/redux/flow/sagas.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { call, delay, put, race, select, take, takeLatest } from 'redux-saga/effects'; -import { FLOW_ACTIONS } from './constants'; -import { flowChangeSearch, flowSetSearch } from './actions'; -import { Unwrap } from '../types'; -import { selectFlow } from './selectors'; -import { getSearchResults } from './api'; - -function* changeSearch({ search }: ReturnType) { - try { - yield put( - flowSetSearch({ - ...search, - is_loading: !!search.text, - }) - ); - - if (!search.text) return; - - yield delay(500); - - const data: Unwrap = yield call(getSearchResults, { - text: search.text, - }); - - yield put( - flowSetSearch({ - results: data.nodes, - total: data.total, - }) - ); - } catch (error) { - yield put(flowSetSearch({ results: [], total: 0 })); - } finally { - yield put(flowSetSearch({ is_loading: false })); - } -} - -function* loadMoreSearch() { - try { - yield put( - flowSetSearch({ - is_loading_more: true, - }) - ); - - const { search }: ReturnType = yield select(selectFlow); - - const { result, delay }: { result: Unwrap; delay: any } = yield race({ - result: call(getSearchResults, { - ...search, - skip: search.results.length, - }), - delay: take(FLOW_ACTIONS.CHANGE_SEARCH), - }); - - if (delay) { - return; - } - - yield put( - flowSetSearch({ - results: [...search.results, ...result.nodes], - total: result.total, - }) - ); - } catch (error) { - yield put( - flowSetSearch({ - is_loading_more: false, - }) - ); - } -} - -export default function* nodeSaga() { - yield takeLatest(FLOW_ACTIONS.CHANGE_SEARCH, changeSearch); - yield takeLatest(FLOW_ACTIONS.LOAD_MORE_SEARCH, loadMoreSearch); -} diff --git a/src/redux/flow/selectors.ts b/src/redux/flow/selectors.ts deleted file mode 100644 index f0892de8..00000000 --- a/src/redux/flow/selectors.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { IState } from '../store'; -import { IFlowState } from './reducer'; - -export const selectFlow = (state: IState): IFlowState => state.flow; -export const selectFlowNodes = (state: IState) => state.flow.nodes; -export const selectFlowUpdated = (state: IState) => state.flow.updated; diff --git a/src/redux/flow/types.ts b/src/redux/flow/types.ts index 8a5fc788..482f7884 100644 --- a/src/redux/flow/types.ts +++ b/src/redux/flow/types.ts @@ -2,7 +2,8 @@ import { INode } from '~/redux/types'; export type GetSearchResultsRequest = { text: string; - skip?: number; + take: number; + skip: number; }; export type GetSearchResultsResult = { nodes: INode[]; diff --git a/src/redux/store.ts b/src/redux/store.ts index 5275ae5e..d9ee758f 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -11,9 +11,6 @@ import auth from '~/redux/auth'; import authSaga from '~/redux/auth/sagas'; import { IAuthState } from '~/redux/auth/types'; -import flow, { IFlowState } from '~/redux/flow/reducer'; -import flowSaga from '~/redux/flow/sagas'; - import lab from '~/redux/lab'; import labSaga from '~/redux/lab/sagas'; import { ILabState } from '~/redux/lab/types'; @@ -59,7 +56,6 @@ export interface IState { modal: IModalState; router: RouterState; uploads: IUploadState; - flow: IFlowState; player: IPlayerState; messages: IMessagesState; lab: ILabState; @@ -81,7 +77,6 @@ export const store = createStore( modal, router: connectRouter(history), uploads, - flow: persistReducer(flowPersistConfig, flow), player: persistReducer(playerPersistConfig, player), messages, lab: lab, @@ -95,7 +90,6 @@ export function configureStore(): { } { sagaMiddleware.run(authSaga); sagaMiddleware.run(uploadSaga); - sagaMiddleware.run(flowSaga); sagaMiddleware.run(playerSaga); sagaMiddleware.run(modalSaga); sagaMiddleware.run(messagesSaga); diff --git a/src/utils/context/SearchContextProvider.tsx b/src/utils/context/SearchContextProvider.tsx index b6230ca8..9204c28d 100644 --- a/src/utils/context/SearchContextProvider.tsx +++ b/src/utils/context/SearchContextProvider.tsx @@ -4,38 +4,34 @@ import { useSearch } from '~/hooks/search/useSearch'; export interface SearchContextProps { searchText: string; - searchTotal: number; + hasMore: boolean; searchIsLoading: boolean; searchResults: INode[]; - onSearchChange: (text: string) => void; - onSearchLoadMore: () => void; + setSearchText: (text: string) => void; + loadMore: () => void; } export const SearchContext = createContext({ searchText: '', - searchTotal: 0, + hasMore: false, searchIsLoading: false, searchResults: [], - onSearchChange: () => {}, - onSearchLoadMore: () => {}, + setSearchText: () => {}, + loadMore: () => {}, }); export const SearchContextProvider: FC = ({ children }) => { - const { - search: { text, results, is_loading, total }, - onSearchLoadMore, - onSearchChange, - } = useSearch(); + const { results, searchText, isLoading, loadMore, setSearchText, hasMore } = useSearch(); return ( {children}