johnkomarnicki / fireblogs-youtube Goto Github PK

Global styles added in the YouTube video is not updated in App.vue

FYI: if you have problems during installation maybe it's because of the new version of node, I recommend using node 14.17.0, this worked for me

Here is the fixed code on store/index.js:
import Vue from "vue";
import Vuex from "vuex";
import firebase from "firebase/app";
import "firebase/auth";
import db from "../firebase/firebaseInit";

Vue.use(Vuex);

export default new Vuex.Store({
state: {
blogPosts: [],
postLoaded: null,
blogHTML: "Write your blog title here...",
blogTitle: "",
blogPhotoName: "",
blogPhotoFileURL: null,
blogPhotoPreview: null,
editPost: null,
user: null,
profileAdmin: null,
profileEmail: null,
profileFirstName: null,
profileLastName: null,
profileUsername: null,
profileId: null,
profileInitials: null,
},
getters: {
blogPostsFeed(state) {
return state.blogPosts.slice(0, 2);
},
blogPostsCards(state) {
return state.blogPosts.slice(2, 6);
},
},
mutations: {
newBlogPost(state, payload) {
state.blogHTML = payload;
},
updateBlogTitle(state, payload) {
state.blogTitle = payload;
},
fileNameChange(state, payload) {
state.blogPhotoName = payload;
},
createFileURL(state, payload) {
state.blogPhotoFileURL = payload;
},
openPhotoPreview(state) {
state.blogPhotoPreview = !state.blogPhotoPreview;
},
toggleEditPost(state, payload) {
state.editPost = payload;
},
setBlogState(state, payload) {
state.blogTitle = payload.blogTitle;
state.blogHTML = payload.blogHTML;
state.blogPhotoFileURL = payload.blogCoverPhoto;
state.blogPhotoName = payload.blogCoverPhotoName;
},
filterBlogPost(state, payload) {
state.blogPosts = state.blogPosts.filter((post) => post.blogID !== payload);
},
updateUser(state, payload) {
state.user = payload;
},
setProfileAdmin(state, payload) {
state.profileAdmin = payload;
},
setProfileInfo(state, doc) {
state.profileId = doc.id;
state.profileEmail = doc.data().email;
state.profileFirstName = doc.data().firstName;
state.profileLastName = doc.data().lastName;
state.profileUsername = doc.data().username;
console.log(state.profileId);
},
setProfileInitials(state) {
state.profileInitials =
state.profileFirstName.match(/(\b\S)?/g).join("") + state.profileLastName.match(/(\b\S)?/g).join("");
},
changeFirstName(state, payload) {
state.profileFirstName = payload;
},
changeLastName(state, payload) {
state.profileLastName = payload;
},
changeUsername(state, payload) {
state.profileUsername = payload;
},
},
actions: {
async getCurrentUser({ commit }) {
const dataBase = await db.collection("users").doc(firebase.auth().currentUser.uid);
const dbResults = await dataBase.get();
commit("setProfileInfo", dbResults);
commit("setProfileInitials");
const adminEmails = ["[email protected]", "[email protected]"];
const admin = adminEmails.includes(dbResults.data().email);
commit("setProfileAdmin", admin);
},

async getPost({ state }) {
  const dataBase = await db.collection("blogPosts").orderBy("date", "desc");
  const dbResults = await dataBase.get();
  dbResults.forEach((doc) => {
    if (!state.blogPosts.some((post) => post.blogID === doc.id)) {
      const data = {
        blogID: doc.data().blogID,
        blogHTML: doc.data().blogHTML,
        blogCoverPhoto: doc.data().blogCoverPhoto,
        blogTitle: doc.data().blogTitle,
        blogDate: doc.data().date,
        blogCoverPhotoName: doc.data().blogCoverPhotoName,
      };
      state.blogPosts.push(data);
    }
  });
  state.postLoaded = true;
},
async updatePost({ commit, dispatch }, payload) {
  commit("filterBlogPost", payload);
  await dispatch("getPost");
},
async deletePost({ commit }, payload) {
  const getPost = await db.collection("blogPosts").doc(payload);
  await getPost.delete();
  commit("filterBlogPost", payload);
},
async updateUserSettings({ commit, state }) {
  const dataBase = await db.collection("users").doc(state.profileId);
  await dataBase.update({
    firstName: state.profileFirstName,
    lastName: state.profileLastName,
    username: state.profileUsername,
  });
  commit("setProfileInitials");
},

},
modules: {},
});

