#23 Create Notifications screen

mobile/src/components/Header/index.js

@@ -1,18 +1,17 @@
-import React, {useState} from 'react';
-import { View, Text, FlatList } from 'react-native';
+import React from 'react';
+import { Text } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
+import Icon from 'react-native-vector-icons/Feather';
 import styles from './styles';
 
-const Header = props => {
-
-    return (
-        <LinearGradient
-            colors={['#7AC14E', '#5A8D3B']}
-            style={styles.top}
-        >
-            <Text style={styles.pageTitle}>{props.title}</Text>
-      </LinearGradient>
-    );
-}
+const Header = ({ title, onPressBack }) => (
+  <LinearGradient
+    colors={['#7AC14E', '#5A8D3B']}
+    style={styles.top}
+  >
+    {onPressBack ? <Icon onPress={onPressBack} name="arrow-left" size={24} color="#ffffff" style={styles.back} /> : null}
+    <Text style={styles.pageTitle}>{title}</Text>
+  </LinearGradient>
+);
 
-export default Header;
+export default Header;

mobile/src/components/Header/styles.js

@@ -1,24 +1,33 @@
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
-    top: {
-        height: 250,
-        width: 300,
-        alignSelf: 'center',
-        top: -100,
-        borderBottomLeftRadius: 1000,
-        borderBottomRightRadius: 1000,
-        transform: [{scaleX: 2}]
-    },
-    pageTitle: {
-        fontSize: 20,
-        color: '#ffffff',
-        lineHeight: 22,
-        fontFamily: 'Fjalla-One',
-        top: 175,
-        alignSelf: 'center',
-        transform: [{scaleX: 1/2}],
-    },
+  top: {
+    height: 250,
+    width: 300,
+    alignSelf: 'center',
+    top: -100,
+    borderBottomLeftRadius: 1000,
+    borderBottomRightRadius: 1000,
+    transform: [{ scaleX: 2 }],
+  },
+  pageTitle: {
+    fontSize: 20,
+    color: '#ffffff',
+    lineHeight: 22,
+    fontFamily: 'Fjalla-One',
+    top: 175,
+    alignSelf: 'center',
+    transform: [{ scaleX: 1 / 2 }],
+    height: 30,
+    textAlignVertical: 'center',
+  },
+  back: {
+    position: 'absolute',
+    top: 172.5,
+    left: 70,
+    /* alignSelf: 'center', */
+    transform: [{ scaleX: 1 / 2 }],
+  },
 });
 
-export default styles;
+export default styles;

mobile/src/components/notification/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import Icon from 'react-native-vector-icons/EvilIcons';
+
+import styles from './styles';
+
+const Description = (type, name) => {
+  switch (type) {
+    case 'NOTIFICATION_MESSAGE':
+      return (<Text style={styles.description}>{`${name} te enviou uma mensangem`}</Text>);
+    case 'NOTIFICATION_PROJECT_ACCEPTED':
+      return (<Text style={styles.description}>{`${name} te aceitou no projeto`}</Text>);
+    case 'NOTIFICATION_PROJECT_REQUEST':
+      return (<Text style={styles.description}>{`${name} pediu para fazer parte do seu projeto`}</Text>);
+    case 'NOTIFICATION_PROJECT_INVITE':
+      return (<Text style={styles.description}>{`${name} pediu para fazer parte deste projeto`}</Text>);
+    default:
+      return null;
+  }
+};
+
+const Notification = ({ name, type }) => (
+  <View style={styles.card}>
+    <View>
+      <Text style={styles.name}>{name}</Text>
+      {Description(type, name)}
+    </View>
+    <Icon size={20} name="close" style={styles.quit} />
+  </View>
+);
+
+export default Notification;

mobile/src/components/notification/styles.js

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#ffffff',
+    height: 85,
+    width: 300,
+    borderRadius: 8,
+    margin: 10,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  name: {
+    fontFamily: 'Fjalla-One',
+    fontSize: 14,
+    marginVertical: 5,
+    marginLeft: 65,
+  },
+  quit: {
+    padding: 30,
+  },
+  description: {
+    fontFamily: 'Fjalla-One',
+    fontSize: 12,
+    color: '#888888',
+    marginLeft: 65,
+    width: 150,
+  },
+});
+
+export default styles;

mobile/src/pages/Main/index.js

@@ -1,45 +1,45 @@
 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/Ionicons';
+import { Button } from 'react-native-elements';
 import Project from '../../components/projectCard';
 import Header from '../../components/Header';
 import SearchBar from '../../components/searchBar';
 
 import styles from './styles';
 
