move @users to effector. Remove redux

package.json

@@ -132,18 +132,12 @@
     "react-dev-utils": "^7.0.3",
     "react-dom": "^16.8.3",
     "react-hot-loader": "^4.7.1",
-    "react-redux": "^6.0.1",
     "react-router": "^4.4.0-beta.8",
     "react-router-config": "^4.4.0-beta.8",
     "react-router-dom": "^4.4.0-beta.6",
     "react-select": "^2.4.1",
     "react-test-renderer": "^16.8.3",
     "react-testing-library": "^6.0.0",
-    "recompose": "^0.30.0",
-    "redux": "^4.0.1",
-    "redux-execute": "^2.0.1",
-    "redux-symbiote": "^3.0.2",
-    "reselect": "^4.0.0",
     "resolve": "1.10.0",
     "sass-loader": "7.1.0",
     "slate": "^0.44.10",
@@ -154,7 +148,6 @@
     "styled-components": "^4.1.3",
     "styled-icons": "^7.4.0",
     "styled-normalize": "^8.0.6",
-    "symbiote-fetching": "^0.7.0",
     "terser-webpack-plugin": "1.2.2",
     "typescript": "^3.4.1",
     "url-loader": "1.1.2",

src/features/cards/atoms/title-input.js

@@ -2,10 +2,13 @@ import styled from "styled-components"
 
 export const TitleInput = styled.input`
   box-sizing: border-box;
-  background-color: none;
+  background-color: inherit;
+  color: currentColor;
   outline: none;
   box-shadow: none;
   border: none;
   font-size: 1.8em;
   margin-bottom: 1rem;
+
+  ${({ theme }) => theme.embed.card}
 `

src/features/cards/index.js

@@ -1,8 +1,10 @@
 import "./model"
 
+import { type Card } from "./types"
+
 export { $registry as $cardsRegistry } from "./model/registry.store"
-export { actions as registryActions } from "./symbiotes/registry"
+export { cardsToObject } from "./model/registry.model"
 export { CardItem, CardsList } from "./organisms"
-export { cardsRegistrySelector } from "./selectors"
 export { cardsRoutes } from "./routes"
-export { reducer as cardsReducer } from "./symbiotes"
+
+export { Card }

src/features/cards/model/create.js

@@ -11,7 +11,7 @@ import { cardsApi } from "../api"
 
 export const titleChanged = createEvent()
 export const contentChanged = createEvent()
-export const submitButtonPressed = createEvent()
+export const formSubmitted = createEvent()
 export const pageUnmounted = createEvent()
 
 const cardCreate = createEffect()
@@ -32,12 +32,12 @@ $title.on(titleChanged.map(trimEvent), (_, title) => title)
 $content.on(contentChanged, (_, content) => content)
 $form.reset(pageUnmounted)
 
-submitButtonPressed.watch(() => {
+formSubmitted.watch(() => {
   cardCreate($form.getState())
 })
 
 cardCreate.use((form) => cardsApi.create(form))
 
-cardCreate.done.watch(() => {
-  history.push("/")
+cardCreate.done.watch(({ result: card }) => {
+  history.push(`/open/${card.id}`)
 })

src/features/cards/model/edit.js

@@ -2,7 +2,7 @@
 import { createEvent, createEffect, createStore } from "effector"
 import type { Effect, Store } from "effector"
 
-import { createFetching } from "@lib/fetching"
+import { createFetching, type Fetching } from "@lib/fetching"
 import { history } from "@lib/routing"
 import { cardsApi } from "../api"
 import type { Card } from "../types"
@@ -13,15 +13,23 @@ export const contentChanged = createEvent<mixed>()
 export const savePressed = createEvent<void>()
 
 export const cardLoading: Effect<number, { card: Card }, void> = createEffect()
-export const cardFetching = createFetching(cardLoading, "loading", {
-  reset: pageUnloaded,
-})
+export const cardFetching: Fetching<*, void> = createFetching(
+  cardLoading,
+  "loading",
+  {
+    reset: pageUnloaded,
+  },
+)
 
 type SaveCard = { id: number, title: string, content: mixed }
 export const cardSaving: Effect<SaveCard, { card: Card }, void> = createEffect()
-export const cardSaveFetching = createFetching(cardSaving, "initial", {
-  reset: pageUnloaded,
-})
+export const cardSaveFetching: Fetching<*, void> = createFetching(
+  cardSaving,
+  "initial",
+  {
+    reset: pageUnloaded,
+  },
+)
 
 export const $card: Store<?Card> = createStore(null)
 export const $title: Store<?string> = $card.map((card) => card && card.title)

src/features/cards/model/home.js

@@ -2,7 +2,7 @@
 import { createEvent, createEffect, createStore } from "effector"
 import type { Event, Effect, Store } from "effector"
 
-import { createFetching } from "@lib/fetching"
+import { createFetching, type Fetching } from "@lib/fetching"
 import { cardsApi } from "../api"
 import type { Card } from "../types"
 import { $registry } from "./registry.store"
@@ -11,7 +11,10 @@ import { cardsToObject } from "./registry.model"
 export const pageReady: Event<void> = createEvent()
 
 const homeCardsLoading: Effect<void, Card[], void> = createEffect()
-export const homeCardsFetching = createFetching(homeCardsLoading, "loading")
+export const homeCardsFetching: Fetching<*, void> = createFetching(
+  homeCardsLoading,
+  "loading",
+)
 
 export const $cardsIds: Store<number[]> = createStore([])
 

src/features/cards/model/view.js

@@ -2,7 +2,7 @@
 import { createEffect, createStore, createEvent } from "effector"
 import type { Event, Effect, Store } from "effector"
 
-import { createFetching } from "@lib/fetching"
+import { createFetching, type Fetching } from "@lib/fetching"
 import { cardsApi } from "../api"
 import type { Card } from "../types"
 import { $registry } from "./registry.store"
@@ -15,7 +15,10 @@ export const cardLoading: Effect<
   { card: Card },
   void,
 > = createEffect()
-export const cardFetching = createFetching(cardLoading, "loading")
+export const cardFetching: Fetching<*, void> = createFetching(
+  cardLoading,
+  "loading",
+)
 
 export const $card: Store<?Card> = createStore(null)
 

src/features/cards/pages/create.js

@@ -12,14 +12,14 @@ import {
   contentChanged,
   titleChanged,
   pageUnmounted,
-  submitButtonPressed,
+  formSubmitted,
 } from "../model/create"
 import { CardsCommonTemplate } from "../templates/common"
 import { TitleInput } from "../atoms/title-input"
 
-const onPressSubmit = (event) => {
+const onFormSubmitted = (event) => {
   event.preventDefault()
-  submitButtonPressed()
+  formSubmitted()
 }
 
 export const CardCreatePage = () => {
@@ -30,7 +30,7 @@ export const CardCreatePage = () => {
       <Authenticated
         render={() => (
           <Card style={{ marginBottom: "2rem" }}>
-            <form onSubmit={onPressSubmit}>
+            <form onSubmit={onFormSubmitted}>
               <Col gap="1rem">
                 <Title />
                 <Content />
@@ -86,6 +86,6 @@ const Sidebar = () => (
     </Row>
     <Row>Select text to use rich editor features.</Row>
     <Row>After creation your card will be available on the home page.</Row>
-    <ButtonPrimary onClick={onPressSubmit}>Create</ButtonPrimary>
+    <ButtonPrimary onClick={onFormSubmitted}>Create</ButtonPrimary>
   </Col>
 )