From 4b016c908dda2019f3bf89e5a3d2eae535e5fbd2 Mon Sep 17 00:00:00 2001
From: polwex <polwex@sortug.com>
Date: Thu, 18 Sep 2025 00:24:39 +0700
Subject: oioi

---
 front/src/components/profile/Editor.tsx | 262 ++++++++++++++++++++++++++++++++
 1 file changed, 262 insertions(+)
 create mode 100644 front/src/components/profile/Editor.tsx

(limited to 'front/src/components/profile/Editor.tsx')

diff --git a/front/src/components/profile/Editor.tsx b/front/src/components/profile/Editor.tsx
new file mode 100644
index 0000000..2e4aebc
--- /dev/null
+++ b/front/src/components/profile/Editor.tsx
@@ -0,0 +1,262 @@
+import { useState } from "react";
+import type { UserProfile, UserType } from "@/types/nostrill";
+import useLocalState from "@/state/state";
+import Icon from "@/components/Icon";
+import toast from "react-hot-toast";
+import Avatar from "../Avatar";
+
+interface ProfileEditorProps {
+  user: UserType;
+  userString: string;
+  profile: UserProfile | undefined;
+  onSave?: () => void;
+}
+
+const ProfileEditor: React.FC<ProfileEditorProps> = ({
+  user,
+  profile,
+  userString,
+  onSave,
+}) => {
+  const { api, profiles } = useLocalState((s) => ({
+    api: s.api,
+    pubkey: s.pubkey,
+    profiles: s.profiles,
+  }));
+
+  // Initialize state with existing profile or defaults
+  const [name, setName] = useState(profile?.name || userString);
+  const [picture, setPicture] = useState(profile?.picture || "");
+  const [about, setAbout] = useState(profile?.about || "");
+  const [customFields, setCustomFields] = useState<
+    Array<{ key: string; value: string }>
+  >(
+    Object.entries(profile?.other || {}).map(([key, value]) => ({
+      key,
+      value,
+    })),
+  );
+  const [isEditing, setIsEditing] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const handleAddCustomField = () => {
+    setCustomFields([...customFields, { key: "", value: "" }]);
+  };
+
+  const handleUpdateCustomField = (
+    index: number,
+    field: "key" | "value",
+    newValue: string,
+  ) => {
+    const updated = [...customFields];
+    updated[index][field] = newValue;
+    setCustomFields(updated);
+  };
+
+  const handleRemoveCustomField = (index: number) => {
+    setCustomFields(customFields.filter((_, i) => i !== index));
+  };
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      // Convert custom fields array to object
+      const other: Record<string, string> = {};
+      customFields.forEach(({ key, value }) => {
+        if (key.trim()) {
+          other[key.trim()] = value;
+        }
+      });
+
+      const nprofile: UserProfile = {
+        name,
+        picture,
+        about,
+        other,
+      };
+
+      // Call API to save profile
+      if (api && typeof api.createProfile === "function") {
+        await api.createProfile(nprofile);
+      } else {
+        throw new Error("Profile update API not available");
+      }
+
+      toast.success("Profile updated successfully");
+      setIsEditing(false);
+      onSave?.();
+    } catch (error) {
+      toast.error("Failed to update profile");
+      console.error("Failed to save profile:", error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleCancel = () => {
+    // Reset to original values
+    const profile = profiles.get(userString);
+    if (profile) {
+      setName(profile.name || userString);
+      setPicture(profile.picture || "");
+      setAbout(profile.about || "");
+      setCustomFields(
+        Object.entries(profile.other || {}).map(([key, value]) => ({
+          key,
+          value,
+        })),
+      );
+    }
+    setIsEditing(false);
+  };
+  console.log({ profile });
+  console.log({ name, picture, customFields });
+
+  return (
+    <div className="profile-editor">
+      <div className="profile-header">
+        <h2>Edit Profile</h2>
+        {!isEditing && (
+          <button onClick={() => setIsEditing(true)} className="edit-btn">
+            <Icon name="settings" size={16} />
+            Edit
+          </button>
+        )}
+      </div>
+
+      {isEditing ? (
+        <div className="profile-form">
+          <div className="form-group">
+            <label htmlFor="name">Display Name</label>
+            <input
+              id="name"
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Your display name"
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="picture">Profile Picture URL</label>
+            <input
+              id="picture"
+              type="url"
+              value={picture}
+              onChange={(e) => setPicture(e.target.value)}
+              placeholder="https://example.com/avatar.jpg"
+            />
+            <div className="picture-preview">
+              {picture ? (
+                <img src={picture} />
+              ) : (
+                <Avatar
+                  user={user}
+                  userString={userString}
+                  profile={profile}
+                  size={120}
+                  picOnly={true}
+                />
+              )}
+            </div>
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="about">About</label>
+            <textarea
+              id="about"
+              value={about}
+              onChange={(e) => setAbout(e.target.value)}
+              placeholder="Tell us about yourself..."
+              rows={4}
+            />
+          </div>
+
+          <div className="form-group custom-fields">
+            <label>Custom Fields</label>
+            {customFields.map((field, index) => (
+              <div key={index} className="custom-field-row">
+                <input
+                  type="text"
+                  value={field.key}
+                  onChange={(e) =>
+                    handleUpdateCustomField(index, "key", e.target.value)
+                  }
+                  placeholder="Field name"
+                  className="field-key-input"
+                />
+                <input
+                  type="text"
+                  value={field.value}
+                  onChange={(e) =>
+                    handleUpdateCustomField(index, "value", e.target.value)
+                  }
+                  placeholder="Field value"
+                  className="field-value-input"
+                />
+                <button
+                  onClick={() => handleRemoveCustomField(index)}
+                  className="remove-field-btn"
+                  title="Remove field"
+                >
+                  ×
+                </button>
+              </div>
+            ))}
+            <button onClick={handleAddCustomField} className="add-field-btn">
+              + Add Custom Field
+            </button>
+          </div>
+
+          <div className="form-actions">
+            <button
+              onClick={handleSave}
+              disabled={isSaving}
+              className="save-btn"
+            >
+              {isSaving ? "Saving..." : "Save Profile"}
+            </button>
+            <button
+              onClick={handleCancel}
+              disabled={isSaving}
+              className="cancel-btn"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="profile-view">
+          <div className="profile-picture">
+            <Avatar
+              user={user}
+              userString={userString}
+              profile={profile}
+              size={120}
+              picOnly={true}
+            />
+          </div>
+
+          <div className="profile-info">
+            <h3>{name}</h3>
+            {about && <p className="profile-about">{about}</p>}
+
+            {customFields.length > 0 && (
+              <div className="profile-custom-fields">
+                <h4>Additional Info</h4>
+                {customFields.map(({ key, value }, index) => (
+                  <div key={index} className="custom-field-view">
+                    <span className="field-key">{key}:</span>
+                    <span className="field-value">{value}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProfileEditor;
-- 
cgit v1.2.3