From 0541fdba281ccb61acc4b05e90b247ed45930e9f Mon Sep 17 00:00:00 2001
From: kojiadrianojr <iisparkplugiiog@yahoo.com>
Date: Mon, 27 Nov 2023 15:48:49 +0800
Subject: [PATCH] Fix edit function

---
 .../MarketplaceV2/Views/User/UserStyle.css    |  7 +++++
 .../MarketplaceV2/Views/User/Usermain.tsx     | 28 +++++++++++++------
 src/views/MarketplaceV2/Views/User/index.tsx  | 20 ++++++++-----
 3 files changed, 40 insertions(+), 15 deletions(-)
 create mode 100644 src/views/MarketplaceV2/Views/User/UserStyle.css

diff --git a/src/views/MarketplaceV2/Views/User/UserStyle.css b/src/views/MarketplaceV2/Views/User/UserStyle.css
new file mode 100644
index 0000000..c8b85b9
--- /dev/null
+++ b/src/views/MarketplaceV2/Views/User/UserStyle.css
@@ -0,0 +1,7 @@
+.user-input {
+  width: 100%;
+  background-color: transparent;
+  color: #ffff;
+  border: none;
+  border-bottom: 1px solid #3898b8;
+}
\ No newline at end of file
diff --git a/src/views/MarketplaceV2/Views/User/Usermain.tsx b/src/views/MarketplaceV2/Views/User/Usermain.tsx
index 7b57acd..c6f70f5 100644
--- a/src/views/MarketplaceV2/Views/User/Usermain.tsx
+++ b/src/views/MarketplaceV2/Views/User/Usermain.tsx
@@ -21,11 +21,15 @@ const UserMain = (props) => {
   const {
     txHistory: { coin, nft },
     activityHistory,
-    stats,
+    userInfo,
     tabController: { active },
+    handleFunctions: { handleUserInfo },
   } = props
   const txD = React.useMemo(() => (active === 0 ? coin : nft), [active, coin, nft])
-
+  const [enableEdit, setEnableEdit] = useState<boolean>(false)
+  const handleEdit = () => {
+    setEnableEdit(!enableEdit)
+  }
   const boxInfo = (name: string, tooltip: string) => {
     return (
       <Flex alignItems="center" justifyContent="space-between">
@@ -52,16 +56,24 @@ const UserMain = (props) => {
         <Grid container spacing={2}>
           <Grid item xs={12} sm={10}>
             <Grid container spacing={{ xs: 1, sm: 2 }}>
-              {Object.entries(stats.basicInfo).map((stat) => {
-                const field = FIELD_INFO[`${stat[0]}`]
-                const val = stat[1]
+              {Object.entries(userInfo).map((info) => {
+                const field = FIELD_INFO[`${info[0]}`]
+                const val = info[1].toString()
                 return (
                   <>
                     <Grid item xs={5} sm={5}>
-                      <H5 fsize="0.9em">{field}</H5>
+                      <H5 fsize="0.9em">{field}:</H5>
                     </Grid>
                     <Grid item xs={7} sm={7}>
-                      <P fsize="0.9em">: {val}</P>
+                      {enableEdit ? (
+                        <input
+                          className='user-input'
+                          value={val}
+                          onChange={(e) => handleUserInfo({ field: info[0], value: e.target.value })}
+                        />
+                      ) : (
+                        <P fsize="0.9em">{val}</P>
+                      )}
                     </Grid>
                   </>
                 )
@@ -69,7 +81,7 @@ const UserMain = (props) => {
             </Grid>
           </Grid>
           <Grid item xs={12} sm={2} display="flex" alignItems="center" justifyContent="center">
-            <IconButton variant="text" className="icon-button">
+            <IconButton variant="text" className="icon-button" onClick={handleEdit}>
               <MiniBox>
                 <Iconloader type="fa" name="Edit" fontSize="1em" />
               </MiniBox>
diff --git a/src/views/MarketplaceV2/Views/User/index.tsx b/src/views/MarketplaceV2/Views/User/index.tsx
index cd58358..195e464 100644
--- a/src/views/MarketplaceV2/Views/User/index.tsx
+++ b/src/views/MarketplaceV2/Views/User/index.tsx
@@ -6,15 +6,14 @@ import withGridLayout from './withGridLayout'
 import Main from '../Main'
 import UserMain from './Usermain'
 import NftCollection from './NftCollection'
+import './UserStyle.css'
 
 // Tempdata collection
 
-const tempStats = {
-  basicInfo: {
-    email: 'email.add@mgg.com',
-    wallet: '0x0000',
-    credit: 'NA',
-  },
+const tempUserInfo = {
+  email: 'email.add@mgg.com',
+  wallet: '0x0000',
+  credit: 'NA',
 }
 
 const tempActivityData = [
@@ -69,6 +68,12 @@ const WrappedNftList = withGridLayout(NftCollection)
 
 const User = () => {
   const [active, setActive] = useState(0)
+  // TODO: Replace with actual data
+  const [userInfo, setUserInfo] = useState(tempUserInfo)
+  const handleUserInfo = (payload: { field: string, value: string }) => {
+    setUserInfo({ ...userInfo, [`${payload.field}`]: payload.value })
+    console.log(userInfo)
+  }
   return (
     <Main>
       <TextWrapper>
@@ -80,7 +85,8 @@ const User = () => {
                 tabController: { active, setActive },
                 txHistory: { ...tempTx },
                 activityHistory: tempActivityData,
-                stats: tempStats,
+                userInfo,
+                handleFunctions: { handleUserInfo },
               }}
             />
             <WrappedNftList {...{ mediaQ: { xs: 12, md: 6, lg: 7 } }} />