feat(thread): add changelog, UI only (#1276)

* feat(changelog): basic layout

* feat(changelog): tag styles

* style(post-item): adjust filter order

* style(changelog-item): more bg color for label, re-org

* refactor(tags-bar): extract spec & constant for label style

* chore: clean up

Author: mydearxym

src/containers/content/CommunityContent/ThreadContent.tsx

@@ -4,7 +4,8 @@ import type { TThread } from '@/spec'
 import { THREAD } from '@/constant'
 
 import ArticlesThread from '@/containers//thread/ArticlesThread'
-import GtdThread from '@/containers//thread/GtdThread'
+// import GtdThread from '@/containers//thread/GtdThread'
+// import ChangeThread from '@/containers//thread/ChangelogThread'
 // import ReposThread from '@/containers/thread/ReposThread'
 import CperMapThread from '@/containers/thread/CperMapThread'
 
@@ -47,8 +48,9 @@ const ThreadContent: FC<TProps> = ({ thread }) => {
       return <CperMapThread />
 
     default:
-      return <GtdThread />
-    // return <ArticlesThread />
+      // return <GtdThread />
+      // return <ChangeThread />
+      return <ArticlesThread />
   }
 }
 

src/containers/thread/ChangelogThread/Filters.tsx

@@ -0,0 +1,21 @@
+import { FC, memo } from 'react'
+
+import { Br } from '@/widgets/Common'
+import TagsBar from '@/containers/unit/TagsBar'
+import { TAG_MODE } from '@/constant'
+
+import { Wrapper, SearchInput, SearchBox } from './styles/filters'
+
+const Filters: FC = () => {
+  return (
+    <Wrapper>
+      <SearchBox>新增 更新记录</SearchBox>
+      <Br bottom={15} />
+      <SearchInput placeholder="搜索内容..." />
+      <Br bottom={30} />
+      <TagsBar onSelect={() => console.log} mode={TAG_MODE.LABEL} />
+    </Wrapper>
+  )
+}
+
+export default memo(Filters)

src/containers/thread/ChangelogThread/index.tsx

@@ -0,0 +1,44 @@
+/* *
+ * ChangelogThread
+ *
+ */
+
+import { FC } from 'react'
+
+// import { buildLog } from '@/utils/logger'
+import { bond } from '@/utils/mobx'
+
+import ChangelogItem from '@/widgets/ChangelogItem'
+import Filters from './Filters'
+
+import type { TStore } from './store'
+import { Wrapper, MainWrapper } from './styles'
+import { useInit } from './logic' /* eslint-disable-next-line */
+
+// const log = buildLog('C:ChangelogThread')
+
+type TProps = {
+  changelogThread?: TStore
+  testid?: string
+}
+
+const ChangelogThreadContainer: FC<TProps> = ({
+  changelogThread: store,
+  testid = 'changelog-thread',
+}) => {
+  useInit(store)
+
+  return (
+    <Wrapper testid={testid}>
+      <MainWrapper>
+        <ChangelogItem />
+        <ChangelogItem />
+        <ChangelogItem />
+        <ChangelogItem />
+      </MainWrapper>
+      <Filters />
+    </Wrapper>
+  )
+}
+
+export default bond(ChangelogThreadContainer, 'changelogThread') as FC<TProps>

src/containers/thread/ChangelogThread/logic.ts

@@ -0,0 +1,28 @@
+import { useEffect } from 'react'
+// import { } from 'ramda'
+
+import { buildLog } from '@/utils/logger'
+
+// import S from './schma'
+import type { TStore } from './store'
+
+let store: TStore | undefined
+
+/* eslint-disable-next-line */
+const log = buildLog('L:ChangelogThread')
+
+export const someMethod = (): void => {
+  //
+}
+
+// ###############################
+// init & uninit handlers
+// ###############################
+
+export const useInit = (_store: TStore): void => {
+  useEffect(() => {
+    store = _store
+    log('useInit: ', store)
+    // return () => store.reset()
+  }, [_store])
+}

src/containers/thread/ChangelogThread/schema.ts

@@ -0,0 +1,23 @@
+import { gql } from '@urql/core'
+
+const simpleMutation = gql`
+  mutation ($id: ID!) {
+    post(id: $id) {
+      id
+    }
+  }
+`
+const simpleQuery = gql`
+  query ($filter: filter!) {
+    post(id: $id) {
+      id
+    }
+  }
+`
+
+const schema = {
+  simpleMutation,
+  simpleQuery,
+}
+
+export default schema

src/containers/thread/ChangelogThread/store.ts

@@ -0,0 +1,31 @@
+/*
+ * ChangelogThread store
+ */
+
+import { types as T, getParent, Instance } from 'mobx-state-tree'
+// import {} from 'ramda'
+
+import type { TCommunity, TRootStore } from '@/spec'
+import { buildLog } from '@/utils/logger'
+import { markStates, toJS } from '@/utils/mobx'
+
+/* eslint-disable-next-line */
+const log = buildLog('S:ChangelogThread')
+
+const ChangelogThread = T.model('ChangelogThread', {})
+  .views((self) => ({
+    get curCommunity(): TCommunity {
+      const root = getParent(self) as TRootStore
+
+      return toJS(root.viewing.community)
+    },
+  }))
+  .actions((self) => ({
+    mark(sobj: Record<string, unknown>): void {
+      markStates(sobj, self)
+    },
+  }))
+
+export type TStore = Instance<typeof ChangelogThread>
+
+export default ChangelogThread

src/containers/thread/ChangelogThread/styles/filters.ts

@@ -0,0 +1,33 @@
+import styled from 'styled-components'
+
+import type { TTestable } from '@/spec'
+
+import Input from '@/widgets/Input'
+import Button from '@/widgets/Buttons/Button'
+
+import css, { theme } from '@/utils/css'
+
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TTestable>`
+  ${css.flexColumn()};
+  width: 200px;
+  min-width: 200px;
+  color: ${theme('thread.articleDigest')};
+  padding-top: 25px;
+`
+export const SearchInput = styled(Input)`
+  width: 180px;
+  font-size: 13px;
+  text-align: center;
+  border-radius: 15px;
+
+  ::placeholder {
+    color: ${theme('form.text')};
+    opacity: 0.6;
+  }
+`
+export const SearchBox = styled(Button)`
+  width: 180px;
+  border-radius: 15px;
+`

src/containers/thread/ChangelogThread/styles/index.ts

@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+
+import type { TTestable } from '@/spec'
+import css from '@/utils/css'
+
+export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
+  'data-test-id': testid,
+}))<TTestable>`
+  ${css.flex()};
+  width: 100%;
+`
+export const MainWrapper = styled.div`
+  flex-grow: 1;
+  width: 100%;
+  min-height: 500px;
+
+  background: transparent;
+  border-radius: 6px;
+  margin-top: 12px;
+  padding-left: 25px;
+  padding-right: 80px;
+  margin-right: 65px;
+  border-right: 1px solid #eae9e9;
+`

src/containers/thread/ChangelogThread/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import ChangelogThread from '../index'
+
+describe('TODO <ChangelogThread />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
+  })
+})

src/containers/thread/ChangelogThread/tests/store.test.js

@@ -0,0 +1,10 @@
+/*
+ * ChangelogThread store test
+ *
+ */
+
+// import ChangelogThread from '../index'
+
+it('TODO: store test ChangelogThread', () => {
+  expect(1 + 1).toBe(2)
+})