add google auth and app bar with user

public/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 
+import  '../src/models/init'
 import {App} from '../src/components/App'
 
 ReactDOM.render(

src/components/App/index.tsx

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

src/components/Auth/index.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+import {gSignIn} from '../../models/auth'
+
+export const Auth: React.FC = () => (
+  <div
+    style={{
+      height: '100vh',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }}
+  >
+    <h1> Remo Coding Challenge Join Room </h1>
+    <button id='email_signin'>Login with email</button>
+    <button id='gapi_signin' onClick={() => gSignIn()}> Login with Google </button>
+  </div>
+)

src/components/Theater/index.tsx

@@ -1,26 +1,42 @@
 import * as React from 'react'
+import { useStore } from 'effector-react'
 
 import './Theater.css'
 // @ts-ignore
 import MapImage from '../../assets/conference-map.svg'
 import {tables, width, height} from './tableConfig.json'
 
+import {$user, logout} from '../../models/auth'
+
+const Rooms:React.FC = () => (
+  <>
+    {tables.map(({ width, height, id, x, y, seats }, index) => (
+      <div
+        key={index}
+        className='rt-room'
+        style={{ width, height, top: y, left: x }}
+      >
+        <div className='rt-room-name'>{id}</div>
+      </div>
+    ))}
+  </>
+)
+
 export const Theater: React.FC = () => {
-  const firstTable = tables[0]
+  const {avatar, fullName, email} = useStore($user)
 
   return (
     <div className='remo-theater' style={{width, height}}>
       <div className='rt-app-bar'>
-        {/**
-          * Show user profile pic/name after login
-          */}
-        <a href='javascript:;'>Logout</a>
+        {avatar
+          ? (<><img width='36' height='36' src={avatar} alt='profile pic' /></>)
+          : null
+        }
+        <span className='email'>{fullName ? fullName : email}</span>
+        <a href='' onClick={e => logout(email)}>Logout</a>
       </div>
       <div className='rt-rooms'>
-        {/**
-          * Create rooms here as in the requirement and make sure it is aligned with background
-          */}
-        <div className='rt-room' style={{width: firstTable.width, height: firstTable.height, top: firstTable.y, left: firstTable.x}}><div className='rt-room-name'>{firstTable.id}</div></div>
+        <Rooms />
       </div>
       <div className='rt-background'>
         <img src={MapImage} alt='Conference background'/>

src/models/app/index.ts

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

src/models/app/init.ts

@@ -0,0 +1,36 @@
+import { initializeApp } from 'firebase'
+
+import {
+  initAppFx
+} from './'
+
+import {
+  appId,
+  projectId,
+  apiKey,
+  messagingSenderId
+} from '../../../config.json'
+
+initAppFx.use(async ({
+  appId,
+  projectId,
+  apiKey,
+  messagingSenderId
+}) => {
+  await initializeApp({
+    appId,
+    projectId,
+    apiKey,
+    messagingSenderId,
+    authDomain: `${projectId}.firebaseapp.com`,
+    databaseURL: `https://${projectId}.firebaseio.com`,
+    storageBucket: `${projectId}.appspot.com`
+  })
+})
+
+initAppFx({
+  appId,
+  projectId,
+  apiKey,
+  messagingSenderId
+})

src/models/app/types.ts

@@ -0,0 +1,6 @@
+export type Config = {
+  appId: string;
+  projectId: string;
+  apiKey: string;
+  messagingSenderId: string;
+}

src/models/auth/index.ts

@@ -0,0 +1,13 @@
+import { createEvent, createEffect, createStore } from 'effector'
+
+import { User } from './types'
+
+export const gSignIn = createEvent()
+
+export const logout = createEvent<string>()
+
+export const manageGmailProviderFx = createEffect<void, User>()
+
+export const $user = createStore<User>({
+  email: ''
+})

src/models/auth/init.ts

@@ -0,0 +1,31 @@
+import { forward } from 'effector'
+import { auth } from 'firebase'
+
+import {
+  gSignIn,
+  logout,
+  manageGmailProviderFx,
+  $user
+} from './'
+
+const gProvider = new auth.GoogleAuthProvider()
+
+manageGmailProviderFx.use(async () => {
+  const { user } = await auth().signInWithPopup(gProvider)
+  if (user === null) {
+    throw 'no user found while gmail auth'
+  }
+  const email = user.email === null ? '' : user.email
+  const fullName = user.displayName === null ? '' : user.displayName
+  const avatar = user.photoURL!.replace('https', 'http')
+  return {email, avatar, fullName}
+})
+
+$user
+.reset(logout)
+.on(manageGmailProviderFx.doneData, (_, user) => user)
+
+forward({
+  from: gSignIn,
+  to: manageGmailProviderFx
+})

src/models/auth/types.ts

@@ -0,0 +1,5 @@
+export type User = {
+  email: string;
+  avatar?: string;
+  fullName?: string;
+}

src/models/init.ts

@@ -0,0 +1,2 @@
+import './app/init'
+import './auth/init'

src/models/tables/init.ts

@@ -0,0 +1,43 @@
+import {forward, sample} from 'effector'
+
+import {
+  updateCurrentIDandStage,
+  $currentConnectID,
+  $tableIDs,
+  $stage
+} from './'
+
+import {
+  $tableUsers
+} from '../users'
+
+sample({
+  source: {
+    tableIDs: $tableIDs,
+    stage: $stage
+  },
+  clock: $tableUsers,
+  fn: ({tableIDs, stage}, tableUsers) => {
+    for (let i = 0; i < tableIDs.length; i++) {
+      const currentID = tableIDs[i]
+      const tableWithNoUsers = tableUsers[currentID] === undefined
+
+      if (tableWithNoUsers || tableUsers[currentID].length < stage) {
+        return {ID: currentID, stage}
+      }
+    }
+
+    return {ID: tableIDs[0], stage: stage + 1}
+  },
+  target: updateCurrentIDandStage
+})
+
+forward({
+  from: updateCurrentIDandStage.map(({ID}) => ID),
+  to: $currentConnectID
+})
+
+forward({
+  from: updateCurrentIDandStage.map(({stage}) => stage),
+  to: $stage
+})