[#48] feat: add empty state

dsc-sookmyung · Jun 3, 2022 · f64205c · f64205c
1 parent 7a17a97
commit f64205c
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 16 deletions.
diff --git a/react-native/locales/en.js b/react-native/locales/en.js
@@ -74,5 +74,7 @@ export default {
     searchResult: "Search Result",
     noEvent: "There is no event today!",
     saveFirst: "Click the Save button to save the results first!",
-    eventNotFound: "No event found"
+    eventNotFound: "No event found",
+    noResults: "There are no results yet",
+    translateFirst: "Translate and save the results."
 }
diff --git a/react-native/locales/ja.js b/react-native/locales/ja.js
@@ -68,5 +68,7 @@ export default {
     searchResult: "検索結果",
     noEvent: "今日はイベントはありません！",
     saveFirst: "保存ボタンを押して結果を保存してください！",
-    eventNotFound: "イベントが見つかりませんでした"
+    eventNotFound: "イベントが見つかりませんでした",
+    noResults: "まだ結果はありません。",
+    translateFirst: "結果を翻訳して保存する。"
 }
diff --git a/react-native/locales/km.js b/react-native/locales/km.js
@@ -68,5 +68,7 @@ export default {
     searchResult: "លទ្ធផលស្វែងរក",
     noEvent: "មិនមានព្រឹត្តិការណ៍ថ្ងៃនេះទេ!",
     saveFirst: "ចុចប៊ូតុង Save ដើម្បីរក្សាទុកលទ្ធផលជាមុន!",
-    eventNotFound: "រកមិនឃើញព្រឹត្តិការណ៍ទេ។"
+    eventNotFound: "រកមិនឃើញព្រឹត្តិការណ៍ទេ។",
+    noResults: "មិនទាន់មានលទ្ធផលនៅឡើយទេ។",
+    translateFirst: "បកប្រែ និងរក្សាទុកលទ្ធផល។"
 }
diff --git a/react-native/locales/ko.js b/react-native/locales/ko.js
@@ -67,5 +67,7 @@ export default {
     searchResult: "검색 결과",
     noEvent: "오늘은 이벤트가 없어요!",
     saveFirst: "저장 버튼을 눌러서 결과 저장을 먼저 해주세요!",
-    eventNotFound: "이벤트를 찾지 못했어요"
+    eventNotFound: "이벤트를 찾지 못했어요",
+    noResults: "아직 결과가 없습니다.",
+    translateFirst: "번역을 한 후에 결과를 저장해주세요."
 }
diff --git a/react-native/locales/th.js b/react-native/locales/th.js
@@ -68,5 +68,7 @@ export default {
     searchResult: "ผลการค้นหา",
     noEvent: "วันนี้ไม่มีกิจกรรม!",
     saveFirst: "คลิกปุ่มบันทึกเพื่อบันทึกผลลัพธ์ก่อน!",
-    eventNotFound: "ไม่พบกิจกรรม"
+    eventNotFound: "ไม่พบกิจกรรม",
+    noResults: "ยังไม่มีผลลัพธ",
+    translateFirst: "แปลและบันทึกผลลัพธ์"
 }
diff --git a/react-native/locales/vn.js b/react-native/locales/vn.js
@@ -67,5 +67,7 @@ export default {
     searchResult: "Kết quả tìm kiếm",
     noEvent: "Không có sự kiện hôm nay!",
     saveFirst: "Nhấp vào nút Lưu để lưu kết quả trước!",
-    eventNotFound: "Không tìm thấy sự kiện nào"
+    eventNotFound: "Không tìm thấy sự kiện nào",
+    noResults: "Chưa có kết quả.",
+    translateFirst: "Dịch và lưu kết quả."
 }
diff --git a/react-native/locales/zh.js b/react-native/locales/zh.js
@@ -67,5 +67,7 @@ export default {
     searchResult: "搜索结果",
     noEvent: "今天没有活动！",
     saveFirst: "单击保存按钮首先保存结果！",
-    eventNotFound: "未找到任何事件"
+    eventNotFound: "未找到任何事件",
+    noResults: "目前还没有结果。",
+    translateFirst: "翻译并保存结果。"
 }
diff --git a/react-native/screens/SearchScreen.tsx b/react-native/screens/SearchScreen.tsx
@@ -10,6 +10,7 @@ import { useAuth } from '../contexts/Auth';
 import { StackActions } from '@react-navigation/native';
 import i18n from 'i18n-js'
 import '../locales/i18n';
+import { colors } from 'react-native-elements';
 
 
 export default function SearchScreen({ navigation }: Navigation) {
@@ -81,10 +82,8 @@ export default function SearchScreen({ navigation }: Navigation) {
             })
             .then(response => response.json())
             .then(data => {
-                if (data?.date && data?.saved?.length) {
-                    setNotices(data);
-                    setFilteredNotices(data);    
-                }
+                setNotices(data);
+                setFilteredNotices(data);    
             })
             .catch(function (error) {
                 console.log(error)
@@ -218,15 +217,21 @@ export default function SearchScreen({ navigation }: Navigation) {
             <Text style={styles.smallDescription}>{i18n.t('results_cap')}</Text>
 
             <ScrollView style={styles.searchResults}>
-                {filteredNotices && filteredNotices.length > 0 && (
+                {filteredNotices && filteredNotices.length > 0 ? (
                     filteredNotices?.map((notice, index) => 
                         <SearchedNotice key={"nt_" + index} date={notice?.date} saved={notice?.saved} />
                     )
-                )}
-                {/* TODO: empty icon
+                )
                 : (
-                    <Text>There are no results yet. Translate and save the results.</Text>
-                )} */}
+                    <View style={{ alignItems: "center" }}>
+                        <Image source={require("../assets/images/empty.png")} style={styles.imageStyle} />
+                        <Text>{i18n.t('noResults')}</Text>
+                        <Text>{i18n.t('translateFirst')}</Text>
+                        <TouchableOpacity style={styles.navigateButton} onPress={() => navigation.navigate('Translate')}>
+                            <Text fontWeight={500} color={"#fff"}>Go to {i18n.t('translate')}</Text>
+                        </TouchableOpacity>
+                    </View>
+                )} 
             </ScrollView>
         </View> 
     );
@@ -299,4 +304,16 @@ const styles = StyleSheet.create({
         height: 20,
         marginRight: 12
     },
+    imageStyle: {
+        width: 80,
+        height: 80,
+        margin: 20,
+    },
+    navigateButton: {
+        margin: 20,
+        backgroundColor: theme.colors.primary,
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+        borderRadius: 8,
+    }
 })