Refactor

1 files changed, 134 insertions, 0 deletions

diff --git a/src2/pages/my/profile.js b/src2/pages/my/profile.js
new file mode 100644
index 00000000..97891259
--- /dev/null
+++ b/src2/pages/my/profile.js
@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { toast } from "react-hot-toast";
+import AppBar from "@/components/layouts/AppBar";
+import Layout from "@/components/layouts/Layout";
+import WithAuth from "@/components/auth/WithAuth";
+import apiOdoo from "@/core/utils/apiOdoo";
+import { 
+  useAuth,
+  setAuth as setAuthCookie,
+  getAuth
+} from "@/core/utils/auth";
+
+export default function MyProfile() {
+  const [auth, setAuth] = useAuth();
+  const [editMode, setEditMode] = useState(false);
+  const [password, setPassword] = useState('');
+
+  const update = async (e) => {
+    e.preventDefault();
+    let dataToUpdate = {
+      name: auth.name,
+      phone: auth.phone,
+      mobile: auth.mobile
+    };
+    if (password) dataToUpdate.password = password;
+    let update = await apiOdoo('PUT', `/api/v1/user/${auth.id}`, dataToUpdate);
+    setAuthCookie(update.user);
+    cancelEdit();
+    toast.success('Berhasil mengubah profil', { duration: 1500 });
+  };
+
+  const handleInput = (e) => {
+    let authToUpdate = auth;
+    authToUpdate[e.target.name] = e.target.value;
+    setAuth({ ...authToUpdate });
+  };
+
+  const cancelEdit = () => {
+    setEditMode(false);
+    setAuth(getAuth());
+    setPassword('');
+  }
+
+  return (
+    <WithAuth>
+      <Layout>
+        <AppBar title="Akun Saya" />
+        
+        <form onSubmit={update} className="w-full px-4">
+          { auth && (
+            <>
+              <label className="form-label mt-4 mb-2">Email</label>
+              <input 
+                type="text"
+                className="form-input" 
+                placeholder="johndoe@gmail.com"
+                name="email"
+                value={auth.email}
+                onChange={handleInput}
+                disabled={true}
+              />
+
+              <label className="form-label mt-4 mb-2">Nama Lengkap</label>
+              <input 
+                type="text"
+                className="form-input" 
+                placeholder="John Doe"
+                name="name"
+                value={auth.name}
+                onChange={handleInput}
+                disabled={!editMode}
+              />
+
+              <label className="form-label mt-4 mb-2">No Telepon</label>
+              <input 
+                type="tel"
+                className="form-input" 
+                placeholder="08xxxxxxxx"
+                name="phone"
+                value={auth.phone}
+                onChange={handleInput}
+                disabled={!editMode}
+              />
+
+              <label className="form-label mt-4 mb-2">No Handphone</label>
+              <input 
+                type="tel"
+                className="form-input" 
+                placeholder="08xxxxxxxx"
+                name="mobile"
+                value={auth.mobile}
+                onChange={handleInput}
+                disabled={!editMode}
+              />
+
+              <label className="form-label mt-4 mb-2">Kata Sandi</label>
+              <input 
+                type="password"
+                className="form-input" 
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                disabled={!editMode}
+              />
+            </>
+          ) }
+
+          { editMode && (
+            <div className="flex gap-x-3 mt-6">
+              <button 
+                type="button" 
+                className="btn-light flex-1 float-right"
+                onClick={cancelEdit}
+              >
+                Batal
+              </button>
+              <button type="submit" className="btn-yellow flex-1 float-right">Simpan</button>
+            </div>
+          ) }
+
+          { !editMode && (
+            <button 
+              type="button" 
+              className="btn-light float-right mt-6 w-full"
+              onClick={() => setEditMode(true)}
+            >
+              Ubah Profil
+            </button>
+          ) }
+        </form>
+      </Layout>
+    </WithAuth>
+  );
+}
\ No newline at end of file