feat(app-signup): make roles and devops maturities dynamic

eficode · Dec 30, 2020 · 5a2ff32 · 5a2ff32
1 parent 7e8c122
commit 5a2ff32
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 32 deletions.
diff --git a/packages/game-app/src/signup/apis/executeSignup.ts b/packages/game-app/src/signup/apis/executeSignup.ts
@@ -1,6 +1,6 @@
 import { SignupInfo } from '../types/signupInfo';
 import firebase from 'firebase/app';
-import { FirebaseCollection } from '@pipeline/common';
+import { FirebaseCollections } from '@pipeline/common';
 import 'firebase/auth';
 import 'firebase/firestore';
 import { User } from '../../_shared/auth/slice';
@@ -10,7 +10,7 @@ export async function executeSignup(signupInfo: SignupInfo): Promise<User> {
     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({
+      await firebase.firestore().doc(`${FirebaseCollections.Users}/${user?.uid}`).set({
         email: signupInfo.email,
         role: signupInfo.role,
         devOpsMaturity: signupInfo.devOpsMaturity,

diff --git a/packages/game-app/src/signup/components/Signup/Signup.tsx b/packages/game-app/src/signup/components/Signup/Signup.tsx
@@ -1,36 +1,19 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 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';
+import {
+  useRetrieveDevOpsMaturities,
+  useRetrieveGameRoles,
+} from '../../../_shared/dynamicData/hooks/useRetrieveDynamicData';
+import { useSelector } from 'react-redux';
+import { selectors as dynamicDataSelectors } from '@pipeline/dynamicData';
 
 type Props = {};
 
-//TODO make roles and devops maturity dynamics
-
-const roles = [
-  { label: 'Have budget and make final decisions', value: 'budget-and-decisions' },
-  { label: 'Define requirements and propose solutions', value: 'define-requirements' },
-  { label: 'Influence decisions', value: 'influence-decisions' },
-  { label: 'Give recommendations', value: 'give-recommendations' },
-  { label: 'End user', value: 'endUser' },
-  { label: 'Student or potential employee', value: 'student-employee' },
-  { label: 'Consultant', value: 'consultant' },
-  { label: 'Other', value: 'other' },
-];
-
-const devopsMaturity = [
-  { label: 'Very mature', value: 'very-mature' },
-  { label: 'Somewhat mature', value: 'somewhat-mature' },
-  { label: 'Pretty average, really', value: 'pretty-average' },
-  { label: 'Somewhat immature', value: 'somewhat-immature' },
-  { label: 'Very immature', value: 'veryImmature' },
-  { label: "I don't know", value: 'dont-know' },
-  { label: 'Varies by function or team', value: 'varies' },
-];
-
 const schema = yup.object().shape({
   email: yup.string().required('signup.required').email('signup.invalidEmail'),
   password: yup
@@ -46,6 +29,9 @@ const schema = yup.object().shape({
 });
 
 const Signup: React.FC<Props> = () => {
+  const gameRoles = useSelector(dynamicDataSelectors.getGameRoles);
+  const devOpsMaturities = useSelector(dynamicDataSelectors.getDevOpsMaturities);
+
   const methods = useForm<SignupInfo>({
     defaultValues: {},
     mode: 'onBlur',
@@ -54,7 +40,15 @@ const Signup: React.FC<Props> = () => {
 
   const { handleSubmit } = methods;
 
-  const { call: signup, loading, translatedError, success } = useSignup();
+  const {
+    call: signup,
+    loading: signupLoading,
+    translatedError: signupTranslateError,
+    success: signupSuccess,
+  } = useSignup();
+
+  const { call: retrieveDevOpsMaturities } = useRetrieveDevOpsMaturities();
+  const { call: retrieveGameRoles } = useRetrieveGameRoles();
 
   const submit = useMemo(
     () =>
@@ -64,22 +58,27 @@ const Signup: React.FC<Props> = () => {
     [signup, handleSubmit],
   );
 
+  useEffect(() => {
+    retrieveGameRoles();
+    retrieveDevOpsMaturities();
+  }, [retrieveGameRoles, retrieveDevOpsMaturities]);
+
   return (
     <div className="signup">
       <div className="content">
         <FormProvider {...methods}>
           <FormTextField name="email" label="email" />
           <FormTextField name="password" label="password" />
           <FormTextField name="repeatPassword" label="repeatPassword" />
-          <FormSelect name="role" label="Role" options={roles} />
-          <FormSelect name="devOpsMaturity" label="Devops maturity" options={devopsMaturity} />
+          <FormSelect name="role" label="Role" options={gameRoles} />
+          <FormSelect name="devOpsMaturity" label="Devops maturity" options={devOpsMaturities} />
 
           <button id="signup-button" onClick={submit}>
             Signup
           </button>
-          {loading ? <span>Loading</span> : null}
-          {translatedError ? <span className="error-message">{translatedError}</span> : null}
-          {success ? <span>Success</span> : null}
+          {signupLoading ? <span>Loading</span> : null}
+          {signupTranslateError ? <span className="error-message">{signupTranslateError}</span> : null}
+          {signupSuccess ? <span>Success</span> : null}
         </FormProvider>
       </div>
     </div>