first commit

Author: zhengxs2018

.gitignore

@@ -0,0 +1,6 @@
+.build
+build
+web_modules
+node_modules
+
+.history/

.prettierignore

@@ -0,0 +1,8 @@
+.history
+build
+
+**/*.md
+**/*.svg
+**/*.html
+
+package.json

.prettierrc

@@ -0,0 +1,13 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "jsxBracketSameLine": true,
+  "printWidth": 120,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}

.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "streetsidesoftware.code-spell-checker",
+    "eamodio.gitlens",
+    "xyz.local-history",
+    "editorconfig.editorconfig",
+    "christian-kohler.npm-intellisense",
+    "axetroy.vscode-npm-import-package-version"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,31 @@
+{
+  "telemetry.enableCrashReporter": false,
+  "telemetry.enableTelemetry": false,
+  "grunt.autoDetect": "off",
+  "gulp.autoDetect": "off",
+  "jake.autoDetect": "off",
+  "search.followSymlinks": false,
+  "search.exclude": {
+    "**/.tsbuildinfo": true,
+    "**/.tsbuildinfo.*": true,
+    "**/.history": true,
+    "**/build/**": true
+  },
+  "files.autoSave": "afterDelay",
+  "files.autoSaveDelay": 1500,
+  "files.insertFinalNewline": true,
+  "files.trimTrailingWhitespace": true,
+  "files.eol": "\n",
+  "files.exclude": {
+    "**/.DS_Store": true,
+    "**/.history": true
+  },
+  "files.watcherExclude": {
+    "**/.history/**": true,
+    "**/build/**": true
+  },
+  "editor.minimap.enabled": false,
+  "cSpell.words": ["devtools"],
+  "cSpell.ignoreWords": ["tslib"],
+  "cSpell.ignorePaths": [".history", ".vscode", "build", "package-lock.json", "yarn.lock"]
+}

README.md

@@ -0,0 +1,54 @@
+# react-app
+
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+
+## 目录结构
+
+```text
+Project/
+├── README.md
+├── package.json
+├── tsconfig.json
+├── babel.config.json
+├── snowpack.config.js
+├── public/
+└── src/
+  ├── components/
+  ├── hooks/
+  ├── lib/
+  ├── mocks/
+  ├── models/
+  ├── services/
+  ├── store/
+  ├── styles/
+  ├── views/
+  ├── App.tsx
+  ├── index.tsx
+  └── router.tsx
+```
+
+## 开发步骤
+
+你需要安装 Node.js 的版本为 6+.
+
+克隆此仓库后运行:
+
+```bash
+# 安装依赖
+$ npm install
+
+# 本地开发
+$ npm run dev
+
+# 构建代码
+$ npm run build
+```
+
+在 package.json 文件的 scripts 部分还有一些其他脚本可用.
+
+## 运行单元测试
+
+```bash
+# 单元测试
+$ npm test
+```

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@snowpack/app-scripts-react/babel.config.json"
+}

jest.config.js

@@ -0,0 +1,5 @@
+const baseConfig = require('@snowpack/app-scripts-react/jest.config.js')()
+
+module.exports = {
+  ...baseConfig,
+}

jest.setup.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect'

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "snowpack-react-app",
+  "private": true,
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "snowpack dev",
+    "build": "snowpack build",
+    "test": "jest",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json}\"",
+    "lint": "prettier --check \"**/*.{js,jsx,ts,tsx,json}\""
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "dependencies": {
+    "axios": "^0.19.2",
+    "lodash-es": "^4.17.15",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "react-redux": "^7.2.0",
+    "react-router-config": "^5.1.1",
+    "react-router-dom": "^5.2.0",
+    "redux": "^4.0.5",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@snowpack/app-scripts-react": "^1.2.0",
+    "@testing-library/jest-dom": "^5.5.0",
+    "@testing-library/react": "^10.0.3",
+    "@types/lodash-es": "^4.17.3",
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-redux": "^7.1.9",
+    "@types/react-router-config": "^5.0.1",
+    "@types/react-router-dom": "^5.1.5",
+    "babel-plugin-transform-async-to-promises": "^0.8.15",
+    "better-mock": "^0.2.5",
+    "jest": "^25.4.0",
+    "lint-staged": "^10.2.11",
+    "node-sass": "^4.14.1",
+    "prettier": "^2.0.0",
+    "snowpack": "^2.5.0",
+    "typescript": "^3.8.0",
+    "yorkie": "^2.0.0"
+  },
+  "author": "zhengxs2018 <[email protected]>",
+  "license": "MIT"
+}

public/favicon.ico

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="" />
+    <title>React web app</title>
+
+    <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
+    <script>
+      if ('addEventListener' in document) {
+        document.addEventListener('DOMContentLoaded', function() {
+          FastClick.attach(document.body);
+        }, false);
+      }
+      if(!window.Promise) {
+        document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
+      }
+    </script>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/_dist_/index.js"></script>
+  </body>
+</html>

