first commit

.vs/VSWorkspaceState.json

@@ -0,0 +1,9 @@
+{
+  "ExpandedNodes": [
+    "",
+    "\\components",
+    "\\data"
+  ],
+  "SelectedNode": "\\tsconfig.json",
+  "PreviewInSolutionExplorer": false
+}

App.tsx

@@ -1,20 +1,39 @@
+import React from 'react';
+
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+import List from './pages/List';
+import Learn from './pages/Learn';
+import Playground from './pages/Playground';
+
+import Header from './components/Header';
 
 export default function App() {
+
+    const Tab = createBottomTabNavigator();
+
   return (
-    <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <SafeAreaView style={styles.container}>
+        <Header/>
+        <StatusBar style="auto" />
+        <NavigationContainer>
+            <Tab.Navigator>
+                <Tab.Screen name="List" component={List} />
+                <Tab.Screen name="Learn" component={Learn} />
+                <Tab.Screen name="Playground" component={Playground} />
+            </Tab.Navigator>
+        </NavigationContainer>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+
   },
 });

components/Header.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+
+
+const Header = () => {
+
+    return (
+        <View style={headerStyle.container}>
+            <Text style={headerStyle.title}>LEARNIHON</Text>
+        </View>
+    );
+};
+
+const headerStyle = StyleSheet.create({
+    container: {
+        backgroundColor: '#FF5C5C',
+        width: '100%',
+        padding: 10
+    },
+    title: {
+        color: 'white',
+        textAlign: 'center',
+        fontWeight: 'bold',
+        fontSize: 30,
+    }
+})
+
+export default Header;

components/KanjiCard.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import { Text, View } from 'react-native';
+
+type KanjiProps = {
+    kanji: string;
+}
+
+const KanjiCard = (props: KanjiProps) => {
+
+    const options = {
+        method: 'GET',
+        headers: {
+            'X-RapidAPI-Key': '19516a9900mshce10de76f99976bp10f192jsn8c8d82222baa',
+            'X-RapidAPI-Host': 'kanjialive-api.p.rapidapi.com'
+        }
+    }
+
+    const [loading, setLoading] = useState(true);
+    const [res, setData] = useState(null);
+    const fetchData = async () => {
+        await fetch(`https://kanjialive-api.p.rapidapi.com/api/public/kanji/${props.kanji}`, options)
+            .then(async response => {
+                setData(await response.json());
+            })
+            .catch(err => console.log(err)); 
+    }
+
+    useEffect(() => {
+        setLoading(true);
+        fetchData().then(_ => {
+            setLoading(false);
+        });
+    }, []);
+
+    return (
+        <View>
+            <View>
+                <Text> {loading ? <Text>Loading...</Text> : <Text>{res.kanji.character}</Text>}</Text>
+            </View>
+            <View>
+                <Text></Text>
+            </View>
+        </View>
+    );
+};
+
+export default KanjiCard;

data/stub.ts

