Merge pull request #36 from DiProjOrcestra/20-TelaMeusProjetos

20 tela meus projetos
OrcestraGamificacao · Apr 9, 2020 · 1db7d7d · 1db7d7d
2 parents b76ef15 + 8655900
commit 1db7d7d
Show file tree

Hide file tree

Showing 9 changed files with 159 additions and 36 deletions.
diff --git a/mobile/src/components/projectCard/styles.js b/mobile/src/components/projectCard/styles.js
@@ -5,7 +5,7 @@ const styles = StyleSheet.create({
         width: 300,
         backgroundColor: '#ffffff',
         borderRadius: 12,
-        padding: 10,
+        padding: 10
     },
     image: {
         width: 65,

diff --git a/mobile/src/components/searchBar/index.js b/mobile/src/components/searchBar/index.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Input } from 'react-native-elements';
+import Icon from 'react-native-vector-icons/Ionicons';
+import styles from './styles';
+
+const SearchBar = ({changeSearchText, searchText, placeholder}) =>(
+    <Input
+        placeholder={placeholder}
+        onChangeText={changeSearchText}
+        value={searchText}
+        containerStyle={styles.searchBar}
+        inputContainerStyle={styles.searchBarContainer}
+        inputStyle={styles.searchBarText}
+        leftIcon={
+            <Icon name='ios-search'
+                size={20}
+                color='rgba(125,125,125, .5)'
+            />
+        }
+    />
+);
+
+export default SearchBar;
diff --git a/mobile/src/components/searchBar/styles.js b/mobile/src/components/searchBar/styles.js
@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+    searchBar: {
+        top: -125,
+        width: 315,
+        backgroundColor: '#ffffff',
+        borderRadius: 8,
+        paddingVertical: 5,
+        shadowOffset: {height: 1, width: 0},
+        shadowColor: '#000000',
+        shadowOpacity: .1,
+        shadowRadius: 2.22,
+        elevation: 3
+    },
+    searchBarText: {
+        marginLeft: 10,
+        fontFamily: 'Fjalla-One'
+    },
+    searchBarContainer: {
+        borderBottomWidth: 0
+    },
+});
+
+export default styles;
diff --git a/mobile/src/pages/Main/index.js b/mobile/src/pages/Main/index.js
@@ -1,10 +1,11 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import { View, Text, FlatList } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import { Button, Input } from 'react-native-elements';
-import Icon from 'react-native-vector-icons/FontAwesome';
+import Icon from 'react-native-vector-icons/Ionicons';
 import Project from '../../components/projectCard';
 import Header from '../../components/Header';
+import SearchBar from '../../components/searchBar';
 
 import styles from './styles';
 
