feat(app-signup): add signup logic with firebase connection

packages/game-app/package.json

@@ -50,6 +50,7 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.8.8",
     "@cypress/instrument-cra": "^1.4.0",
+    "@pipeline/common": "0.0.0",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.6.0",

packages/game-app/src/_shared/index.ts

@@ -2,6 +2,9 @@ import { buildStore } from './store';
 import CONFIG from '@pipeline/app-config';
 import firebase from 'firebase/app';
 import 'firebase/analytics';
+import 'firebase/firestore';
+import 'firebase/functions';
+import 'firebase/database';
 import { initializeI18n } from './i18n';
 import { actions as authActions, selectors as authSelectors } from './auth';
 import { useSelector } from 'react-redux';

packages/game-app/src/_shared/store/rootSaga.ts

@@ -1,9 +1,10 @@
 import { Saga } from 'redux-saga';
 import { all, call, spawn } from 'redux-saga/effects';
 import { saga as authSaga } from '@pipeline/auth';
+import signupSaga from '../../signup/sagas';
 
 export default function* rootSaga() {
-  const sagas: Saga[] = [authSaga];
+  const sagas: Saga[] = [authSaga, signupSaga];
   yield all(
     sagas.map(saga =>
       spawn(function* () {

packages/game-app/src/signup/actions/index.ts

@@ -0,0 +1,4 @@
+import { createAction } from '@reduxjs/toolkit';
+import { SignupInfo } from '../types/signupInfo';
+
+export const signup = createAction<SignupInfo>('signup/start');

packages/game-app/src/signup/apis/executeSignup.ts

@@ -0,0 +1,34 @@
+import { SignupInfo } from '../types/signupInfo';
+import firebase from 'firebase/app';
+import { FirebaseCollection } from '@pipeline/common';
+import 'firebase/auth';
+import 'firebase/firestore';
+import { User } from '../../_shared/auth/slice';
+
+export async function executeSignup(signupInfo: SignupInfo): Promise<User> {
+  try {
+    const credentials = await firebase.auth().createUserWithEmailAndPassword(signupInfo.email, signupInfo.password);
+    if (credentials.user) {
+      const user = credentials.user;
+      await firebase.firestore().doc(`${FirebaseCollection.Users}/${user?.uid}`).set({
+        email: signupInfo.email,
+        role: signupInfo.role,
+        devopsMaturity: signupInfo.devopsMaturity,
+      });
+      return {
+        id: user.uid,
+        email: user.email!,
+      };
+    } else {
+      throw new Error('user-not-created');
+    }
+  } catch (e) {
+    try {
+      const currentUser = firebase.auth().currentUser;
+      if (currentUser !== null) {
+        await currentUser.delete();
+      }
+    } catch (e) {}
+    throw e;
+  }
+}

packages/game-app/src/signup/components/Signup/Signup.tsx

@@ -1,19 +1,13 @@
 import React, { useMemo } from 'react';
-import { useForm, FormProvider } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 import { FormSelect, FormTextField } from '@pipeline/form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
+import { SignupInfo } from '../../types/signupInfo';
+import useSignup from '../../hooks/useSignup';
 
 type Props = {};
 
-interface SignupInfo {
-  email: string;
-  password: string;
-  repeatPassword: string;
-  role: string;
-  devopsMaturity: string;
-}
-
 //TODO make roles and devops maturity dynamics
 
 const roles = [
@@ -56,10 +50,12 @@ const Signup: React.FC<Props> = ({}) => {
 
   const { handleSubmit } = methods;
 
+  const { execute } = useSignup();
+
   const submit = useMemo(
     () =>
       handleSubmit((info: SignupInfo) => {
-        console.log('info', info);
+        execute(info);
       }),
     [handleSubmit],
   );

packages/game-app/src/signup/hooks/useSignup.ts

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+import { SignupInfo } from '../types/signupInfo';
+import { useDispatch } from 'react-redux';
+import * as actions from '../actions';
+
+export default function useSignup() {
+  const dispatch = useDispatch();
+
+  const execute = useCallback((info: SignupInfo) => {
+    dispatch(actions.signup(info));
+  }, []);
+
+  return {
+    execute,
+  };
+}

packages/game-app/src/signup/sagas/index.ts

@@ -0,0 +1,3 @@
+import signupSaga from './signup';
+
+export default signupSaga;

packages/game-app/src/signup/sagas/signup.ts

@@ -0,0 +1,14 @@
+import * as actions from '../actions';
+import { executeSignup } from '../apis/executeSignup';
+import { call, takeEvery, takeLeading } from 'redux-saga/effects';
+import { User } from '../../_shared/auth/slice';
+
+function* signupSaga(action: ReturnType<typeof actions.signup>) {
+  try {
+    const user: User = yield call(executeSignup, action.payload);
+  } catch (e) {}
+}
+
+export default function* runSignup() {
+  yield takeLeading(actions.signup, signupSaga);
+}

packages/game-app/src/signup/types/signupInfo.tsx

@@ -0,0 +1,7 @@
+export interface SignupInfo {
+  email: string;
+  password: string;
+  repeatPassword: string;
+  role: string;
+  devopsMaturity: string;
+}

tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "outDir": "./build",
+    "noImplicitAny": true,
+    "noEmit": false,
+    "declaration": true
+  }
+}