After This you need to fix the route's in router/index.js:

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Blogs from "../views/Blogs.vue";
import Login from "../views/Login.vue";
import Register from "../views/Register.vue";
import ForgotPassword from "../views/ForgotPassword.vue";
import Profile from "../views/Profile.vue";
import CreatePost from "../views/CreatePost.vue";
import BlogPreview from "../views/BlogPreview.vue";
import ViewBlog from "../views/ViewBlog.vue";
import EditBlog from "../views/EditBlog.vue";
import firebase from "firebase/app";
import "firebase/auth";

Vue.use(VueRouter);

const routes = [
{
path: "/",
name: "Home",
component: Home,
meta: {
title: "Home",
requiresAuth: false,
},
},
{
path: "/blogs",
name: "Blogs",
component: Blogs,
meta: {
title: "Blogs",
requiresAuth: false,
},
},
{
path: "/login",
name: "Login",
component: Login,
meta: {
title: "Login",
requiresAuth: false,
},
},
{
path: "/register",
name: "Register",
component: Register,
meta: {
title: "Register",
requiresAuth: false,
},
},
{
path: "/forgot-password",
name: "ForgotPassword",
component: ForgotPassword,
meta: {
title: "Forgot Password",
requiresAuth: false,
},
},
{
path: "/profile",
name: "Profile",
component: Profile,
meta: {
title: "Profile",
requiresAuth: true,
},
},
{
path: "/create-post",
name: "CreatePost",
component: CreatePost,
meta: {
title: "Create Post",
requiresAuth: true,
isAdmin: true,
},
},
{
path: "/post-preview",
name: "BlogPreview",
component: BlogPreview,
meta: {
title: "Preview Blog Post",
requiresAuth: true,
isAdmin: true,
},
},
{
path: "/view-blog/:blogid",
name: "ViewBlog",
component: ViewBlog,
meta: {
title: "View Blog Post",
requiresAuth: false,
},
},
{
path: "/edit-blog/:blogid",
name: "EditBlog",
component: EditBlog,
meta: {
title: "Edit Blog Post",
requiresAuth: true,
isAdmin: true,
},
},
];

const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
scrollBehavior() {
return { x: 0, y: 0 };
},
});

router.beforeEach((to, from, next) => {
document.title = ${to.meta.title} | FireBlog;
next();
});

router.beforeEach(async (to, from, next) => {
let user = firebase.auth().currentUser;
let admin = null;
if (user) {
let token = await user.getIdTokenResult();
admin = token.claims.admin;
}
if (to.matched.some((res) => res.meta.requiresAuth)) {
if (user) {
if (to.matched.some((res) => res.meta.requiresAdmin)) {
if (admin) {
return next();
}
return next({ name: "Home" });
}
return next();
}
return next({ name: "Home" });
}
return next();
});

export default router;

hi john, thank you for great tutorial and very detailed explanation about vue and firebase.but better to add some info about npm install-g firebase-tools and firebase init and select their own firebase application steps to the project main page at installation section.
the people who is didnt watched all video "like me" will getting error while try to run project

thanks...

I just tried the demo and install the project on local, when registering and logging in I can't make a blog post.
please tell the email and password for the demo admin.

Npm install finished project does not work. Do you know why?
Should i not be able to see some of the interface at least?

Thanks.

emoved 8 packages, changed 24 packages, and audited 215 packages in 4s

10 packages are looking for funding
run npm fund for details

3 moderate severity vulnerabilities

