Merge pull request #23 from fga-eps-mds/151-both-languages-stories

151 both languages stories
fga-eps-mds · May 15, 2021 · 3e49ed1 · 3e49ed1
2 parents c08a2ad + de24934
commit 3e49ed1
Show file tree

Hide file tree

Showing 8 changed files with 1,794 additions and 1,783 deletions.
diff --git a/projeto-kokama/package.json b/projeto-kokama/package.json
@@ -39,6 +39,7 @@
  "react-dom": "16.13.1",
  "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
  "react-native-dotenv": "^2.5.3",
+ "react-native-elements": "^3.4.1",
  "react-native-gesture-handler": "^1.10.3",
  "react-native-reanimated": "^2.0.1",
  "react-native-safe-area-context": "^3.2.0",

diff --git a/projeto-kokama/src/components/StoryList.tsx b/projeto-kokama/src/components/StoryList.tsx
@@ -0,0 +1,138 @@
+import { StyleSheet, View, Text, TouchableWithoutFeedback } from "react-native";
+import Colors from "../assets/Colors";
+import { KokamaStories } from "../screens/KokamaStories/interface";
+import React, { useState } from "react";
+import { useNavigation } from '@react-navigation/native';
+
+
+const styles = StyleSheet.create({
+ Area: {
+ flexDirection: "column",
+ backgroundColor: Colors.WHITE,
+ borderBottomWidth: 1.5,
+ borderColor: Colors.DARK_GRAY,
+ },
+ titleArea: {
+ display: "flex",
+ width: "100%",
+ textAlignVertical: "center",
+ textAlign: "left",
+ fontSize: 18,
+ marginTop: 5,
+ borderTopWidth: 1.5,
+ borderBottomWidth: 1.5,
+ borderColor: Colors.DARK_GRAY,
+ paddingLeft: 23,
+ paddingVertical: 7,
+ },
+ title: {
+ display: "flex",
+ width: "100%",
+ textAlignVertical: "center",
+ textAlign: "left",
+ fontSize: 18,
+ color: Colors.HISTORY_WORD_TEXT,
+ },
+ emptyListMessage: {
+ alignSelf: "center",
+ fontSize: 18,
+ marginTop: 50,
+
+ },
+});
+
+interface Props {
+ search: string;
+ list: KokamaStories[];
+ language: string;
+}
+
+function checkListKokama(oldlist: KokamaStories[], searchInput: string, search: string) {
+ let list: KokamaStories[] = [];
+ for (let story of oldlist) {
+ if (story.title_kokama != "") {
+ if (searchInput != "") {
+ if (story.title_kokama.toLowerCase().includes(search)
+ || story.text_kokama.toLowerCase().includes(search)) {
+ list.unshift(story);
+ }
+ } else {
+ list.unshift(story);
+ }
+ }
+ }
+ return list;
+}
+
+function checkListPortuguese(oldlist: KokamaStories[], searchInput: string, search: string) {
+ let list: KokamaStories[] = [];
+ for (let story of oldlist) {
+ if (story.title_portuguese != "") {
+ if (searchInput != "") {
+ if (story.title_portuguese.toLowerCase().includes(search)
+ || story.text_portuguese.toLowerCase().includes(search)) {
+ list.unshift(story);
+ }
+ } else {
+ list.unshift(story);
+ }
+ }
+ }
+ return list;
+}
+
+function getCorrectStories(oldlist: KokamaStories[],language: string, searchInput: string) {
+ let list: KokamaStories[] = [];
+ let search: string=searchInput.toLowerCase().trim();
+
+ if (language == "Kokama") {
+ list = checkListKokama(oldlist, searchInput, search); 
+
+ } else {
+ list = checkListPortuguese(oldlist, searchInput, search); 
+ }
+ return list;
+}
+
+const StoryList = (props: Props) => {
+ let [newList] = useState<Array<KokamaStories>>([]);
+ const navigation = useNavigation();
+
+ if (newList != getCorrectStories(props.list, props.language, props.search)) {
+ newList=getCorrectStories(props.list, props.language, props.search);
+ }
+
+ return (
+ <View>
+ {newList.length === 0 && (
+ <Text style={styles.emptyListMessage}>Nenhuma história foi encontrada</Text>
+ ) || (
+ <View>
+ {props.language == "Kokama" && (
+ <View>
+ {newList.map((story: KokamaStories, index: number) => (
+ <TouchableWithoutFeedback key={index} onPress={() => navigation.push('História', { story, language: props.language, })}>
+ <View style={styles.titleArea}>
+ <Text style={styles.title}>{story.title_kokama}</Text>
+ </View>
+ </TouchableWithoutFeedback>
+ ))}
+ </View>
+ ) || (
+ <View>
+ {newList.map((story: KokamaStories, index: number) => (
+ <TouchableWithoutFeedback key={index} onPress={() => navigation.push('História', { story, language: props.language, })}> 
+ <View style={styles.titleArea}>
+ <Text style={styles.title}>{story.title_portuguese}</Text>
+ </View>
+ </TouchableWithoutFeedback>
+ ))}
+ </View>
+ )}
+ </View>
+ )}
+ </View>
+ );
+}
+
+export default StoryList;
diff --git a/projeto-kokama/src/screens/KokamaStories/index.tsx b/projeto-kokama/src/screens/KokamaStories/index.tsx
@@ -10,42 +10,72 @@ import styles from "./styles";
 import { KokamaStories } from "./interface";
 import Api from "../../api/Api";
 import SpinnerLoading from "../../components/SpinnerLoading";