public/index.html

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

public/robots.txt

@@ -0,0 +1,5 @@
+module.exports = {
+  extends: '@snowpack/app-scripts-react',
+  scripts: {},
+  plugins: [],
+}

snowpack.config.js

@@ -0,0 +1,15 @@
+import React, { FC } from 'react'
+import { Provider } from 'react-redux'
+
+import store from './store/index'
+import { RouterView } from './router'
+
+export type AppState = {}
+
+const App: FC = () => (
+  <Provider store={store}>
+    <RouterView />
+  </Provider>
+)
+
+export default App

src/App.tsx

@@ -0,0 +1,42 @@
+import React, { FC } from 'react'
+
+import { connect } from 'react-redux'
+
+import type { RootState } from 'src/store/types'
+import { Categories, loadAllCategories } from 'src/store/actions/app'
+
+import UISelect from 'src/components/ui-select'
+
+export type BizCategorySelectState = {
+  categories: Categories
+}
+
+export type BizCategorySelectProps = {
+  value?: string | ReadonlyArray<string> | number
+  onInput?: (value: string) => void
+}
+
+const BizCategorySelect: FC<BizCategorySelectState & BizCategorySelectProps> = ({ value, categories, onInput }) => {
+  const onProxyChange = (e: React.FormEvent<HTMLSelectElement>) => {
+    onInput && onInput(((e.target as unknown) as { value: string }).value)
+  }
+
+  return (
+    <UISelect
+      {...categories}
+      value={value}
+      valueKey="id"
+      labelKey="name"
+      onChange={onProxyChange}
+      onRefresh={loadAllCategories}
+    />
+  )
+}
+
+function mapStateToProps(state: RootState): BizCategorySelectState {
+  return { categories: state.app.categories }
+}
+
+export default connect<BizCategorySelectState, {}, BizCategorySelectProps, RootState>(mapStateToProps)(
+  BizCategorySelect,
+)

src/biz/components/biz-category-select.tsx

@@ -0,0 +1,48 @@
+import React, { FC } from 'react'
+
+import { connect } from 'react-redux'
+
+import type { RootState } from 'src/store/types'
+
+import type { User } from 'src/biz/models/user'
+import { AuthStatus, UserStatus } from 'src/store/enums'
+
+export type BizMeState = {
+  info?: User
+  message?: string | null
+  authStatus: AuthStatus
+  userStatus: UserStatus
+}
+
+const BizMe: FC<BizMeState> = ({ authStatus, info, userStatus, message }) => {
+  if (authStatus === AuthStatus.LOADING) {
+    return <div>正在查询登录状态</div>
+  } else if (authStatus === AuthStatus.NOT_AUTHORIZED) {
+    return <div>正在注销登录状态</div>
+  } else if (authStatus === AuthStatus.UNKNOWN) {
+    return <div>用户未登录，请先登录</div>
+  } else if (authStatus === AuthStatus.CONNECTED) {
+    if (userStatus === UserStatus.LOADING) {
+      return <div>正在加载用户信息</div>
+    } else if (userStatus === UserStatus.ERROR) {
+      return <div>加载用户失败：{message}</div>
+    } else if (userStatus === UserStatus.UNKNOWN) {
+      return <div>匿名用户</div>
+    } else if (userStatus === UserStatus.CONNECTED) {
+      return <div>{info?.nickname ?? info?.username}</div>
+    }
+  }
+
+  return <div>未知错误</div>
+}
+
+function mapStateToProps(state: RootState): BizMeState {
+  return {
+    info: state.me.info,
+    message: state.me.message,
+    authStatus: state.app.authStatus,
+    userStatus: state.me.status,
+  }
+}
+
+export default connect<BizMeState, {}, {}, RootState>(mapStateToProps)(BizMe)

src/biz/components/biz-me.tsx

@@ -0,0 +1,4 @@
+export interface Permission {
+  id: number
+  code: string
+}

src/biz/models/access.ts

@@ -0,0 +1,6 @@
+export interface Bill {
+  type: number
+  time: number
+  category: string
+  amount: number
+}

src/biz/models/bill.ts

@@ -0,0 +1,5 @@
+export interface Category {
+  id: string
+  type: number
+  name: string
+}

src/biz/models/category.ts

@@ -0,0 +1,6 @@
+export interface User {
+  id: number
+  username: string
+  avatar: string
+  nickname: string
+}

src/biz/models/user.ts

@@ -0,0 +1,8 @@
+import type { Bill } from 'src/biz/models/bill'
+
+import { usePaginated } from 'src/hooks/usePaginated'
+
+/**
+ * 账单列表查询
+ */
+export const useBillListByPagination = usePaginated<Bill>('/api/bill/list')