From 6f772027d7b496ad528c8079412b797d8de6f8a9 Mon Sep 17 00:00:00 2001
From: Louise Wang <louise.w1997@gmail.com>
Date: Sat, 18 Dec 2021 19:43:58 +0100
Subject: [PATCH] feat: preview tags

---
 src/components/item/sharing/CustomizedTagsEdit.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/item/sharing/CustomizedTagsEdit.js b/src/components/item/sharing/CustomizedTagsEdit.js
index 115f2b9ba..29442ed33 100644
--- a/src/components/item/sharing/CustomizedTagsEdit.js
+++ b/src/components/item/sharing/CustomizedTagsEdit.js
@@ -2,7 +2,13 @@ import React, { useContext, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Loader } from '@graasp/ui';
 import { useTranslation } from 'react-i18next';
-import { Typography, TextField, Button, makeStyles } from '@material-ui/core';
+import {
+  Typography,
+  TextField,
+  Button,
+  Chip,
+  makeStyles,
+} from '@material-ui/core';
 import SaveIcon from '@material-ui/icons/Save';
 import { useParams } from 'react-router';
 import { MUTATION_KEYS } from '@graasp/query-client';
@@ -39,7 +45,7 @@ const CustomizedTagsEdit = ({ item, edit }) => {
 
   useEffect(() => {
     if (settings) {
-      setDisplayValues(settings.tags?.join(' ,') || '');
+      setDisplayValues(settings.tags?.join(', ') || '');
     }
   }, [settings]);
 
@@ -90,6 +96,10 @@ const CustomizedTagsEdit = ({ item, edit }) => {
           {t('Save')}
         </Button>
       </form>
+      <Typography variant="subtitle1">{t('Tags Preview')}</Typography>
+      {settings?.tags?.map((tag) => (
+        <Chip label={tag} />
+      ))}
     </>
   );
 };