@@ -38,20 +39,10 @@ function Main() {
   return (
     <View style={styles.container}>
       <Header title="Projetos"/>
-      <Input
-          placeholder={'Procurar projeto'}
-          onChangeText={changeSearchText}
-          value={searchText}
-          containerStyle={styles.searchBar}
-          inputContainerStyle={styles.searchBarContainer}
-          inputStyle={styles.searchBarText}
-          leftIcon={
-            <Icon name='search'
-              size={20}
-              color='rgba(125,125,125, .5)'
-            />
-          }
-        />
+      <SearchBar placeholder="Procurar projeto"
+        changeSearchText={changeSearchText}
+        searchText={searchText}
+      />
       <Text style={styles.projectAvailable}>PROJETOS DISPONÍVEIS</Text>
       <View style={styles.projectHeight}>
         <FlatList

diff --git a/mobile/src/pages/Main/styles.js b/mobile/src/pages/Main/styles.js
@@ -18,11 +18,13 @@ const styles = StyleSheet.create({
     width: 300,
     backgroundColor: '#7AC14E',
     borderRadius: 8,
-    bottom: 80,
     zIndex: 4,
     shadowOffset: {width: 10, height: 10},
     shadowColor: 'black',
     shadowOpacity: .8,
+    position: 'absolute',
+    bottom: 30,
+    left: -150
   },
   bottomGradient: {
     height: 400,
@@ -42,20 +44,6 @@ const styles = StyleSheet.create({
     lineHeight: 16,
     fontFamily: 'Fjalla-One'
   },
-  searchBar: {
-    top: -125,
-    width: 315,
-    backgroundColor: '#ffffff',
-    borderRadius: 8,
-    paddingVertical: 5,
-  },
-  searchBarText: {
-    marginLeft: 10,
-    fontFamily: 'Fjalla-One'
-  },
-  searchBarContainer: {
-    borderBottomWidth: 0
-  },
   buttonText: {
     fontFamily: 'Fjalla-One'
   }

diff --git a/mobile/src/pages/Projects/index.js b/mobile/src/pages/Projects/index.js
@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { View, Text, FlatList } from 'react-native';
+import Project from '../../components/projectCard';
+import Header from '../../components/Header';
+import SearchBar from '../../components/searchBar';
+import { Button } from 'react-native-elements';
+import Icon from 'react-native-vector-icons/Ionicons';
+
+import styles from './styles';
+
+const Projects = () => {
+
+    var [searchText, changeSearchText] = useState('');
+
+    var mock = [
+    {
+      projectName: 'Plataforma educacional gamificada',
+      ownerName: 'Jason Fried',
+      avatar: '../../../assets/icon.png',
+      labels: ['Rails', 'Ruby on Rails']
+    }];
+
+
+    mock = mock.filter(project => {return project.projectName.toLowerCase().includes(searchText.toLowerCase())});
+    return (
+        <View style={styles.container}>
+            <Header title="Meus Projetos" />
+            <SearchBar placeholder="Procurar projeto"
+                changeSearchText={changeSearchText}
+                searchText={searchText}
+            />
+            <Text style={styles.projectAvailable}>MEUS PROJETOS</Text>
+            <View style={styles.projectHeight}>
+                <FlatList
+                    keyExtractor={(item, index) => index.toString()}
+                    data={mock}
+                    renderItem={(project) => (<Project project={project}/>)}
+                    style={styles.projectList}
+                    showsVerticalScrollIndicator={false}
+                />
+            </View>
+            <Button type='solid' title='ADICIONAR PROJETO' titleStyle={styles.buttonText} buttonStyle={styles.button} />
+        </View>
+    )
+}
+
+export default Projects;
diff --git a/mobile/src/pages/Projects/styles.js b/mobile/src/pages/Projects/styles.js
@@ -0,0 +1,44 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        backgroundColor: '#F5F7FB'
+    },
+    projectList: {
+        top: -100,
+        flex: 1,
+    },
+    projectHeight: {
+        height: 325
+    },
+    button: {
+        height: 55,
+        width: 300,
+        backgroundColor: '#7AC14E',
+        borderRadius: 8,
+        zIndex: 4,
+        shadowOffset: {width: 10, height: 10},
+        shadowColor: 'black',
+        shadowOpacity: .8,
+        position: 'absolute',
+        bottom: 30,
+        left: -150
+    },
+    buttonText: {
+        fontFamily: 'Fjalla-One'
+    },
+    projectAvailable: {
+        top: -100,
+        alignSelf: 'flex-start',
+        left: 30,
+        color: 'rgba(56, 79, 125, .8)',
+        fontSize: 13,
+        letterSpacing: 1,
+        lineHeight: 16,
+        fontFamily: 'Fjalla-One'
+    },
+});
+
+export default styles;
diff --git a/mobile/src/pages/Splash/index.js b/mobile/src/pages/Splash/index.js
@@ -8,7 +8,7 @@ const Splash = ({ navigation }) =>
 
     useEffect(() => {
         setTimeout(() => {
-            navigation.navigate('Main');
+            navigation.replace('Main');
         }, 3000);
     }, []);
 

diff --git a/mobile/src/routes.js b/mobile/src/routes.js
@@ -7,6 +7,7 @@ import * as Font from 'expo-font';
 import Main from './pages/Main';
 import LoginPage from './pages/Main/LoginPage';
 import Splash from './pages/Splash';
+import Projects from './pages/Projects'
 
 import {Text} from 'react-native';
 
@@ -16,7 +17,9 @@ const Tab = createMaterialBottomTabNavigator();
 
 
 /* As telas deverão ser inseridas neste Navigator */
-const MainApp = () => (
+const MainApp = () => {
+
+  return (
   <Tab.Navigator
     shifting={false}
     initialRouteName="Feed"
@@ -31,7 +34,7 @@ const MainApp = () => (
           }}
         />
 
-        <Tab.Screen name="Meus Projetos" component={() => <Text>Meus projetos</Text>}
+        <Tab.Screen name="Meus Projetos" component={Projects}
           options={{
             tabBarLabel: 'Meus Projetos',
             tabBarIcon: ({color}) => (<Icon name="ios-paper" color={color} size={26} />)
@@ -50,7 +53,9 @@ const MainApp = () => (
           }}
         />
   </Tab.Navigator>
-);
+
+  )
+};