質問編集履歴

pages/users/_id.vueの他に、store/index.js, store/posts.js, store/users.jsを追記させていただきました。

2019/10/23 05:35

投稿

toshihirokato

スコア20

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -174,6 +174,390 @@
+### 該当のソースコード
+```indexjs
+import moment from '~/plugins/moment'
+export const state = () => ({
+  isLoggedIn: false,
+  user: null
+})
+export const getters = {
+  isLoggedIn: state => state.isLoggedIn,
+  user: state =>
+    (state.user ? Object.assign({ likes: [] }, state.user) :null)
+}
+export const mutations = {
+  setUser(state, { user }) {
+    if (user.id.match(/_|@|./)) {
+      throw new TypeError('invalid username')
+    }
+    state.user = user
+    state.isLoggedIn = true
+  },
+  updateUser(state, { user }) {
+    state.user = user
+  }
+}
+export const actions = {
+  async login({ commit }, { id }) {
+    if (id.match(/_|@|./)) {
+      throw new TypeError('invalid username')
+    }
+    const user = await this.$axios.$get(`/users/${id}.json`)
+    console.log(user)
+    if (!user.id) throw new Error('Invalid user')
+    commit('setUser', { user })
+  },
+  async register({ commit }, { id }) {
+    const payload = {}
+    payload[id] = { id }
+    await this.$axios.$patch(`/users.json`, payload)
+    const user = await this.$axios.$get(`/users/${id}.json`)
+    if (!user.id) throw new Error('Invalid user')
+    commit('setUser', { user })
+  },
+  async addLikeLogToUser({ commit }, { user, post }) {
+    user.likes.push({
+      created_at: moment().format(),
+      user_id: user.id,
+      post_id: post.id
+    })
+    const newUser = await this.$axios.$put(`/users/${user.id}.json`, user)
+    commit('updateUser', { user: newUser })
+  },
+  async removeLikeLogToUser({ commit }, { user, post }) {
+    user.likes = post.likes.filter(like => like.user_id !== user.id) || []
+    const newUser = await this.$axios.$put(`/users/${user.id}.json`, user)
+    commit('updateUser', { user: newUser })
+  }
+}
+```
+###
+###該当のソースコード
+```postsjs
+import moment from '~/plugins/moment'
+export const state = () => ({
+  posts: []
+})
+export const getters = {
+  posts: state =>
+    state.posts.map(post => Object.assign({ likes: [] }, post))
+}
+export const mutations = {
+  addPost(state, { post }) {
+    state.posts.push(post)
+  },
+  updatePost(state, { post }) {
+    state.posts = state.posts.map((p) => (p.id === post.id ? post: p))
+  },
+  clearPosts(state) {
+    state.posts = []
+  }
+}
+export const actions = {
+  async fetchPost({ commit }, { id }) {
+    const post = await this.$axios.$get(`/posts/${id}.json`)
+    commit('addPost', { post: { ...post, id } })
+  },
+  async fetchPosts({ commit }) {
+    const posts = await this.$axios.$get(`/posts.json`)
+    commit('clearPosts')
+    Object.entries(posts || [])
+      .reverse()
+      .forEach(([id, content]) =>
+        commit('addPost', {
+          post: {
+            id,
+            ...content
+          }
+        })
+      )
+  },
+  async publishPost({ commit }, { payload }) {
+    const user = await this.$axios.$get(`/users/${payload.user.id}.json`)
+    const created_at = moment().format()
+    payload = {
+      created_at,
+      ...payload
+    }
+    const post_id = (await this.$axios.$get('/posts.json', payload)).name
+    const post = { id: post_id, ...payload, created_at }
+    const putData = { id: post_id, ...payload, created_at }
+    delete putData.user
+    await this.$axios.$put(`/users/${user.id}/posts.json`, [
+      ...(user.posts || []),
+      putData
+    ])
+    commit('addPost', { post })
+  },
+  async addLikeToPost({ commit }, { user, post }) {
+    post.likes.push({
+      created_at: moment().format(),
+      user_id: user.id,
+      post_id: post.id
+    })
+    const newPost = await this.$axios.$put(`/posts/${post.id}.json`, post)
+    commit('updatePost', { post: newPost })
+  },
+  async removeLikeToPost({ commit }, { user, post }) {
+    post.likes = post.likes.filter(like => like.user_id !== user.id) || []
+    const newPost = await this.$axios.$get(`/posts/${post.id}.json`, post)
+    commit('updatePost', { post: newPost })
+  }
+}
+```
+###
+###該当のソースコード
+```usersjs
+export const state = () => ({
+  users: []
+})
+export const getters = {
+  users: state => state.users
+}
+export const mutations = {
+  addUser(state, { user }) {
+    state.users.push(user)
+  },
+  addUserPost(state, { user, post }) {
+    state.userPosts[user.id].push(post)
+  },
+  clearUserPosts(state, { user }) {
+    state.userPosts[user.id] = []
+  }
+}
+export const actions = {
+  async fetchUser({ commit }, { id }) {
+    const user = await this.$axios.$get(`/users/${id}.json`)
+    commit('addUser', { user })
+  },
+  async addLikeLogToUser({ commit }, { user, post }) {
+    post.likes.push({
+      created_at: moment().format(),
+      user_id: user.id,
+      post_id: post.id
+    })
+    const newPost = await this.$axios.$get(`/posts/${post.id}.json`, post)
+    commit('updatePost', { post: newPost })
+  },
+  async removeLikeLogToUser({ commit }, { user, post }) {
+    post.likes = post.likes.filter(like => like.user_id !== user.id) || []
+    const newPost = await this.$axios.$put(`/posts/${post.id}.json`, post)
+    commit('updatePost', { post: newPost })
+  }
+}
+```
+###
 ### 試したこと