feat(features/settings): add settings page with displayName change logic

HOW-68

Author: sergeysova

babel.config.js

@@ -1,6 +1,10 @@
 module.exports = {
   presets: ["react-app"],
-  plugins: ["react-hot-loader/babel", "styled-components"],
+  plugins: [
+    "react-hot-loader/babel",
+    "styled-components",
+    "@babel/proposal-optional-chaining",
+  ],
   env: {
     development: {
       plugins: [

package.json

@@ -73,7 +73,6 @@
     "browser-cookies": "^1.2.0",
     "case-sensitive-paths-webpack-plugin": "2.2.0",
     "commitizen": "^3.0.7",
-    "connected-react-router": "^6.3.1",
     "css-loader": "1.0.0",
     "cz-customizable": "^5.3.0",
     "date-fns": "^1.30.1",
@@ -158,5 +157,8 @@
     "webpack-manifest-plugin": "2.0.4",
     "webpackbar": "^3.1.5",
     "workbox-webpack-plugin": "3.6.3"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.2.0"
   }
 }

src/api/account.js

@@ -1,16 +1,48 @@
 // @flow
 import { request } from "@features/common"
 
-type RegisterData = {
+export type CurrentUser = {|
+  id: number,
+  displayName: string,
+  email: string,
+|}
+
+export type ExternalUser = {|
+  id: number,
+  displayName: string,
+|}
+
+export type User = ExternalUser | CurrentUser
+
+type RegisterData = {|
   email: string,
   password: string,
-}
+|}
 /**
  * https://github.com/howtocards/frontend/tree/master/mock-server/server#post-account-create-user-account
  */
 const createAccount = (registerData: RegisterData): Promise<number> =>
   request("POST", "/account/", { body: registerData })
 
+export type Settings = {|
+  displayName: string | null,
+  gravatarEmail: string | null,
+|}
+
+export type UpdateSettings = {|
+  displayName?: string,
+|}
+
+const updateSettings = (
+  data: UpdateSettings,
+): Promise<{ settings: Settings }> =>
+  request("PUT", "/account/settings/", { body: data })
+
+const getSettings = (): Promise<{ settings: Settings }> =>
+  request("GET", "/account/settings/")
+
 export const accountApi = {
   createAccount,
+  updateSettings,
+  getSettings,
 }

src/features/settings/index.js

@@ -0,0 +1,2 @@
+// @flow
+export * from "./templates"

src/features/settings/templates/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { SettingsTemplate } from "./settings"

src/features/settings/templates/settings.js

@@ -0,0 +1,47 @@
+// @flow
+import * as React from "react"
+// TODO: remove styles
+import styled from "styled-components"
+
+import { CommonContentTemplate } from "@features/common"
+import { Container, Card, H1 } from "@howtocards/ui"
+
+type Props = {
+  children: React.Node,
+  title?: string,
+}
+
+export const SettingsTemplate = ({ children, title }: Props) => (
+  <CommonContentTemplate>
+    <Container>
+      <Main>
+        <Card>
+          {title && <H1>{title}</H1>}
+          {children}
+        </Card>
+      </Main>
+    </Container>
+  </CommonContentTemplate>
+)
+
+SettingsTemplate.defaultProps = {
+  title: undefined,
+}
+
+const Main = styled.main`
+  display: flex;
+  flex-direction: column;
+  margin-top: 2rem;
+  flex-grow: 1;
+  align-items: center;
+
+  ${Card} {
+    max-width: 60rem;
+    width: 100%;
+  }
+
+  ${H1} {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+`

src/features/users/model/current.js

@@ -7,12 +7,12 @@ import {
   type Store,
   combine,
 } from "effector"
+import { type User } from "@api/account"
 import { createFetching, type Fetching } from "@lib/fetching"
 import { $cardsRegistry, cardsToObject } from "@features/cards"
 // TODO: fix type reexport
 import { type Card } from "../../cards/types"
 import { usersApi } from "../api"
-import { type User } from "../types"
 
 export const pageMounted = createEvent<{ userId: number }>()
 
@@ -27,7 +27,7 @@ type Cards = {
   created: Card[],
 }
 const loadCards: Effect<number, Cards, void> = createEffect()
-export const cardsFetching: Fetching<User, void> = createFetching(
+export const cardsFetching: Fetching<Cards, void> = createFetching(
   loadCards,
   "loading",
 )

src/features/users/types.js

@@ -1,12 +0,0 @@
-export type CurrentUser = {
-  id: number,
-  displayName: string,
-  email: string,
-}
-
-export type ExternalUser = {
-  id: number,
-  displayName: string,
-}
-
-export type User = ExternalUser | CurrentUser

src/pages/settings/page.js

@@ -1,4 +1,48 @@
 // @flow
 import * as React from "react"
+import styled from "styled-components"
 
-export const SettingsPage = () => <div />
+import { SettingsTemplate } from "@features/settings"
+import { H4 } from "@howtocards/ui"
+import { pageMounted, pageUnmounted } from "./store"
+
+export const SettingsPage = () => {
+  React.useEffect(() => (pageMounted(), pageUnmounted))
+
+  return (
+    <SettingsTemplate title="Personal settings">
+      <NameSection />
+      <AvatarSection />
+    </SettingsTemplate>
+  )
+}
+
+const NameSection = () => {
+  return (
+    <FormSection title="Display name">
+      Display name form here with some logic
+    </FormSection>
+  )
+}
+
+const AvatarSection = () => {
+  return (
+    <FormSection title="Avatar">
+      Avatar changing form with some logic
+    </FormSection>
+  )
+}
+
+type FormSectionProps = {
+  title: string,
+  children: React.Node,
+}
+
+const FormSection = ({ title, children }: FormSectionProps) => (
+  <>
+    <H4>{title}</H4>
+    <ContentBlock>{children}</ContentBlock>
+  </>
+)
+
+const ContentBlock = styled.div``

src/pages/settings/store.js

@@ -1 +1,78 @@
 // @flow
+import {
+  createEvent,
+  createStore,
+  type Store,
+  createEffect,
+  forward,
+  sample,
+  combine,
+  createStoreObject,
+} from "effector"
+import { accountApi, type Settings } from "@api/account"
+
+/**
+ * 1. load user settings object
+ * 2. mark page ready
+ */
+
+type InputEvent = SyntheticEvent<HTMLInputElement>
+type ButtonEvent = SyntheticEvent<HTMLButtonElement>
+
+export const pageMounted = createEvent<void>()
+export const pageUnmounted = createEvent<void>()
+
+export const nameChanged = createEvent<InputEvent>()
+export const nameSubmitted = createEvent<ButtonEvent>()
+
+export const avaChangePressed = createEvent<ButtonEvent>()
+export const avaEmailChanged = createEvent<InputEvent>()
+export const avaEmailSubmitted = createEvent<ButtonEvent>()
+
+const loadSettings = createEffect()
+const saveSettings = createEffect()
+
+export const $settings: Store<?Settings> = createStore(null)
+export const $isSettingsReady = $settings.map<boolean>(Boolean)
+
+// Stores for inputs
+
+export const $name: Store<string> = createStore("")
+export const $avaEmail: Store<string> = createStore("")
+
+forward({
+  from: pageMounted,
+  to: loadSettings,
+})
+
+loadSettings.use(accountApi.getSettings)
+saveSettings.use(accountApi.updateSettings)
+
+$settings
+  .on(loadSettings.done, (_, { result }) => result.settings)
+  .on(saveSettings.done, (_, { result }) => result.settings)
+  .reset(pageMounted, pageUnmounted)
+
+$name
+  .on($settings.updates, (_, settings) => settings?.displayName || "")
+  .on(nameChanged, (_, event) => event.currentTarget.value)
+  .reset(pageUnmounted)
+  .watch(nameSubmitted, (displayName) => {
+    saveSettings({ displayName })
+  })
+
+$avaEmail
+  .on($settings.updates, (_, settings) => settings?.gravatarEmail || "")
+  .on(avaEmailChanged, (_, event) => event.currentTarget.value)
+  .reset(pageUnmounted)
+  .watch(avaEmailSubmitted, (_gravatarEmail) => {
+    // HOW-62
+    // saveSettings({ gravatarEmail })
+  })
+
+$settings.watch((settings) => console.log("SETTINGS", settings))
+$isSettingsReady.watch((settingsReady) =>
+  console.log("settingsReady", settingsReady),
+)
+$name.watch((name) => console.log("name", name))
+$avaEmail.watch((avaEmail) => console.log("avaEmail", avaEmail))