ff css, aled

iut-expo-starter/.expo/packager-info.json

@@ -1,6 +1,6 @@
 {
-  "expoServerPort": 19000,
+  "expoServerPort": null,
-  "packagerPort": 19000,
+  "packagerPort": null,
   "packagerPid": null,
   "expoServerNgrokUrl": null,
   "packagerNgrokUrl": null,

iut-expo-starter/App.tsx

@@ -1,6 +1,5 @@
-import { StatusBar } from 'expo-status-bar';
 import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
-import CityList from './CityList';
+import CityList from './screens/CityList';
 import { useSafeAreaInsets, SafeAreaProvider } from 'react-native-safe-area-context';
 
 export default function App() {

iut-expo-starter/components/VilleCompopo.tsx

@@ -1,25 +1,28 @@
-import React from "react";
+import React, { useState, useSyncExternalStore } from "react";
 import { View, StyleSheet, Text, Button, TouchableHighlight, Image } from "react-native";
-import { City } from "../data/stub";
+import { City, getCurrentWeather, Weather } from "../data/stub";
 
 
 type VilleProps = {
-    city: City
+    city: City,
+    fav: City
 }
 
+
 export function VilleCompopo(props: VilleProps){
+const weather = getCurrentWeather(props.city.name);
     return (
-    <View>
       <View style={styles.container}>
+        <View style={{flex: 1, flexDirection: "row"}}>
           <View style={styles.bothtext}>
             <Text style={styles.title}>{props.city.name}</Text>
             <Text>{props.city.latitude} - {props.city.longitude}</Text>
           </View>
-        <TouchableHighlight>
+            <Text style={styles.temperature}>{weather?.temperature}</Text>
-          <Image source={{uri: "http://simpleicon.com/wp-content/uploads/star.svg"}}/>
+        <TouchableHighlight /*onPress={() => props.fav = this.city}*/>
+              <Image source={ props.city==props.fav ? require('../assets/yellowstar.png') : require('../assets/blackstar.png')} style={styles.button}/>
         </TouchableHighlight>
         </View>
-      <View style={styles.separator}/>
       </View>
     );
 }
@@ -27,32 +30,29 @@ export function VilleCompopo(props: VilleProps){
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    flexDirection: "row",
-    marginHorizontal: "5%",
     backgroundColor: "darksalmon",
-    margin: 5,
+    marginVertical: 5,
     borderRadius: 15,
-    width: "90%"
+    width: "90%",
-  },
+    alignSelf: 'center'
-  separator: {
-    marginVertical: 4,
-    backgroundColor: "rgba(255,255,255,0.3)",
-    height: 1,
-    width: '90%',
-  },
-  teaserImage: {
-    width: 50,
-    height: 50,
   },
   title: {
     fontWeight: "bold",
     fontSize: 18
   },
   bothtext: {
-    width: "80%",
     margin: 10
   },
+  temperature: {
+    marginTop: 20,
+    fontSize: 18,
+    fontWeight: "bold"
+  },
   button: {
-    color: "black"
+    height: 30,
+    width: 30,
+    marginTop: 13,
+    alignSelf: "flex-end",
+    margin: 5
   }
 });

iut-expo-starter/data/stub.ts

@@ -183,6 +183,6 @@ export const WEATHER_DATA: Weather[] = [
 ];
 
 export const getCurrentWeather = (cityName: string) => {
-  if (cityName === undefined) return {};
+  if (cityName === undefined) return null;
   return WEATHER_DATA.filter(elt => elt.city.name === cityName)[0];
 }

iut-expo-starter/screens/CityList.tsx

@@ -1,6 +1,6 @@
 import { View, Text, StyleSheet } from "react-native"
 import { FlatList } from "react-native-gesture-handler"
-import { CITIES_DATA, City } from "../data/stub"
+import { CITIES_DATA, City, FAVORITE_CITY_DATA } from "../data/stub"
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { VilleCompopo } from "../components/VilleCompopo";
 import { TopBar } from "../components/TopBar";
@@ -11,13 +11,13 @@ export default function CityList(props: any){
     const statusBarHeight = insets.top;
 
     return (
-        <View style={{alignItems: "center", marginTop: statusBarHeight}}>
+        <View style={{flex: 1, width: "100%", alignItems: "center", marginTop: statusBarHeight}}>
             <TopBar/>
             <FlatList
             data={CITIES_DATA}
             keyExtractor={item =>item.name}
-            renderItem={({item}) => <VilleCompopo city={item}/>}
+            renderItem={({item}) => <VilleCompopo city={item} fav={FAVORITE_CITY_DATA}/>}
-            style={{width: "100%", alignSelf: "center"}} 
+            style={leStyle.container} 
             />
         </View>
     )
@@ -26,6 +26,8 @@ export default function CityList(props: any){
 
 const leStyle = StyleSheet.create({
     container: {
-        alignItems: 'center',
+        flex: 1,
+        alignContent: 'center',
+        width: '100%'
     },
 });