Dev love98

package.json

@@ -34,7 +34,8 @@
     "react-dom": "^18.2.0",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
-    "swiper": "^10.3.1"
+    "swiper": "^10.3.1",
+    "zustand": "^4.4.6"
   },
   "devDependencies": {
     "@capacitor/cli": "5.5.0",

src/apis/user.ts

@@ -1,5 +1,5 @@
 import request from '.';
-import { Department, Event } from '../context';
+import { Department, Event, UserInfo } from '../context';
 
 export const getAllConductingEvent = async () => {
   const response = await request.get<Event[]>('/event/conducting');
@@ -75,7 +75,12 @@ export const getHistoryEvents = async () => {
   return response.data;
 }
 
-export const getUserInfo =async () => {
-  const response = await request.get<any>('/user/info');
+export const getUserInfo = async () => {
+  const response = await request.get<UserInfo>('/user/info');
+  return response.data;
+}
+
+export const updateUserInfo = async (userInfo: UserInfo) => {
+  const response = await request.put<any>('/user/info', userInfo);
   return response.data;
 }

src/components/EventCard.scss

@@ -6,10 +6,10 @@
   justify-content: flex-end;
   margin-top: 5px;
   padding-bottom: 3px;
+  animation: zoomFade 0.7s ease-in-out forwards;
 
   ion-card-header {
-    padding-bottom: 10px;
-
+    padding: 12px 20px 15px 20px;
     .oneLineTextOverflow {
       white-space: nowrap;
       overflow: hidden;
@@ -102,4 +102,18 @@
     margin-left: 5px;
     margin-bottom: 2px;
   }
-}
+}
+
+@keyframes zoomFade {
+  0% {
+    transform: scale(0.7) translateY(50%);
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.37;
+  }
+  100% {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+}

src/components/EventCardList.scss

@@ -7,21 +7,18 @@
     align-items: flex-start;
     justify-content: flex-start;
     column-gap: 0px;
+
     @media screen and (min-width: 1601px) {
-      column-width: 25%;
       column-count: 4;
     }
     @media screen and (min-width: 1051px) and (max-width: 1600px) {
-      column-width: 33%;
       column-count: 3;
     }
     @media screen and (min-width: 500px) and (max-width: 1050px) {
-      column-width: 50%;
       column-count: 2;
     }
 
     @media screen and (min-width: 300px) and (max-width: 499px) {
-      column-width: 100%;
       column-count: 1;
     }
   }

src/components/Profile.tsx

@@ -0,0 +1,69 @@
+import { IonButton, IonButtons, IonCard, IonContent, IonHeader, IonInput, IonItem, IonList, IonModal, IonTextarea, IonTitle, IonToolbar } from '@ionic/react';
+import './Profile.scss'
+import { useRef } from 'react';
+import { useUserInfoStore } from '../util/store';
+import { updateUserInfo } from '../apis/user';
+import { UserInfo } from '../context';
+
+interface Props {
+  trigger: string;
+}
+
+const Profile: React.FC<Props> = ({ trigger }) => {
+  const modal = useRef<HTMLIonModalElement>(null);
+  const userInfoStore = useUserInfoStore((state) => state);
+  const userInfo = userInfoStore.userInfo;
+  const saveChanges = () => {
+    updateUserInfo(userInfo as UserInfo).then((res) => {
+      userInfoStore.updateUserInfo(userInfo);
+    });
+    modal.current?.dismiss();
+  }
+
+
+  return (
+    <>
+      <IonModal trigger={trigger} ref={modal}>
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Modal</IonTitle>
+            <IonButtons slot="start">
+              <IonButton onClick={() => modal.current?.dismiss()}>Close</IonButton>
+            </IonButtons>
+
+            <IonButtons slot="end">
+              <IonButton onClick={saveChanges}>Save</IonButton>
+            </IonButtons>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent className="ion-padding">
+          <IonList inset={true}>
+            <IonItem>
+              <IonInput
+                label='昵称'
+                value={userInfo?.nickname}
+                onIonChange={(e) => { userInfo.nickname = e.detail.value! }}
+              ></IonInput>
+            </IonItem>
+            <IonItem>
+              <IonInput disabled label='组织' value={userInfo?.organization}></IonInput>
+            </IonItem>
+          </IonList>
+          <IonList inset={true}>
+            <IonItem>
+              <IonTextarea
+                slot="start"
+                placeholder='自我介绍'
+                autoGrow={true}
+                value={userInfo?.biography}
+                onIonChange={(e) => { userInfo.biography = e.detail.value! }}
+              ></IonTextarea>
+            </IonItem>
+          </IonList>
+        </IonContent>
+      </IonModal>
+    </>
+  )
+}
+
+export default Profile;

src/components/SlideImages.scss

@@ -2,7 +2,7 @@
     margin-top: 15px;
     width: 95vw;
     border-radius: 4px;
-    height: 30vw;
+    height: 40vw;
     max-height: 380px;
     overflow: hidden;
     position: relative;
@@ -18,7 +18,6 @@
       justify-content: center;
       align-items: center;
       text-align: center;
-      height: 30vw;
       max-height: 380px;
     }
   }