To address all issues, run:
npm audit fix

Run npm audit for details.
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % npm -v
8.3.0
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % sudo npm npm install -g npm@latest
Unknown command: "npm"

To see a list of supported npm commands, run:
npm help
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % sudo npm install -g npm@latest

changed 14 packages, and audited 215 packages in 3s

10 packages are looking for funding
run npm fund for details

3 moderate severity vulnerabilities

To address all issues, run:
npm audit fix

Run npm audit for details.
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % npm -v
8.3.0
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % sudo npm install -g npm@latest
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % npm install
npm ERR! code ENOTEMPTY
npm ERR! syscall rename
npm ERR! path /Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/acorn
npm ERR! dest /Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/.acorn-N9aErJTn
npm ERR! errno -66
npm ERR! ENOTEMPTY: directory not empty, rename '/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/acorn' -> '/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/.acorn-N9aErJTn'

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ms/.npm/_logs/2022-01-06T16_53_18_596Z-debug-0.log
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % sudo npm install
npm ERR! code ENOTEMPTY
npm ERR! syscall rename
npm ERR! path /Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/acorn
npm ERR! dest /Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/.acorn-N9aErJTn
npm ERR! errno -66
npm ERR! ENOTEMPTY: directory not empty, rename '/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/acorn' -> '/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/.acorn-N9aErJTn'

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ms/.npm/_logs/2022-01-06T16_53_42_848Z-debug-0.log
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % npm run serve

[email protected] serve
vue-cli-service serve

node:internal/modules/cjs/loader:936
throw err;
^

Error: Cannot find module '@vue/cli-shared-utils'
Require stack:

• /Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/@vue/cli-service/bin/vue-cli-service.js
  at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
  at Function.Module._load (node:internal/modules/cjs/loader:778:27)
  at Module.require (node:internal/modules/cjs/loader:1005:19)
  at require (node:internal/modules/cjs/helpers:102:18)
  at Object. (/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/@vue/cli-service/bin/vue-cli-service.js:3:27)
  at Module._compile (node:internal/modules/cjs/loader:1101:14)
  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
  at Module.load (node:internal/modules/cjs/loader:981:32)
  at Function.Module._load (node:internal/modules/cjs/loader:822:12)
  at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
  '/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/@vue/cli-service/bin/vue-cli-service.js'
  ]
  }
  ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % npm install
  npm ERR! code ENOTEMPTY
  npm ERR! syscall rename
  npm ERR! path /Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/acorn-walk
  npm ERR! dest /Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/.acorn-walk-cqDuPq6B
  npm ERR! errno -66
  npm ERR! ENOTEMPTY: directory not empty, rename '/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/acorn-walk' -> '/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/.acorn-walk-cqDuPq6B'

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ms/.npm/_logs/2022-01-06T17_10_52_790Z-debug-0.log
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % npm run serve

[email protected] serve
vue-cli-service serve

node:internal/modules/cjs/loader:936
throw err;
^

Error: Cannot find module '@vue/cli-shared-utils'
Require stack:

• /Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/@vue/cli-service/bin/vue-cli-service.js
  at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
  at Function.Module._load (node:internal/modules/cjs/loader:778:27)
  at Module.require (node:internal/modules/cjs/loader:1005:19)
  at require (node:internal/modules/cjs/helpers:102:18)
  at Object. (/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/@vue/cli-service/bin/vue-cli-service.js:3:27)
  at Module._compile (node:internal/modules/cjs/loader:1101:14)
  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
  at Module.load (node:internal/modules/cjs/loader:981:32)
  at Function.Module._load (node:internal/modules/cjs/loader:822:12)
  at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
  '/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/@vue/cli-service/bin/vue-cli-service.js'
  ]
  }
  ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code %
  
  

index.js?a18c:139 Uncaught (in promise) TypeError: user.getIdTokenResult is not a function

Not getting admin panel when /admin

You can modify the CSS in the modal component:
.modal {
//position: absolute;
position: fixed;
}

The experience will be better

I like this project, thank you !!