From 6114c8da298279db165668947210cc474c21ebd8 Mon Sep 17 00:00:00 2001 From: YanLobat Date: Fri, 21 Aug 2020 14:21:59 +0300 Subject: [PATCH 1/3] add google auth and app bar with user --- public/index.js | 1 + src/components/Auth/index.tsx | 19 ++++++++++++++++++ src/components/Theater/index.tsx | 34 +++++++++++++++++++++++--------- src/models/app/index.ts | 5 +++++ src/models/app/init.ts | 29 +++++++++++++++++++++++++++ src/models/app/types.ts | 6 ++++++ src/models/auth/index.ts | 13 ++++++++++++ src/models/auth/init.ts | 31 +++++++++++++++++++++++++++++ src/models/auth/types.ts | 5 +++++ src/models/init.ts | 2 ++ 10 files changed, 136 insertions(+), 9 deletions(-) create mode 100644 src/components/Auth/index.tsx create mode 100644 src/models/app/index.ts create mode 100644 src/models/app/init.ts create mode 100644 src/models/app/types.ts create mode 100644 src/models/auth/index.ts create mode 100644 src/models/auth/init.ts create mode 100644 src/models/auth/types.ts create mode 100644 src/models/init.ts diff --git a/public/index.js b/public/index.js index 7d7d8b0..5be7daf 100644 --- a/public/index.js +++ b/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( diff --git a/src/components/Auth/index.tsx b/src/components/Auth/index.tsx new file mode 100644 index 0000000..2efff58 --- /dev/null +++ b/src/components/Auth/index.tsx @@ -0,0 +1,19 @@ +import * as React from 'react' + +import {gSignIn} from '../../models/auth' + +export const Auth: React.FC = () => ( +
+

Remo Coding Challenge Join Room

+ + +
+) \ No newline at end of file diff --git a/src/components/Theater/index.tsx b/src/components/Theater/index.tsx index 57e6338..950ec30 100644 --- a/src/components/Theater/index.tsx +++ b/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) => ( +
+
{id}
+
+ ))} + +) + export const Theater: React.FC = () => { - const firstTable = tables[0] + const {avatar, fullName, email} = useStore($user) return (
- {/** - * Show user profile pic/name after login - */} - Logout + {avatar + ? (<>profile pic) + : null + } + {fullName ? fullName : email} + logout(email)}>Logout
- {/** - * Create rooms here as in the requirement and make sure it is aligned with background - */} -
{firstTable.id}
+
Conference background diff --git a/src/models/app/index.ts b/src/models/app/index.ts new file mode 100644 index 0000000..0ad8c33 --- /dev/null +++ b/src/models/app/index.ts @@ -0,0 +1,5 @@ +import {createEffect} from 'effector' + +import { Config } from './types' + +export const initAppFx = createEffect() \ No newline at end of file diff --git a/src/models/app/init.ts b/src/models/app/init.ts new file mode 100644 index 0000000..0c5c5ba --- /dev/null +++ b/src/models/app/init.ts @@ -0,0 +1,29 @@ +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` + }) +}) \ No newline at end of file diff --git a/src/models/app/types.ts b/src/models/app/types.ts new file mode 100644 index 0000000..76f7ac9 --- /dev/null +++ b/src/models/app/types.ts @@ -0,0 +1,6 @@ +export type Config = { + appId: string; + projectId: string; + apiKey: string; + messagingSenderId: string; +} \ No newline at end of file diff --git a/src/models/auth/index.ts b/src/models/auth/index.ts new file mode 100644 index 0000000..1cc3607 --- /dev/null +++ b/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() + +export const manageGmailProviderFx = createEffect() + +export const $user = createStore({ + email: '' +}) \ No newline at end of file diff --git a/src/models/auth/init.ts b/src/models/auth/init.ts new file mode 100644 index 0000000..d0e98bc --- /dev/null +++ b/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 +}) \ No newline at end of file diff --git a/src/models/auth/types.ts b/src/models/auth/types.ts new file mode 100644 index 0000000..6a3444e --- /dev/null +++ b/src/models/auth/types.ts @@ -0,0 +1,5 @@ +export type User = { + email: string; + avatar?: string; + fullName?: string; +} \ No newline at end of file diff --git a/src/models/init.ts b/src/models/init.ts new file mode 100644 index 0000000..74a8a56 --- /dev/null +++ b/src/models/init.ts @@ -0,0 +1,2 @@ +import './app/init' +import './auth/init' \ No newline at end of file From 1dabe22757608dceed49453b6ca56b4110bafa4c Mon Sep 17 00:00:00 2001 From: YanLobat Date: Fri, 21 Aug 2020 14:50:41 +0300 Subject: [PATCH 2/3] make conditional render for root comp --- src/components/App/index.tsx | 12 ++++++---- src/models/tables/init.ts | 43 ++++++++++++++++++++++++++++++++++++ 2 files changed, 51 insertions(+), 4 deletions(-) create mode 100644 src/models/tables/init.ts diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index ffddcc5..2890e8f 100644 --- a/src/components/App/index.tsx +++ b/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 ( - - ) + const {email} = useStore($user) + return email ? () : () } \ No newline at end of file diff --git a/src/models/tables/init.ts b/src/models/tables/init.ts new file mode 100644 index 0000000..c9b761a --- /dev/null +++ b/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 +}) \ No newline at end of file From 63b6ee1505e183a736d8f3cbd0fea0efac6c0d07 Mon Sep 17 00:00:00 2001 From: YanLobat Date: Fri, 21 Aug 2020 15:03:20 +0300 Subject: [PATCH 3/3] run firebase initialization --- src/models/app/init.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/models/app/init.ts b/src/models/app/init.ts index 0c5c5ba..e2e6e26 100644 --- a/src/models/app/init.ts +++ b/src/models/app/init.ts @@ -26,4 +26,11 @@ initAppFx.use(async ({ databaseURL: `https://${projectId}.firebaseio.com`, storageBucket: `${projectId}.appspot.com` }) +}) + +initAppFx({ + appId, + projectId, + apiKey, + messagingSenderId }) \ No newline at end of file