@@ -1,188 +1,12 @@
-export class City {
-  private _name: string;
-  private _latitude: number;
+export class Kanji {
+  private _symbol: string;
+  private _meaning: string;
   private _longitude: number;
 
-  constructor(name: string, latitude: number, longitude: number) {
-    this._name = name;
-    this._latitude = latitude;
-    this._longitude = longitude;
+  constructor(name: string, latitude: string, longitude: number) {
+      this._symbol = name;
+      this._meaning = latitude;
+      this._longitude = longitude;
   }
 
-  get name(): string {
-    return this._name;
-  }
-
-  set name(value: string) {
-    this._name = value;
-  }
-
-  get latitude(): number {
-    return this._latitude;
-  }
-
-  set latitude(value: number) {
-    this._latitude = value;
-  }
-
-  get longitude(): number {
-    return this._longitude;
-  }
-
-  set longitude(value: number) {
-    this._longitude = value;
-  }
-}
-
-export class Weather {
-  private _at: string;
-  private _visibility: number;
-  private _weatherType: string;
-  private _weatherDescription: string;
-  private _temperature: number;
-  private _temperatureFeelsLike: number;
-  private _humidity: number;
-  private _windSpeed: number;
-  private _pressure: number;
-  private _city: City;
-
-  constructor(at: string, visibility: number, weatherType: string, weatherDescription: string, temperature: number, temperatureFeelsLike: number, humidity: number, windSpeed: number, pressure: number, city: City) {
-    this._at = at;
-    this._visibility = visibility;
-    this._weatherType = weatherType;
-    this._weatherDescription = weatherDescription;
-    this._temperature = temperature;
-    this._temperatureFeelsLike = temperatureFeelsLike;
-    this._humidity = humidity;
-    this._windSpeed = windSpeed;
-    this._pressure = pressure;
-    this._city = city;
-  }
-
-  get at(): string {
-    return this._at;
-  }
-
-  set at(value: string) {
-    this._at = value;
-  }
-
-  get visibility(): number {
-    return this._visibility;
-  }
-
-  set visibility(value: number) {
-    this._visibility = value;
-  }
-
-  get weatherType(): string {
-    return this._weatherType;
-  }
-
-  set weatherType(value: string) {
-    this._weatherType = value;
-  }
-
-  get weatherDescription(): string {
-    return this._weatherDescription;
-  }
-
-  set weatherDescription(value: string) {
-    this._weatherDescription = value;
-  }
-
-  get temperature(): number {
-    return this._temperature;
-  }
-
-  set temperature(value: number) {
-    this._temperature = value;
-  }
-
-  get temperatureFeelsLike(): number {
-    return this._temperatureFeelsLike;
-  }
-
-  set temperatureFeelsLike(value: number) {
-    this._temperatureFeelsLike = value;
-  }
-
-  get humidity(): number {
-    return this._humidity;
-  }
-
-  set humidity(value: number) {
-    this._humidity = value;
-  }
-
-  get windSpeed(): number {
-    return this._windSpeed;
-  }
-
-  set windSpeed(value: number) {
-    this._windSpeed = value;
-  }
-
-  get pressure(): number {
-    return this._pressure;
-  }
-
-  set pressure(value: number) {
-    this._pressure = value;
-  }
-
-  get city(): City {
-    return this._city;
-  }
-
-  set city(value: City) {
-    this._city = value;
-  }
-}
-
-export const CITIES_DATA: City[] = [
-  new City("Paris", 48.866667, 2.333333),
-  new City("Clermont-Ferrand", 45.777222, 3.087025),
-  new City("Lyon", 45.764043, 4.835659),
-  new City("Marseille", 43.296482, 5.36978),
-  new City("Bruxelles", 50.85034, 4.35171),
-];
-
-export const FAVORITE_CITY_DATA =
-  new City("Clermont-Ferrand", 45.777222, 3.087025);
-
-export const DEFAULT_SELECTED_CITY_DATA: City =
-  new City("Paris", 48.866667, 2.333333);
-
-export const WEATHER_DATA: Weather[] = [
-  new Weather("2023-01-22 09:55:59", 10000, "Nuageux",
-    "couvert", 0.52, -4.34,
-    82, 5.14, 1032,
-    new City("Paris", 48.866667, 2.333333)
-  ),
-  new Weather("2023-01-22 09:55:59", 10000, "Nuageux",
-    "couvert", 0.52, -4.34,
-    82, 5.14, 1032,
-    new City("Clermont-Ferrand", 45.777222, 3.087025)
-  ),
-  new Weather("2023-01-22 09:55:59", 10000, "Nuageux",
-    "couvert", 0.52, -4.34,
-    82, 5.14, 1032,
-    new City("Lyon", 45.764043, 4.835659)
-  ),
-  new Weather("2023-01-22 09:55:59", 10000, "Nuageux",
-    "couvert", 0.52, -4.34,
-    82, 5.14, 1032,
-    new City("Marseille", 43.296482, 5.36978)
-  ),
-  new Weather("2023-01-22 09:55:59", 10000, "Nuageux",
-    "couvert", 0.52, -4.34,
-    82, 5.14, 1032,
-    new City("Bruxelles", 50.85034, 4.35171)
-  ),
-];
-
-export const getCurrentWeather = (cityName: string) => {
-  if (cityName === undefined) return {};
-  return WEATHER_DATA.filter(elt => elt.city.name === cityName)[0];
 }

package.json

@@ -9,6 +9,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@react-navigation/bottom-tabs": "^6.5.4",
     "expo": "~47.0.12",
     "expo-status-bar": "~1.4.2",
     "react": "18.1.0",

pages/Learn.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import KanjiCard from '../components/KanjiCard';
+
+
+const Learn = () => {
+
+    return (
+        <View style={headerStyle.container}>
+            <Text>Play !</Text>
+        </View>
+    );
+};
+
+const headerStyle = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    }
+})
+
+export default Learn;

pages/List.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import KanjiCard from '../components/KanjiCard';
+
+
+const Header = () => {
+
+    return (
+        <View style={headerStyle.container}>
+            <Text>Some list</Text>
+        </View>
+    );
+};
+
+const headerStyle = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    }
+})
+
+export default Header;

pages/Playground.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import KanjiCard from '../components/KanjiCard';
+
+
+const Playground = () => {
+
+    return (
+        <View style={headerStyle.container}>
+            <KanjiCard kanji="?"></KanjiCard>
+        </View>
+    );
+};
+
+const headerStyle = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    }
+})
+
+export default Playground;

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
+    "jsx": "react",
     "strict": true
   }
 }