feat(StarterRecommendation): criando tela de recomendações

src/components/NextButton/index.tsx

@@ -3,8 +3,9 @@ import {NextAction} from './styles';
 
 interface NextButtonProps {
   onPress: () => void;
+  title?: string;
 }
 
-export function NextButton({onPress}: NextButtonProps) {
-  return <NextAction title="Próximo" onPress={onPress} />;
+export function NextButton({onPress, title}: NextButtonProps) {
+  return <NextAction title={!!title ? title : 'Próximo'} onPress={onPress} />;
 }

src/navigators/StarterStack.tsx

@@ -4,6 +4,7 @@ import StarterIntro from '../screens/StarterIntro';
 import {StarterName} from '../screens/StarterName';
 import {StarterDays} from '../screens/StarterDays';
 import {StarterLevel} from '../screens/StarterLevel';
+import {StarterRecommendations} from '../screens/StarterRecommendations';
 
 const {Navigator, Screen} = createStackNavigator();
 
@@ -18,6 +19,10 @@ export function StarterStack() {
       <Screen name="StarterName" component={StarterName} />
       <Screen name="StarterDays" component={StarterDays} />
       <Screen name="StarterLevel" component={StarterLevel} />
+      <Screen
+        name="StarterRecommendations"
+        component={StarterRecommendations}
+      />
     </Navigator>
   );
 }

src/presetWorkouts.json

@@ -1,24 +1,52 @@
 [
   {
-    "id":"123",
-    "name":"Treino Iniciante A",
-    "exercises":[
-      {"id":1, "name":"Supino Inclinado", "muscle":"chest", "sets":"3", "reps":"10", "load":"20"},
-      {"id":2, "name":"Ex 2", "muscle":"biceps", "sets":"2", "reps":"12", "load":"10"}
+    "id": "123",
+    "name": "Treino Iniciante A",
+    "exercises": [
+      {
+        "id": 1,
+        "name": "Supino Inclinado",
+        "muscle": "chest",
+        "sets": "3",
+        "reps": "10",
+        "load": "20"
+      },
+      {
+        "id": 2,
+        "name": "Ex 2",
+        "muscle": "biceps",
+        "sets": "2",
+        "reps": "12",
+        "load": "10"
+      }
     ]
   },
   {
-    "id":"456",
-    "name":"Treino Iniciante B",
-    "exercises":[
-      {"id":1, "name":"Supino Inclinado", "muscle":"chest", "sets":"3", "reps":"10", "load":"20"}
+    "id": "456",
+    "name": "Treino Iniciante B",
+    "exercises": [
+      {
+        "id": 1,
+        "name": "Supino Inclinado",
+        "muscle": "chest",
+        "sets": "3",
+        "reps": "10",
+        "load": "20"
+      }
     ]
   },
   {
-    "id":"645",
-    "name":"Treino Iniciante C",
-    "exercises":[
-      {"id":1, "name":"Supino Inclinado", "muscle":"chest", "sets":"3", "reps":"10", "load":"20"}
+    "id": "645",
+    "name": "Treino Iniciante C",
+    "exercises": [
+      {
+        "id": 1,
+        "name": "Supino Inclinado",
+        "muscle": "chest",
+        "sets": "3",
+        "reps": "10",
+        "load": "20"
+      }
     ]
   }
-]
+]

src/screens/StarterRecommendations/index.tsx

@@ -0,0 +1,49 @@
+import {useNavigation} from '@react-navigation/native';
+import React, {useEffect, useLayoutEffect} from 'react';
+import {Text} from 'react-native';
+import {useSelector} from 'react-redux';
+import {NextButton} from '../../components/NextButton';
+import {Container, HeaderSubtext, HeaderText, WorkoutList} from './styles';
+import presetWorkouts from '../../presetWorkouts.json';
+
+export function StarterRecommendations() {
+  const navigation = useNavigation();
+  //@ts-ignore
+  const {myWorkouts} = useSelector(state => state.user);
+
+  useEffect(() => {
+    navigation.setParams({
+      myWorkouts,
+    });
+  }, [myWorkouts]);
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      title: '',
+      headerRight: () => (
+        <NextButton
+          title={myWorkouts.length > 0 ? 'Concluir' : 'Ignorar'}
+          onPress={handleSubmit}
+        />
+      ),
+      headerRightContainerStyle: {
+        marginRight: 10,
+      },
+    });
+  }, []);
+
+  function handleSubmit() {}
+
+  return (
+    <Container>
+      <HeaderText>
+        Opções de treino pré-criados com base no seu nível.
+      </HeaderText>
+      <HeaderSubtext>Você selecionou {myWorkouts.length} treinos</HeaderSubtext>
+      <WorkoutList
+        data={presetWorkouts}
+        renderItem={({item}: any) => <Text>{item.name}</Text>}
+      />
+    </Container>
+  );
+}

src/screens/StarterRecommendations/styles.ts

@@ -0,0 +1,32 @@
+import styled from 'styled-components/native';
+
+export const Container = styled.SafeAreaView`
+  flex: 1;
+  align-items: center;
+  background-color: #fff;
+  padding: 0 30px;
+`;
+
+export const HeaderText = styled.Text`
+  font-size: 16px;
+  color: #333;
+  margin: 50px auto 30px;
+`;
+
+export const HeaderSubtext = styled(HeaderText)`
+  margin: 0px auto 30px;
+`;
+
+export const BoldText = styled.Text`
+  font-weight: bold;
+`;
+
+export const DaysArea = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+`;
+
+export const WorkoutList = styled.FlatList`
+  width: 100%;
+`;

tsconfig.json

@@ -9,7 +9,8 @@
     "moduleResolution": "node",
     "noEmit": true,
     "strict": true,
-    "target": "esnext"
+    "target": "esnext",
+    "resolveJsonModule": true
   },
   "exclude": [
     "node_modules",