From 8a31a58c5674e04f25dc4496532c05b2b371d14e Mon Sep 17 00:00:00 2001 From: wancat Date: Thu, 27 Jun 2024 10:48:08 +0800 Subject: [PATCH] refactor: rewrite user profile store using pinia --- README.md | 2 +- app/package.json | 3 +- app/src/components/GameHeaderPart.vue | 142 ------------------ .../header/GameHeaderComponents.vue | 12 +- app/src/main.ts | 4 + app/src/store/userProfile.ts | 59 ++++---- app/src/utils/api.ts | 6 + yarn.lock | 18 +++ 8 files changed, 68 insertions(+), 178 deletions(-) delete mode 100644 app/src/components/GameHeaderPart.vue diff --git a/README.md b/README.md index fd56c86..61bc910 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ Run mongoDB first: - docker compose -f docker-compose.dev.yml up -d db + docker compose up -d The db will automatically restarts by Docker. diff --git a/app/package.json b/app/package.json index f571179..8a0d3ad 100644 --- a/app/package.json +++ b/app/package.json @@ -16,13 +16,14 @@ "@fortawesome/vue-fontawesome": "^3.0.3", "@linux-odyssey/constants": "*", "@linux-odyssey/file-graph": "*", - "@linux-odyssey/utils": "*", "@linux-odyssey/models": "*", + "@linux-odyssey/utils": "*", "@types/dompurify": "^3.0.5", "axios": "^1.6.0", "dompurify": "^3.0.6", "echarts": "^5.4.3", "marked": "^10.0.0", + "pinia": "^2.1.7", "socket.io-client": "^4.7.1", "validator": "^13.11.0", "vue": "^3.3.4", diff --git a/app/src/components/GameHeaderPart.vue b/app/src/components/GameHeaderPart.vue deleted file mode 100644 index 986b6e0..0000000 --- a/app/src/components/GameHeaderPart.vue +++ /dev/null @@ -1,142 +0,0 @@ - - - diff --git a/app/src/components/header/GameHeaderComponents.vue b/app/src/components/header/GameHeaderComponents.vue index e69e758..c497807 100644 --- a/app/src/components/header/GameHeaderComponents.vue +++ b/app/src/components/header/GameHeaderComponents.vue @@ -5,11 +5,9 @@ import { useToast } from 'vue-toastification' import { logout } from '../../utils/auth' import { bugReportUrl, surveyUrl } from '../../config' import { reset } from '../../store/session' -import userProfileStore, { - loadUserProfile, - resetUserProfile, -} from '../../store/userProfile' +import useUserProfile from '../../store/userProfile' +const store = useUserProfile() const router = useRouter() const toast = useToast() @@ -17,7 +15,7 @@ const toast = useToast() const handleLogout = async () => { try { await logout() - resetUserProfile() + store.resetUserProfile() reset() router.push({ name: 'login' }) } catch (err) { @@ -28,7 +26,7 @@ const handleLogout = async () => { onMounted(async () => { try { - await loadUserProfile() + await store.loadUserProfile() } catch (err) { toast.error('無法讀取使用者資料') console.error(err) @@ -59,7 +57,7 @@ onMounted(async () => { class="text-text inline-block whitespace-nowrap px-1.5" style="font-size: 2vh" > - {{ userProfileStore.username }} + {{ store.username }}

+} + +const useUserProfile = defineStore('userProfile', { + state: (): UserProfile => ({ + username: '', + email: '', + progress: new Map(), + }), + actions: { + async loadUserProfile() { + const res = await getUserProfile() + this.$patch(res) + }, + async resetUserProfile() { + this.$reset() + }, + }, }) -export async function loadUserProfile() { - try { - const res = await api.get('/users/me') - const { username, email, progress } = res.data - store.username = username - store.email = email - store.progress = progress - return store - } catch (err: any) { - console.error(err) - throw new Error(`Failed to load user profile: ${err.message}`) - } -} - -export function resetUserProfile() { - store.username = '' - store.email = '' - store.progress = {} -} - -export default store +export default useUserProfile diff --git a/app/src/utils/api.ts b/app/src/utils/api.ts index a0bbef5..f298863 100644 --- a/app/src/utils/api.ts +++ b/app/src/utils/api.ts @@ -1,4 +1,5 @@ import axios from 'axios' +import { UserProfile } from '../store/userProfile' const api = axios.create({ baseURL: '/api/v1', @@ -8,3 +9,8 @@ const api = axios.create({ withCredentials: true, }) export default api + +export async function getUserProfile(): Promise { + const res = await api.get('/users/me') + return res.data +} diff --git a/yarn.lock b/yarn.lock index a97122d..ab01e36 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2479,6 +2479,11 @@ "@vue/compiler-dom" "3.4.19" "@vue/shared" "3.4.19" +"@vue/devtools-api@^6.5.0": + version "6.6.3" + resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.3.tgz#b23a588154cba8986bba82b6e1d0248bde3fd1a0" + integrity sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw== + "@vue/devtools-api@^6.5.1": version "6.6.1" resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.1.tgz#7c14346383751d9f6ad4bea0963245b30220ef83" @@ -6773,6 +6778,14 @@ pify@^2.2.0, pify@^2.3.0: resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog== +pinia@^2.1.7: + version "2.1.7" + resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.7.tgz#4cf5420d9324ca00b7b4984d3fbf693222115bbc" + integrity sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ== + dependencies: + "@vue/devtools-api" "^6.5.0" + vue-demi ">=0.14.5" + pirates@^4.0.1, pirates@^4.0.4: version "4.0.6" resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9" @@ -8160,6 +8173,11 @@ vite@^4.5.3: optionalDependencies: fsevents "~2.3.2" +vue-demi@>=0.14.5: + version "0.14.8" + resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.8.tgz#00335e9317b45e4a68d3528aaf58e0cec3d5640a" + integrity sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q== + vue-eslint-parser@^9.4.2: version "9.4.2" resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz#02ffcce82042b082292f2d1672514615f0d95b6d"