#21 Notification component review

OrcestraGamificacao · Apr 20, 2020 · 5e1ba17 · 5e1ba17
1 parent a0bfc32
commit 5e1ba17
Show file tree

Hide file tree

Showing 12 changed files with 96 additions and 82 deletions.
diff --git a/mobile/package.json b/mobile/package.json
@@ -27,6 +27,7 @@
     "react-native-reanimated": "^1.7.0",
     "react-native-safe-area-context": "^0.7.3",
     "react-native-screens": "^2.3.0",
+    "react-native-vector-icons": "^6.6.0",
     "react-native-web": "~0.11.7"
   },
   "devDependencies": {

diff --git a/mobile/src/components/notification/index.js b/mobile/src/components/notification/index.js
@@ -21,7 +21,7 @@ const Description = (type, name) => {
 
 const Notification = ({ name, type }) => (
   <View style={styles.card}>
-    <View>
+    <View style={styles.text}>
       <Text style={styles.name}>{name}</Text>
       {Description(type, name)}
     </View>

diff --git a/mobile/src/components/notification/styles.js b/mobile/src/components/notification/styles.js
@@ -15,7 +15,6 @@ const styles = StyleSheet.create({
     fontFamily: 'Fjalla-One',
     fontSize: 14,
     marginVertical: 5,
-    marginLeft: 65,
   },
   quit: {
     padding: 30,
@@ -24,8 +23,10 @@ const styles = StyleSheet.create({
     fontFamily: 'Fjalla-One',
     fontSize: 12,
     color: '#888888',
-    marginLeft: 65,
-    width: 150,
+    width: 200,
+  },
+  text: {
+    marginLeft: 20,
   },
 });
 

diff --git a/mobile/src/components/projectCard/index.js b/mobile/src/components/projectCard/index.js
@@ -1,40 +1,50 @@
-import React, {useState} from 'react';
-import { View, Image, Text, FlatList } from 'react-native';
-import { ListItem, Card } from 'react-native-elements'
+import {
+  View, Image, Text, FlatList,
+} from 'react-native';
+import React, { useState } from 'react';
+import { ListItem, Card } from 'react-native-elements';
 import styles from './styles';
 
-const Label = ({name}) =>{
-    return (
-        <View style={styles.labelView}><Text style={styles.labelText}>{name.item}</Text></View>
-)};
+const Label = ({ name }) => (
+  <View style={styles.labelView}><Text style={styles.labelText}>{name.item}</Text></View>
+);
 
-const Project = props =>
-{
-    const project = props.project;
-    const {projectName, ownerName, avatar, labels} = project.item;
+const Project = (props) => {
+  const { project } = props;
+  const {
+    projectName, ownerName, labels,
+  } = project.item;
 
-    return(
+  return (
     <Card containerStyle={styles.card}>
-        <ListItem
-            title={
-            <Text style={styles.projectName}>{projectName}</Text>
+      <ListItem
+        title={
+          <Text style={styles.projectName}>{projectName}</Text>
             }
-            subtitle={
-                <>
-                <Text style={styles.ownerName}>
-                    {ownerName}
-                </Text>
-                <View style={styles.labelList}>
-                    <FlatList horizontal data={labels} keyExtractor={(item, index) => index.toString()} renderItem={(label) => <Label name={label} />}/>
-                </View>
-                </>
-            }
-            leftAvatar={(
-                <Image style={styles.image} source={require('../../../assets/icon.png')} />
+        subtitle={(
+          <>
+            <Text style={styles.ownerName}>
+              {ownerName}
+            </Text>
+            <View style={styles.labelList}>
+              <FlatList
+                horizontal
+                data={labels}
+                keyExtractor={(item, index) => index.toString()}
+                renderItem={(label) => <Label name={label} />}
+              />
+            </View>
+          </>
+              )}
+        leftAvatar={(
+          <Image
+            style={styles.image}
+            source={require('../../../assets/icon.png')}
+          />
             )}
-        />
+      />
     </Card>
-    );
+  );
 };
 
-export default Project;
+export default Project;
diff --git a/mobile/src/components/searchBar/index.js b/mobile/src/components/searchBar/index.js
@@ -3,21 +3,22 @@ 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)'
-            />
-        }
-    />
+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;
+export default SearchBar;
diff --git a/mobile/src/pages/Main/LoginPage/index.js → mobile/src/pages/LoginPage/index.js b/mobile/src/pages/Main/LoginPage/index.js → mobile/src/pages/LoginPage/index.js
@@ -1,5 +1,7 @@
 import React from 'react';
-import { View, Text, Image, TouchableOpacity } from 'react-native';
+import {
+  View, Text, Image, TouchableOpacity,
+} from 'react-native';
 import { Button, Input } from 'react-native-elements';
 
 import styles from './styles';
@@ -8,7 +10,7 @@ function LoginPage() {
   return (
     <View style={styles.container}>
       <View style={styles.container_logo}>
-        <Image source={require('../../../../assets/Logo.png')} />
+        <Image source={require('../../../assets/Logo.png')} />
       </View>
       <View style={styles.container_input_data}>
         <Text style={styles.signin}>
@@ -22,19 +24,20 @@ function LoginPage() {
           Password
         </Text>
         <Input containerStyle={styles.input_password} placeholder="********" />
-      </ View>
+      </View>
       <View style={styles.container_button}>
-        <Button contanerStyle={styles.button_login}
-                buttonStyle={styles.button_login}
-                title='SIGN IN'
+        <Button
+          contanerStyle={styles.button_login}
+          buttonStyle={styles.button_login}
+          title="SIGN IN"
         />
         <TouchableOpacity
           style={styles.button_create_account}
           onPress={() => {}}
         >
           <Text>Novo aqui? Crie uma conta</Text>
         </TouchableOpacity>
-      </ View>
+      </View>
     </View>
   );
 }

diff --git a/mobile/src/pages/Main/LoginPage/styles.js → mobile/src/pages/LoginPage/styles.js b/mobile/src/pages/Main/LoginPage/styles.js → mobile/src/pages/LoginPage/styles.js
diff --git a/mobile/src/pages/Main/index.js b/mobile/src/pages/Main/index.js
@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 import { View, Text, FlatList } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import { Button } from 'react-native-elements';
-import Project from '../../components/projectCard';
+import Project from '../../components/ProjectCard';
 import Header from '../../components/Header';
-import SearchBar from '../../components/searchBar';
+import SearchBar from '../../components/SearchBar';
 
 import styles from './styles';
 

diff --git a/mobile/src/pages/Notifications/index.js b/mobile/src/pages/Notifications/index.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { View, FlatList, Text } from 'react-native';
 import Header from '../../components/Header';
-import Notification from '../../components/notification';
+import Notification from '../../components/Notification';
 
 import styles from './styles';
 
@@ -30,7 +30,7 @@ const Notifications = () => {
   return (
     <View style={styles.container}>
       <Header title="Notificações" />
-      <Text style={styles.subtitle}>PROJETOS DISPONÍVEIS</Text>
+      <Text style={styles.subtitle}>NOTIFICAÇÕES</Text>
       <FlatList
         style={styles.list}
         keyExtractor={(item, index) => index.toString()}

diff --git a/mobile/src/pages/Projects/index.js b/mobile/src/pages/Projects/index.js
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { View, Text, FlatList } from 'react-native';
 import { Button } from 'react-native-elements';
-import Project from '../../components/projectCard';
+import Project from '../../components/ProjectCard';
 import Header from '../../components/Header';
-import SearchBar from '../../components/searchBar';
+import SearchBar from '../../components/SearchBar';
 
 import styles from './styles';
 

diff --git a/mobile/src/pages/Splash/index.js b/mobile/src/pages/Splash/index.js
@@ -3,23 +3,21 @@ import { View, Text } from 'react-native';
 import LottieView from 'lottie-react-native';
 import styles from './styles';
 
-const Splash = ({ navigation }) =>
-{
+const Splash = ({ navigation }) => {
+  useEffect(() => {
+    setTimeout(() => {
+      navigation.replace('Main');
+    }, 3000);
+  }, []);
 
-    useEffect(() => {
-        setTimeout(() => {
-            navigation.replace('Main');
-        }, 3000);
-    }, []);
+  return (
+    <View style={styles.container}>
+      <LottieView style={styles.animationContainer} source={require('../../../assets/animations/lamp.json')} autoPlay loop={false} />
+      <View style={styles.circle} />
+      <Text style={styles.text}>Orc'lamp</Text>
+      <Text style={styles.text}>Tenha ideias. Crie um projeto. Convoque um time.</Text>
+    </View>
+  );
+};
 
-    return(
-        <View style={styles.container}>
-            <LottieView style={styles.animationContainer} source={require('../../../assets/animations/lamp.json')} autoPlay loop={false} />
-            <View style={styles.circle}/>
-            <Text style={styles.text}>Orc'lamp</Text>
-            <Text style={styles.text}>Tenha ideias. Crie um projeto. Convoque um time.</Text>
-        </View>
-    );
-}
-
-export default Splash;
+export default Splash;
diff --git a/mobile/src/routes.js b/mobile/src/routes.js
@@ -6,7 +6,7 @@ import Icon from 'react-native-vector-icons/Ionicons';
 import * as Font from 'expo-font';
 import { Text } from 'react-native';
 import Main from './pages/Main';
-import LoginPage from './pages/Main/LoginPage';
+import LoginPage from './pages/LoginPage';
 import Splash from './pages/Splash';
 import Projects from './pages/Projects';
 import Notifications from './pages/Notifications';