merge: from another branch

gitkoshelew · Feb 26, 2023 · 51e71c1 · 51e71c1
2 parents e54d591 + 8446045
commit 51e71c1
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 86 deletions.
diff --git a/src/components/QuestionsTabs/index.tsx b/src/components/QuestionsTabs/index.tsx
@@ -2,18 +2,16 @@ import {QuestionTab} from './QuestionTab/index';
 import {ScrollViewBlock, TabsBlock} from './styles';
 
 export type QuestionsTabsPropsType = {
-  onPressCurrentQuestion: (id: number) => void;
-  listQuestionsTabs: number[];
-  amountFilledQuestion: number;
   activeTab: number;
+  numberOfQuestions: number;
+  amountFilledQuestion: number;
+  onPressCurrentQuestion: (id: number) => void;
 };
 
-export const QuestionsTabs = ({
-  listQuestionsTabs,
-  amountFilledQuestion,
-  activeTab,
-  ...props
-}: QuestionsTabsPropsType) => {
+export const QuestionsTabs = (props: QuestionsTabsPropsType) => {
+  const {numberOfQuestions, amountFilledQuestion, activeTab, onPressCurrentQuestion} = props;
+  const listQuestionsTabs = [...Array(numberOfQuestions)].map((el, i) => i);
+
   return (
     <ScrollViewBlock
       horizontal
@@ -23,10 +21,10 @@ export const QuestionsTabs = ({
       <TabsBlock flexDirection={listQuestionsTabs.length > 10 ? 'column' : 'row'}>
         {listQuestionsTabs.map(id => (
           <QuestionTab
-            key={id}
             id={id}
+            key={id}
+            onPress={onPressCurrentQuestion}
             isActive={id === activeTab}
-            onPress={props.onPressCurrentQuestion}
             isFilledQuestion={amountFilledQuestion > id}
           />
         ))}

diff --git a/src/screens/CreateQuiz/components/CreateQuestion/CreateAnswer/index.tsx b/src/screens/CreateQuiz/components/CreateQuestion/CreateAnswer/index.tsx
@@ -30,6 +30,7 @@ export const CreateAnswer = ({
 }: CreateAnswerPropsType) => {
   const isDisabledDeleteBtn = fields.length <= 2;
   const {t} = useTranslation('validationFields');
+  console.log(correctAnswer);
 
   return (
     <View>

diff --git a/src/screens/CreateQuiz/components/CreateQuestion/CreateQuestion.tsx b/src/screens/CreateQuiz/components/CreateQuestion/CreateQuestion.tsx
@@ -1,4 +1,4 @@
-import {Platform, ScrollView, View} from 'react-native';
+import {Platform, View} from 'react-native';
 import {
   BlockBox,
   ContainerDynamicWidth,
@@ -16,14 +16,10 @@ import {AppButton} from '@src/components/ui/AppButton';
 import {TextInputHookForm} from '@src/components/TextInputHookForm';
 import {useFieldArray, useForm, useWatch} from 'react-hook-form';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
-import {useAppNavigate} from '@hooks/hooks';
 import {questionType, TypeOptions} from '@customTypes/quiz-types';
 import {transformTime} from '@src/utils/transformTime';
 import {optionsType, transformFormatOptions} from '@src/utils/transformFormatOptions';
-import {Container, ContainerSaveButton, NextQuestionButton} from './styles';
-import AntDesign from 'react-native-vector-icons/AntDesign';
-import {Color} from '@theme/colors';
-import {ScreenList} from '@src/navigation/navigation';
+import {Container} from './styles';
 import {TypeSwitchSelect} from '@customTypes/SwitchSelectjrs-types';
 import {TypeAppButton} from '@customTypes/AppButtun-types';
 import {useTranslation} from 'react-i18next';
@@ -45,27 +41,18 @@ export type CreateQuestionFieldType = {
 };
 
 export type CreateQuestionPropsType = {
-  scrollRef: React.RefObject<ScrollView>;
   onSaveQuestion: (values: SaveQuestionValuesType) => void;
   currentQuestion: questionType;
   numberOfQuestions: number;
   currentQuestionIndex: number;
-  onPressCurrentQuestionPressed: (value: number) => void;
 };
 
 const numberOfLines = Platform.OS === 'ios' ? undefined : 2;
 
 export const CreateQuestion = (props: CreateQuestionPropsType) => {
-  const {
-    scrollRef,
-    onSaveQuestion,
-    currentQuestion,
-    numberOfQuestions,
-    currentQuestionIndex,
-    onPressCurrentQuestionPressed,
-  } = props;
+  const {onSaveQuestion, currentQuestion} = props;
   const dataAnswerType = [TypeOptions.single, TypeOptions.multi];
-  const resetNavigate = useAppNavigate().reset;
+
   const {t} = useTranslation(['createQuestion', 'validationFields']);
   const {
     control,
@@ -104,11 +91,6 @@ export const CreateQuestion = (props: CreateQuestionPropsType) => {
   }, [currentArrayOptions]);
   const isCheckingDuplicate = new Set(arrayOptions).size !== arrayOptions.length;
 
-  const onPressNextQuestion = useCallback(() => {
-    onPressCurrentQuestionPressed(currentQuestionIndex + 1);
-    scrollRef.current?.scrollTo({x: 0, y: 0, animated: true});
-  }, [currentQuestionIndex, onPressCurrentQuestionPressed, scrollRef]);
-
   const onPressSaveQuestion = useCallback(
     (values: CreateQuestionFieldType) => {
       if (values.minutes + values.seconds === 0) {
@@ -178,8 +160,6 @@ export const CreateQuestion = (props: CreateQuestionPropsType) => {
     setCorrectAnswers(currentQuestion.content.correctAnswer);
   }, [currentQuestion.content.correctAnswer]);
 
-  const isQuestionsEnd = currentQuestionIndex + 1 === numberOfQuestions;
-
   return (
     <Container>
       <TextBox>{t('title')}</TextBox>
@@ -255,33 +235,13 @@ export const CreateQuestion = (props: CreateQuestionPropsType) => {
         correctAnswer={correctAnswers}
       />
       <BlockBox>
-        <ViewDynamicFlex justifyC="flex-end" alignI="center" flexD="row">
-          <ContainerSaveButton>
-            <AppButton
-              title={t('saveQuestionBtn')}
-              type={TypeAppButton.PRIMARY}
-              onPress={handleSubmit(onPressSaveQuestion)}
-              disabled={isCheckingDuplicate}
-            />
-          </ContainerSaveButton>
-          {isQuestionsEnd ? (
-            <AppButton
-              title={t('exitBtn')}
-              type={TypeAppButton.PRIMARY}
-              onPress={() => {
-                resetNavigate({
-                  index: 0,
-                  routes: [{name: ScreenList.HOME}],
-                });
-              }}
-            />
-          ) : (
-            <NextQuestionButton
-              onPress={onPressNextQuestion}
-              disabled={!currentQuestion.title}>
-              <AntDesign name="rightcircle" size={36} color={Color.DarkBlue} />
-            </NextQuestionButton>
-          )}
+        <ViewDynamicFlex justifyC="center" alignI="center" flexD="row">
+          <AppButton
+            title={t('saveQuestionBtn')}
+            type={TypeAppButton.PRIMARY}
+            onPress={handleSubmit(onPressSaveQuestion)}
+            disabled={isCheckingDuplicate}
+          />
         </ViewDynamicFlex>
       </BlockBox>
       <ViewCenter />

diff --git a/src/screens/CreateQuiz/components/CreateQuestion/CreateQuestionContainer.tsx b/src/screens/CreateQuiz/components/CreateQuestion/CreateQuestionContainer.tsx
@@ -1,4 +1,4 @@
-import {useRef} from 'react';
+import React, {useRef} from 'react';
 import {
   CreateQuestion,
   CreateQuestionFieldType,
@@ -9,15 +9,16 @@ import {createQuestion} from '@src/screens/CreateQuiz/services/services';
 import {getQuizQuestions} from '@src/bll/quizReducer';
 import {useAppDispatch} from '@hooks/hooks';
 import {transformTimeSerializer} from '@src/screens/CreateQuiz/serializer/index';
-import {Wrapper} from '@src/screens/CreateQuiz/components/CreateQuestion/styles';
+import {BlockLayout} from '@src/screens/CreateQuiz/components/CreateQuestion/styles';
+import {ScrollView, StyleSheet} from 'react-native';
 
 export type CreateQuestionPropsType = {
   quizId: number;
   changeQuestions: (value: questionType[]) => void;
   currentQuestion: questionType;
   numberOfQuestions: number;
   currentQuestionIndex: number;
-  onPressCurrentQuestionPressed: (value: number) => void;
+  changeCurrentQuestionIndex: (value: number) => void;
 };
 
 export type SaveQuestionValuesType = {
@@ -32,10 +33,10 @@ export const CreateQuestionContainer = (props: CreateQuestionPropsType) => {
     currentQuestion,
     numberOfQuestions,
     currentQuestionIndex,
-    onPressCurrentQuestionPressed,
+    changeCurrentQuestionIndex,
   } = props;
   const dispatch = useAppDispatch();
-  const scrollRef = useRef(null);
+  const scrollRef = useRef<ScrollView>(null);
 
   const handlerSaveQuestion = async (values: SaveQuestionValuesType) => {
     const {valuesFields, correctAnswers} = values;
@@ -46,23 +47,26 @@ export const CreateQuestionContainer = (props: CreateQuestionPropsType) => {
       content: {options: changedOptions as string[], correctAnswer: correctAnswers},
       quizId,
     };
+
     await dispatch(
       createQuestion(transformTimeSerializer({newQuestion, format: 'onlySeconds'})),
     );
     const questions = await dispatch(getQuizQuestions(quizId)).unwrap();
     changeQuestions(questions.question);
+
+    changeCurrentQuestionIndex(currentQuestionIndex + 1);
+    scrollRef.current?.scrollTo({x: 0, y: 0, animated: true});
   };
 
   return (
-    <Wrapper ref={scrollRef} showsVerticalScrollIndicator={false}>
+    <ScrollView ref={scrollRef} showsVerticalScrollIndicator={false}>
+      {currentQuestion.title && <BlockLayout style={StyleSheet.absoluteFill} />}
       <CreateQuestion
-        scrollRef={scrollRef}
         currentQuestion={currentQuestion}
         numberOfQuestions={numberOfQuestions}
         onSaveQuestion={handlerSaveQuestion}
         currentQuestionIndex={currentQuestionIndex}
-        onPressCurrentQuestionPressed={onPressCurrentQuestionPressed}
       />
-    </Wrapper>
+    </ScrollView>
   );
 };
diff --git a/src/screens/CreateQuiz/components/CreateQuestion/styles.ts b/src/screens/CreateQuiz/components/CreateQuestion/styles.ts
@@ -1,12 +1,15 @@
 import styled from 'styled-components/native';
+import {Color} from '@theme/colors';
 
-export const Wrapper = styled.ScrollView`
-  padding: 0 21px;
+export const BlockLayout = styled.View`
+  background-color: ${Color.Transparent};
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
 `;
 
 export const Container = styled.View`
-  padding-top: 15px;
-  padding-bottom: 40px;
+  padding: 15px 21px 40px 21px;
 `;
 
 export const ContainerSaveButton = styled.View`

diff --git a/src/screens/CreateQuiz/components/ListQuestions/Header/index.tsx b/src/screens/CreateQuiz/components/ListQuestions/Header/index.tsx
@@ -49,18 +49,18 @@ export const Header = (props: HeaderPropsType) => {
           </Text>
         </View>
       </View>
- <TouchableOpacity>
-      {isAddedQuestion ? (
+      <TouchableOpacity>
+        {isAddedQuestion ? (
           <Ionicons name="ios-checkmark-circle-outline" size={40} color={Color.Green} />
-      ) : (
+        ) : (
           <Ionicons
             name="add-circle-outline"
             size={40}
             color={Color.BlueLight}
             onPress={onPress}
           />
-      )}
-</TouchableOpacity>
+        )}
+      </TouchableOpacity>
     </View>
   );
 };

diff --git a/src/screens/CreateQuiz/components/QuestionsSettings/ExitButton/index.tsx b/src/screens/CreateQuiz/components/QuestionsSettings/ExitButton/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import {StyleSheet, TouchableOpacity} from 'react-native';
+import {Color} from '@theme/colors';
+import {ScreenList} from '@src/navigation/navigation';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import {useAppNavigate} from '@hooks/hooks';
+
+export const ExitButton = () => {
+  const resetNavigate = useAppNavigate().reset;
+
+  return (
+    <TouchableOpacity
+      style={styles.button}
+      onPress={() => {
+        resetNavigate({
+          index: 0,
+          routes: [{name: ScreenList.HOME}],
+        });
+      }}>
+      <Ionicons name="ios-close-outline" color={Color.White} size={24} />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    backgroundColor: Color.Red,
+    width: 28,
+    height: 28,
+    paddingLeft: 3,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderBottomLeftRadius: 20,
+  },
+});
diff --git a/src/screens/CreateQuiz/components/QuestionsSettings/QuestionsSettings.tsx b/src/screens/CreateQuiz/components/QuestionsSettings/QuestionsSettings.tsx
@@ -10,6 +10,7 @@ import {ListQuestionsContainer} from '@src/screens/CreateQuiz/components/ListQue
 import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
 import {ScreenList} from '@src/navigation/navigation';
 import {ViewFlex} from '@src/components/ui/ReadyStyles/Containers/index';
+import {ExitButton} from '@src/screens/CreateQuiz/components/QuestionsSettings/ExitButton/index';
 
 const keyboardVerticalOffset = Platform.OS === 'ios' ? 90 : 0;
 
@@ -30,13 +31,12 @@ export const QuestionsSettings = ({
   changeQuestions,
   numberOfQuestions,
 }: QuestionsSettingsPropsType) => {
-  const listQuestionsTabs = [...Array(numberOfQuestions)].map((el, i) => i);
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
   const [isModalVisible, setIsModalVisible] = useState(false);
 
   const currentQuestion = questions[currentQuestionIndex] || {...getNewQuestion(), topicId};
 
-  const onPressCurrentQuestionPressed = useCallback(
+  const handlerCurrentQuestion = useCallback(
     (index: number) => {
       if (
         (!currentQuestion.title && index > questions.length - 1) ||
@@ -57,6 +57,7 @@ export const QuestionsSettings = ({
       keyboardVerticalOffset={keyboardVerticalOffset}
       style={styles.wrapper}>
       <View style={styles.container}>
+        <ExitButton />
         <CustomModal
           isModalVisible={isModalVisible}
           onPress={setIsModalVisible}
@@ -67,9 +68,9 @@ export const QuestionsSettings = ({
             <View style={styles.questionTabsContainer}>
               <QuestionsTabs
                 activeTab={currentQuestionIndex}
-                listQuestionsTabs={listQuestionsTabs}
+                numberOfQuestions={numberOfQuestions}
                 amountFilledQuestion={questions.length}
-                onPressCurrentQuestion={onPressCurrentQuestionPressed}
+                onPressCurrentQuestion={handlerCurrentQuestion}
               />
             </View>
             <View style={styles.tabsContainer}>
@@ -88,7 +89,7 @@ export const QuestionsSettings = ({
                       currentQuestion={currentQuestion}
                       numberOfQuestions={numberOfQuestions}
                       currentQuestionIndex={currentQuestionIndex}
-                      onPressCurrentQuestionPressed={onPressCurrentQuestionPressed}
+                      changeCurrentQuestionIndex={setCurrentQuestionIndex}
                     />
                   )}
                 />

diff --git a/src/theme/colors.ts b/src/theme/colors.ts
@@ -12,7 +12,7 @@ enum Color {
   GrayStrongDark = '#49454F',
   Green = '#5fbb64',
   Semitransparent = 'rgba(255, 255, 255, 0.17)',
-  Transparent = 'rgba(28,0,255,0)',
+  Transparent = 'rgba(0,0,0,0.05)',
   TransparentBlack = '#00000019',
   GreenLight = '#acda87',
   Yellow = '#ffd606',