Client list nutritionist (static)

android/.project

+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>dietela_mobile</name>
+	<comment>Project android created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+</projectDescription>

android/app/.project

+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>app</name>
+	<comment>Project app created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+</projectDescription>

assets/images/diet_report.svg

+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.75 0V3.5H12.25L8.75 0Z" fill="black"/>
+<path d="M8.75 4.375C8.26788 4.375 7.875 3.98213 7.875 3.5V0H2.625C2.14288 0 1.75 0.392875 1.75 0.875V13.125C1.75 13.608 2.14288 14 2.625 14H11.375C11.858 14 12.25 13.608 12.25 13.125V4.375H8.75ZM5.25 12.25H3.5V9.625H5.25V12.25ZM7.875 12.25H6.125V7.875H7.875V12.25ZM10.5 12.25H8.75V6.125H10.5V12.25Z" fill="black"/>
+</svg>

assets/images/index.ts

@@ -5,3 +5,6 @@ export const default_nutritionist = require('./default_nutritionist.png');
 
 export const googleLogo = require('./google_logo.png');
 export const dietelaLogo = require('./dietela_logo.png');
+
+export const diet_report = require('./diet_report.png');
+export const chat = require('./chat.png');

src/constants/navigation.ts

@@ -12,6 +12,7 @@ import {
   NutritionistDetail,
   PaymentResult,
   ExtendedQuestionnaire,
+  ClientListNutritionist,
   NutritionistAdminLogin,
 } from 'scenes';
 import { FC } from 'react';
@@ -58,6 +59,29 @@ const navigation: NavRoute[] = [
   },
 ];
 