-function Main() {
+const Main = ({ navigation }) => {
+  const [searchText, changeSearchText] = useState('');
 
-  var [searchText, changeSearchText] = useState('');
-
-  var mock = [
+  let mock = [
     {
       projectName: 'Plataforma educacional gamificada',
       ownerName: 'Jason Fried',
       avatar: '../../../assets/icon.png',
-      labels: ['Rails', 'Ruby on Rails']
+      labels: ['Rails', 'Ruby on Rails'],
     },
     {
       projectName: 'App de academia gamificado',
       ownerName: 'Henri Charriere',
       avatar: '../../../assets/icon.png',
-      labels: ['Javascript', 'React Native']
+      labels: ['Javascript', 'React Native'],
     },
     {
       projectName: 'Chatbot de monitoramento ',
       ownerName: 'Stephen King',
       avatar: '../../../assets/icon.png',
-      labels: ['Rasa', 'Python']
-    }
+      labels: ['Rasa', 'Python'],
+    },
   ];
 
-  mock = mock.filter(project => {return project.projectName.toLowerCase().includes(searchText.toLowerCase())});
+  mock = mock.filter((project) => project.projectName.toLowerCase()
+    .includes(searchText.toLowerCase()));
 
   return (
     <View style={styles.container}>
-      <Header title="Projetos"/>
-      <SearchBar placeholder="Procurar projeto"
+      <Header title="Projetos" />
+      <SearchBar
+        placeholder="Procurar projeto"
         changeSearchText={changeSearchText}
         searchText={searchText}
       />
@@ -48,15 +48,15 @@ function Main() {
         <FlatList
           keyExtractor={(item, index) => index.toString()}
           data={mock}
-          renderItem={(project) => (<Project project={project}/>)}
+          renderItem={(project) => (<Project project={project} />)}
           style={styles.projectList}
           showsVerticalScrollIndicator={false}
         />
       </View>
-      <Button type='solid' title='ADICIONAR PROJETO' titleStyle={styles.buttonText} buttonStyle={styles.button} />
-      <LinearGradient pointerEvents='none' colors={['rgba(255, 255, 255, 0)', '#ffffff']} start={[0, 0]} end={[0, .7]} style={styles.bottomGradient} />
+      <Button type="solid" title="ADICIONAR PROJETO" titleStyle={styles.buttonText} buttonStyle={styles.button} />
+      <LinearGradient pointerEvents="none" colors={['rgba(255, 255, 255, 0)', '#ffffff']} start={[0, 0]} end={[0, 0.7]} style={styles.bottomGradient} />
     </View>
   );
-}
+};
 
 export default Main;

mobile/src/pages/Main/styles.js

@@ -4,35 +4,35 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
-    backgroundColor: '#F5F7FB'
+    backgroundColor: '#F5F7FB',
   },
   projectList: {
     top: -100,
     flex: 1,
   },
   projectHeight: {
-    height: 325
+    height: 325,
   },
   button: {
     height: 55,
     width: 300,
     backgroundColor: '#7AC14E',
     borderRadius: 8,
     zIndex: 4,
-    shadowOffset: {width: 10, height: 10},
+    shadowOffset: { width: 10, height: 10 },
     shadowColor: 'black',
-    shadowOpacity: .8,
+    shadowOpacity: 0.8,
     position: 'absolute',
     bottom: 30,
-    left: -150
+    left: -150,
   },
   bottomGradient: {
     height: 400,
     width: '100%',
     zIndex: 3,
     width: 500,
     marginTop: -320,
-    bottom: 0
+    bottom: 0,
   },
   projectAvailable: {
     top: -100,
@@ -42,11 +42,11 @@ const styles = StyleSheet.create({
     fontSize: 13,
     letterSpacing: 1,
     lineHeight: 16,
-    fontFamily: 'Fjalla-One'
+    fontFamily: 'Fjalla-One',
   },
   buttonText: {
-    fontFamily: 'Fjalla-One'
-  }
+    fontFamily: 'Fjalla-One',
+  },
 });
 
 export default styles;

mobile/src/pages/Notifications/index.js

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { View, FlatList, Text } from 'react-native';
+import Header from '../../components/Header';
+import Notification from '../../components/notification';
+
+import styles from './styles';
+
+const Notifications = () => {
+  const [notifications, updateNotifications] = useState([
+    {
+      name: 'Ateldy Brasil',
+      type: 'NOTIFICATION_PROJECT_ACCEPTED',
+      date: '10/04/2020',
+      project: 'Ada Bot',
+    },
+    {
+      name: 'João Vitor',
+      type: 'NOTIFICATION_MESSAGE',
+      date: '12/04/2020',
+      project: 'Hub Care',
+    },
+    {
+      name: 'Alan Marques',
+      type: 'NOTIFICATION_PROJECT_REQUEST',
+      date: '11/04/2020',
+      project: 'IFB',
+    },
+  ]);
+
+  return (
+    <View style={styles.container}>
+      <Header title="Notificações" />
+      <Text style={styles.subtitle}>PROJETOS DISPONÍVEIS</Text>
+      <FlatList
+        style={styles.list}
+        keyExtractor={(item, index) => index.toString()}
+        data={notifications}
+        renderItem={(notification) => (
+          <Notification
+            name={notification.item.name}
+            type={notification.item.type}
+            project={notification.item.project}
+          />
+        )}
+      />
+    </View>
+  );
+};
+
+export default Notifications;

mobile/src/pages/Notifications/styles.js

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    backgroundColor: '#F5F7FB',
+  },
+  list: {
+    flex: 1,
+    top: -75,
+  },
+  subtitle: {
+    top: -75,
+    alignSelf: 'flex-start',
+    left: 30,
+    color: 'rgba(56, 79, 125, .8)',
+    fontSize: 13,
+    letterSpacing: 1,
+    lineHeight: 16,
+    fontFamily: 'Fjalla-One',
+    marginBottom: 10,
+  },
+});
+
+export default styles;