Connect appserver (#8)

* Init mobile app

* Fix typo

* Move project to root.

* Add login layout. Add aliases for folders.

* Add linter and run it.

* Add pull request template.

* Add expo-av and example of video in HomeScreen.

* Organize video player for more clean example with reference to video second.

* Add tabnavigator with init structure of screens.

* Add user button to navigate tu user profile.

* Add screens missing, empty.

* Add register screen.

* Add modal when sign up.

* Add wall layout with videos mock and video screen layout.

* Upload video to firebase first atempt. TODO: Mayor refactor.

* Refactor over uploading videos to firebase.

* Add text to icon buttons.

* Add modal when video uploaded.

* OkModal now a general component.

* Schema por env file.

* Restore gitignore.

* Change styles in login /signup to nacho's suggestions.

* Add env example.

* Add validation in upload video button .

* Change upload to firebase function name.

* Upload video (#7)

* Upload video to firebase first atempt. TODO: Mayor refactor.

* Refactor over uploading videos to firebase.

* Add text to icon buttons.

* Add modal when video uploaded.

* OkModal now a general component.

* Schema por env file.

* Restore gitignore.

* Change styles in login /signup to nacho's suggestions.

* Add env example.

* Add validation in upload video button .

* Change upload to firebase function name.

* Add connection to appserver with apisauce and redux for the store.

* Update readme with tutorial to connect to appserver locally.

* Add login logic with appserver (mock).

* Fix initial loading styles.

* Update readme with credentials for login.

* Add logic of register.

* Move clean form into another function.

* Changes due to changes in endpoints.

* Fixes.

* Add error to login and signup.

* Add user in upload video screen.

* Add error in upload video screen.

* Merge with master.

* Fix styles logout for now.

Co-authored-by: chortas <[email protected]>

Author: olifer97

.env.example

@@ -5,4 +5,6 @@ FIREBASE_PROJECT_ID=
 FIREBASE_STORAGE_BUCKET=
 FIREBASE_MESSAGING_SENDER_ID=
 FIREBASE_APP_ID=
-FIREBASE_MEASUREMENT_ID=
+FIREBASE_MEASUREMENT_ID=
+
+API_BASE_URL=http://localhost:5000

App.js

@@ -1,8 +1,15 @@
 import 'react-native-gesture-handler';
 import React from 'react';
+import { Provider } from 'react-redux';
+
+import store from '@redux/store';
 
 import AppWithNavigation from './src/app';
 
 export default function App() {
-  return <AppWithNavigation />;
+  return (
+    <Provider store={store}>
+      <AppWithNavigation />
+    </Provider>
+  );
 }

README.md

@@ -15,4 +15,21 @@
 
 - Escanear el código QR en la aplicación Expo si es android o desde la camára si es iOS
 
-- Listo!
+- Listo!
+
+## Conectar con el appserver localmente
+
+- Levantar el appserver
+
+- Levantar la app desde un emulador
+
+- En una terminal correr `adb reverse tcp:5000 tcp:5000` donde 5000 es el puerto donde esta corriendo el appserver y lo forwardeamos a la app.
+
+- Ahora las pegadas a localhost:5000 desde la app deberian pegarle al appserver levantado localmente
+
+- Para loguearse por ahora se puede usar:
+
+```
+username: 'user1'
+password: '123'
+```

package.json

@@ -20,6 +20,7 @@
     "@react-navigation/native": "^5.1.5",
     "@react-navigation/stack": "^5.2.10",
     "@react-navigation/web": "~1.0.0-alpha.9",
+    "apisauce": "^1.1.1",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.20.2",
@@ -40,7 +41,10 @@
     "react-native-gesture-handler": "~1.6.0",
     "react-native-safe-area-context": "0.7.3",
     "react-native-screens": "~2.2.0",
-    "react-native-web": "~0.11.7"
+    "react-native-web": "~0.11.7",
+    "react-redux": "^7.2.0",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.6",

src/app/components/LogoutButton/index.js

@@ -0,0 +1,28 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { FontAwesome } from '@expo/vector-icons';
+import { ROUTES } from '@constants/routes';
+import { COLORS } from '@constants/colors';
+import actionCreator from '@redux/auth/actions';
+
+export default function LoginButton({ navigation }) {
+  const dispatch = useDispatch();
+
+  const onLogout = useCallback(() => {
+    dispatch(actionCreator.logout());
+    navigation.navigate(ROUTES.Login);
+  }, [navigation, dispatch]);
+
+  return (
+    <>
+      <FontAwesome.Button
+        name="sign-out"
+        backgroundColor={COLORS.white}
+        color={COLORS.main}
+        size={30}
+        onPress={onLogout}
+      />
+    </>
+  );
+}

src/app/components/VideoPlayer/index.js

@@ -4,7 +4,7 @@ import { Video } from 'expo-av';
 
 import styles from './styles';
 
-function VideoPlayer({ sources }) {
+function VideoPlayer({ source }) {
   const [videoRef, setVideoRef] = useState(null);
 
   const handleVideoRef = useCallback((component) => {
@@ -16,7 +16,7 @@ function VideoPlayer({ sources }) {
       <Video
         ref={handleVideoRef}
         source={{
-          uri: sources[0]
+          uri: source
         }}
         rate={1.0}
         isMuted //={false}

src/app/index.js

@@ -16,6 +16,7 @@ import VideoDetailScreen from '@screens/VideoDetailScreen';
 import UploadVideoScreen from '@screens/UploadVideoScreen';
 import TabBarIcon from '@components/TabBarIcon';
 import HeaderButtons from '@components/HeaderButtons';
+//import LogoutButton from '@components/LogoutButton';
 
 const Stack = createStackNavigator();
 const WallStack = createStackNavigator();
@@ -29,6 +30,7 @@ function WallStackScreen() {
         component={HomeScreen}
         options={({ navigation }) => ({
           title: ROUTES.Wall,
+          //headerLeft: () => <LogoutButton navigation={navigation} />,
           headerRightContainerStyle: { flexDirection: 'row' },
           headerRight: () => <HeaderButtons navigation={navigation} />
         })}
@@ -96,7 +98,9 @@ function TabNavigatorScreen() {
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator initialRouteName={ROUTES.Login} headerMode="none">
+      <Stack.Navigator
+        initialRouteName={ROUTES.InitialLoading}
+        headerMode="none">
         <Stack.Screen name={ROUTES.InitialLoading} component={InitialLoading} />
         <Stack.Screen name={ROUTES.Login} component={LoginScreen} />
         <Stack.Screen name={ROUTES.SignUp} component={SignUpScreen} />

src/app/screens/HomeScreen/constants.js

@@ -1,23 +1,40 @@
-import React, { useCallback } from 'react';
-import { SafeAreaView, FlatList, TouchableOpacity } from 'react-native';
+import React, { useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  SafeAreaView,
+  FlatList,
+  TouchableOpacity,
+  ActivityIndicator
+} from 'react-native';
 
 import { ROUTES } from '@constants/routes';
+import { COLORS } from '@constants/colors';
 import VideoCard from '@components/VideoCard';
+import actionCreators from '@redux/videos/actions';
 
-import { VIDEOS } from './constants';
 import styles from './styles';
 
 function HomeScreen({ navigation }) {
+  const dispatch = useDispatch();
+
+  const videos = useSelector((state) => state.videos.videos);
+  const videosLoading = useSelector((state) => state.videos.loading);
+
+  useEffect(() => {
+    dispatch(actionCreators.getVideos());
+  }, [dispatch]);
+
   const renderVideo = useCallback(
     ({ item }) => (
       <TouchableOpacity
+        style={styles.videoCard}
         onPress={() =>
           navigation.navigate(ROUTES.VideoScreen, { video: item })
         }>
         <VideoCard
           title={item.title}
           thumb={item.thumb}
-          subtitle={item.subtitle}
+          subtitle={item.author}
         />
       </TouchableOpacity>
     ),
@@ -28,11 +45,15 @@ function HomeScreen({ navigation }) {
 
   return (
     <SafeAreaView style={styles.container}>
-      <FlatList
-        data={VIDEOS}
-        renderItem={renderVideo}
-        keyExtractor={keyExtractor}
-      />
+      {videosLoading ? (
+        <ActivityIndicator size="large" color={COLORS.main} />
+      ) : (
+        <FlatList
+          data={videos}
+          renderItem={renderVideo}
+          keyExtractor={keyExtractor}
+        />
+      )}
     </SafeAreaView>
   );
 }

src/app/screens/HomeScreen/index.js

@@ -6,10 +6,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center'
   },
-  addVideoButton: {
-    position: 'absolute',
-    right: 30,
-    bottom: 30
+  videoCard: {
+    minWidth: '100%'
   }
 });