Merge pull request #131 from FltSv/111-profile

#111 プロフィールとSNSリンク入力・表示機能の実装

Hosting/src/Data.ts

@@ -46,6 +46,8 @@ export async function getCreatorData(user: User) {
   const creatorUrl = getCreatorStorageUrl(userId);
   const creator: Creator = {
     name: '',
+    profile: '',
+    links: [],
     products: [],
     exhibits: [],
   };
@@ -67,6 +69,8 @@ export async function getCreatorData(user: User) {
   console.debug('docSnap.data:', data);
 
   creator.name = data.name ?? '';
+  creator.profile = data.profile ?? '';
+  creator.links = data.links ?? [];
 
   // 発表作品
   const fbProducts = data.products ?? [];
@@ -114,6 +118,8 @@ export async function setCreatorData(user: User, data: Creator) {
   );
   await setDoc(docRef, {
     name: data.name,
+    profile: data.profile,
+    links: data.links,
     products: data.products.map(x => ({
       id: x.id,
       title: x.title,
@@ -314,6 +320,12 @@ export interface Creator {
   /** 表示名 */
   name: string;
 
+  /** プロフィール */
+  profile: string;
+
+  /** SNSリンク */
+  links: string[];
+
   /** 発表作品一覧 */
   products: Product[];
 

Hosting/src/components/pages/Mypage.tsx

@@ -31,26 +31,28 @@ export const Mypage = () => {
   const { user } = useAuthContext();
   const [creator, setCreator] = useState<Creator>();
   const [loading, setLoading] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [addLink, setAddLink] = useState('');
+  const [addLinkError, setAddLinkError] = useState(false);
   const [visibleProductPopup, setVisibleProductPopup] = useState(false);
   const [visibleExhibitPopup, setVisibleExhibitPopup] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
   const [editExhibit, setEditExhibit] = useState<Exhibit>();
   const [editProduct, setEditProduct] = useState<Product>();
 
   useEffect(() => {
-    // データの取得
     if (user === null) {
       return;
     }
 
-    getCreatorData(user)
-      .then(x => {
-        setCreator(x);
-        setLoading(false);
-      })
-      .catch((x: unknown) => {
-        console.error('failed fetch data: ', x);
-      });
+    void (async () => {
+      // データの取得
+      const creator = await getCreatorData(user);
+      setCreator(creator);
+
+      setLoading(false);
+    })().catch((e: unknown) => {
+      console.error('failed fetch data: ', e);
+    });
   }, [user]);
 
   const {
@@ -64,8 +66,29 @@ export const Mypage = () => {
     return <p>Now loading...</p>;
   }
 
+  const isValidUrl = (url: string) => {
+    if (!url) return true;
+
+    try {
+      new URL(url);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  const onAddLink = () => {
+    if (creator === undefined) return;
+    if (addLinkError) return;
+
+    const links = [...creator.links, addLink];
+    setCreator({ ...creator, links });
+    setAddLink('');
+  };
+
   const onValid: SubmitHandler<Creator> = async data => {
     // 一時データの結合
+    data.links = creator?.links ?? [];
     data.products = creator?.products ?? [];
     data.exhibits = creator?.exhibits ?? [];
 
@@ -98,6 +121,81 @@ export const Mypage = () => {
           {...register('name', { required: '1文字以上の入力が必要です。' })}
         />
 
+        <div>
+          <p>プロフィール</p>
+          <Textarea
+            defaultValue={creator?.profile}
+            sx={{
+              borderColor: 'black',
+              marginY: '0.25rem',
+              backgroundColor: 'transparent',
+            }}
+            minRows={3}
+            {...register('profile')}
+          />
+        </div>
+
+        <div>
+          <p>SNSリンク</p>
+          {creator?.links.map(link => (
+            <div key={link} className="flex items-center gap-2">
+              <img
+                className="h-4 w-4"
+                src={`http://www.google.com/s2/favicons?domain=${link}`}
+              />
+              <a
+                href={link}
+                className="text-blue-600 underline"
+                target="_blank"
+                rel="noreferrer">
+                {link}
+              </a>
+              <MuiJoyButton
+                size="sm"
+                variant="plain"
+                color="neutral"
+                onClick={() => {
+                  const links = creator.links.filter(x => x !== link);
+                  setCreator({ ...creator, links });
+                }}>
+                <FaTimes />
+                <label className="hidden md:inline md:pl-2">削除</label>
+              </MuiJoyButton>
+            </div>
+          ))}
+          <Input
+            color={addLinkError ? 'danger' : 'neutral'}
+            placeholder="https://..."
+            value={addLink}
+            onChange={e => {
+              const input = e.target.value;
+              setAddLink(input);
+              setAddLinkError(!isValidUrl(input));
+            }}
+            onKeyDown={e => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                onAddLink();
+              }
+            }}
+            endDecorator={
+              <MuiJoyButton
+                size="sm"
+                variant="plain"
+                color="neutral"
+                disabled={addLinkError}
+                onClick={onAddLink}>
+                <FaPlus />
+                <label className="hidden md:inline md:pl-2">追加</label>
+              </MuiJoyButton>
+            }
+            sx={{
+              borderColor: 'black',
+              backgroundColor: 'transparent',
+            }}
+          />
+        </div>
+
         <div>
           <div className="mb-2 flex gap-2">
             <p className="mt-auto w-full">発表作品</p>

Hosting/src/firebase.ts

@@ -87,6 +87,8 @@ export const fbGalleryConverter: FirestoreDataConverter<Gallery> = {
 /** firestore Creator */
 export interface Creator {
   name?: string;
+  profile?: string;
+  links?: string[];
   products?: Product[];
   exhibits?: Exhibit[];
 }

mobile/android/app/build.gradle

@@ -33,7 +33,7 @@ if (keystorePropertiesFile.exists()) {
 }
 
 android {
-    namespace = "com.galleryfound"
+    namespace = "jp.galleryfound"
     compileSdk = flutter.compileSdkVersion
     ndkVersion = flutter.ndkVersion
 
@@ -43,7 +43,7 @@ android {
     }
 
     defaultConfig {
-        applicationId = "com.galleryfound"
+        applicationId = "jp.galleryfound"
         // You can update the following values to match your application needs.
         // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
         minSdk = flutter.minSdkVersion

mobile/android/app/google-services.json

@@ -7,14 +7,14 @@
   "client": [
     {
       "client_info": {
-        "mobilesdk_app_id": "1:985501114281:android:fc253b6b47125039826eb8",
+        "mobilesdk_app_id": "1:985501114281:android:481a5fb931582e16826eb8",
         "android_client_info": {
-          "package_name": "com.galleryfound"
+          "package_name": "jp.galleryfound"
         }
       },
       "oauth_client": [
         {
-          "client_id": "985501114281-7qtka3vudf9lsbgjs47ipq7u945mvf8s.apps.googleusercontent.com",
+          "client_id": "985501114281-4h122vrg9sntbrcip3i51v4s84uvt8n9.apps.googleusercontent.com",
           "client_type": 3
         }
       ],
@@ -27,7 +27,7 @@
         "appinvite_service": {
           "other_platform_oauth_client": [
             {
-              "client_id": "985501114281-7qtka3vudf9lsbgjs47ipq7u945mvf8s.apps.googleusercontent.com",
+              "client_id": "985501114281-4h122vrg9sntbrcip3i51v4s84uvt8n9.apps.googleusercontent.com",
               "client_type": 3
             }
           ]
@@ -36,4 +36,4 @@
     }
   ],
   "configuration_version": "1"
-}
+}

mobile/android/app/src/main/kotlin/com/galleryfound/MainActivity.kt

@@ -1,4 +1,4 @@
-package com.galleryfound
+package jp.galleryfound
 
 import io.flutter.embedding.android.FlutterActivity
 

mobile/ios/Runner/GoogleService-Info.plist

@@ -2,14 +2,18 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>CLIENT_ID</key>
+	<string>985501114281-srbdf943f60srrmij5rb9qngnd4gq48d.apps.googleusercontent.com</string>
+	<key>REVERSED_CLIENT_ID</key>
+	<string>com.googleusercontent.apps.985501114281-srbdf943f60srrmij5rb9qngnd4gq48d</string>
 	<key>API_KEY</key>
 	<string>AIzaSyBItEROQfbYVNucKvZxjAxZS3BO4thnmyU</string>
 	<key>GCM_SENDER_ID</key>
 	<string>985501114281</string>
 	<key>PLIST_VERSION</key>
 	<string>1</string>
 	<key>BUNDLE_ID</key>
-	<string>com.galleryfound</string>
+	<string>jp.galleryfound</string>
 	<key>PROJECT_ID</key>
 	<string>gallery-found</string>
 	<key>STORAGE_BUCKET</key>
@@ -25,6 +29,6 @@
 	<key>IS_SIGNIN_ENABLED</key>
 	<true></true>
 	<key>GOOGLE_APP_ID</key>
-	<string>1:985501114281:ios:9be2fae25d13dba2826eb8</string>
+	<string>1:985501114281:ios:b802d389dea42d4b826eb8</string>
 </dict>
 </plist>

mobile/lib/firebase_options.dart

@@ -55,7 +55,6 @@ class DefaultFirebaseOptions {
     messagingSenderId: '985501114281',
     projectId: 'gallery-found',
     storageBucket: 'gallery-found.appspot.com',
-    iosBundleId: 'com.galleryfound',
+    iosBundleId: 'jp.galleryfound',
   );
-
-}
+}

mobile/lib/infra/fake/fake_repo.dart

@@ -11,6 +11,8 @@ class FakeRepo implements DataRepoBase {
       Creator(
         id: "nkRObVdYriU5AolyNxJy5pIDKEs2",
         name: "suna",
+        profile: "すなプロフィール",
+        links: ["https://mstdn.jp/@fltsv", "https://mstdn.jp/@himarori"],
         products: [
           Product(
             id: "10043286-3072-49b8-a04a-83b9b1f790f5",
@@ -53,6 +55,12 @@ class FakeRepo implements DataRepoBase {
       Creator(
         id: "cWp162TEn9MrXVUqifEmRJ22nyx1",
         name: "ノゾミ",
+        profile: "ふぁぴ\n\n\n\nhttps://lit.link/choco78",
+        links: [
+          "https://x.com/mi_oilacrylart",
+          "https://x.com/utsukikuroko",
+          "https://misskey.m544.net/@choco"
+        ],
         products: [
           Product(
             id: "43a0e71b-9761-4800-9e88-1a57a3a4ed53",

mobile/lib/infra/firebase/firebase_repo.dart

@@ -17,14 +17,18 @@ class FirebaseRepo implements DataRepoBase {
     return querySnap.docs
         .where((docSnap) => kDebugMode || !ignoreIds.contains(docSnap.id))
         .map((docSnap) {
+      final data = docSnap.data();
+
       final exhibits = (docSnap.get("exhibits") as List<dynamic>)
           .cast<Map<String, dynamic>>();
       final products = (docSnap.get("products") as List<dynamic>)
           .cast<Map<String, dynamic>>();
 
       return Creator(
         id: docSnap.id,
-        name: docSnap.get("name"),
+        name: data["name"],
+        profile: data["profile"] ?? "",
+        links: ((data["links"] ?? []) as List<dynamic>).cast<String>(),
         products: products
             .map((product) => Product(
                   id: product["id"],

mobile/lib/models/creator.dart

@@ -5,6 +5,8 @@ class Creator {
   Creator({
     required this.id,
     required this.name,
+    required this.profile,
+    required this.links,
     required this.products,
     required this.exhibits,
   }) {
@@ -21,6 +23,12 @@ class Creator {
   /// 作家名
   final String name;
 
+  /// プロフィール
+  final String profile;
+
+  /// SNSリンク
+  final List<String> links;
+
   /// 作品一覧
   final List<Product> products;