From b9d51f70107c6100b81e99fa3adfe0246b79fb59 Mon Sep 17 00:00:00 2001
From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com>
Date: Wed, 2 Oct 2024 19:31:09 +0800
Subject: [PATCH] feature: add group owner link (#82)

* feature: add group owner link

* fix: add tags field bug
---
 components/Group/Form/Fields/TagsField.jsx | 34 +++++++++----
 components/Group/detail/OrganizerCard.jsx  | 55 ++++++++++++----------
 2 files changed, 55 insertions(+), 34 deletions(-)

diff --git a/components/Group/Form/Fields/TagsField.jsx b/components/Group/Form/Fields/TagsField.jsx
index f5337ca4..79ccee0f 100644
--- a/components/Group/Form/Fields/TagsField.jsx
+++ b/components/Group/Form/Fields/TagsField.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import IconButton from '@mui/material/IconButton';
 import FormHelperText from '@mui/material/FormHelperText';
 import ClearIcon from '@mui/icons-material/Clear';
@@ -8,19 +8,20 @@ import { StyledChip, StyledTagsField } from '../Form.styled';
 function TagsField({ name, helperText, control, value = [] }) {
   const [input, setInput] = useState('');
   const [error, setError] = useState('');
+  const isComposing = useRef(false);
 
-  const handleInput = (e) => {
+  const handleChange = (e) => {
     const _value = e.target.value;
     if (_value.length > 8) setError('標籤最多 8 個字');
     else setError('');
     setInput(_value);
   };
 
-  const handleKeyDown = (e) => {
-    if (error) return;
+  const handleAddTag = () => {
     const tag = input.trim();
-    if (e.key !== 'Enter' || !tag) return;
-    if (value.indexOf(tag) > -1) return;
+    if (!tag) return;
+    if (error) return;
+    if (value.includes(tag)) return;
     setInput('');
     control.onChange({
       target: {
@@ -30,6 +31,12 @@ function TagsField({ name, helperText, control, value = [] }) {
     });
   };
 
+  const handleKeyDown = (e) => {
+    if (e.keyCode !== 13) return;
+    if (isComposing.current) return;
+    handleAddTag();
+  };
+
   const handleDelete = (tag) => () => {
     control.onChange({
       target: {
@@ -54,12 +61,23 @@ function TagsField({ name, helperText, control, value = [] }) {
         {value.length < 8 && (
           <input
             value={input}
-            onChange={handleInput}
+            onCompositionStart={() => {
+              isComposing.current = true;
+            }}
+            onCompositionEnd={() => {
+              isComposing.current = false;
+            }}
+            onChange={handleChange}
             onKeyDown={handleKeyDown}
           />
         )}
         {input.trim() && (
-          <IconButton sx={{ textTransform: 'none' }} size="small" edge="end">
+          <IconButton
+            sx={{ textTransform: 'none' }}
+            size="small"
+            edge="end"
+            onClick={handleAddTag}
+          >
             <AddCircleOutlineIcon />
           </IconButton>
         )}
diff --git a/components/Group/detail/OrganizerCard.jsx b/components/Group/detail/OrganizerCard.jsx
index 1709207c..d29903b8 100644
--- a/components/Group/detail/OrganizerCard.jsx
+++ b/components/Group/detail/OrganizerCard.jsx
@@ -5,6 +5,7 @@ import { EDUCATION_STEP, ROLE } from '@/constants/member';
 import locationSvg from '@/public/assets/icons/location.svg';
 import Chip from '@/shared/components/Chip';
 import { timeDuration } from '@/utils/date';
+import Link from 'next/link';
 
 const StyledHeader = styled.div`
   display: flex;
@@ -82,33 +83,35 @@ function OrganizerCard({ data = {}, isLoading }) {
   return (
     <>
       <StyledHeader>
-        <StyledFlex style={{ marginBottom: '10px', gap: 12 }}>
-          <Avatar
-            src={data?.user?.photoURL}
-            alt={`${data?.user?.name} avatar`}
-          />
-          <div>
-            <StyledFlex style={{ gap: 10 }}>
-              <StyledText>
-                {isLoading ? (
-                  <Skeleton width={80} animation="wave" />
-                ) : (
-                  data?.user?.name
-                )}
+        <Link href={`/partner/detail?id=${data?.userId}`}>
+          <StyledFlex style={{ marginBottom: '10px', gap: 12 }}>
+            <Avatar
+              src={data?.user?.photoURL}
+              alt={`${data?.user?.name} avatar`}
+            />
+            <div>
+              <StyledFlex style={{ gap: 10 }}>
+                <StyledText>
+                  {isLoading ? (
+                    <Skeleton width={80} animation="wave" />
+                  ) : (
+                    data?.user?.name
+                  )}
+                </StyledText>
+                <StyledTag>
+                  {isLoading ? (
+                    <Skeleton width={80} animation="wave" />
+                  ) : (
+                    educationStage
+                  )}
+                </StyledTag>
+              </StyledFlex>
+              <StyledText style={{ color: '#92989A' }}>
+                {isLoading ? <Skeleton width={88} animation="wave" /> : role}
               </StyledText>
-              <StyledTag>
-                {isLoading ? (
-                  <Skeleton width={80} animation="wave" />
-                ) : (
-                  educationStage
-                )}
-              </StyledTag>
-            </StyledFlex>
-            <StyledText style={{ color: '#92989A' }}>
-              {isLoading ? <Skeleton width={88} animation="wave" /> : role}
-            </StyledText>
-          </div>
-        </StyledFlex>
+            </div>
+          </StyledFlex>
+        </Link>
         <StyledText style={{ alignSelf: 'flex-start', gap: 1 }}>
           <img src={locationSvg.src} alt="location icon" />
           {isLoading ? <Skeleton width={48} animation="wave" /> : location}