Merge pull request #21 from WodenWang820118/develop

Develop: function completed

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "vuejs3-fireblog"
+  }
+}

.github/workflows/firebase-hosting-merge.yml

@@ -0,0 +1,20 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm run ci && npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: ${{ secrets.GITHUB_TOKEN }}
+          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_VUEJS3_FIREBLOG }}
+          channelId: live
+          projectId: vuejs3-fireblog

.github/workflows/firebase-hosting-pull-request.yml

@@ -0,0 +1,21 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+on: pull_request
+permissions:
+  checks: write
+  contents: read
+  pull-requests: write
+jobs:
+  build_and_preview:
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm ci && npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: ${{ secrets.GITHUB_TOKEN }}
+          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_VUEJS3_FIREBLOG }}
+          projectId: vuejs3-fireblog

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+*.cache

firebase.json

@@ -0,0 +1,15 @@
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
+  },
+  "emulators": {
+    "hosting": {
+      "port": 5000
+    },
+    "ui": {
+      "enabled": true
+    },
+    "singleProjectMode": true
+  }
+}

package.json

@@ -15,10 +15,11 @@
     "firebase": "^10.12.0",
     "marked": "^12.0.2",
     "md-editor-v3": "^4.14.1",
+    "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "vue": "^3.4.21",
     "vue-router": "^4.3.2",
-    "vue-showdown": "^4.2.0",
-    "vuex": "^4.1.0"
+    "vue-showdown": "^4.2.0"
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.5",

src/app.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="app-wrapper">
-    <!-- provide the router view only if posts are loaded -->
     <div class="app" v-if="postLoaded">
       <navigation :user_login="user_login" :admin="admin" />
       <router-view />
@@ -12,75 +11,50 @@
 <script lang="ts">
 import Navigation from "./shared/components/navigation/navigation.vue";
 import Footer from "./shared/components/footer/footer.vue";
-import { ref, onMounted, computed, defineComponent, Ref } from "vue";
-import { useStore } from 'vuex'
+import { usePostStore } from "./stores/posts";
+import { useUserStore } from "./stores/users";
+import { ref, computed, defineComponent, onBeforeMount } from "vue";
 import { auth } from "./shared/firebase/firebaseInit";
-import { User } from "firebase/auth";
+
 export default defineComponent({
   name: "app",
   components: {
-    'navigation': Navigation,
-    'footer-vue': Footer,
+    navigation: Navigation,
+    "footer-vue": Footer,
   },
   setup() {
-    // composition api, useStore with vuex
-    const store = useStore();
-    // composition api, use ref
-    const user_login: Ref<boolean> = ref(false);
-    const admin: Ref<boolean> = ref(false);
-    // dispatched, or committed method from store
-    const getCurrentUser = () => {
-      return store.dispatch("users/getCurrentUser");
-    };
-    const mountUser = (user: User | null) => {
-      if (!user) {
-        return;
-      }
-      return store.dispatch("users/mountUser", user);
-    };
-    const getPost = async () => {
-      return await store.dispatch("posts/getPost");
-    };
-    // the functions used in this view
-    /**
-     * The function check if any user logged in
-     */
-    function checkUserState() {
-      // offical recommended way to fire the methods after the user state changes
-      // otherwise, could be null
-      auth.onAuthStateChanged(async (user) => {
-        if (user) {
-          // User is signed in, see docs for a list of available properties
-          // https://firebase.google.com/docs/reference/js/firebase.User
-          let email = user.email;
-          // console.log(`The user email: ${email}`)
-          // console.log(`The admin email: ${process.env.VUE_APP_ADMINEMAIL}`)
+    const postStore = usePostStore();
+    const userStore = useUserStore();
+    const user_login = ref(false);
+    const admin = ref(false);
+
+    async function checkUserState() {
+      auth.onAuthStateChanged((currentUser) => {
+        if (currentUser) {
+          let email = currentUser.email;
           //@ts-ignore
-          // email === import.meta.env.VITE_APP_ADMINEMAIL
-          //   ? (admin.value = true)
-          //   : (admin.value = false);
+          email === import.meta.env.VITE_APP_ADMINEMAIL
+            ? (admin.value = true)
+            : (admin.value = false);
           admin.value = true;
-          // console.log("The user signed in!");
-          user = await mountUser(user);
-          getCurrentUser();
+          userStore.setUser(currentUser);
           user_login.value = true;
         } else {
           user_login.value = false;
-          // console.log("There is no user using right now");
         }
       });
     }
 
-    onMounted(() => {
-      getPost();
-      checkUserState();
+    onBeforeMount(async () => {
+      await checkUserState();
+      await postStore.getPost();
     });
-    // the return here returns the functions that are used in the template
+
     return {
-      profileEmail: computed(() => store.getters["users/profileEmail"]),
-      postLoaded: computed(() => store.getters["posts/postLoaded"]),
+      profileEmail: computed(() => userStore.profileEmail),
+      postLoaded: computed(() => postStore.postLoaded),
       user_login,
-      admin, getPost
+      admin,
     };
   },
   watch: {

src/main.ts

@@ -1,11 +1,15 @@
 import { createApp } from "vue";
 import App from "./app.vue";
 import router from "./routes";
-import store from "./store";
 import { VueShowdownPlugin } from "vue-showdown";
+import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
 
 createApp(App)
-  .use(store)
+  .use(pinia)
   .use(router)
   .use(VueShowdownPlugin, {
     flavor: "github",

src/shared/components/blog-cards/blog-cards.vue

@@ -2,7 +2,6 @@
   <div class="blog-card">
     <div v-show="editPost" class="icons">
       <div @click="editBlog" class="icon">
-        <!-- the image has its own container, that's why the it's not centered -->
         <img class="edit" src="../../../assets/icons/edit-regular.svg" alt="" />
       </div>
       <div @click="deletePost" class="icon">
@@ -34,55 +33,46 @@
 </template>
 
 <script lang="ts">
-import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import { computed, defineComponent } from "vue";
+import { usePostStore } from "../../../stores/posts";
+
 export default defineComponent({
   name: "blog-cards",
   props: {
     card: {
       type: Object as () => {
         blogId: string;
-        blogTitle: string;
-        blogPost: string;
         blogHTML: string;
         blogCoverPhoto: string;
+        blogTitle: string;
         blogDate: string;
+        blogCoverPhotoName: string;
       },
       required: true,
     },
   },
   setup(props) {
-    // state managemnet
-    const store = useStore();
-
-    // actions
-    const deletePostFromDatabase = (id: string) => {
-      return store.dispatch("posts/deletePostFromDatabase", id);
-    };
-
-    // route management
+    const store = usePostStore();
     const router = useRouter();
 
-    function editBlog() {
-      router.push({
+    async function editBlog() {
+      await router.push({
         name: "edit-blog",
         params: {
           blogId: props.card.blogId,
         },
       });
     }
 
-    function deletePost() {
-      deletePostFromDatabase(props.card.blogId);
-    }
-
     return {
       editPost: computed(() => {
-        return store.getters["posts/editPost"];
+        return store.editPost;
       }),
-      deletePost,
-      editBlog,
+      deletePost: async () => {
+        await store.deletePostFromDatabase(props.card.blogId);
+      },
+      editBlog: async () => await editBlog(),
     };
   },
 });