Merge pull request #382 from BIDMCDigitalPsychiatry/issue-810

Customized emotions
BIDMCDigitalPsychiatry · Jun 7, 2024 · 1f3a0c3 · 1f3a0c3
2 parents c0df845 + 37e960c
commit 1f3a0c3
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 39 deletions.
diff --git a/Emotion_Recognition/src/components/Emotions.tsx b/Emotion_Recognition/src/components/Emotions.tsx
@@ -2,41 +2,19 @@ import React, { useEffect, useState } from "react";
 import {Button, Col, Container, Form,Image, Row } from "react-bootstrap";
 import i18n from "../i18n";
 
-  const ems: any = [
-    {
-      "emotion" : 'Happiness',
-      "index" : 1,
-    }, 
-    {
-      "emotion" : 'Sadness',
-      "index" : 2,
-    },
-    { 
-      "emotion" : 'Fear',
-      "index" : 3,
-    },
-    { 
-      "emotion" : 'Anger',
-      "index" : 4,
-    },
-    {
-      "emotion" : 'Neutral',
-      "index" : 5,
-    }
-  ]
-
 
 const Emotions = ({...props} : any) => {   
-  const [image, setImage] = useState(props.data.image)
+  const [image, setImage] = useState(props?.data?.image)
   const [num, setNum] = useState(props.level)
   const [emotions, setEmotions] = useState<any>([])  
   const [error, setError] = useState("")
   const duration =  new Date().getTime()
   const totalLevels = props.totalLevels
 
 
+
   const initialize = (data: any) => {
-    const newArray = ems.map ((em: any)=>{
+    const newArray = props.emotions.map ((em: any)=>{
         return {
         ...em,
         "selected" : (em.emotion.toLowerCase() === data?.selected?.toLowerCase()) ? true : false
@@ -45,7 +23,7 @@ const Emotions = ({...props} : any) => {
     setEmotions(newArray)
   }
   useEffect(()=>{
-    setImage(props.data?.image)
+    setImage(props?.data?.image)
     setNum(props.level)  
     initialize(props.data)  
   },[props.data, props.level])
@@ -116,7 +94,7 @@ const Emotions = ({...props} : any) => {
                         checked={emotion.selected}
                         onChange={(e: any)=>handleOnCick(e)}
                       />
-                      {i18n.t(emotion.emotion.toUpperCase())}
+                      {i18n.t(emotion?.emotion?.toUpperCase())}
                     </div>
                   })}
 

diff --git a/Emotion_Recognition/src/containers/Layout.tsx b/Emotion_Recognition/src/containers/Layout.tsx
@@ -7,6 +7,29 @@ import i18n from "../i18n";
 import Emotions from "src/components/Emotions";
 import { shuffleArray } from "src/functions";
 
+const ems: any = [
+  {
+    "emotion" : 'Happiness',
+    "index" : 'happiness',
+  }, 
+  {
+    "emotion" : 'Sadness',
+    "index" : 'sadness',
+  },
+  { 
+    "emotion" : 'Fear',
+    "index" : 'fear',
+  },
+  { 
+    "emotion" : 'Anger',
+    "index" : 'anger',
+  },
+  {
+    "emotion" : 'Neutral',
+    "index" : 'neutral',
+  }
+]
+
 const Layout = ({...props} : any) =>{  
     const [level, setLevel] = useState(1)  
     const [currentEmotion, setCurrentEmotion] = useState<any>({})
@@ -15,11 +38,18 @@ const Layout = ({...props} : any) =>{
     const [gameOver, setGameOver] = useState(false)
     const [settings, setSettings] = useState<any>(null) 
     const [totalLevels, setTotalLevels] = useState(0)
-
+    const [emotions, setEmotions] = useState(ems)
       useEffect(() => {  
         const configuration = props.data.configuration;
         let data = props.data.activity?.settings ? props.data.activity?.settings : null ;
-        data = shuffleArray(data ?? [])
+        let settings  = (data || []).map((e: any) => (e.emotion))
+        let defaultEmotions = ems.map((e: any) => e.emotion.toLowerCase().trim())
+        let missing = (settings || []).filter((item: any) => defaultEmotions.indexOf(item.trim().toLowerCase()) < 0);
+        missing.map((m: string) => {
+          ems.push({'emotion': m, 'index': m?.trim()?.toLowerCase()?.replace(/ /g, '')})
+        })
+        setEmotions(ems)
+        data = shuffleArray((props.data.activity?.settings ? props.data.activity?.settings : null) ?? [])
         i18n.changeLanguage(!!configuration ? configuration.language : "en-US");    
         const newArray = data?.map ((em: any) => {
           return {
@@ -114,6 +144,7 @@ const Layout = ({...props} : any) =>{
               <Row>
               <Col>  
                    <Emotions 
+                   emotions={emotions}
                    data={currentEmotion}
                    handleLevelCompleted={handleLevelCompleted}
                    totalLevels={totalLevels}