feat(frontend): implement employer evaluation (#45)

* feat: employer evaluation

---------

Signed-off-by: Mauran <[email protected]>

front/assets/translations/en_US.json

@@ -7,6 +7,12 @@
     "delete": "Delete",
     "confirm": "Confirm"
   },
+  "employer": {
+    "evaluation": "Employer evaluation",
+    "giveAReview": "Give a review",
+    "review": "Describe your experience at this job",
+    "sendEvaluation": "Send my evaluation"
+  },
   "jobOffer": {
     "info": {
       "jobOfferList": "Job offer list",

front/assets/translations/fr_FR.json

@@ -7,6 +7,12 @@
     "delete": "Supprimer",
     "confirm": "Confirmer"
   },
+  "employer": {
+    "evaluation": "Avis sur l'employeur",
+    "giveAReview": "Donnez un avis",
+    "review": "Decrivez votre expérience à ce job",
+    "sendEvaluation": "Envoyer mon avis"
+  },
   "jobOffer": {
     "info": {
       "jobOfferList": "Liste des offres d'emploi",

front/src/components/employer/EmployerEvaluationForm.tsx

@@ -0,0 +1,112 @@
+import { FC, useCallback } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import { Text, TextInput } from 'react-native-paper';
+
+import StarRatingSelector from '@/components/utils/StarRatingSelector';
+import { Employer } from '@/models/entities/employer';
+import i18n from '@/utils/i18n';
+
+/**
+ * The styles for the EmployerEvaluationForm component.
+ */
+const styles = StyleSheet.create({
+  container: {
+    gap: 6,
+  },
+  nameContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 8,
+  },
+  profilePicture: {
+    borderRadius: 48,
+    height: 60,
+    width: 60,
+  },
+  textInput: {
+    marginVertical: 8,
+  },
+});
+
+/**
+ * The data for the employer evaluation form.
+ */
+export type EmployerEvaluationFormData = {
+  score: number;
+  review: string;
+};
+
+/**
+ * The props for the EmployerEvaluationForm component.
+ */
+type EmployerEvaluationFormProps = {
+  /**
+   * The employer to evaluate.
+   */
+  employer: Employer;
+
+  /**
+   * The data for the form.
+   */
+  formData: EmployerEvaluationFormData;
+
+  /**
+   * The function to call when the form data is updated.
+   */
+  onFormDataUpdate: (data: EmployerEvaluationFormData) => void;
+};
+
+/**
+ * Displays an employer evaluation form.
+ * @constructor
+ */
+const EmployerEvaluationForm: FC<EmployerEvaluationFormProps> = ({
+  employer,
+  formData,
+  onFormDataUpdate,
+}) => {
+  // Callbacks
+  const handleInputChange = useCallback(
+    (
+      key: keyof EmployerEvaluationFormData,
+      value: EmployerEvaluationFormData[typeof key],
+    ) => {
+      onFormDataUpdate({
+        ...formData,
+        [key]: value,
+      });
+    },
+    [formData, onFormDataUpdate],
+  );
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.nameContainer}>
+        <Image
+          style={styles.profilePicture}
+          source={{
+            uri: employer.picture,
+          }}
+        />
+        <View>
+          <Text variant='headlineMedium'>{`${employer.firstName} ${employer.lastName}`}</Text>
+        </View>
+      </View>
+      <Text variant='titleLarge'> {i18n.t('employer.giveAReview')}</Text>
+      <StarRatingSelector
+        rating={formData.score}
+        onStarPress={(value) => handleInputChange('score', value)}
+      />
+      <TextInput
+        label={i18n.t('employer.review')}
+        value={formData.review}
+        style={styles.textInput}
+        multiline
+        numberOfLines={6}
+        onChangeText={(value) => handleInputChange('review', value)}
+      />
+    </View>
+  );
+};
+
+export default EmployerEvaluationForm;

front/src/components/evaluations/EvaluationItem.tsx

@@ -4,9 +4,10 @@ import { StyleSheet, View } from 'react-native';
 import { Text } from 'react-native-paper';
 
 import ProfilePicturePlaceholder from '@/components/utils/ProfilePicturePlaceholder';
