src/views/journal/JournalView.js
import React from 'react';
import {ScrollView, StyleSheet, Text, View} from 'react-native';
import {Avatar, DataTable} from 'react-native-paper';
import AssessmentView from './AssessmentView';
import Header from './components/Header';
import JournalButton from '../../components/buttons/JournalButton';
import SafeAreaWrapper from '../../components/wrappers/SafeAreaWrapper';
import TableCell from './components/TableCell';
import TableTitle from './components/TableTitle';
import {getAssessments, getUser} from '../../database/UsersDAO';
import {getName} from '../../database/ActivityTypesDAO';
import {isValidId, handleLogout} from '../../utils/AuthenticationUtils';
import {ButtonLength} from '../../utils/DimensionsConstants';
import {iOSTypography} from '../../styles/Typography';
import {journalStyles} from './Styles';
import {JournalContext} from '../../utils/Contexts';
/**
* Component displaying the landing view of the journal module, after successfull
* login. Shows an overview of all assessments of the user that is logged in.
* @param {Object} props - Properties
* @param {function} props.setGoToJournal - If true, displays the journal overview.
* @returns {Object} Overview of all assessments made by an user (journal)
*/
export default function JournalView(props) {
// Retrieve props
const setGoToJournal = props.setGoToJournal;
// Navigation: go to assessment if true
const [goToAssessment, setGoToAssessment] = React.useState(false);
// Get context
const {isLoggedOut, setIsLoggedOut} = React.useContext(JournalContext);
const {therapistId} = React.useContext(JournalContext);
// Valid "session"
const {isValidConnection, setIsValidConnection} =
React.useContext(JournalContext);
// Id of assessment that will be detailed in Assessment screen
const [assessmentId, setAssessmentId] = React.useState(-1);
const logout = () =>
handleLogout(setIsLoggedOut, setIsValidConnection, setGoToJournal);
// Check that the connection is valid. Redirect to journal login if not.
if (!isValidId(therapistId) || !isValidConnection || isLoggedOut) {
return logout;
} else if (goToAssessment) {
// Check details of a specific assessment
return (
<AssessmentView
setGoToAssessment={setGoToAssessment}
setGoToJournal={setGoToJournal}
assessmentId={assessmentId}
/>
);
} else {
// Display the journal screen. It shows the overview of all assessments.
// Get user (the userId is defined in the function). User data will be provided
// by main application and userId does not need to be used in the activity
// module.
const user = getUser();
// Prepare data to be displayed in the table.
// The table show one assessment on each row.
const assessments = [];
getAssessments().forEach(assessment => {
assessments.push(
<DataTable.Row
key={assessment.assessmentID}
style={journalStyles.tableRow}>
<TableCell
style={styles.cellId}
text={assessment.assessmentID}
/>
<TableCell
style={styles.cellDate}
text={assessment.activityCreateDate}
/>
<TableCell
style={styles.cellActivity}
text={getName(assessment.activityType)}
/>
<TableCell
style={styles.cellGrading}
text={assessment.grading.map(
grading => grading.grading.toString() + ' ',
)}
/>
<TableCell
style={styles.cellFreeText}
text={assessment.comment.content}
/>
<TableCell
style={styles.cellDrawing}
text={assessment.drawing == null ? 'False' : 'True'}
/>
<DataTable.Cell style={styles.cellDetails}>
<View>
<JournalButton
length={ButtonLength.SHORT}
label={'Detaljer'}
onPress={() => {
setGoToAssessment(true),
setAssessmentId(
assessment.assessmentID,
);
}}
/>
</View>
</DataTable.Cell>
</DataTable.Row>,
);
});
return (
<SafeAreaWrapper safeAreaStyle={[journalStyles.container]}>
<Header setGoToJournal={setGoToJournal} />
<View
style={[
journalStyles.userInfoBar,
{justifyContent: 'flex-start'},
]}>
<Avatar.Image
style={journalStyles.avatar}
size={75}
source={user.image}
/>
<Text style={iOSTypography.title2}>
Siste tilbakemeldinger fra {user.name}
</Text>
</View>
<View style={journalStyles.body}>
<Text style={{paddingTop: 5, paddingBottom: 5}}>
Skala smilefjesvurdering: (0) Ikke besvart; (1) Dårlig;
(2) OK; (3) Bra
</Text>
<DataTable style={journalStyles.table}>
<DataTable.Header style={journalStyles.tableHeader}>
<TableTitle style={styles.cellId} text={'Id'} />
<TableTitle style={styles.cellDate} text={'Dato'} />
<TableTitle
style={styles.cellActivity}
text={'Aktivitet'}
/>
<TableTitle
style={styles.cellGrading}
text={'Smilefjesvurd'}
/>
<TableTitle
style={styles.cellFreeText}
text={'Fritekst'}
/>
<TableTitle
style={styles.cellDrawing}
text={'Illustrasjon'}
/>
<TableTitle
style={styles.cellDetails}
text={'Detaljer'}
/>
</DataTable.Header>
<ScrollView style={journalStyles.table}>
{assessments}
</ScrollView>
</DataTable>
</View>
</SafeAreaWrapper>
);
}
}
/** Local styles */
const styles = StyleSheet.create({
cellContainer: {
flex: 1,
justifyContent: 'center',
},
cellId: {
flex: 1,
marginRight: 1,
},
cellDate: {
flex: 3,
marginLeft: 1,
marginRight: 1,
},
cellActivity: {
flex: 3,
marginLeft: 1,
marginRight: 1,
},
cellGrading: {
flex: 4,
marginLeft: 1,
marginRight: 1,
},
cellFreeText: {
flex: 9,
marginLeft: 1,
marginRight: 1,
},
cellDrawing: {
flex: 3,
marginLeft: 1,
marginRight: 1,
},
cellDetails: {
flex: 3,
marginLeft: 1,
},
});