Alert - add a new variant "warning"

add a few alerts to Question.tsx (explanation, report a bug/mistake)

src/screens/TestScreen/components/Test/Alert.tsx

@@ -1,17 +1,19 @@
 import React from 'react';
 import { useVariables } from 'libs/native-base';
 
-import { Icon, View, H3, Text, NativeBase } from 'native-base';
 import { StyleSheet } from 'react-native';
+import { Icon, View, H3, Text, NativeBase } from 'native-base';
 
 export enum AlertVariant {
   Info = 'info',
+  Warning = 'warning',
 }
 
 export interface AlertProps extends Pick<NativeBase.View, 'style'> {
   variant?: AlertVariant;
   title: React.ReactNode;
   description?: React.ReactNode;
+  actions?: React.ReactNode;
 }
 
 const Alert = ({
@@ -19,6 +21,7 @@ const Alert = ({
   title,
   description,
   style,
+  actions,
 }: AlertProps) => {
   const variables = useVariables();
 
@@ -29,6 +32,8 @@ const Alert = ({
     switch (variant) {
       case AlertVariant.Info:
         return <Icon type="Feather" name="info" {...defaultProps} />;
+      case AlertVariant.Warning:
+        return <Icon type="AntDesign" name="warning" {...defaultProps} />;
     }
   };
 
@@ -36,6 +41,8 @@ const Alert = ({
     switch (variant) {
       case AlertVariant.Info:
         return variables.brandInfo;
+      case AlertVariant.Warning:
+        return variables.brandWarning;
     }
   };
 
@@ -47,13 +54,14 @@ const Alert = ({
       <View>{renderIcon()}</View>
       <View style={styles.textContainer}>
         <H3 style={[{ color: variables.inverseTextColor }]}>{title}</H3>
-        {description ? (
+        {description && (
           <Text
             style={[{ color: variables.inverseTextColor }, styles.description]}
           >
             {description}
           </Text>
-        ) : null}
+        )}
+        {actions && <View style={styles.actionsContainer}>{actions}</View>}
       </View>
     </View>
   );
@@ -76,6 +84,9 @@ const styles = StyleSheet.create({
   textContainer: {
     flexShrink: 1,
   },
+  actionsContainer: {
+    marginTop: 5,
+  },
 });
 
 export default Alert;

src/screens/TestScreen/components/Test/Question.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
-import { Question as QuestionT, Answer } from 'libs/graphql';
+import React, { Fragment } from 'react';
+import { Answer, Question as QuestionT } from 'libs/graphql';
 import { useVariables } from 'libs/native-base';
+import { EMAIL } from 'config/app';
 
-import { StyleSheet } from 'react-native';
+import { Linking, StyleSheet } from 'react-native';
 import { Button, H1, Text } from 'native-base';
 import Content from '../Content/Content';
 import Image from './Image';
+import Alert, { AlertVariant } from './Alert';
 
 export interface QuestionProps {
   question: QuestionT;
@@ -26,6 +28,21 @@ const Question = ({
 
   return (
     <Content>
+      {reviewMode && (
+        <Alert
+          title="Znalazłeś błąd w pytaniu?"
+          style={styles.mb}
+          actions={
+            <Button
+              dark
+              danger
+              onPress={() => Linking.openURL(`mailto:${EMAIL}`)}
+            >
+              <Text>Zgłoś go.</Text>
+            </Button>
+          }
+        />
+      )}
       {question.from && <Text note>{question.from}</Text>}
       <H1 style={styles.mb}>{question.content}</H1>
       {question.image ? (
@@ -34,6 +51,24 @@ const Question = ({
           style={styles.mb}
         />
       ) : null}
+      {reviewMode && (
+        <Fragment>
+          {!selectedAnswer ? (
+            <Alert
+              title="W tym pytaniu nie wybrałeś żadnej odpowiedzi."
+              variant={AlertVariant.Warning}
+              style={styles.mb}
+            />
+          ) : null}
+          {question.explanation ? (
+            <Alert
+              title="Wyjaśnienie"
+              description={question.explanation}
+              style={styles.mb}
+            />
+          ) : null}
+        </Fragment>
+      )}
       {ANSWERS.map((answer, index) => {
         const upper = answer.toUpperCase();
         const image = question[

src/screens/TestScreen/queries.ts

@@ -17,6 +17,7 @@ export const QUERY_GENERATE_TEST_SIMILAR_QUALIFICATIONS_QUALIFICATION = gql`
       id
       from
       content
+      explanation
       image
       answerA
       answerAImage