-import StarRating from '@/components/utils/StarRating';
 import { Evaluation } from '@/models/entities/evaluation';
 
+import StarRatingSelector from '../utils/StarRatingSelector';
+
 /**
  * The styles for the EvaluationItem component.
  */
@@ -54,7 +55,7 @@ const EvaluationItem: FC<EvaluationItemProps> = ({ evaluation }) => {
             {`${evaluation.employerFirstName} ${evaluation.employerLastName}`}
           </Text>
 
-          <StarRating rating={evaluation.score} />
+          <StarRatingSelector editable={false} rating={evaluation.score} />
         </View>
       </View>
 

front/src/components/messaging/MessageChannelItem.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 import { Text, TouchableRipple } from 'react-native-paper';
 
+import { Employer } from '@/models/entities/employer';
 import { MessageChannel } from '@/models/entities/messageChannel';
 
 /**
@@ -33,10 +34,15 @@ const styles = StyleSheet.create({
  */
 type MessageChannelItemProps = {
   /**
-   * The function to call when an a message channel is pressed.
+   * The function to call when a message channel is pressed.
    */
   onItemPress?: (messageChannel: MessageChannel) => void;
 
+  /**
+   * The function to call when the profile picture is pressed.
+   */
+  onProfilePress?: (employerId: Employer) => void;
+
   /**
    * The message channel to display.
    */
@@ -49,17 +55,22 @@ type MessageChannelItemProps = {
  */
 const MessageChannelItem: FC<MessageChannelItemProps> = ({
   onItemPress,
+  onProfilePress,
   messageChannel,
 }) => {
   return (
     <TouchableRipple onPress={() => onItemPress?.(messageChannel)}>
       <View style={[styles.container, styles.horizontalContainer]}>
-        <Image
-          style={styles.profilePicture}
-          source={{
-            uri: messageChannel.employer?.picture,
-          }}
-        />
+        <TouchableRipple
+          onPress={() => onProfilePress(messageChannel.employer)}
+        >
+          <Image
+            style={styles.profilePicture}
+            source={{
+              uri: messageChannel.employer?.picture,
+            }}
+          />
+        </TouchableRipple>
         <View style={styles.verticalCenter}>
           <Text
             variant='labelLarge'

front/src/components/messaging/MessageChannelList.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Divider } from 'react-native-paper';
 
+import { Employer } from '@/models/entities/employer';
 import { MessageChannel } from '@/models/entities/messageChannel';
 
 import MessageChannelItem from './MessageChannelItem';
@@ -23,6 +24,10 @@ type MessageChannelListProps = {
    */
   onItemPress?: (messageChannel: MessageChannel) => void;
 
+  /**
+   * The function to call when the profile picture is pressed.
+   */
+  onProfilePress?: (employer: Employer) => void;
   /**
    * The list of message channels to display.
    */
@@ -31,6 +36,7 @@ type MessageChannelListProps = {
 
 const MessageChannelList: FC<MessageChannelListProps> = ({
   onItemPress,
+  onProfilePress,
   messageChannels,
 }) => {
   return (
@@ -39,6 +45,7 @@ const MessageChannelList: FC<MessageChannelListProps> = ({
         <View key={messageChannel.id}>
           <MessageChannelItem
             onItemPress={onItemPress}
+            onProfilePress={onProfilePress}
             messageChannel={messageChannel}
           />
           <Divider style={styles.divider} />

front/src/components/profile/header/ProfileHeaderName.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 import { Text } from 'react-native-paper';
 
-import StarRating from '@/components/utils/StarRating';
+import StarRatingSelector from '@/components/utils/StarRatingSelector';
 
 /**
  * The styles for the ProfileHeaderName component.
@@ -71,7 +71,7 @@ const ProfileHeaderName: FC<ProfileHeaderNameProps> = ({
           {firstName} {lastName}
         </Text>
 
-        <StarRating rating={averageRating} />
+        <StarRatingSelector editable={false} rating={averageRating} />
       </View>
     </View>
   );