Skip to content

Commit

Permalink
Merge pull request #93 from dsc-sookmyung/feature/search
Browse files Browse the repository at this point in the history 
[#48] style: update notice
  • Loading branch information
@mori8
mori8 authored Jun 1, 2022
2 parents ddec9fc + a529def commit 548fe2f
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 44 deletions.
43 changes: 30 additions & 13 deletions react-native/components/SearchedNotice.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import React, { useState, useEffect } from 'react';
import { StyleSheet, View, TouchableOpacity, Image } from 'react-native';
import { VStack, Text } from 'native-base';
import { VStack, Text, HStack } from 'native-base';
import { useNavigation } from '@react-navigation/native';
import type { Notices, UserData } from '../types';
import useFonts from '../hooks/useFonts'
import AppLoading from 'expo-app-loading';
import { theme } from '../core/theme';
import { useAuth } from '../contexts/Auth';
import i18n from 'i18n-js'
import '../locales/i18n';


export default function SearchedNotice(props: Notices) {
Expand Down Expand Up @@ -56,15 +58,18 @@ export default function SearchedNotice(props: Notices) {
style={ styles.childNotice }
>
<View style={{ justifyContent: "space-between" }}>
{user.uchildren &&
<View style={ styles.cprofile }>
<Image style={styles.cprofileImageLg} source={cProfileImgSource[user.uchildren.filter(uchild => uchild.cid === child.cid)[0]?.cprofileImg-1]} />
<Text>{user.uchildren.filter(uchild => uchild.cid === child.cid)[0]?.cname}</Text>
</View>
}
{child?.titles?.map((title, tIndex) =>
<Text key={'sct_'+tIndex} style={styles.notices}>{"Title " + (tIndex + 1) + ". " + title}</Text>
)}
<HStack style={styles.noticeHeader}>
<Text fontWeight={500}>{i18n.t('title')}</Text>
{user.uchildren &&
<HStack style={ styles.cprofile }>
<Text fontWeight={500}>{user.uchildren.filter(uchild => uchild.cid === child.cid)[0]?.cname}</Text>
<Image style={styles.cprofileImageLg} source={cProfileImgSource[user.uchildren.filter(uchild => uchild.cid === child.cid)[0]?.cprofileImg-1]} />
</HStack>
}
</HStack>
{child?.titles?.map((title, tIndex) =>
<Text key={'sct_'+tIndex} style={styles.notices}>{(tIndex + 1) + ". " + title}</Text>
)}
</View>
</TouchableOpacity>
)}
Expand All @@ -77,7 +82,7 @@ const styles = StyleSheet.create({
container: {
backgroundColor: theme.colors.primary,
width: '100%',
marginVertical: 4,
marginVertical: 8,
paddingVertical: 20,
paddingHorizontal: 28,
borderRadius: 16,
Expand Down Expand Up @@ -105,13 +110,25 @@ const styles = StyleSheet.create({
backgroundColor: "#fff",
borderRadius: 16,
padding: 16,
shadowColor: "#acacac",
shadowOpacity: 0.4,
shadowRadius: 8,
shadowOffset: {
height: 0,
width: 0,
}
},
cprofile: {
alignItems: "center"
alignItems: "center",
},
cprofileImageLg: {
width: 32,
height: 32,
marginBottom: 2
marginLeft: 8
},
noticeHeader: {
alignItems: "center",
justifyContent: "space-between",
paddingBottom: 6
}
})
6 changes: 5 additions & 1 deletion react-native/screens/SearchResultScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,11 @@ export default function SearchResultScreen(props: SearchResultScreenProps) {
redirect: 'follow'
})
.then(response => response.json())
.then(data => setNotices(data))
.then(data => {
if (data?.date && data?.results.length) {
setNotices(data);
}
})
.catch(function (error) {
console.log(error)
if(error.response.status==401) {
Expand Down
96 changes: 66 additions & 30 deletions react-native/screens/SearchScreen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import { StyleSheet, View, TouchableOpacity, Alert, Image, ScrollView } from 'react-native';
import { Text, HStack } from 'native-base'
import { Text, HStack, VStack } from 'native-base'
import { theme } from '../core/theme';
import type { Navigation, Notices, UserData } from '../types';
import SearchedNotice from '../components/SearchedNotice';
Expand Down Expand Up @@ -46,6 +46,18 @@ export default function SearchScreen({ navigation }: Navigation) {
}
]
},
{
date: "2022-02-15",
saved: [
{
cid: 1,
titles: [
"17th Graduation Ceremony",
"School Day",
]
}
]
},
]
);
const [notices, setNotices] = useState<Notices[]>(
Expand All @@ -68,6 +80,18 @@ export default function SearchScreen({ navigation }: Navigation) {
}
]
},
{
date: "2022-02-15",
saved: [
{
cid: 1,
titles: [
"17th Graduation Ceremony",
"School Day",
]
}
]
},
])
const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
const [searchDate, setSearchDate] = useState<string>(i18n.t('searchByDateDefault'));
Expand All @@ -89,8 +113,10 @@ export default function SearchScreen({ navigation }: Navigation) {
})
.then(response => response.json())
.then(data => {
setNotices(data);
setFilteredNotices(data);
if (data?.date && data?.saved?.length) {
setNotices(data);
setFilteredNotices(data);
}
})
.catch(function (error) {
console.log(error)
Expand Down Expand Up @@ -152,7 +178,7 @@ export default function SearchScreen({ navigation }: Navigation) {
const handleNowSelectedChildId = (cid: number) => {
setNowSelectedChildId(cid);
if (auth?.authData?.access_token) {
fetch(`http://localhost:8080/search/children?cid=${cid}`, {
fetch(`http://localhost:8080/search/child?cid=${cid}`, {
method: 'GET',
headers: {
'ACCESS-TOKEN': auth.authData.access_token
Expand Down Expand Up @@ -199,33 +225,42 @@ export default function SearchScreen({ navigation }: Navigation) {
/>
</View>
</HStack>
<ScrollView horizontal={true} style={styles.childButtonWrapper}>
<TouchableOpacity key={'n_all'} style={[styles.childButton, {
backgroundColor: nowSelectedChildId === SHOW_ALL ? theme.colors.primary : "#ffffff",
}]} onPress={() => handleNowSelectedChildId(-1)}>
<Text fontWeight={500} color={nowSelectedChildId !== SHOW_ALL ? theme.colors.primary : "#ffffff"}>
All
</Text>
</TouchableOpacity>
{user.uchildren?.map((child, index) =>
<TouchableOpacity key={'n_'+index} style={[styles.childButton, {
backgroundColor: nowSelectedChildId === child.cid ? theme.colors.primary : "#ffffff",
}]} onPress={() => handleNowSelectedChildId(child.cid)}>
<Image style={styles.cprofileImage} source={cProfileImgSource[child.cprofileImg-1]} />
<Text fontWeight={500} style={[{
color: nowSelectedChildId !== child.cid ? theme.colors.primary : "#ffffff",
}]}>{child.cname}</Text>

<View style={styles.childButtonWrapper}>
<ScrollView horizontal={true}>
<TouchableOpacity key={'n_all'} style={[styles.childButton, {
backgroundColor: nowSelectedChildId === SHOW_ALL ? theme.colors.primary : "#ffffff",
}]} onPress={() => handleNowSelectedChildId(-1)}>
<Text fontWeight={500} color={nowSelectedChildId !== SHOW_ALL ? theme.colors.primary : "#ffffff"}>
All
</Text>
</TouchableOpacity>
{user.uchildren?.map((child, index) =>
<TouchableOpacity key={'n_'+index} style={[styles.childButton, {
backgroundColor: nowSelectedChildId === child.cid ? theme.colors.primary : "#ffffff",
}]} onPress={() => handleNowSelectedChildId(child.cid)}>
<Image style={styles.cprofileImage} source={cProfileImgSource[child.cprofileImg-1]} />
<Text fontWeight={500} style={[{
color: nowSelectedChildId !== child.cid ? theme.colors.primary : "#ffffff",
}]}>{child.cname}</Text>
</TouchableOpacity>
)}
</ScrollView>
</View>

<Text style={styles.smallDescription}>{i18n.t('results_cap')}</Text>

<ScrollView style={styles.searchResults}>
{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>
)} */}
</ScrollView>
{filteredNotices && filteredNotices.length > 0 &&
<View style={styles.searchResults}>
<Text style={styles.smallDescription}>RESULTS</Text>
{filteredNotices?.map((notice, index) =>
<SearchedNotice key={"nt_" + index} date={notice?.date} saved={notice?.saved} />
)}
</View>
}
</View>
);
}
Expand All @@ -236,6 +271,7 @@ const styles = StyleSheet.create({
padding: 20,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'flex-start'
},
smallDescription: {
alignSelf: "flex-start",
Expand All @@ -249,7 +285,7 @@ const styles = StyleSheet.create({
paddingRight: 12
},
searchResults: {
width: '100%'
width: '100%',
},
calendarIcon: {
fontSize: 24,
Expand All @@ -263,7 +299,7 @@ const styles = StyleSheet.create({
childButtonWrapper: {
flexDirection: "row",
alignSelf: "flex-start",
paddingBottom: 20
paddingBottom: 30
},
childButton: {
borderWidth: 1,
Expand Down

0 comments on commit 548fe2f

Please sign in to comment.