From 5a78c7fff9c9905b5866da39e8d42351f10d785e Mon Sep 17 00:00:00 2001 From: mydearxym Date: Wed, 31 Mar 2021 11:14:08 +0800 Subject: [PATCH 1/4] refactor(meetups): convert to ts && fix warnings --- .../{ActivityCard.js => ActivityCard.tsx} | 14 ++++++++++++- ...akeFiltersItems.js => fakeFiltersItems.ts} | 0 .../{fakeMeetups.js => fakeMeetups.ts} | 0 .../MeetupsContent/{index.js => index.tsx} | 20 +++++++++++++++---- .../MeetupsContent/{logic.js => logic.ts} | 10 ++++++---- .../MeetupsContent/{store.js => store.ts} | 11 ++++------ .../MeetupsContent/styles/activity_card.ts | 2 +- .../content/MeetupsContent/styles/index.ts | 14 ++++++++----- src/spec/graphql.ts | 6 ++++++ src/spec/index.ts | 2 ++ utils/helper.ts | 8 +++++++- 11 files changed, 64 insertions(+), 23 deletions(-) rename src/containers/content/MeetupsContent/{ActivityCard.js => ActivityCard.tsx} (84%) rename src/containers/content/MeetupsContent/{fakeFiltersItems.js => fakeFiltersItems.ts} (100%) rename src/containers/content/MeetupsContent/{fakeMeetups.js => fakeMeetups.ts} (100%) rename src/containers/content/MeetupsContent/{index.js => index.tsx} (82%) rename src/containers/content/MeetupsContent/{logic.js => logic.ts} (85%) rename src/containers/content/MeetupsContent/{store.js => store.ts} (72%) create mode 100644 src/spec/graphql.ts diff --git a/src/containers/content/MeetupsContent/ActivityCard.js b/src/containers/content/MeetupsContent/ActivityCard.tsx similarity index 84% rename from src/containers/content/MeetupsContent/ActivityCard.js rename to src/containers/content/MeetupsContent/ActivityCard.tsx index f11360624..670ebc6b6 100755 --- a/src/containers/content/MeetupsContent/ActivityCard.js +++ b/src/containers/content/MeetupsContent/ActivityCard.tsx @@ -19,7 +19,19 @@ import { FinishedHole, } from './styles/activity_card' -const ActivityCard = ({ item }) => { +type TProps = { + item: { + id?: number + date: string + week: string + title: string + company: string + finished?: boolean + type?: string + } +} + +const ActivityCard: React.FC = ({ item }) => { return ( diff --git a/src/containers/content/MeetupsContent/fakeFiltersItems.js b/src/containers/content/MeetupsContent/fakeFiltersItems.ts similarity index 100% rename from src/containers/content/MeetupsContent/fakeFiltersItems.js rename to src/containers/content/MeetupsContent/fakeFiltersItems.ts diff --git a/src/containers/content/MeetupsContent/fakeMeetups.js b/src/containers/content/MeetupsContent/fakeMeetups.ts similarity index 100% rename from src/containers/content/MeetupsContent/fakeMeetups.js rename to src/containers/content/MeetupsContent/fakeMeetups.ts diff --git a/src/containers/content/MeetupsContent/index.js b/src/containers/content/MeetupsContent/index.tsx similarity index 82% rename from src/containers/content/MeetupsContent/index.js rename to src/containers/content/MeetupsContent/index.tsx index 7750f00dd..dc1c487f7 100755 --- a/src/containers/content/MeetupsContent/index.js +++ b/src/containers/content/MeetupsContent/index.tsx @@ -13,6 +13,8 @@ import { pluggedIn, buildLog } from '@/utils' import Pagi from '@/components/Pagi' import { PagiOptionSwitcher } from '@/components/Switcher' +import type { TStore } from './store' + import FilterBar from './FilterBar' import DateSelector from './DateSelector' // import ActivityCard from './ActivityCard' @@ -40,14 +42,24 @@ const GALLERY_TYPES = [ }, ] -const MeetupsContentContainer = ({ meetupsContent: store }) => { +type TProps = { + meetupsContent?: TStore + testid?: string + metric?: string +} + +const MeetupsContentContainer: React.FC = ({ + meetupsContent: store, + testid = 'meetups-content', + metric, +}) => { useInit(store) const { activeGalleryType } = store return ( - - + + @@ -72,4 +84,4 @@ const MeetupsContentContainer = ({ meetupsContent: store }) => { ) } -export default pluggedIn(MeetupsContentContainer) +export default pluggedIn(MeetupsContentContainer) as React.FC diff --git a/src/containers/content/MeetupsContent/logic.js b/src/containers/content/MeetupsContent/logic.ts similarity index 85% rename from src/containers/content/MeetupsContent/logic.js rename to src/containers/content/MeetupsContent/logic.ts index 66e7b898e..2f4264fd8 100755 --- a/src/containers/content/MeetupsContent/logic.js +++ b/src/containers/content/MeetupsContent/logic.ts @@ -3,17 +3,19 @@ import { useEffect } from 'react' import { ERR } from '@/constant' import { asyncSuit, buildLog, errRescue } from '@/utils' +import type { TStore } from './store' + // import S from './schema' const { SR71, $solver, asyncErr } = asyncSuit const sr71$ = new SR71() let sub$ = null -let store = null +let store: TStore | undefined /* eslint-disable-next-line */ const log = buildLog('L:MeetupsContent') -export const changeGalleryType = ({ key: activeGalleryType }) => { +export const changeGalleryType = ({ key: activeGalleryType }): void => { store.mark({ activeGalleryType }) } @@ -50,14 +52,14 @@ const ErrSolver = [ // ############################### // init & uninit // ############################### -export const useInit = (_store) => { +export const useInit = (_store: TStore): void => { useEffect(() => { store = _store log('effect init: ', store) sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver)) return () => { - if (!sub$) return false + if (!sub$) return sr71$.stop() sub$.unsubscribe() } diff --git a/src/containers/content/MeetupsContent/store.js b/src/containers/content/MeetupsContent/store.ts similarity index 72% rename from src/containers/content/MeetupsContent/store.js rename to src/containers/content/MeetupsContent/store.ts index 7bb9b1ce2..a16f48578 100755 --- a/src/containers/content/MeetupsContent/store.js +++ b/src/containers/content/MeetupsContent/store.ts @@ -3,7 +3,7 @@ * */ -import { types as T, getParent } from 'mobx-state-tree' +import { types as T, Instance } from 'mobx-state-tree' import { GALLERY } from '@/constant' import { markStates, buildLog } from '@/utils' @@ -16,15 +16,12 @@ const MeetupsContent = T.model('MeetupsContent', { GALLERY.TEXT_WITH_IMAGE, ), }) - .views((self) => ({ - get root() { - return getParent(self) - }, - })) + // .views((self) => ({})) .actions((self) => ({ - mark(sobj) { + mark(sobj: Record): void { markStates(sobj, self) }, })) +export type TStore = Instance export default MeetupsContent diff --git a/src/containers/content/MeetupsContent/styles/activity_card.ts b/src/containers/content/MeetupsContent/styles/activity_card.ts index c156f190b..f88932164 100755 --- a/src/containers/content/MeetupsContent/styles/activity_card.ts +++ b/src/containers/content/MeetupsContent/styles/activity_card.ts @@ -48,7 +48,7 @@ export const Date = styled.div` export const Week = styled.div` color: #327faf; ` -export const IntroWrapper = styled.div<{ finished: boolean }>` +export const IntroWrapper = styled.div` ${css.flexColumn('align-start')} width: calc(100% - 20px); position: relative; diff --git a/src/containers/content/MeetupsContent/styles/index.ts b/src/containers/content/MeetupsContent/styles/index.ts index 9227e095c..f06410f49 100755 --- a/src/containers/content/MeetupsContent/styles/index.ts +++ b/src/containers/content/MeetupsContent/styles/index.ts @@ -1,20 +1,24 @@ import styled from 'styled-components' +import type { TTestable } from '@/spec' import { css } from '@/utils' -export const Wrapper = styled.div` - ${css.flex()} +export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ + 'data-test-id': testid, +}))` + ${css.flex('justify-center')}; width: 100%; ` -export const InnerWrapper = styled.div` +export const InnerWrapper = styled.div<{ metric: string }>` ${css.flex()}; - margin-top: 25px; + margin-top: 40px; + ${({ metric }) => css.fitContentWidth(metric)}; ` export const ContentWrapper = styled.div` ${css.flex()}; align-content: start; flex-wrap: wrap; - max-width: calc(100% - 170px); + width: 100%; ` export const CardsWrapper = styled.div` ${css.flex('align-center')}; diff --git a/src/spec/graphql.ts b/src/spec/graphql.ts new file mode 100644 index 000000000..81a3872c8 --- /dev/null +++ b/src/spec/graphql.ts @@ -0,0 +1,6 @@ +export type TGQLError = { + type: string + path: string + operation?: string + details?: any // TODO +} diff --git a/src/spec/index.ts b/src/spec/index.ts index 737b55d1a..208f0e792 100644 --- a/src/spec/index.ts +++ b/src/spec/index.ts @@ -28,6 +28,8 @@ export type { Nullable, } from './utils' +export type { TGQLError } from './graphql' + export type TRoute = { communityPath?: string threadPath?: string diff --git a/utils/helper.ts b/utils/helper.ts index 538003953..fc01d3e6c 100755 --- a/utils/helper.ts +++ b/utils/helper.ts @@ -2,6 +2,7 @@ import { curry, reduce, keys, sort, uniq, tap } from 'ramda' import PubSub from 'pubsub-js' import { limit, length } from 'stringz' +import type { TGQLError } from '@/spec' import { TAG_COLOR_ORDER } from '@/config' import { EVENT } from '@/constant' @@ -148,7 +149,12 @@ export const closeDrawer = (type = ''): void => export const joinUS = (type: string, data = {}): void => send(EVENT.JOIN_US, { type, data }) -export const errRescue = ({ type, operation, details, path }): void => +export const errRescue = ({ + type, + operation, + details, + path, +}: TGQLError): void => send(EVENT.ERR_RESCUE, { type, data: { operation, details, path } }) // errRescue({type: ERR.GRAPHQL, operation: operationName, details: graphQLErrors}) From ed016c4338227baab347a969732b48fd5d79eb2f Mon Sep 17 00:00:00 2001 From: mydearxym Date: Wed, 31 Mar 2021 12:03:26 +0800 Subject: [PATCH 2/4] refactor(meetups): convert more js to ts --- .../MeetupsContent/Card/{Date.js => Date.tsx} | 15 ++++------ .../Card/{TextCard.js => TextCard.tsx} | 7 +++-- ...TextWithImgCard.js => TextWithImgCard.tsx} | 7 +++-- .../content/MeetupsContent/Card/index.js | 26 ---------------- .../content/MeetupsContent/Card/index.tsx | 30 +++++++++++++++++++ .../{CalendarCard.js => CalendarCard.tsx} | 4 +-- .../DateSelector/{Cell.js => Cell.tsx} | 10 ++++++- .../DateSelector/{index.js => index.tsx} | 2 +- .../FilterBar/{index.js => index.tsx} | 0 .../MeetupsContent/styles/card/index.ts | 15 +++++----- .../styles/card/text_with_img_card.ts | 5 +--- src/spec/gallery.ts | 8 +++++ src/spec/index.ts | 11 +++++++ utils/constant/gallery.ts | 27 +++++++++++------ 14 files changed, 102 insertions(+), 65 deletions(-) rename src/containers/content/MeetupsContent/Card/{Date.js => Date.tsx} (50%) rename src/containers/content/MeetupsContent/Card/{TextCard.js => TextCard.tsx} (86%) rename src/containers/content/MeetupsContent/Card/{TextWithImgCard.js => TextWithImgCard.tsx} (87%) delete mode 100644 src/containers/content/MeetupsContent/Card/index.js create mode 100644 src/containers/content/MeetupsContent/Card/index.tsx rename src/containers/content/MeetupsContent/DateSelector/{CalendarCard.js => CalendarCard.tsx} (93%) rename src/containers/content/MeetupsContent/DateSelector/{Cell.js => Cell.tsx} (87%) rename src/containers/content/MeetupsContent/DateSelector/{index.js => index.tsx} (96%) rename src/containers/content/MeetupsContent/FilterBar/{index.js => index.tsx} (100%) create mode 100644 src/spec/gallery.ts diff --git a/src/containers/content/MeetupsContent/Card/Date.js b/src/containers/content/MeetupsContent/Card/Date.tsx similarity index 50% rename from src/containers/content/MeetupsContent/Card/Date.js rename to src/containers/content/MeetupsContent/Card/Date.tsx index f9787d33b..024553220 100644 --- a/src/containers/content/MeetupsContent/Card/Date.js +++ b/src/containers/content/MeetupsContent/Card/Date.tsx @@ -1,23 +1,18 @@ import React from 'react' -import T from 'prop-types' -import { GALLERY } from '@/constant' +import type { TProps as TParentProps } from './index' import { Wrapper, Divider, WeekName, DateNum } from '../styles/card/date' -const Date = ({ type }) => { +type TProps = Omit + +const Date: React.FC = ({ type }) => { return ( 周五 - 18 / 04 + 18 / 04 ) } -Date.propTypes = { - type: T.oneOf([GALLERY.TEXT_ONLY, GALLERY.TEXT_WITH_IMAGE]).isRequired, -} - -Date.defaultProps = {} - export default React.memo(Date) diff --git a/src/containers/content/MeetupsContent/Card/TextCard.js b/src/containers/content/MeetupsContent/Card/TextCard.tsx similarity index 86% rename from src/containers/content/MeetupsContent/Card/TextCard.js rename to src/containers/content/MeetupsContent/Card/TextCard.tsx index d5e47c88a..86feaa0d8 100644 --- a/src/containers/content/MeetupsContent/Card/TextCard.js +++ b/src/containers/content/MeetupsContent/Card/TextCard.tsx @@ -6,6 +6,7 @@ import { ICON_CMD } from '@/config' import DotDivider from '@/components/DotDivider' import { Br } from '@/components/Common' +import type { TProps as TParentProps } from './index' import Date from './Date' import { @@ -19,7 +20,9 @@ import { Icon, } from '../styles/card/text_card' -const Card = ({ item }) => { +type TProps = Omit + +const TextCard: React.FC = ({ item }) => { return ( @@ -46,4 +49,4 @@ const Card = ({ item }) => { ) } -export default React.memo(Card) +export default React.memo(TextCard) diff --git a/src/containers/content/MeetupsContent/Card/TextWithImgCard.js b/src/containers/content/MeetupsContent/Card/TextWithImgCard.tsx similarity index 87% rename from src/containers/content/MeetupsContent/Card/TextWithImgCard.js rename to src/containers/content/MeetupsContent/Card/TextWithImgCard.tsx index 70a6da78c..ca21e9db8 100644 --- a/src/containers/content/MeetupsContent/Card/TextWithImgCard.js +++ b/src/containers/content/MeetupsContent/Card/TextWithImgCard.tsx @@ -4,6 +4,7 @@ import { GALLERY } from '@/constant' import { ICON_CMD, ASSETS_ENDPOINT } from '@/config' import DotDivider from '@/components/DotDivider' +import type { TProps as TParentProps } from './index' import Date from './Date' import { @@ -21,7 +22,9 @@ import { Icon, } from '../styles/card/text_with_img_card' -const Card = ({ item }) => { +type TProps = Omit + +const TextWithImageCard: React.FC = ({ item }) => { return ( @@ -54,4 +57,4 @@ const Card = ({ item }) => { ) } -export default React.memo(Card) +export default React.memo(TextWithImageCard) diff --git a/src/containers/content/MeetupsContent/Card/index.js b/src/containers/content/MeetupsContent/Card/index.js deleted file mode 100644 index 36474aed1..000000000 --- a/src/containers/content/MeetupsContent/Card/index.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react' -import T from 'prop-types' - -import { GALLERY } from '@/constant' - -import TextCard from './TextCard' -import TextWithImgCard from './TextWithImgCard' - -const Card = ({ item, type }) => { - return type === GALLERY.TEXT_ONLY ? ( - - ) : ( - - ) -} - -Card.propTypes = { - item: T.any.isRequired, // TODO: - type: T.oneOf([GALLERY.TEXT_ONLY, GALLERY.TEXT_WITH_IMAGE]), -} - -Card.defaultProps = { - type: GALLERY.TEXT_ONLY, -} - -export default React.memo(Card) diff --git a/src/containers/content/MeetupsContent/Card/index.tsx b/src/containers/content/MeetupsContent/Card/index.tsx new file mode 100644 index 000000000..57c983fd1 --- /dev/null +++ b/src/containers/content/MeetupsContent/Card/index.tsx @@ -0,0 +1,30 @@ +import React from 'react' + +import type { TGALLERY_TEXT_ONLY, TGALLERY_TEXT_WITH_IMAGE } from '@/spec' +import { GALLERY } from '@/constant' + +import TextCard from './TextCard' +import TextWithImgCard from './TextWithImgCard' + +export type TProps = { + type: TGALLERY_TEXT_ONLY | TGALLERY_TEXT_WITH_IMAGE + item: { + id?: number + date: string + week: string + title: string + company: string + finished?: boolean + type?: string + } +} + +const Card: React.FC = ({ item, type = GALLERY.TEXT_ONLY }) => { + return type === GALLERY.TEXT_ONLY ? ( + + ) : ( + + ) +} + +export default React.memo(Card) diff --git a/src/containers/content/MeetupsContent/DateSelector/CalendarCard.js b/src/containers/content/MeetupsContent/DateSelector/CalendarCard.tsx similarity index 93% rename from src/containers/content/MeetupsContent/DateSelector/CalendarCard.js rename to src/containers/content/MeetupsContent/DateSelector/CalendarCard.tsx index 1988f11cc..9eb2501c3 100755 --- a/src/containers/content/MeetupsContent/DateSelector/CalendarCard.js +++ b/src/containers/content/MeetupsContent/DateSelector/CalendarCard.tsx @@ -1,7 +1,5 @@ /* - * * CoolGuideContent - * */ import React from 'react' @@ -17,7 +15,7 @@ import { MonthUnit, } from '../styles/date_selector/calendar_card' -const CalendarCard = () => { +const CalendarCard: React.FC = () => { return ( diff --git a/src/containers/content/MeetupsContent/DateSelector/Cell.js b/src/containers/content/MeetupsContent/DateSelector/Cell.tsx similarity index 87% rename from src/containers/content/MeetupsContent/DateSelector/Cell.js rename to src/containers/content/MeetupsContent/DateSelector/Cell.tsx index 66062aa9c..6acf80849 100755 --- a/src/containers/content/MeetupsContent/DateSelector/Cell.js +++ b/src/containers/content/MeetupsContent/DateSelector/Cell.tsx @@ -15,7 +15,15 @@ import { const weekends = [5, 6, 18, 19, 27, 28] const activitiesDates = [3, 4, 19, 23, 24] -const Cell = ({ item, isLeapMonth }) => { +type TProps = { + item: { + id: number + date: string + } + isLeapMonth: boolean +} + +const Cell: React.FC = ({ item, isLeapMonth }) => { return ( { } } -const DateSelector = () => { +const DateSelector: React.FC = () => { fillItems() const items = dates const isLeapMonth = !!items[30] diff --git a/src/containers/content/MeetupsContent/FilterBar/index.js b/src/containers/content/MeetupsContent/FilterBar/index.tsx similarity index 100% rename from src/containers/content/MeetupsContent/FilterBar/index.js rename to src/containers/content/MeetupsContent/FilterBar/index.tsx diff --git a/src/containers/content/MeetupsContent/styles/card/index.ts b/src/containers/content/MeetupsContent/styles/card/index.ts index 7f4c7927d..60baa6dbb 100644 --- a/src/containers/content/MeetupsContent/styles/card/index.ts +++ b/src/containers/content/MeetupsContent/styles/card/index.ts @@ -5,21 +5,22 @@ import { css, theme } from '@/utils' export const Wrapper = styled.div` ${css.flex()} - width: 33%; + width: 31%; height: 210px; - padding: 20px 5px; + margin-right: 20px; + padding: 20px 10px; + padding-bottom: 25px; border-top: 1px solid; border-top-color: transparent; - border-bottom: 1px solid; - border-bottom-color: #054353; color: ${theme('thread.articleDigest')}; + border-top: 2px solid #884b40; &:hover { background: #04303c; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 24px; - border-bottom-color: transparent; - border-top: 1px solid; - border-top-color: #327faf; + /* border-bottom-color: transparent; */ + /* border-top: 1px solid; + border-top-color: #327faf; */ } transition: border-top 0.25s ease-out, box-shadow 0.2s ease-in; ` diff --git a/src/containers/content/MeetupsContent/styles/card/text_with_img_card.ts b/src/containers/content/MeetupsContent/styles/card/text_with_img_card.ts index 4f0853e8d..7efad14fb 100644 --- a/src/containers/content/MeetupsContent/styles/card/text_with_img_card.ts +++ b/src/containers/content/MeetupsContent/styles/card/text_with_img_card.ts @@ -15,10 +15,7 @@ export { Icon, } from './index' -export const Wrapper = styled(WrapperBase)` - padding-right: 25px; - padding-left: 20px; -` +export const Wrapper = styled(WrapperBase)`` export const Header = styled.div` ${css.flex('align-start')}; ` diff --git a/src/spec/gallery.ts b/src/spec/gallery.ts new file mode 100644 index 000000000..c0cc03e7c --- /dev/null +++ b/src/spec/gallery.ts @@ -0,0 +1,8 @@ +export type TGALLERY_DEFAULT = 'default' +export type TGALLERY_LIST = 'list' +export type TGALLERY_MASONRY_COLUMN = 'masonry_column' +export type TGALLERY_MAIN_COLUMN = 'main_column' +export type TGALLERY_TWO_COLUMN = 'two_column' +export type TGALLERY_THREE_COLUMN = 'three_column' +export type TGALLERY_TEXT_ONLY = 'text_only' +export type TGALLERY_TEXT_WITH_IMAGE = 'text_with_image' diff --git a/src/spec/index.ts b/src/spec/index.ts index 208f0e792..422add78e 100644 --- a/src/spec/index.ts +++ b/src/spec/index.ts @@ -30,6 +30,17 @@ export type { export type { TGQLError } from './graphql' +export type { + TGALLERY_DEFAULT, + TGALLERY_LIST, + TGALLERY_MASONRY_COLUMN, + TGALLERY_MAIN_COLUMN, + TGALLERY_TWO_COLUMN, + TGALLERY_THREE_COLUMN, + TGALLERY_TEXT_ONLY, + TGALLERY_TEXT_WITH_IMAGE, +} from './gallery' + export type TRoute = { communityPath?: string threadPath?: string diff --git a/utils/constant/gallery.ts b/utils/constant/gallery.ts index 6fd4b8271..d95eef48c 100644 --- a/utils/constant/gallery.ts +++ b/utils/constant/gallery.ts @@ -1,14 +1,23 @@ -// gallery display types +import type { + TGALLERY_DEFAULT, + TGALLERY_LIST, + TGALLERY_MASONRY_COLUMN, + TGALLERY_MAIN_COLUMN, + TGALLERY_TWO_COLUMN, + TGALLERY_THREE_COLUMN, + TGALLERY_TEXT_ONLY, + TGALLERY_TEXT_WITH_IMAGE, +} from '@/spec' const GALLERY = { - DEFAULT: 'default', - LIST: 'list', - MASONRY_COLUMN: 'masonry_column', - MAIN_COLUMN: 'main_column', - TWO_COLUMN: 'two_column', - THREE_COLUMN: 'three_column', - TEXT_ONLY: 'text_only', - TEXT_WITH_IMAGE: 'text_with_image', + DEFAULT: 'default' as TGALLERY_DEFAULT, + LIST: 'list' as TGALLERY_LIST, + MASONRY_COLUMN: 'masonry_column' as TGALLERY_MASONRY_COLUMN, + MAIN_COLUMN: 'main_column' as TGALLERY_MAIN_COLUMN, + TWO_COLUMN: 'two_column' as TGALLERY_TWO_COLUMN, + THREE_COLUMN: 'three_column' as TGALLERY_THREE_COLUMN, + TEXT_ONLY: 'text_only' as TGALLERY_TEXT_ONLY, + TEXT_WITH_IMAGE: 'text_with_image' as TGALLERY_TEXT_WITH_IMAGE, } export default GALLERY From 59f4a3ba3ffb81b842494e54e2086bc4192a53ad Mon Sep 17 00:00:00 2001 From: mydearxym Date: Wed, 31 Mar 2021 12:32:28 +0800 Subject: [PATCH 3/4] refactor(filtersMenu): covert to ts && fix warnings --- .../Filter/{index.js => index.tsx} | 2 +- .../FiltersMenu/{Header.js => Header.tsx} | 11 +++- .../FiltersMenu/{index.js => index.tsx} | 64 ++++++------------- .../FiltersMenu/styles/filter/index.ts | 5 +- src/components/FiltersMenu/styles/header.ts | 6 +- .../MeetupsContent/FilterBar/index.tsx | 7 +- src/spec/comp.ts | 13 +++- src/spec/index.ts | 2 +- 8 files changed, 55 insertions(+), 55 deletions(-) rename src/components/FiltersMenu/Filter/{index.js => index.tsx} (98%) rename src/components/FiltersMenu/{Header.js => Header.tsx} (73%) rename src/components/FiltersMenu/{index.js => index.tsx} (76%) diff --git a/src/components/FiltersMenu/Filter/index.js b/src/components/FiltersMenu/Filter/index.tsx similarity index 98% rename from src/components/FiltersMenu/Filter/index.js rename to src/components/FiltersMenu/Filter/index.tsx index 228e98352..8f8dfd736 100755 --- a/src/components/FiltersMenu/Filter/index.js +++ b/src/components/FiltersMenu/Filter/index.tsx @@ -60,7 +60,7 @@ const Filter = ({ id, expandMenuId, activeMap, options, onSelect, revert }) => { ))} ) : ( - + {!revert ? ( <> diff --git a/src/components/FiltersMenu/Header.js b/src/components/FiltersMenu/Header.tsx similarity index 73% rename from src/components/FiltersMenu/Header.js rename to src/components/FiltersMenu/Header.tsx index 63e612b9d..14530f0f6 100644 --- a/src/components/FiltersMenu/Header.js +++ b/src/components/FiltersMenu/Header.tsx @@ -12,17 +12,24 @@ import { HelpHint, } from './styles/header' -const Header = ({ title, showReset, reset }) => { +type TProps = { + title: string + showReset: boolean + onReset: () => void +} + +const Header: React.FC = ({ title, showReset, onReset }) => { return ( {title} + {/* @ts-ignore */} 重置筛选条件} placement="bottom" delay={1000} > - + diff --git a/src/components/FiltersMenu/index.js b/src/components/FiltersMenu/index.tsx similarity index 76% rename from src/components/FiltersMenu/index.js rename to src/components/FiltersMenu/index.tsx index aef271f2b..6200ad59c 100755 --- a/src/components/FiltersMenu/index.js +++ b/src/components/FiltersMenu/index.tsx @@ -5,9 +5,9 @@ */ import React, { useState, useCallback } from 'react' -import T from 'prop-types' import { merge, equals } from 'ramda' +import type { TFiltersMenuItems } from '@/spec' import { buildLog } from '@/utils' import { SpaceGrow } from '@/components/Common' @@ -31,15 +31,26 @@ const initActiveMap = (items) => { return menuMap } -const FiltersMenu = ({ - title, +type TProps = { + title?: string + items?: TFiltersMenuItems + activeid?: string | null + noFilter?: boolean + onItemClick?: () => void + itemBgHighlight?: boolean + revert?: boolean + withDivider?: boolean +} + +const FiltersMenu: React.FC = ({ + title = '', items, - activeid, - noFilter, - onItemClick, - itemBgHighlight, - revert, - withDivider, + activeid = null, + noFilter = false, + onItemClick = log, + itemBgHighlight = true, + revert = false, + withDivider = true, }) => { // const [expandMenuId, setExpandMenuId] = useState(null) const [expandMenuId, setExpandMenuId] = useState(activeid) @@ -54,7 +65,7 @@ const FiltersMenu = ({
{items.map((item, index) => ( ` padding: 4px 6px; padding-top: 0; ` -export const RadioWrapper = styled.div<{ revert: boolean }>` +type RadioWrapper = { revert?: boolean } +export const RadioWrapper = styled.div` ${css.flexColumn()}; align-items: ${({ revert }) => (revert ? 'flex-start' : 'flex-end')}; margin-top: 5px; @@ -38,7 +39,7 @@ export const ActiveDot = styled.div` opacity: ${({ active }) => (active ? 1 : 0)}; transition: opacity 0.25s; ` -type TRadioTitle = TActive & { revert: boolean } +type TRadioTitle = TActive & { revert?: boolean } export const RadioTitle = styled.div` font-size: 13px; color: ${({ active }) => diff --git a/src/components/FiltersMenu/styles/header.ts b/src/components/FiltersMenu/styles/header.ts index 9b4c3a812..acc5bf3ed 100644 --- a/src/components/FiltersMenu/styles/header.ts +++ b/src/components/FiltersMenu/styles/header.ts @@ -1,12 +1,10 @@ import styled from 'styled-components' -import type { TTestable, TActive } from '@/spec' +import type { TActive } from '@/spec' import Img from '@/Img' import { css, theme } from '@/utils' -export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({ - 'data-test-id': testid, -}))` +export const Wrapper = styled.div` ${css.flex('align-center', 'justify-between')} width: 100%; margin-bottom: 8px; diff --git a/src/containers/content/MeetupsContent/FilterBar/index.tsx b/src/containers/content/MeetupsContent/FilterBar/index.tsx index dc2dd01a4..bfde2da26 100644 --- a/src/containers/content/MeetupsContent/FilterBar/index.tsx +++ b/src/containers/content/MeetupsContent/FilterBar/index.tsx @@ -1,5 +1,6 @@ import React from 'react' +import type { TFiltersMenuItems } from '@/spec' import { ICON_CMD } from '@/config' import { Br } from '@/components/Common' @@ -17,7 +18,11 @@ import { TermItem, } from '../styles/filter_bar' -const FilterBar = ({ filtersItems }) => { +type TProps = { + filtersItems: TFiltersMenuItems +} + +const FilterBar: React.FC = ({ filtersItems }) => { return ( diff --git a/src/spec/comp.ts b/src/spec/comp.ts index 6fb37bb37..cb2bf1b1a 100644 --- a/src/spec/comp.ts +++ b/src/spec/comp.ts @@ -1,6 +1,6 @@ import { TSIZE } from './size' -// button +// @/components/button export type TButton = { size: TSIZE active?: boolean @@ -8,3 +8,14 @@ export type TButton = { disabled?: boolean noBorder?: boolean } + +// @/components/FiltersMenu +export type TFiltersMenuItems = { + id: string + title: string + icon: string + options: { + id: string + title: string + }[] +}[] diff --git a/src/spec/index.ts b/src/spec/index.ts index 422add78e..e42b4867d 100644 --- a/src/spec/index.ts +++ b/src/spec/index.ts @@ -12,7 +12,7 @@ export type { TSIZE_SML, TSIZE_SM, } from './size' -export type { TButton } from './comp' +export type { TButton, TFiltersMenuItems } from './comp' export type { TTheme, TThemeMap, TThemeName } from './theme' export type { TAccount, TUser, TMembership } from './account' From f88a510da90aa4df773a00cabcde53959998da5e Mon Sep 17 00:00:00 2001 From: mydearxym Date: Wed, 31 Mar 2021 13:59:48 +0800 Subject: [PATCH 4/4] refactor(jobs): use MenuFilters instead of tags --- src/containers/editor/RepoEditor/logic.js | 4 +- .../{PublishNote.js => PublishNote.tsx} | 7 +- .../thread/JobsThread/fakeFiltersItems.ts | 126 ++++++++++++++++++ .../thread/JobsThread/{index.js => index.tsx} | 26 +++- .../thread/JobsThread/{logic.js => logic.ts} | 37 ++--- .../thread/JobsThread/{store.js => store.ts} | 90 ++++++++----- .../thread/JobsThread/styles/index.ts | 5 + src/containers/thread/PostsThread/logic.js | 12 +- src/containers/thread/ReposThread/logic.js | 4 +- src/containers/thread/VideosThread/logic.js | 8 +- src/containers/tool/Drawer/logic.js | 2 +- src/containers/unit/ModeLine/logic.js | 4 +- src/containers/unit/Sidebar/store.ts | 10 +- src/containers/viewer/JobViewer/logic.js | 4 +- src/containers/viewer/PostViewer/logic.js | 8 +- src/containers/viewer/RepoViewer/logic.js | 2 +- src/spec/article.ts | 37 +++++ src/spec/index.ts | 21 +-- src/stores/AccountStore/index.ts | 15 ++- utils/async/sr71.js | 28 ++-- utils/helper.ts | 6 +- 21 files changed, 330 insertions(+), 126 deletions(-) rename src/containers/thread/JobsThread/{PublishNote.js => PublishNote.tsx} (88%) create mode 100644 src/containers/thread/JobsThread/fakeFiltersItems.ts rename src/containers/thread/JobsThread/{index.js => index.tsx} (80%) rename src/containers/thread/JobsThread/{logic.js => logic.ts} (83%) rename src/containers/thread/JobsThread/{store.js => store.ts} (58%) create mode 100644 src/spec/article.ts diff --git a/src/containers/editor/RepoEditor/logic.js b/src/containers/editor/RepoEditor/logic.js index 52a33e0a7..45f06c46c 100755 --- a/src/containers/editor/RepoEditor/logic.js +++ b/src/containers/editor/RepoEditor/logic.js @@ -19,7 +19,7 @@ const log = buildLog('L:RepoEditor') const { SR71, $solver, asyncRes, asyncErr } = asyncSuit const sr71$ = new SR71({ - receive: [EVENT.DRAWER_CLOSED], + receive: [EVENT.DRAWER.CLOSE], }) let sub$ = null @@ -93,7 +93,7 @@ const DataSolver = [ }, }, { - match: asyncRes(EVENT.DRAWER_CLOSED), + match: asyncRes(EVENT.DRAWER.CLOSE), action: () => store.mark({ curView: 'search' }), }, ] diff --git a/src/containers/thread/JobsThread/PublishNote.js b/src/containers/thread/JobsThread/PublishNote.tsx similarity index 88% rename from src/containers/thread/JobsThread/PublishNote.js rename to src/containers/thread/JobsThread/PublishNote.tsx index 27f12dfdb..cbb569a42 100755 --- a/src/containers/thread/JobsThread/PublishNote.js +++ b/src/containers/thread/JobsThread/PublishNote.tsx @@ -5,12 +5,15 @@ import { ROUTE } from '@/constant' import Modal from '@/components/Modal' -// import { ICON_CMD } from '@/config' import { Wrapper, NoteIcon, NoteDesc, Linker } from './styles/publish_note' import { onNoteClose } from './logic' -const PublishNote = ({ show }) => ( +type TProps = { + show: boolean +} + +const PublishNote: React.FC = ({ show }) => ( diff --git a/src/containers/thread/JobsThread/fakeFiltersItems.ts b/src/containers/thread/JobsThread/fakeFiltersItems.ts new file mode 100644 index 000000000..1f55e1332 --- /dev/null +++ b/src/containers/thread/JobsThread/fakeFiltersItems.ts @@ -0,0 +1,126 @@ +import { ICON_CMD } from '@/config' + +const filtersItems = [ + { + id: '0', + title: '城市', + icon: `${ICON_CMD}/navi/location.svg`, + + options: [ + { + id: '0', + title: '全部', + }, + { + id: '00', + title: '远程', + }, + { + id: '1', + title: '北京', + }, + { + id: '2', + title: '上海', + }, + { + id: '3', + title: '杭州', + }, + { + id: '4', + title: '深圳', + }, + { + id: '5', + title: '成都', + }, + ], + }, + { + id: '101', + title: '职位', + icon: `${ICON_CMD}/navi/topic.svg`, + + options: [ + { + id: '0', + title: '前端', + }, + { + id: '1', + title: '后端', + }, + { + id: '2', + title: '设计', + }, + { + id: '3', + title: 'AI', + }, + ], + }, + { + id: '102', + title: '薪资待遇', + icon: `${ICON_CMD}/navi/money-yuan.svg`, + + options: [ + { + id: '0', + title: '全部', + }, + { + id: '1', + title: '免费', + }, + { + id: '2', + title: '50 以下', + }, + { + id: '3', + title: '50-100', + }, + { + id: '4', + title: '100-200', + }, + { + id: '5', + title: '200 以上', + }, + ], + }, + { + // 非 IT，设计类的网站 + id: '103', + title: '规模', + icon: `${ICON_CMD}/navi/chair.svg`, + options: [ + { + id: '0', + title: '全部', + }, + { + id: '1', + title: '10-30', + }, + { + id: '2', + title: '30-50', + }, + { + id: '3', + title: '50-100', + }, + { + id: '4', + title: '100以上', + }, + ], + }, +] + +export default filtersItems diff --git a/src/containers/thread/JobsThread/index.js b/src/containers/thread/JobsThread/index.tsx similarity index 80% rename from src/containers/thread/JobsThread/index.js rename to src/containers/thread/JobsThread/index.tsx index 9f2ed73f2..27ad6e1c9 100755 --- a/src/containers/thread/JobsThread/index.js +++ b/src/containers/thread/JobsThread/index.tsx @@ -11,7 +11,8 @@ import { ICON_CMD } from '@/config' import { THREAD } from '@/constant' import { pluggedIn, buildLog } from '@/utils' -import TagsBar from '@/containers/unit/TagsBar' +import FiltersMenu from '@/components/FiltersMenu' +// import TagsBar from '@/containers/unit/TagsBar' import Sticky from '@/components/Sticky' import { PublishButton } from '@/components/Buttons' @@ -19,13 +20,17 @@ import Maybe from '@/components/Maybe' import PagedContents from '@/components/PagedContents' import ContentFilter from '@/components/ContentFilter' +import type { TStore } from './store' + import PublishNote from './PublishNote' +import filtersItems from './fakeFiltersItems' import { Wrapper, LeftPart, RightPart, FilterWrapper, + TagsWrapper, PublisherWrapper, } from './styles' @@ -37,21 +42,25 @@ import { onUserSelect, onPreview, onContentCreate, - onTagSelect, + // onTagSelect, onPageChange, } from './logic' /* eslint-disable-next-line */ const log = buildLog('C:JobsThread') -const JobsThreadContainer = ({ jobsThread: store }) => { +type TProps = { + jobsThread?: TStore +} + +const JobsThreadContainer: React.FC = ({ jobsThread: store }) => { useInit(store) const { pagedJobsData, curView, filtersData, - activeTagData, + // activeTagData, activeJob, accountInfo, curCommunity, @@ -101,15 +110,18 @@ const JobsThreadContainer = ({ jobsThread: store }) => { - + + + {/* + /> */} ) } -export default pluggedIn(JobsThreadContainer) +export default pluggedIn(JobsThreadContainer) as React.FC diff --git a/src/containers/thread/JobsThread/logic.js b/src/containers/thread/JobsThread/logic.ts similarity index 83% rename from src/containers/thread/JobsThread/logic.js rename to src/containers/thread/JobsThread/logic.ts index 4e790e853..0bd45bc6a 100755 --- a/src/containers/thread/JobsThread/logic.js +++ b/src/containers/thread/JobsThread/logic.ts @@ -11,6 +11,8 @@ import { errRescue, } from '@/utils' +import type { TTag } from '@/spec' +import type { TStore } from './store' import S from './schema' /* eslint-disable-next-line */ @@ -18,9 +20,10 @@ const log = buildLog('L:JobsThread') const { SR71, $solver, asyncRes, asyncErr } = asyncSuit const sr71$ = new SR71({ + // @ts-ignore receive: [ EVENT.REFRESH_JOBS, - EVENT.DRAWER_CLOSED, + EVENT.DRAWER.CLOSE, EVENT.THREAD_CHANGE, EVENT.C11N_DENSITY_CHANGE, ], @@ -29,15 +32,15 @@ const sr71$ = new SR71({ let store = null let sub$ = null -export const inAnchor = () => { +export const inAnchor = (): void => { if (store) store.showTopModeline(false) } -export const outAnchor = () => { +export const outAnchor = (): void => { if (store) store.showTopModeline(true) } -export const loadJobs = (page = 1) => { +export const loadJobs = (page = 1): void => { const { curCommunity } = store const userHasLogin = store.isLogin @@ -64,7 +67,7 @@ export const loadJobs = (page = 1) => { store.markRoute({ page, ...store.filtersData }) } -export const onPageChange = (page) => { +export const onPageChange = (page: number): void => { scrollToTabber() loadJobs(page) } @@ -74,7 +77,7 @@ export const onPageChange = (page) => { * * @param {*} data {id: string, title: string} */ -export const onPreview = (data) => { +export const onPreview = (data): void => { setTimeout(() => store.setViewedFlag(data.id), 1500) const type = TYPE.DRAWER.JOB_VIEW const thread = THREAD.JOB @@ -83,7 +86,7 @@ export const onPreview = (data) => { store.markRoute(data.id) } -export const onContentCreate = () => { +export const onContentCreate = (): void => { if (!store.isLogin) return store.authWarning() if (store.curCommunity.raw === HCN) { @@ -93,21 +96,23 @@ export const onContentCreate = () => { send(EVENT.DRAWER.OPEN, { type: TYPE.DRAWER.JOB_CREATE }) } -export const onNoteClose = () => store.mark({ showPublishNote: false }) +export const onNoteClose = (): void => store.mark({ showPublishNote: false }) -export const onTagSelect = (tag) => { +export const onTagSelect = (tag: TTag): void => { store.selectTag(tag) loadJobs() store.markRoute({ tag: tag.title }) } -export const onFilterSelect = (option) => { +export const onFilterSelect = (option): void => { store.selectFilter(option) store.markRoute({ ...store.filtersData }) loadJobs() } -export const onUserSelect = () => {} +export const onUserSelect = (): void => { + // +} // ############################### // Data & Error handlers // ############################### @@ -151,7 +156,7 @@ const DataSolver = [ }, }, { - match: asyncRes(EVENT.DRAWER_CLOSED), + match: asyncRes(EVENT.DRAWER.CLOSE), action: () => { store.setViewing({ job: {} }) store.markRoute({ ...store.filtersData, ...store.tagQuery }) @@ -162,7 +167,9 @@ const DataSolver = [ const ErrSolver = [ { match: asyncErr(ERR.GRAPHQL), - action: () => {}, + action: () => { + // + }, }, { match: asyncErr(ERR.TIMEOUT), @@ -178,14 +185,14 @@ const ErrSolver = [ // ############################### // init & uninit // ############################### -export const useInit = (_store) => +export const useInit = (_store: TStore) => useEffect(() => { store = _store // log('effect init') sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver)) return () => { - if (store.curView === TYPE.LOADING || !sub$) return false + if (store.curView === TYPE.LOADING || !sub$) return log('===== do uninit') sr71$.stop() sub$.unsubscribe() diff --git a/src/containers/thread/JobsThread/store.js b/src/containers/thread/JobsThread/store.ts similarity index 58% rename from src/containers/thread/JobsThread/store.js rename to src/containers/thread/JobsThread/store.ts index 3fd78e103..2f829f240 100755 --- a/src/containers/thread/JobsThread/store.js +++ b/src/containers/thread/JobsThread/store.ts @@ -3,9 +3,18 @@ * */ -import { types as T, getParent } from 'mobx-state-tree' +import { types as T, getParent, Instance } from 'mobx-state-tree' import { findIndex, merge, pickBy, isEmpty, propEq } from 'ramda' +import type { + TRootStore, + TCommunity, + TAccount, + TTag, + TJob, + TPagedJobs, +} from '@/spec' + import { TYPE, THREAD } from '@/constant' import { markStates, buildLog, stripMobx, nilOrEmpty, isObject } from '@/utils' import { PagedJobs, Tag, ContentFilter, emptyPagiData } from '@/model' @@ -32,42 +41,42 @@ const JobsThreadStore = T.model('JobsThreadStore', { // TODO: rename to activeArticle }) .views((self) => ({ - get root() { - return getParent(self) - }, - get curRoute() { - return self.root.curRoute - }, - get curCommunity() { - return stripMobx(self.root.viewing.community) + get curCommunity(): TCommunity { + const root = getParent(self) as TRootStore + + return stripMobx(root.viewing.community) }, - get pagedJobsData() { + get pagedJobsData(): TPagedJobs { return stripMobx(self.pagedJobs) }, - get accountInfo() { - return self.root.account.accountInfo + get accountInfo(): TAccount { + const root = getParent(self) as TRootStore + return root.account.accountInfo }, - get isLogin() { - return self.root.account.isLogin + get isLogin(): boolean { + const root = getParent(self) as TRootStore + return root.account.isLogin }, - get filtersData() { + get filtersData(): any { return stripMobx(pickBy((v) => !isEmpty(v), self.filters)) }, - get activeTagData() { + get activeTagData(): TTag { return stripMobx(self.activeTag) || {} }, - get tagQuery() { + get tagQuery(): any { const curTag = stripMobx(self.activeTag) if (nilOrEmpty(curTag)) return {} return { tag: curTag.title } }, - get activeJob() { - return stripMobx(self.root.viewing.job) + get activeJob(): TJob { + const root = getParent(self) as TRootStore + return stripMobx(root.viewing.job) }, - get pageDensity() { - return self.root.account.pageDensity + get pageDensity(): number { + const root = getParent(self) as TRootStore + return root.account.pageDensity }, - get showFilterBar() { + get showFilterBar(): boolean { const curFilter = stripMobx(pickBy((v) => !isEmpty(v), self.filters)) const pagedJobs = stripMobx(self.pagedJobs) @@ -75,32 +84,35 @@ const JobsThreadStore = T.model('JobsThreadStore', { }, })) .actions((self) => ({ - selectFilter(option) { + selectFilter(option): void { const curfilter = self.filtersData self.filters = merge(curfilter, option) }, - authWarning(options) { - self.root.authWarning(options) + authWarning(options): void { + const root = getParent(self) as TRootStore + root.authWarning(options) }, - selectTag(tag) { + selectTag(tag): void { const cur = tag.title === '' ? null : tag self.activeTag = cur }, - showTopModeline(fix) { - self.root.showTopModeline(fix) + showTopModeline(fix): void { + const root = getParent(self) as TRootStore + root.showTopModeline(fix) }, - setViewing(sobj) { - self.root.setViewing(sobj) + setViewing(sobj): void { + const root = getParent(self) as TRootStore + root.setViewing(sobj) }, - setViewedFlag(id) { + setViewedFlag(id: string): void { const { entries } = self.pagedJobsData const index = findIndex(propEq('id', id), entries) if (index >= 0) { self.pagedJobs.entries[index].viewerHasViewed = true } }, - updateItem(item) { + updateItem(item): void { const { entries } = self.pagedJobsData const index = findIndex(propEq('id', item.id), entries) if (index >= 0) { @@ -110,10 +122,13 @@ const JobsThreadStore = T.model('JobsThreadStore', { ) } }, - updateC11N(option) { - self.root.updateC11N(option) + updateC11N(option): void { + const root = getParent(self) as TRootStore + root.updateC11N(option) }, - markRoute(target) { + markRoute(target): void { + const root = getParent(self) as TRootStore + const query = isObject(target) ? target : { @@ -124,11 +139,12 @@ const JobsThreadStore = T.model('JobsThreadStore', { ...self.filtersData, } - self.root.markRoute(query, { onlyDesktop: true }) + root.markRoute(query, { onlyDesktop: true }) }, - mark(sobj) { + mark(sobj: Record): void { markStates(sobj, self) }, })) +export type TStore = Instance export default JobsThreadStore diff --git a/src/containers/thread/JobsThread/styles/index.ts b/src/containers/thread/JobsThread/styles/index.ts index 74729ee6f..5dda86fbf 100755 --- a/src/containers/thread/JobsThread/styles/index.ts +++ b/src/containers/thread/JobsThread/styles/index.ts @@ -27,3 +27,8 @@ export const FilterWrapper = styled.div` margin-left: 8px; display: flex; ` +export const TagsWrapper = styled.div` + margin-top: 20px; + margin-left: 12px; + margin-right: 10px; +` diff --git a/src/containers/thread/PostsThread/logic.js b/src/containers/thread/PostsThread/logic.js index 76998b38d..47d36d2e7 100755 --- a/src/containers/thread/PostsThread/logic.js +++ b/src/containers/thread/PostsThread/logic.js @@ -29,7 +29,7 @@ const { SR71, $solver, asyncRes, asyncErr } = asyncSuit const sr71$ = new SR71({ receive: [ EVENT.REFRESH_POSTS, - EVENT.DRAWER_CLOSED, + EVENT.DRAWER.CLOSE, EVENT.COMMUNITY_CHANGE, EVENT.THREAD_CHANGE, EVENT.C11N_DENSITY_CHANGE, @@ -95,7 +95,9 @@ export const onTagSelect = (tag) => { store.markRoute({ tag: tag.title }) } -export const onUserSelect = () => {} +export const onUserSelect = () => { + // +} /** * preview the current article @@ -213,7 +215,7 @@ const DataSolver = [ }, }, { - match: asyncRes(EVENT.DRAWER_CLOSED), + match: asyncRes(EVENT.DRAWER.CLOSE), action: () => { store.setViewing({ post: {} }) store.markRoute({ ...store.filtersData, ...store.tagQuery }) @@ -224,7 +226,9 @@ const DataSolver = [ const ErrSolver = [ { match: asyncErr(ERR.GRAPHQL), - action: () => {}, + action: () => { + // + }, }, { match: asyncErr(ERR.TIMEOUT), diff --git a/src/containers/thread/ReposThread/logic.js b/src/containers/thread/ReposThread/logic.js index 104375ef8..33cd5f8fb 100755 --- a/src/containers/thread/ReposThread/logic.js +++ b/src/containers/thread/ReposThread/logic.js @@ -13,7 +13,7 @@ const { SR71, $solver, asyncRes } = asyncSuit const sr71$ = new SR71({ receive: [ EVENT.REFRESH_REPOS, - EVENT.DRAWER_CLOSED, + EVENT.DRAWER.CLOSE, EVENT.THREAD_CHANGE, EVENT.C11N_DENSITY_CHANGE, ], @@ -136,7 +136,7 @@ const DataSolver = [ action: () => loadRepos(), }, { - match: asyncRes(EVENT.DRAWER_CLOSED), + match: asyncRes(EVENT.DRAWER.CLOSE), action: () => { store.setViewing({ repo: {} }) store.markRoute({ ...store.filtersData, ...store.tagQuery }) diff --git a/src/containers/thread/VideosThread/logic.js b/src/containers/thread/VideosThread/logic.js index 9f75b7def..5531d1e08 100755 --- a/src/containers/thread/VideosThread/logic.js +++ b/src/containers/thread/VideosThread/logic.js @@ -20,7 +20,7 @@ const { SR71, $solver, asyncRes, asyncErr } = asyncSuit const sr71$ = new SR71({ receive: [ EVENT.REFRESH_VIDEOS, - EVENT.DRAWER_CLOSED, + EVENT.DRAWER.CLOSE, EVENT.THREAD_CHANGE, EVENT.C11N_DENSITY_CHANGE, ], @@ -128,7 +128,7 @@ const DataSolver = [ }, }, { - match: asyncRes(EVENT.DRAWER_CLOSED), + match: asyncRes(EVENT.DRAWER.CLOSE), action: () => { store.setViewing({ video: {} }) store.markRoute({ ...store.filtersData, ...store.tagQuery }) @@ -143,7 +143,9 @@ const DataSolver = [ const ErrSolver = [ { match: asyncErr(ERR.GRAPHQL), - action: () => {}, + action: () => { + // + }, }, { match: asyncErr(ERR.TIMEOUT), diff --git a/src/containers/tool/Drawer/logic.js b/src/containers/tool/Drawer/logic.js index 059633486..07a5f493f 100755 --- a/src/containers/tool/Drawer/logic.js +++ b/src/containers/tool/Drawer/logic.js @@ -43,7 +43,7 @@ export const closeDrawer = () => { // force call MDEditor's componentWillUnmount to store the draft // wait until drawer move out of the screean setTimeout(() => { - send(EVENT.DRAWER_CLOSED) + send(EVENT.DRAWER.CLOSE) store.setViewing({ viewingThread: null }) }, 200) diff --git a/src/containers/unit/ModeLine/logic.js b/src/containers/unit/ModeLine/logic.js index 767acc544..506953fd0 100755 --- a/src/containers/unit/ModeLine/logic.js +++ b/src/containers/unit/ModeLine/logic.js @@ -8,7 +8,7 @@ import { send, buildLog, thread2Subpath, asyncSuit } from '@/utils' const { SR71, $solver, asyncRes } = asyncSuit const sr71$ = new SR71({ - receive: [EVENT.DRAWER_CLOSED], + receive: [EVENT.DRAWER.CLOSE], }) let sub$ = null @@ -111,7 +111,7 @@ const openMoreMenu = () => { const DataSolver = [ { - match: asyncRes(EVENT.DRAWER_CLOSED), + match: asyncRes(EVENT.DRAWER.CLOSE), action: () => store.mark({ activeMenu: '' }), }, ] diff --git a/src/containers/unit/Sidebar/store.ts b/src/containers/unit/Sidebar/store.ts index 6788a93ec..e3c34d2f2 100755 --- a/src/containers/unit/Sidebar/store.ts +++ b/src/containers/unit/Sidebar/store.ts @@ -6,12 +6,7 @@ import { types as T, getParent, Instance } from 'mobx-state-tree' import { merge, prop, trim, filter, contains } from 'ramda' -import type { - TRootStore, - TCommunity, - TPagedCommunities, - TAccount, -} from '@/spec' +import type { TRootStore, TCommunity, TAccount } from '@/spec' import { buildLog, markStates, stripMobx, sortByIndex, notEmpty } from '@/utils' /* eslint-disable-next-line */ @@ -52,8 +47,7 @@ const SidebarStore = T.model('SidebarStore', { const root = getParent(self) as TRootStore return root.account.isLogin }, - // get communitiesData(): TPagedCommunities { - get communitiesData(): any { + get communitiesData(): TCommunity[] { const root = getParent(self) as TRootStore const { subscribedCommunities } = root.account const { searchCommunityValue } = self as TStore diff --git a/src/containers/viewer/JobViewer/logic.js b/src/containers/viewer/JobViewer/logic.js index b2738873e..771142770 100755 --- a/src/containers/viewer/JobViewer/logic.js +++ b/src/containers/viewer/JobViewer/logic.js @@ -11,7 +11,7 @@ const log = buildLog('L:JobViewer') const { SR71, $solver, asyncRes, asyncErr } = asyncSuit const sr71$ = new SR71({ - receive: [EVENT.DRAWER_CLOSED], + receive: [EVENT.DRAWER.CLOSE], }) let sub$ = null @@ -68,7 +68,7 @@ const DataSolver = [ }, }, { - match: asyncRes(EVENT.DRAWER_CLOSED), + match: asyncRes(EVENT.DRAWER.CLOSE), action: () => { sr71$.stop() markLoading(false) diff --git a/src/containers/viewer/PostViewer/logic.js b/src/containers/viewer/PostViewer/logic.js index c6b14678e..b877e5f87 100755 --- a/src/containers/viewer/PostViewer/logic.js +++ b/src/containers/viewer/PostViewer/logic.js @@ -11,7 +11,7 @@ const log = buildLog('L:PostViewer') const { SR71, $solver, asyncRes, asyncErr } = asyncSuit const sr71$ = new SR71({ - receive: [EVENT.DRAWER_CLOSED], + receive: [EVENT.DRAWER.CLOSE], }) let sub$ = null @@ -73,7 +73,7 @@ const DataSolver = [ }, }, { - match: asyncRes(EVENT.DRAWER_CLOSED), + match: asyncRes(EVENT.DRAWER.CLOSE), action: () => { sr71$.stop() markLoading(false) @@ -99,7 +99,9 @@ const DataSolver = [ const ErrSolver = [ { match: asyncErr(ERR.GRAPHQL), - action: () => {}, + action: () => { + // + }, }, { match: asyncErr(ERR.TIMEOUT), diff --git a/src/containers/viewer/RepoViewer/logic.js b/src/containers/viewer/RepoViewer/logic.js index d4799ad52..0d41e691b 100755 --- a/src/containers/viewer/RepoViewer/logic.js +++ b/src/containers/viewer/RepoViewer/logic.js @@ -12,7 +12,7 @@ const log = buildLog('L:RepoViewer') const { SR71, $solver, asyncRes, asyncErr } = asyncSuit const sr71$ = new SR71({ - receive: [EVENT.DRAWER_CLOSED, EVENT.SYNC_REPO], + receive: [EVENT.DRAWER.CLOSE, EVENT.SYNC_REPO], }) let sub$ = null diff --git a/src/spec/article.ts b/src/spec/article.ts new file mode 100644 index 000000000..ee44b7ab7 --- /dev/null +++ b/src/spec/article.ts @@ -0,0 +1,37 @@ +import type { TCommunity } from './index' +import type { TUser } from './account' + +export type TArticle = { + id: string + title: string + body: string + author: { + id: string + login: string + nickname: string + avatar: string + } + origialCommunity?: TCommunity + commentsParticipators?: TUser + // ... +} + +export type TJob = { + id: string + title: string + body: string + author: { + id: string + login: string + nickname: string + avatar: string + } +} + +export type TPagedJobs = { + entries: TJob[] + totalCount: number + pageNumber: number + pageSize: number + totalPages: number +} diff --git a/src/spec/index.ts b/src/spec/index.ts index e42b4867d..20cfd5da5 100644 --- a/src/spec/index.ts +++ b/src/spec/index.ts @@ -1,5 +1,5 @@ import type { TRootStore as RootStoreType } from '@/stores/RootStore' -import type { TUser } from './account' +import type { TArticle } from './article' export type { TSIZE, @@ -30,6 +30,8 @@ export type { export type { TGQLError } from './graphql' +export type { TArticle, TJob, TPagedJobs } from './article' + export type { TGALLERY_DEFAULT, TGALLERY_LIST, @@ -53,7 +55,7 @@ export type TRootStore = RootStoreType export type TCommunity = { id: string title: string - logo: string + logo?: string raw: string color?: string index?: number @@ -70,21 +72,6 @@ export type TTag = { group?: string } -export type TArticle = { - id: string - title: string - body: string - author: { - id: string - login: string - nickname: string - avatar: string - } - origialCommunity?: TCommunity - commentsParticipators?: TUser - // ... -} - export type TViewing = TCommunity | TArticle export type TThread = string diff --git a/src/stores/AccountStore/index.ts b/src/stores/AccountStore/index.ts index ff564aff5..899db5ed9 100755 --- a/src/stores/AccountStore/index.ts +++ b/src/stores/AccountStore/index.ts @@ -6,7 +6,12 @@ import { types as T, getParent, Instance } from 'mobx-state-tree' import { merge, clone, remove, insert, findIndex, propEq } from 'ramda' -import type { TRootStore, TCommunity } from '@/spec' +import type { + TRootStore, + TAccount, + TCommunity, + TPagedCommunities, +} from '@/spec' import { markStates, buildLog, stripMobx, BStore } from '@/utils' import { User, EmptyUser, PagedCommunities } from '@/model' @@ -19,14 +24,14 @@ const AccountStore = T.model('AccountStore', { userSubscribedCommunities: T.maybeNull(PagedCommunities), }) .views((self) => ({ - get accountInfo() { + get accountInfo(): TAccount { return { ...stripMobx(self.user), isLogin: self.isValidSession, isValidSession: self.isValidSession, } }, - get subscribedCommunities() { + get subscribedCommunities(): TPagedCommunities { if (!self.userSubscribedCommunities) { return { entries: [] } } @@ -38,10 +43,10 @@ const AccountStore = T.model('AccountStore', { } */ }, - get isLogin() { + get isLogin(): boolean { return self.isValidSession }, - get pageDensity() { + get pageDensity(): number { return parseInt(self.user.customization.displayDensity, 10) }, })) diff --git a/utils/async/sr71.js b/utils/async/sr71.js index 837012b16..5f37fa761 100755 --- a/utils/async/sr71.js +++ b/utils/async/sr71.js @@ -30,32 +30,32 @@ class SR71 { this.initEventSubscription() this.query$ = this.queryInput$.pipe( debounce(() => timer(300)), - switchMap(q => + switchMap((q) => queryPromise(q).pipe( timeoutWith(TIMEOUT_THRESHOLD, TimeoutObservable), - takeUntil(this.stop$) - ) - ) + takeUntil(this.stop$), + ), + ), ) this.mutate$ = this.mutateInput$.pipe( debounce(() => timer(300)), - switchMap(q => + switchMap((q) => mutatePromise(q).pipe( timeoutWith(TIMEOUT_THRESHOLD, TimeoutObservable), - takeUntil(this.stop$) - ) - ) + takeUntil(this.stop$), + ), + ), ) this.restGet$ = this.getInput$.pipe( debounce(() => timer(300)), - switchMap(q => + switchMap((q) => restGetPromise(q).pipe( timeoutWith(TIMEOUT_THRESHOLD, TimeoutObservable), - takeUntil(this.stop$) - ) - ) + takeUntil(this.stop$), + ), + ), ) /* this.event$ = this.eventInput$.debounceTime(100) */ @@ -68,7 +68,7 @@ class SR71 { // Private initEventSubscription() { if (Array.isArray(this.receive)) { - forEach(event => { + forEach((event) => { this.subscriptEvent(event) }, this.receive) } else { @@ -82,7 +82,7 @@ class SR71 { // PubSub.unsubscribe(event) // avoid duplicate subscribe caused by HMR PubSub.subscribe(event, (event, data) => - this.eventInput$.next({ [event]: data }) + this.eventInput$.next({ [event]: data }), ) } diff --git a/utils/helper.ts b/utils/helper.ts index fc01d3e6c..6732e1936 100755 --- a/utils/helper.ts +++ b/utils/helper.ts @@ -10,8 +10,12 @@ import { scrollToHeader } from './dom' import { isString } from './validator' type TSORTABLE_ITEMS = { - color: string + color?: string index?: number + id: string + title: string + raw: string + logo?: string }[] export const Global: any = typeof window !== 'undefined' ? window : {}