src/context/index.ts

@@ -26,3 +26,16 @@ export interface EventType {
   typeName: string;
   [property: string]: any;
 }
+
+export interface UserInfo {
+  avatar: string;
+  biography: string;
+  email: string;
+  id: string;
+  link: Array<string[]>;
+  linkId: string;
+  nickname: string;
+  organization: string;
+  studentId: string;
+  [property: string]: any;
+}

src/pages/Home.tsx

@@ -18,7 +18,6 @@ const Home: React.FC = () => {
     window.location.reload();
   }
 
-  // TODO: change layout styles to falls
   return (
     <IonPage>
       <IonHeader translucent={false}>

src/pages/Me.tsx

@@ -6,39 +6,42 @@ import React, { useEffect, useState } from 'react';
 import './Me.scss';
 import OnDevAlert from '../components/OnDevAlert';
 import { getUserInfo } from '../apis/user';
+import Profile from '../components/Profile';
+import { useUserInfoStore } from '../util/store';
 
 const Me: React.FC = () => {
 	const { themeToggle, toggleChange } = React.useContext(ThemeContext);
-	const [userInfo, setUserInfo] = useState<any | null>(JSON.parse(String(localStorage.getItem('userInfo'))));
+	const userInfoStore = useUserInfoStore((state) => state);
+	const userInfo = userInfoStore.userInfo;
 	const router = useIonRouter();
-	const isLoggedIn = localStorage.getItem('token') !== null;;
+	const isLoggedIn = localStorage.getItem('token') !== null;
 
 	const themeIcon = themeToggle ? moon : sunnyOutline;
 
 	useEffect(() => {
 		console.log(isLoggedIn);
 		console.log(userInfo);
-		
-		
-		if (isLoggedIn && userInfo === null) {
+
+
+		if (isLoggedIn && userInfo === undefined) {
 			getUserInfo().then((res) => {
-				setUserInfo(res);
+				userInfoStore.updateUserInfo(res);
 			});
 		}
-	}, [])
+	}, [userInfo])
 
 	const logOut = () => {
 		localStorage.clear();
-		setUserInfo(null);
+		userInfoStore.rmUserInfo();
 	}
 
 	const toHistoryEvents = () => {
 		router.push("/history", 'forward');
 	}
 
 	const handleRefresh = () => {
-    window.location.reload();
-  }
+		window.location.reload();
+	}
 
 	return (
 		<IonPage>
@@ -60,14 +63,17 @@ const Me: React.FC = () => {
 				<div className='meWarpper'>
 					<IonCard className='userProfileWarpper'>
 						{isLoggedIn ? (
-							<IonItem lines="none">
-								<IonThumbnail slot="start">
-									<IonImg src={userInfo?.avatar !== null ? userInfo?.avatar : "/link.ico"} alt="avatar" className='userProfileAvatar' />
-								</IonThumbnail>
-								<h2 slot="start" className='userProfile__name'>{String(userInfo?.studentId).toUpperCase()}</h2>
-							</IonItem>
+							<>
+								<IonItem lines="none" id='userBasicInfo'>
+									<IonThumbnail slot="start">
+										<IonImg src={userInfo?.avatar !== null ? userInfo?.avatar : "/link.ico"} alt="avatar" className='userProfileAvatar' />
+									</IonThumbnail>
+									<h2 slot="start" className='userProfile__name'>{String(userInfo?.nickname)}</h2>
+								</IonItem>
+								<Profile trigger='userBasicInfo' ></Profile>
+							</>
 						) : (
-							<IonItem onClick={() => {router.push("/login", "forward")}} lines="none">
+							<IonItem onClick={() => { router.push("/login", "forward") }} lines="none">
 								<IonThumbnail slot="start">
 									<IonImg src="/link.ico" alt="avatar" className='userProfileAvatar' />
 								</IonThumbnail>

src/util/store.ts

@@ -0,0 +1,23 @@
+import { create } from "zustand"
+import { devtools, persist } from 'zustand/middleware'
+import { UserInfo } from "../context"
+
+interface UserInfoStore {
+  userInfo?: UserInfo
+  rmUserInfo: () => void
+  updateUserInfo: (userInfo: UserInfo | undefined) => void
+}
+
+export const useUserInfoStore = create<UserInfoStore>()(
+  devtools(
+    persist(
+      (set) => ({
+        userInfo: undefined,
+        rmUserInfo: () => set({ userInfo: undefined }),
+        updateUserInfo: (userInfo) => set({ userInfo }),
+      }),
+      {
+        name: 'userInfo-store'
+      })
+  ),
+)