+export const nutritionistNavigation: NavRoute[] = [
+  {
+    name: ROUTES.clientListNutritionist,
+    component: ClientListNutritionist,
+    header: 'Client List',
+  },
+  {
+    name: ROUTES.clientChatNutritionist,
+    component: ClientListNutritionist, //TODO next sprint
+    header: 'Chat Client',
+  },
+  {
+    name: ROUTES.clientDietReportNutritionist,
+    component: ClientListNutritionist, //TODO next sprint
+    header: "Client's Diet Report",
+  },
+  {
+    name: ROUTES.clientProfileNutritionist,
+    component: ClientListNutritionist, //TODO next sprint
+    header: "Client's Profile",
+  },
+];
+
 export const publicNavigation: NavRoute[] = [
   {
     name: ROUTES.initial,

src/constants/routes.ts

@@ -23,3 +23,9 @@ export const clientProfile = `${profile}/client`;
 
 const payment = 'payment';
 export const paymentResult = `${payment}/result`;
+
+const nutritionist = 'nutritionist';
+export const clientListNutritionist = `${nutritionist}/client-list`;
+export const clientProfileNutritionist = `${nutritionist}/client-profile`;
+export const clientDietReportNutritionist = `${nutritionist}/client-diet-report`;
+export const clientChatNutritionist = `${nutritionist}/client-chat`;

src/scenes/index.ts

@@ -15,3 +15,5 @@ export { default as ProgramDetail } from './cart/ProgramDetail';
 export { default as NutritionistDetail } from './cart/NutritionistDetail';
 
 export { default as PaymentResult } from './payment/PaymentResult';
+
+export { default as ClientListNutritionist } from './nutritionist/ClientListNutritionist';

src/scenes/nutritionist/ClientListNutritionist/components/ChatButton/index.test.tsx

+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+
+import ChatButton from '.';
+
+describe('ChatButton', () => {
+  it('renders correctly when active', () => {
+    render(<ChatButton onPress={() => console.log('cool')} />);
+  });
+
+  it('renders correctly when disabled', () => {
+    render(<ChatButton onPress={() => console.log('cool')} disabled />);
+  });
+
+  it('renders correctly when given a testID', () => {
+    render(<ChatButton onPress={() => console.log('cool')} testID="button" />);
+  });
+
+  it('executes onPress callback when button is pressed', async () => {
+    let isPressed = false;
+
+    const { getByText } = render(
+      <ChatButton onPress={() => (isPressed = true)} testID="button" />,
+    );
+
+    const button = getByText(/chat/i);
+    fireEvent.press(button);
+    expect(isPressed).toBeTruthy();
+  });
+});

src/scenes/nutritionist/ClientListNutritionist/components/ChatButton/index.tsx

+import React, { FC } from 'react';
+import { TouchableOpacity, Text, Image } from 'react-native';
+import { chat } from 'assets/images';
+
+import { styles } from './styles';
+import { Props } from './types';
+import { typographyStyles } from 'styles';
+
+const ChatButton: FC<Props> = ({ onPress, testID }) => (
+  <TouchableOpacity
+    onPress={onPress}
+    testID={testID}
+    style={styles.containerStyle}>
+    <Image source={chat} style={styles.img} />
+    <Text style={[typographyStyles.bodyMedium, styles.titleStyle]}>Chat</Text>
+  </TouchableOpacity>
+);
+
+export default ChatButton;

src/scenes/nutritionist/ClientListNutritionist/components/ChatButton/styles.ts

+import { StyleSheet } from 'react-native';
+import { colors } from 'styles';
+
+export const styles = StyleSheet.create({
+  titleStyle: { color: colors.textBlack, textTransform: 'capitalize' },
+  containerStyle: {
+    marginTop: 12,
+    padding: 12,
+    overflow: 'hidden',
+    borderRadius: 4,
+    borderWidth: 1,
+    backgroundColor: undefined,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  img: {
+    width: 20,
+    height: 20,
+    marginRight: 10,
+    marginLeft: -5,
+  },
+});

src/scenes/nutritionist/ClientListNutritionist/components/ChatButton/types.ts

+export interface Props {
+  onPress: () => void;
+  loading?: boolean;
+  disabled?: true;
+  testID?: string;
+}

src/scenes/nutritionist/ClientListNutritionist/components/ClientCardNutritionist/index.test.tsx

+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import ClientCardNutritionist from '.';
+
+describe('ClientCardNutritionist', () => {
+  it('renders correctly', () => {
+    render(
+      <ClientCardNutritionist
+        clientName="test"
+        onPressClientChat={() => {}}
+        onPressClientDietReport={() => {}}
+        onPressClientProfile={() => {}}
+      />,
+    );
+  });
+
+  it('renders correctly when given a testID', () => {
+    render(
+      <ClientCardNutritionist
+        onPressClientChat={() => {}}
+        onPressClientDietReport={() => {}}
+        onPressClientProfile={() => {}}
+        clientName="test"
+        testID="clientCard"
+      />,
+    );
+  });
+});

src/scenes/nutritionist/ClientListNutritionist/components/ClientCardNutritionist/index.tsx

+import React, { FC } from 'react';
+import { View } from 'react-native';
+import { Text } from 'react-native-elements';
+
+import { typographyStyles } from 'styles';
+
+import { styles } from './styles';
+import { Props } from './types';
+import DietReportButton from '../DietReportButton';
+import ChatButton from '../ChatButton';
+
+const ClientCardNutritionist: FC<Props> = ({
+  clientName,
+  onPressClientProfile,
+  onPressClientDietReport,
+  onPressClientChat,
+}) => {
+  return (
+    <View style={styles.cardContainer}>
+      <Text
+        style={[
+          typographyStyles.headingMedium,
+          styles.spacing,
+          styles.clickableText,
+        ]}
+        onPress={onPressClientProfile}>
+        {clientName}
+      </Text>
+      <DietReportButton
+        onPress={onPressClientDietReport}
+        testID="dietReportButton"
+      />
+      <ChatButton onPress={onPressClientChat} testID="chatButton" />
+    </View>
+  );
+};
+
+export default ClientCardNutritionist;

src/scenes/nutritionist/ClientListNutritionist/components/ClientCardNutritionist/styles.ts

+import { StyleSheet } from 'react-native';
+import { colors } from 'styles';
+
+export const styles = StyleSheet.create({
+  spacing: {
+    marginBottom: 14,
+  },
+  clickableText: {
+    textDecorationLine: 'underline',
+  },
+  cardContainer: {
+    alignSelf: 'stretch',
+    padding: 20,
+    marginBottom: 24,
+    borderRadius: 10,
+    backgroundColor: colors.lightYellow,
+  },
+});

src/scenes/nutritionist/ClientListNutritionist/components/ClientCardNutritionist/types.ts

+export interface Props {
+  clientName: string;
+  onPressClientProfile: () => void;
+  onPressClientDietReport: () => void;
+  onPressClientChat: () => void;
+  testID?: string;
+}

src/scenes/nutritionist/ClientListNutritionist/components/DietReportButton/index.test.tsx

+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+
+import DietReportButton from '.';
+
+describe('DietReportButton', () => {
+  it('renders correctly when active', () => {
+    render(<DietReportButton onPress={() => console.log('cool')} />);
+  });
+
+  it('renders correctly when disabled', () => {
+    render(<DietReportButton onPress={() => console.log('cool')} disabled />);
+  });
+
+  it('renders correctly when given a testID', () => {
+    render(
+      <DietReportButton onPress={() => console.log('cool')} testID="button" />,
+    );
+  });
+
+  it('executes onPress callback when button is pressed', async () => {
+    let isPressed = false;
+
+    const { getByText } = render(
+      <DietReportButton onPress={() => (isPressed = true)} testID="button" />,
+    );
+
+    const button = getByText(/diet report/i);
+    fireEvent.press(button);
+    expect(isPressed).toBeTruthy();
+  });
+});

src/scenes/nutritionist/ClientListNutritionist/components/DietReportButton/index.tsx

+import React, { FC } from 'react';
+import { TouchableOpacity, Text, Image } from 'react-native';
+import { diet_report } from 'assets/images';
+
+import { styles } from './styles';
+import { Props } from './types';
+import { typographyStyles } from 'styles';
+
+const DietReportButton: FC<Props> = ({ onPress, testID }) => (
+  <TouchableOpacity
+    onPress={onPress}
+    testID={testID}
+    style={styles.containerStyle}>
+    <Image source={diet_report} style={styles.img} />
+    <Text style={[typographyStyles.bodyMedium, styles.titleStyle]}>
+      Diet Report
+    </Text>
+  </TouchableOpacity>
+);
+
+export default DietReportButton;

src/scenes/nutritionist/ClientListNutritionist/components/DietReportButton/styles.ts

+import { StyleSheet } from 'react-native';
+import { colors } from 'styles';
+
+export const styles = StyleSheet.create({
+  titleStyle: { color: colors.textBlack, textTransform: 'capitalize' },
+  containerStyle: {
+    padding: 12,
+    overflow: 'hidden',
+    borderRadius: 4,
+    backgroundColor: colors.buttonYellow,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  img: {
+    width: 20,
+    height: 20,
+    marginRight: 10,
+    marginLeft: -5,
+  },
+});