remove user via logout fetch users on mount and table calculations

src/components/App/index.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react'
-import { useStore } from 'effector-react'
+import { useStore, useGate } from 'effector-react'
 
 import './App.css'
 import { Theater } from '../Theater'
 import { Auth } from '../Auth'
 
-import {$user} from '../../models/auth'
+import { $user } from '../../models/auth'
+import {AppGate} from '../../models/app'
 
 export const App = () => {
+  useGate(AppGate)
   const {email} = useStore($user)
   return email ? (<Theater />) : (<Auth />)
 }

src/models/app/index.ts

@@ -1,5 +1,8 @@
 import {createEffect} from 'effector'
+import { createGate } from 'effector-react'
 
 import { Config } from './types'
 
-export const initAppFx = createEffect<Config, unknown>()
+export const initAppFx = createEffect<Config, unknown>()
+
+export const AppGate = createGate()

src/models/app/init.ts

@@ -1,16 +1,20 @@
 import { initializeApp } from 'firebase'
+import { forward } from 'effector'
 
 import {
-  initAppFx
+  initAppFx, AppGate
 } from './'
 
+import { fetchUsersFx } from '../users'
+
 import {
   appId,
   projectId,
   apiKey,
   messagingSenderId
 } from '../../../config.json'
 
+
 initAppFx.use(async ({
   appId,
   projectId,
@@ -33,4 +37,9 @@ initAppFx({
   projectId,
   apiKey,
   messagingSenderId
+})
+
+forward({
+  from: AppGate.open,
+  to: fetchUsersFx
 })

src/models/auth/init.ts

@@ -15,7 +15,9 @@ import {
 
 import {
   addUserFx,
-  updateUsersTableFx
+  updateUsersTableFx,
+  deleteUserFx,
+  $firebaseUsers
 } from '../users'
 
 const gProvider = new auth.GoogleAuthProvider()
@@ -77,4 +79,16 @@ forward({
     }
   }),
   to: signUpViaEmailFx
+})
+
+sample({
+  source: $firebaseUsers,
+  clock: logout,
+  //@ts-ignore
+  fn: (users, email) => Object.keys(users).find((id) => {
+    if (email === users[id].email) {
+      return id
+    }
+  }),
+  target: deleteUserFx
 })

src/models/init.ts

@@ -1,3 +1,4 @@
 import './app/init'
 import './auth/init'
-import './users/init'
+import './users/init'
+import './tables/init'

src/models/tables/index.ts

@@ -1,3 +1,29 @@
-import {createStore} from 'effector'
+import {createStore, createEvent} from 'effector'
 
-export const $currentConnectID = createStore('first-table')
+export const updateCurrentIDandStage = createEvent<{ ID: string, stage: number }>()
+
+export const $currentConnectID = createStore<string>('first-table')
+
+export const $tableIDs = createStore<string[]>([
+  'first-table',
+  'second-table',
+  'third-table',
+  'fourth-table',
+  'fifth-table',
+  'sixth-table',
+  'seventh-table',
+  'eighth-table',
+  'ninth-table',
+  'tenth-table',
+  'eleventh-table',
+  'twelfth-table',
+  'thirteenth-table',
+  'fourteenth-table',
+  'fifteenth-table',
+  'left-top-table',
+  'right-top-table',
+  'left-bottom-table',
+  'right-bottom-table'
+])
+
+export const $stage = createStore(2)

src/models/tables/init.ts

@@ -5,11 +5,11 @@ import {
   $currentConnectID,
   $tableIDs,
   $stage
-} from './'
+} from './index'
 
 import {
   $tableUsers
-} from '../users'
+} from '../users/index'
 
 sample({
   source: {

src/models/users/index.ts

@@ -25,4 +25,18 @@ export const $usersByEmail = $firebaseUsers.map((fUsers) => {
       ...usersByEmail
     }
   }, {})
+})
+
+export const $tableUsers = $firebaseUsers.map((fUsers) => {
+  return Object.keys(fUsers).reduce<TableIDUsersMap>((tableUsers, id) => {
+    const tableID = fUsers[id].tableID;
+    if (tableUsers[tableID] !== undefined) {
+      tableUsers[tableID].push(fUsers[id]);
+      return tableUsers;
+    }
+    return {
+      ...tableUsers,
+      [tableID]: [fUsers[id]]
+    }
+  }, {})
 })