logux · ai · Apr 10, 2022 · Mar 28, 2022 · Mar 28, 2022 · Mar 28, 2022
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+dist
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,6 @@
+{
+  "extends": "@logux/eslint-config/ts",
+  "rules": {
+    "prefer-let/prefer-let": "off"
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+pnpm-debug.log*
+
+dist
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+  "arrowParens": "avoid",
+  "jsxSingleQuote": false,
+  "quoteProps": "consistent",
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none"
+}
diff --git a/api/index.ts b/api/index.ts
@@ -0,0 +1,13 @@
+export const subprotocol = '1.0.0'
+
+export type User = {
+  id: string
+  name: string
+  password: string
+}
+
+export type Task = {
+  text: string
+  completed: boolean
+  authorId?: string
+}
diff --git a/client/.postcssrc.json b/client/.postcssrc.json
@@ -0,0 +1,7 @@
+{
+  "plugins": {
+    "postcss-normalize": {},
+    "postcss-nested": {},
+    "autoprefixer": {}
+  }
+}
diff --git a/client/.stylelintignore b/client/.stylelintignore
@@ -0,0 +1 @@
+dist
diff --git a/client/.stylelintrc b/client/.stylelintrc
@@ -0,0 +1,15 @@
+{
+  "extends": [
+    "@logux/stylelint-config"
+  ],
+  "rules": {
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "import-normalize"
+        ]
+      }
+    ]
+  }
+}
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <link href="https://logux.io/favicon.ico" rel="icon"/>
+  <title>Logux ToDo Example</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="/src/main.tsx" type="module"></script>
+</body>
+</html>
diff --git a/client/package.json b/client/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "logux-to-do-example-client",
+  "private": true,
+  "engines": {
+    "node": ">=16"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint:css": "stylelint '**/*.css' --fix"
+  },
+  "dependencies": {
+    "@logux/client": "^0.15.2",
+    "@logux/core": "^0.7.3",
+    "@nanostores/react": "^0.1.5",
+    "@nanostores/router": "^0.3.1",
+    "@vitejs/plugin-react": "^1.0.7",
+    "autoprefixer": "^10.4.4",
+    "browserslist": "^4.20.2",
+    "classnames": "^2.3.1",
+    "nanoid": "^3.3.2",
+    "nanostores": "^0.5.12",
+    "postcss": "^8.4.12",
+    "postcss-nested": "^5.0.5",
+    "postcss-normalize": "^10.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "stylelint": "^14.6.1",
+    "vite": "^2.8.0"
+  },
+  "devDependencies": {
+    "@logux/stylelint-config": "^0.9.0",
+    "@types/react": "^17.0.33",
+    "@types/react-dom": "^17.0.10",
+    "typescript": "^4.6.3"
+  }
+}
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -0,0 +1,32 @@
+import { ClientContext, ErrorsContext } from '@logux/client/react'
+import { useStore } from '@nanostores/react'
+
+import './styles/theme.css'
+import './styles/base.css'
+
+import { AccessDeniedPage } from './pages/AccessDeniedPage.js'
+import { ErrorPage } from './pages/ErrorPage.js'
+import { NotFoundPage } from './pages/NotFoundPage.js'
+import { Layout } from './components/Layout/Layout.js'
+import Routes from './components/Routes/Routes.js'
+import { clientStore } from './stores/logux-client.js'
+
+const errorPages = {
+  NotFound: NotFoundPage,
+  AccessDenied: AccessDeniedPage,
+  Error: ErrorPage
+}
+
+export const App = (): JSX.Element => {
+  let client = useStore(clientStore)
+
+  return (
+    <ErrorsContext.Provider value={errorPages}>
+      <ClientContext.Provider value={client}>
+        <Layout>
+          <Routes />
+        </Layout>
+      </ClientContext.Provider>
+    </ErrorsContext.Provider>
+  )
+}
diff --git a/client/src/components/ControlPanel/ControlPanel.module.css b/client/src/components/ControlPanel/ControlPanel.module.css
@@ -0,0 +1,78 @@
+.control-panel {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  padding: 10px 15px;
+  color: var(--dark-gray);
+  border-top: 1px solid var(--light-gray);
+
+  &::before {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 50px;
+    content: "";
+    box-shadow:
+      0 1px 1px var(--gray),
+      0 8px 0 -3px var(--light-gray-100),
+      0 9px 1px -3px var(--gray),
+      0 16px 0 -6px var(--light-gray-100),
+      0 17px 2px -6px var(--gray);
+  }
+}
+
+.items-count {
+  position: relative;
+  align-self: center;
+  justify-self: start;
+}
+
+.filters {
+  position: relative;
+  display: flex;
+  justify-self: center;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.filters-item-content {
+  padding: 3px 7px;
+  margin: 3px;
+  font-weight: 300;
+  color: var(--dark-gray);
+  text-decoration: none;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 3px;
+
+  &:hover {
+    border-color: var(--accent-300);
+  }
+
+  &:focus {
+    border-color: var(--accent-200);
+    outline: none;
+  }
+
+  &_selected {
+    border-color: var(--accent-200);
+  }
+}
+
+.clear-action {
+  position: relative;
+  justify-self: end;
+  padding: 3px 7px;
+  font-weight: 300;
+  color: var(--dark-gray);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 3px;
+
+  &:hover,
+  &:focus {
+    border-color: var(--accent-300);
+  }
+}
diff --git a/client/src/components/ControlPanel/ControlPanel.tsx b/client/src/components/ControlPanel/ControlPanel.tsx
@@ -0,0 +1,83 @@
+import { useStore } from '@nanostores/react'
+import cn from 'classnames'
+import { useClient, useFilter } from '@logux/client/react'
+import { deleteSyncMapById } from '@logux/client'
+import { useCallback } from 'react'
+
+import { Filter, filterStore } from '../../stores/filter.js'
+import { tasksStore } from '../../stores/tasks.js'
+import { authStore } from '../../stores/auth.js'
+import styles from './ControlPanel.module.css'
+
+export const ControlPanel = (): JSX.Element => {
+  const client = useClient()
+  const filter = useStore(filterStore)
+  const { id: authorId } = useStore(authStore)
+  const tasks = useFilter(tasksStore, { authorId })
+  const activeTasksCount = tasks.list.filter(task => !task.completed).length
+
+  const handleClearCompletedClick = useCallback(() => {
+    const tasksToDelete = tasks.list.filter(task => task.completed)
+
+    tasksToDelete.forEach(task =>
+      deleteSyncMapById(client, tasksStore, task.id)
+    )
+  }, [client, tasks])
+
+  return (
+    <footer className={styles.controlPanel}>
+      <span className={styles.itemsCount}>{activeTasksCount} items left</span>
+      <ul className={styles.filters}>
+        <li className={styles.filtersItem}>
+          <button
+            type="button"
+            className={cn(
+              styles.filtersItemContent,
+              filter === Filter.all && styles.filtersItemContentSelected
+            )}
+            onClick={() => {
+              filterStore.set(Filter.all)
+            }}
+          >
+            All
+          </button>
+        </li>
+        <li className={styles.filtersItem}>
+          <button
+            type="button"
+            className={cn(
+              styles.filtersItemContent,
+              filter === Filter.active && styles.filtersItemContentSelected
+            )}
+            onClick={() => {
+              filterStore.set(Filter.active)
+            }}
+          >
+            Active
+          </button>
+        </li>
+        <li className={styles.filtersItem}>
+          <button
+            type="button"
+            className={cn(
+              styles.filtersItemContent,
+              filter === Filter.completed && styles.filtersItemContentSelected
+            )}
+            onClick={() => {
+              filterStore.set(Filter.completed)
+            }}
+          >
+            Completed
+          </button>
+        </li>
+      </ul>
+      <button
+        type="button"
+        className={styles.clearAction}
+        onClick={handleClearCompletedClick}
+      >
+        Clear completed
+      </button>
+    </footer>
+  )
+}
diff --git a/client/src/components/Layout/Layout.module.css b/client/src/components/Layout/Layout.module.css
@@ -0,0 +1,30 @@
+.layout {
+  width: 550px;
+  margin: 0 auto;
+}
+
+.title {
+  display: block;
+  margin: 8px 0;
+  font-size: 100px;
+  font-weight: 100;
+  color: var(--accent-200);
+  text-align: center;
+}
+
+.footer {
+  margin: 65px auto 0;
+  font-size: 14px;
+  color: var(--gray);
+  text-align: center;
+}
+
+.footer-link {
+  font-weight: 400;
+  color: inherit;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}