init commit,

03_source/mobile_notworking.del/src/pages/SBAccount/index.tsx

@@ -0,0 +1,161 @@
+import {
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  useIonLoading,
+  useIonRouter,
+  useIonToast,
+} from '@ionic/react';
+import { useEffect, useState } from 'react';
+import { Avatar } from '../../components/Avatar';
+import { supabase } from '../../supabaseClient';
+
+import './style.scss';
+
+export function AccountPage() {
+  const [showLoading, hideLoading] = useIonLoading();
+  const [showToast] = useIonToast();
+
+  const [session] = useState(() => supabase.auth.session());
+  const router = useIonRouter();
+
+  const [profile, setProfile] = useState({
+    username: '',
+    website: '',
+    avatar_url: '',
+  });
+
+  useEffect(() => {
+    getProfile();
+  }, [session]);
+
+  const getProfile = async () => {
+    console.log('get');
+    // await showLoading();
+    try {
+      const user = supabase.auth.user();
+      let { data, error, status } = await supabase
+        .from('profiles')
+        .select(`username, website, avatar_url`)
+        .eq('id', user!.id)
+        .single();
+
+      if (error && status !== 406) {
+        throw error;
+      }
+
+      if (data) {
+        setProfile({
+          username: data.username,
+          website: data.website,
+          avatar_url: data.avatar_url,
+        });
+      }
+    } catch (error: any) {
+      showToast({ message: error.message, duration: 5000 });
+    } finally {
+      // await hideLoading();
+    }
+  };
+
+  // const signOut = async () => {
+  //   await supabase.auth.signOut();
+  //   router.push('/', 'forward', 'replace');
+  // };
+
+  const updateProfile = async (e?: any, avatar_url: string = '') => {
+    e?.preventDefault();
+
+    console.log('update ');
+    console.log('show loading here');
+    // await showLoading();
+
+    try {
+      const user = supabase.auth.user();
+
+      const updates = {
+        id: user!.id,
+        ...profile,
+        avatar_url: avatar_url,
+        updated_at: new Date(),
+      };
+
+      let { error } = await supabase.from('profiles').upsert(updates, {
+        returning: 'minimal', // Don't return the value after inserting
+      });
+
+      if (error) {
+        throw error;
+      }
+    } catch (error: any) {
+      showToast({ message: error.message, duration: 5000 });
+    } finally {
+      console.log('hide loading here');
+      // await hideLoading();
+    }
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Account</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent>
+        <Avatar url={profile.avatar_url} onUpload={updateProfile}></Avatar>
+        <form onSubmit={updateProfile}>
+          <IonItem>
+            <IonLabel>
+              <p>Email</p>
+              <p>{session?.user?.email}</p>
+            </IonLabel>
+          </IonItem>
+
+          <IonItem>
+            <IonLabel position="stacked">Name</IonLabel>
+            <IonInput
+              type="text"
+              name="username"
+              value={profile.username}
+              onIonChange={e => setProfile({ ...profile, username: e.detail.value ?? '' })}
+            ></IonInput>
+          </IonItem>
+
+          <IonItem>
+            <IonLabel position="stacked">Website</IonLabel>
+            <IonInput
+              type="url"
+              name="website"
+              value={profile.website}
+              onIonChange={e => setProfile({ ...profile, website: e.detail.value ?? '' })}
+            ></IonInput>
+          </IonItem>
+          <div className="ion-text-center">
+            <IonButton fill="clear" type="submit">
+              Update Profile
+            </IonButton>
+          </div>
+        </form>
+
+        <div className="ion-text-center">
+          <IonButton
+            fill="clear"
+            onClick={() => {
+              router.push('/sblogout', 'forward', 'replace');
+            }}
+          >
+            Log Out
+          </IonButton>
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+}