+import Icon from "react-native-vector-icons/AntDesign";
+import {
+ PORTUGUESE,
+ KOKAMA,
+} from "../../config/constants";
+import StoryList from "../../components/StoryList";
+import { SearchBar } from 'react-native-elements';
 
-export default function Stories({ navigation }) {
- const [kokamaStories, setKokamaStories] = useState<Array<KokamaStories>>([]);
+export default function Stories() {
+ const [kokamaStories, setKokamaStories] = useState<Array<KokamaStories>>();
+ const [originLanguage, setOriginLanguage] = useState(PORTUGUESE);
+ const [search, setSearch] = useState("");
+ if (originLanguage == "") {
+ setOriginLanguage(PORTUGUESE);
+ }
 
  useEffect(() => {
  const fetchData = async () => {
  const result = await Api(
- "https://run.mocky.io/v3/c9ae454d-b760-450f-9aef-4b4710a94504"
+ "https://run.mocky.io/v3/7c65553d-7f08-4368-8a19-97c460dc39e4"
  );
- if (result.status === 200) {
+ if (result.status === 200 && kokamaStories != result.data) {
  setKokamaStories(result.data);
- console.log("As histórias foram atualizadas corretamente!");
  } else {
  console.log("A requisição não pôde ser concluída.\n[Status: ", result.status, "]");
  }
  }
  fetchData();
  }, []);
 
+ function exchangeLanguage() {
+ if (originLanguage === PORTUGUESE) {
+ setOriginLanguage(KOKAMA);
+ } else {
+ setOriginLanguage(PORTUGUESE);
+ }
+ }
+
  return (
  <SafeAreaView>
- {kokamaStories.length == 0 && (
- <SpinnerLoading />
+ {kokamaStories && kokamaStories.length == 0 && (
+ <SpinnerLoading/>
  )}
- {kokamaStories.length > 0 && (
+ {kokamaStories && kokamaStories.length > 0 && (
  <ScrollView style={styles.container}>
  <View style={styles.area}>
- <View>
- {kokamaStories.map((story: KokamaStories, index: number) => (
- <TouchableWithoutFeedback key={index} onPress={() => navigation.push('História', { story })}>
- <View style={styles.titleArea}>
- <Text style={styles.title}>{story.titulo} </Text>
- </View>
+ <View style={styles.searchBarBox}>
+ <SearchBar
+ placeholder="Pesquise aqui..."
+ onChangeText={setSearch}
+ value={search}
+ platform="android"
+ containerStyle={{ width:300}}
+ />
+ <View style={styles.swapButtonArea}>
+ <TouchableWithoutFeedback onPress={exchangeLanguage}>
+ <Icon name="swap" size={40}/>
  </TouchableWithoutFeedback>
- ))}
+ <Text>{originLanguage}</Text>
+ </View>
  </View>
+ <StoryList
+ search={search}
+ list={kokamaStories}
+ language={originLanguage || ""}
+ />
  </View>
  </ScrollView>
  )}

diff --git a/projeto-kokama/src/screens/KokamaStories/interface.ts b/projeto-kokama/src/screens/KokamaStories/interface.ts
@@ -1,5 +1,7 @@
 export interface KokamaStories {
  id: number;
- titulo: string;
- texto: string;
+ title_portuguese: string;
+ text_portuguese: string;
+ title_kokama: string;
+ text_kokama: string;
 }
diff --git a/projeto-kokama/src/screens/KokamaStories/styles.ts b/projeto-kokama/src/screens/KokamaStories/styles.ts
@@ -64,6 +64,18 @@ const styles = StyleSheet.create({
  borderWidth: 5,
  backgroundColor: "#f23232",
  },
+ searchBarBox: {
+ display: "flex",
+ width: "100%",
+ flexDirection: "row",
+ alignItems: "center",
+ },
+ swapButtonArea: {
+ display: "flex",
+ width: 80,
+ flexDirection: "column",
+ alignItems:"center",
+ },
 });
 
 export default styles;
diff --git a/projeto-kokama/src/screens/Story/index.tsx b/projeto-kokama/src/screens/Story/index.tsx
@@ -9,17 +9,45 @@ import styles from "./styles";
 
 export default function Story({ route, navigation }) {
  const { story } = route.params;
+ interface Props {
+ language: string;
+ }
 
  return( 
  <SafeAreaView>
  <ScrollView style={styles.container}>
- <View style={styles.container}>
- <Text style={styles.textField}>
- {story.titulo}
- </Text>
- <Text style={styles.textField}>
- {story.texto}
- </Text>
+ <View style={styles.container}> 
+ {route.params.language == "Kokama" && (
+ <View>
+ <Text style={styles.titleField}>
+ {story.title_kokama}
+ </Text>
+ <Text style={styles.textField}>
+ {story.text_kokama}
+ </Text>
+ <Text style={styles.titleField}>
+ {story.title_portuguese}
+ </Text>
+ <Text style={styles.textField}>
+ {story.text_portuguese}
+ </Text>
+ </View>
+ ) || (
+ <View>
+ <Text style={styles.titleField}>
+ {story.title_portuguese}
+ </Text>
+ <Text style={styles.textField}>
+ {story.text_portuguese}
+ </Text>
+ <Text style={styles.titleField}>
+ {story.title_kokama}
+ </Text>
+ <Text style={styles.textField}>
+ {story.text_kokama}
+ </Text>
+ </View>
+ )}
  </View>
  </ScrollView>
  </SafeAreaView>

diff --git a/projeto-kokama/src/screens/Story/styles.ts b/projeto-kokama/src/screens/Story/styles.ts
@@ -11,16 +11,20 @@ const styles = StyleSheet.create({
  height: window.height,
  backgroundColor: Colors.LIGHT_GRAY,
  },
+ titleField: {
+ display: "flex",
+ flexDirection: "column",
+ textAlign: "center",
+ padding: 10,
+ marginTop: 10,
+ fontSize: 20,
+ },
  textField: {
  display: "flex",
  flexDirection: "column",
  textAlignVertical: "center",
  padding: 15,
- marginTop: 20,
- backgroundColor: Colors.WHITE,
- borderTopWidth: 1.5,
- borderBottomWidth: 1.5,
- borderColor: Colors.DARK_GRAY,
+ marginBottom: 20,
  fontSize: 20,
  },
 });