feat: 🎸 je consulte le détail d'un article (#72)

* feat: 🎸 je consulte le détail d'un article ✅ Closes: #28 * refactor: 💡 PR 🎸 je consulte le détail d'un article Co-authored-by: Benjamin Guedj <benjaminguedj@hotmail.fr>
SocialGouv · Mar 23, 2021 · 5b3a330 · 5b3a330
1 parent 7dd456f
commit 5b3a330
Show file tree

Hide file tree

Showing 9 changed files with 186 additions and 6 deletions.
diff --git a/front/components/timeline/TimlineStep.tsx b/front/components/timeline/TimlineStep.tsx
@@ -10,13 +10,15 @@ interface TimelineStepProps {
   icon: React.ReactNode;
   index: number;
   isTheLast: boolean;
+  onPress: () => void;
 }
 
 const TimelineStep: FC<TimelineStepProps> = ({
   title,
   icon,
   index: listIndex,
   isTheLast,
+  onPress,
 }) => {
   const getStyles = (index: number, isLast: boolean) => {
     const initialOffset = 10;
@@ -39,7 +41,7 @@ const TimelineStep: FC<TimelineStepProps> = ({
   };
 
   return (
-    <View style={getStyles(listIndex, isTheLast)}>
+    <View style={getStyles(listIndex, isTheLast)} onTouchEnd={onPress}>
       <View style={[styles.stepIconContainer, styles.justifyContentCenter]}>
         {icon}
       </View>

diff --git a/front/navigation/BottomTabNavigator.tsx b/front/navigation/BottomTabNavigator.tsx
@@ -9,6 +9,8 @@ import IconeCalendrier from "../assets/images/icone calendrier.svg";
 import IconeFavoris from "../assets/images/icone favoris.svg";
 import Colors from "../constants/Colors";
 import useColorScheme from "../hooks/useColorScheme";
+import Article from "../screens/Article";
+import ListArticles from "../screens/ListArticles";
 import TabAroundMeScreen from "../screens/TabAroundMeScreen";
 import TabCalendarScreen from "../screens/TabCalendarScreen";
 import TabFavoritesScreen from "../screens/TabFavoritesScreen";
@@ -84,6 +86,8 @@ const TabHomeNavigator: FC = () => (
       component={TabHomeScreen}
       options={{}}
     />
+    <TabHomeStack.Screen name="listArticles" component={ListArticles} />
+    <TabHomeStack.Screen name="article" component={Article} />
   </TabHomeStack.Navigator>
 );
 

diff --git a/front/navigation/index.tsx b/front/navigation/index.tsx
@@ -14,8 +14,8 @@ import LogoMinistere from "../assets/images/Logo ministere.svg";
 import { Text, View } from "../components/Themed";
 import Colors from "../constants/Colors";
 import NotFoundScreen from "../screens/NotFoundScreen";
-import { Onboarding } from "../screens/Onboarding";
-import { Profile } from "../screens/Profile";
+import Onboarding from "../screens/Onboarding";
+import Profile from "../screens/Profile";
 import type { RootStackParamList } from "../types";
 import BottomTabNavigator from "./BottomTabNavigator";
 import LinkingConfiguration from "./LinkingConfiguration";

diff --git a/front/screens/Article.tsx b/front/screens/Article.tsx
@@ -0,0 +1,60 @@
+import type { FC } from "react";
+import * as React from "react";
+import { StyleSheet, Text } from "react-native";
+import { Image } from "react-native-elements";
+
+import { View } from "../components/Themed";
+import Colors from "../constants/Colors";
+
+const Article: FC = () => {
+  const screenTitle = "Nom de l'étape";
+  const description =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
+  const article = {
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    imageUrl:
+      "https://raw.githubusercontent.com/koehlersimon/fallback/master/Resources/Public/Images/placeholder.jpg",
+    name: "Lorem ipsum dolor sit",
+  };
+
+  return (
+    <View style={[styles.mainContainer]}>
+      <View>
+        <Text style={[styles.title]}>{screenTitle}</Text>
+        <Text style={[styles.description]}>{description}</Text>
+      </View>
+      <View>
+        <Image
+          source={{ uri: article.imageUrl }}
+          style={[styles.articleImage]}
+        />
+        <Text style={[styles.title]}>{article.name}</Text>
+        <Text>{article.description}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  articleImage: {
+    height: 150,
+    marginBottom: 15,
+    marginTop: 15,
+    width: "100%",
+  },
+  description: {
+    color: Colors.textColor,
+  },
+  mainContainer: {
+    padding: 15,
+  },
+  title: {
+    color: Colors.primaryColor,
+    fontSize: 15,
+    fontWeight: "bold",
+    marginBottom: 10,
+  },
+});
+
+export default Article;
diff --git a/front/screens/ListArticles.tsx b/front/screens/ListArticles.tsx
@@ -0,0 +1,99 @@
+import type { StackNavigationProp } from "@react-navigation/stack";
+import type { FC } from "react";
+import * as React from "react";
+import { StyleSheet, Text } from "react-native";
+import { Image, ListItem } from "react-native-elements";
+
+import { View } from "../components/Themed";
+import Colors from "../constants/Colors";
+import type { TabHomeParamList } from "../types";
+
+interface Props {
+  navigation: StackNavigationProp<TabHomeParamList, "listArticles">;
+}
+
+const ListArticles: FC<Props> = ({ navigation }) => {
+  const screenTitle = "Nom de l'étape";
+  const description =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
+  const articles = [
+    {
+      imageUrl:
+        "https://raw.githubusercontent.com/koehlersimon/fallback/master/Resources/Public/Images/placeholder.jpg",
+      name: "Lorem ipsum dolor sit",
+      subtitle:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+    {
+      imageUrl:
+        "https://raw.githubusercontent.com/koehlersimon/fallback/master/Resources/Public/Images/placeholder.jpg",
+      name: "Lorem ipsum dolor sit amet",
+      subtitle:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+    {
+      imageUrl:
+        "https://raw.githubusercontent.com/koehlersimon/fallback/master/Resources/Public/Images/placeholder.jpg",
+      name: "Lorem ipsum dolor sit",
+      subtitle:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+  ];
+
+  return (
+    <View style={[styles.mainContainer]}>
+      <View>
+        <Text style={[styles.title]}>{screenTitle}</Text>
+        <Text style={[styles.description]}>{description}</Text>
+      </View>
+      <View>
+        {articles.map((article, index) => (
+          <ListItem
+            key={index}
+            bottomDivider
+            onPress={() => {
+              navigation.navigate("article");
+            }}
+          >
+            <Image
+              source={{ uri: article.imageUrl }}
+              style={{ height: 100, width: 100 }}
+            />
+            <ListItem.Content>
+              <ListItem.Title style={[styles.articleTitle]}>
+                {article.name}
+              </ListItem.Title>
+              <ListItem.Subtitle style={[styles.articleDescription]}>
+                {article.subtitle}
+              </ListItem.Subtitle>
+            </ListItem.Content>
+          </ListItem>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  articleDescription: {
+    color: Colors.textColor,
+  },
+  articleTitle: {
+    color: Colors.primaryColor,
+    fontSize: 15,
+  },
+  description: {
+    color: Colors.textColor,
+  },
+  mainContainer: {
+    padding: 15,
+  },
+  title: {
+    color: Colors.primaryColor,
+    fontSize: 18,
+    fontWeight: "bold",
+    marginBottom: 10,
+  },
+});
+
+export default ListArticles;
diff --git a/front/screens/Onboarding.tsx b/front/screens/Onboarding.tsx
@@ -27,7 +27,7 @@ interface SlideView {
   description: string;
 }
 
-export const Onboarding: FC<Props> = ({ navigation }) => {
+const Onboarding: FC<Props> = ({ navigation }) => {
   const appName = "1000 JOURS APP'";
   const slideViews: SlideView[] = [
     {
@@ -179,3 +179,5 @@ const styles = StyleSheet.create({
     paddingTop: 10,
   },
 });
+
+export default Onboarding;
diff --git a/front/screens/Profile.tsx b/front/screens/Profile.tsx
@@ -16,7 +16,7 @@ interface Props {
   navigation: StackNavigationProp<RootStackParamList, "profile">;
 }
 
-export const Profile: FC<Props> = ({ navigation }) => {
+const Profile: FC<Props> = ({ navigation }) => {
   const appName = "1000 JOURS APP'";
   const image = <ProfileImage />;
   const title = "Votre profil";
@@ -214,3 +214,5 @@ const styles = StyleSheet.create({
     width: "100%",
   },
 });
+
+export default Profile;
diff --git a/front/screens/TabHomeScreen.tsx b/front/screens/TabHomeScreen.tsx
@@ -1,3 +1,4 @@
+import type { StackNavigationProp } from "@react-navigation/stack";
 import { range } from "lodash";
 import type { FC } from "react";
 import * as React from "react";
@@ -15,13 +16,18 @@ import StepIcon1 from "../assets/images/icone projet parent.svg";
 import { View } from "../components/Themed";
 import TimelineStep from "../components/timeline/TimlineStep";
 import Colors from "../constants/Colors";
+import type { TabHomeParamList } from "../types";
 
 interface Step {
   title: string;
   icon: React.ReactNode;
 }
 
-const TabHomeScreen: FC = () => {
+interface Props {
+  navigation: StackNavigationProp<TabHomeParamList, "listArticles">;
+}
+
+const TabHomeScreen: FC<Props> = ({ navigation }) => {
   const screenTitle = "Choisissez l'étape que vous souhaitez approfondir";
   const description =
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
@@ -97,6 +103,9 @@ const TabHomeScreen: FC = () => {
             index={index}
             isTheLast={index === steps.length - 1}
             key={index}
+            onPress={() => {
+              navigation.navigate("listArticles");
+            }}
           />
         ))}
       </View>

diff --git a/front/types.tsx b/front/types.tsx
@@ -17,6 +17,8 @@ export type BottomTabParamList = {
 
 export type TabHomeParamList = {
   tabHomeScreen: undefined;
+  listArticles: undefined;
+  article: undefined;
 };
 
 export type TabCalendarParamList = {