Fakultas Ilmu Komputer UI

Commit 69da6d7d authored by wulanmantiri's avatar wulanmantiri
Browse files

[GREEN] Implement Choose Week component

parent 588b92ab
import React, { FC } from 'react';
import { useNavigation } from '@react-navigation/native';
import { View, ScrollView } from 'react-native';
import { Button, Text } from 'react-native-elements';
import * as ROUTES from 'constants/routes';
import { styles } from './styles';
import { Props } from './types';
import { getDateRange } from 'utils/format';
const ChooseWeek: FC<Props> = ({ data, isNutritionist }) => {
const redirectViewRoute = isNutritionist ? '' : ROUTES.weeklyReportReadOnly; // TODO
const navigation = useNavigation();
const getDateRangeForWeek = (weekNum: number) => {
const { mon, sun } = getDateRange(data.current_week_num - weekNum);
return `${mon.format('DD MMM YYYY')} - ${sun.format('DD MMM YYYY')}`;
};
return (
<ScrollView contentContainerStyle={styles.container}>
<View style={styles.pageContainer}>
{!isNutritionist && data.has_not_filled_form ? (
<View style={styles.page}>
<View style={styles.text}>
<Text style={styles.bold}>Minggu {data.current_week_num}</Text>
<Text>{getDateRangeForWeek(data.current_week_num)}</Text>
</View>
<View style={styles.buttonContainer}>
<Button
title="Isi"
onPress={() => navigation.navigate(ROUTES.weeklyReportForm)}
buttonStyle={styles.button}
titleStyle={styles.buttonTitle}
/>
</View>
</View>
) : null}
{data.reports.map((report, i) => (
<View style={styles.page} key={i}>
<View style={styles.text}>
<Text style={styles.bold}>Minggu {report.week_num}</Text>
<Text>{getDateRangeForWeek(report.week_num)}</Text>
</View>
<View style={styles.buttonContainer}>
<Button
title="Lihat"
type="outline"
onPress={() => navigation.navigate(redirectViewRoute)}
buttonStyle={styles.outlineButtonStyle}
titleStyle={styles.buttonTitle}
/>
</View>
</View>
))}
</View>
</ScrollView>
);
};
export default ChooseWeek;
import { StyleSheet } from 'react-native';
import { colors, typography } from 'styles';
export const styles = StyleSheet.create({
container: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flex: 1,
paddingHorizontal: 20,
},
pageContainer: {
display: 'flex',
alignItems: 'center',
},
bold: {
color: colors.textBlack,
...typography.headingMedium,
fontSize: 18,
marginBottom: 2,
},
page: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
padding: 14,
borderBottomColor: colors.border,
borderBottomWidth: 1,
},
buttonContainer: {
paddingLeft: 10,
flex: 0.3,
},
text: {
flex: 0.7,
},
button: {
padding: 10,
paddingHorizontal: 0,
backgroundColor: colors.primaryYellow,
},
outlineButtonStyle: {
padding: 10,
paddingHorizontal: 0,
borderColor: colors.buttonYellow,
borderWidth: 1,
},
buttonTitle: {
color: colors.textBlack,
},
});
import { UserReportResponse } from 'services/progress/models';
export interface Props {
data: {
has_not_filled_form: boolean;
current_week_num: number;
reports: UserReportResponse[];
}; // TODO: Kefas adjust to API response
isNutritionist?: boolean;
}
import React, { FC } from 'react';
import ChooseWeek from '../ChooseWeek';
import { mockUserReportHistory } from 'mocks/userReport';
const ChooseWeekForClient: FC = () => {
// call for API, get client id from user context? or discuss with backend
const data = mockUserReportHistory;
return <ChooseWeek data={data} />;
};
export default ChooseWeekForClient;
import React, { FC } from 'react';
import ChooseWeek from '../ChooseWeek';
import { mockUserReportHistory } from 'mocks/userReport';
const ChooseWeekForNutritionist: FC = () => {
// call for API, get client id dr yg d pass?
const data = mockUserReportHistory;
return <ChooseWeek data={data} isNutritionist />;
};
export default ChooseWeekForNutritionist;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment