Languages management in teks

components/teks/teks-drawer.js

@@ -71,10 +71,10 @@ const useStyles = makeStyles(theme => ({
     marginBottom: '0.5em'
   },
   gridText: {
-    border: '1px dashed grey',
+    border: '2px solid grey',
     borderRadius: '5px',
     marginTop: '2em',
-    marginInline: '2px'
+    padding: '1em'
   },
   grid: {
     marginTop: '1em'
@@ -101,7 +101,30 @@ const formatJsonString = stringToFormat => {
   return stringToFormat.split('\n').map((string, index) => <div key={index}>{`${string}`}<br /></div>) // eslint-disable-line react/no-array-index-key
 }
 
+const langToArray = anTeks => {
+  const langArray = []
+
+  if (anTeks && anTeks.tradiksyon) {
+    const {francais, english, espagnol} = anTeks.tradiksyon
+
+    if (francais) {
+      langArray.push({title: 'Traduction', emoji: '&#127467;&#127479;', lang: francais})
+    }
+
+    if (english) {
+      langArray.push({title: 'Translation', emoji: '&#127468;&#127463;', lang: english})
+    }
+
+    if (espagnol) {
+      langArray.push({title: 'Traducción', emoji: '&#127466;&#127480;', lang: espagnol})
+    }
+  }
+
+  return langArray
+}
+
 export default function TeksDrawer({teks, anTeks}) {
+  const langArray = langToArray(anTeks)
   const classes = useStyles()
   const theme = useTheme()
   const [esMobilOuve, meteEsMobilOuve] = useState(false)
@@ -197,25 +220,29 @@ export default function TeksDrawer({teks, anTeks}) {
             {anTeks.okiMizikID && (
               <OkiMizik id={anTeks.okiMizikID} />
             )}
-            <Grid container className={classes.grid} spacing={3}>
+            <Grid container justify='center' spacing={1}>
-              <Grid item md className={classes.gridText}>
+              <Grid item xs={12} md={langArray.length > 0 ? 6 : null}>
-                <Typography align='center' className={classes.text} variant='h4'>
+                <div className={classes.gridText}>
-                  Transcription
-                </Typography>
-                <Typography paragraph align='justify' component='span'>
-                  {formatJsonString(anTeks.transkripsyon)}
-                </Typography>
-              </Grid>
-              {anTeks.tradiksyon && (
-                <Grid item md className={classes.gridText}>
                   <Typography align='center' className={classes.text} variant='h4'>
-                    Traduction
+                    Transcription
                   </Typography>
-                  <Typography paragraph align='justify' component='span'>
+                  <Typography paragraph align={langArray.length === 0 ? 'center' : 'justify'} component='span'>
-                    {formatJsonString(anTeks.tradiksyon.francais)}
+                    {formatJsonString(anTeks.transkripsyon)}
                   </Typography>
+                </div>
+              </Grid>
+              {langArray.map(({title, emoji, lang}) => (
+                <Grid key={title} item xs={12} md={6}>
+                  <div className={classes.gridText}>
+                    <Typography align='center' className={classes.text} variant='h4'>
+                      <span dangerouslySetInnerHTML={{__html: emoji}} /> {title}
+                    </Typography>
+                    <Typography paragraph align='justify' component='span'>
+                      {formatJsonString(lang)}
+                    </Typography>
+                  </div>
                 </Grid>
-              )}
+              ))}
             </Grid>
           </>
         ) : (