frontend/src/views/Home.vue

<template>
  <div id="home">
    <section class="section" v-if="$store.state.user.username">
      <div class="container">
        <div class="columns is-centered">
          <div class="column is-4">
            <div class="box">
              <div class="title">
                {{ $store.state.user.username }}
              </div>
              <img
                :src="
                  'https://cdn.kaverti.com/user/avatars/full/' +
                  $store.state.user.avatar +
                  '.png'
                "
                alt="Avatar"
                class="is-centered"
                width="50%"
              />
            </div>
            <div class="title">
              {{ $t("home.news") }}
            </div>
            <div v-if="blogs.length">
              <div class="box" v-for="blog in blogs" :key="'blog-' + blog.id">
                <div class="subtitle">
                  {{ blog.name }}
                </div>
                <p>{{ blog.plainText }}</p>
              </div>
            </div>
            <div v-else>
              <div class="box">
                <NoItems type="blog posts"></NoItems>
              </div>
            </div>
          </div>
          <div class="column is-8" v-if="!loading">
            <div class="box">
              <div class="title">
                {{ $t("home.globalWall") }}
              </div>
              <b-input
                type="textarea"
                maxlength="256"
                placeholder="How's it going?"
                v-model="wallText"
              ></b-input>
              <b-tag type="is-info" class="is-pulled-right">
                Markdown is no longer available on wall posts.
              </b-tag>
              <b-button
                type="is-info"
                ckass="is-pulled-left"
                :loading="loadingWallButton"
                @click="postWall"
                >Post</b-button
              >
            </div>
            <hr />
            <div
              class="box"
              v-for="post in wallPosts"
              :key="'wallPosts-' + post.id"
            >
              <article class="media">
                <figure class="media-left">
                  <figure class="image is-64x64 is-rounded">
                    <img
                      :src="
                        'https://cdn.kaverti.com/user/avatars/headshot/' +
                        post.fromUser.picture +
                        '.png'
                      "
                      alt="Avatar"
                      class="is-rounded"
                    />
                  </figure>
                </figure>
                <div class="media-content">
                  <div class="content">
                    <p>
                      <strong>{{ post.fromUser.username }}</strong
                      >&nbsp;
                      <small>{{ post.createdAt | formatDate() }}</small>
                      <br />
                      {{ post.plainText }}
                    </p>
                  </div>
                </div>
                <div class="media-right">
                  <b-tooltip label="Delete" v-if="$store.state.user.admin">
                    <b-button class="delete"></b-button>
                  </b-tooltip>
                </div>
              </article>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section
      class="hero is-info is-large is-fullheight-with-navbar"
      v-if="!$store.state.user.username"
    >
      <div class="hero-body">
        <div class="container has-text-centered">
          <div class="title">Kaverti</div>
          <div class="subtitle">
            Kaverti is a new 3D sandbox gaming platform, and avatar social
            website.
            <br />
            Kaverti is home to hundreds of users who enjoy using it
            <br />
            So why not sign up today!
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import NoItems from "@/components/NoItems";
import AjaxErrorHandler from ".././assets/js/errorHandler";

export default {
  name: "Home",
  components: {
    NoItems,
  },
  data() {
    return {
      blogs: [],
      wallOffset: 0,
      wallPosts: [],
      wallText: "",
      mentions: "",
      loadingWallButton: false,
      loadingWall: true,
    };
  },
  methods: {
    postWall() {
      this.loadingWallButton = true;

      this.axios
        .post(
          process.env.VUE_APP_API_ENDPOINT +
            process.env.VUE_APP_API_VERSION +
            `/` +
            `wall/post`,
          {
            username: "GlobalWall",
            content: this.wallText,
          }
        )
        .then(() => {
          this.loadingWallButton = false;
          this.getWall(true);
        })
        .catch((e) => {
          this.loadingWallButton = false;
          AjaxErrorHandler(this.$store)(e);
        });
    },
    getWall(initial) {
      this.loadingWall = true;
      if (initial) {
        this.wallOffset = 0;
      }
      this.axios
        .get(
          process.env.VUE_APP_API_ENDPOINT +
            process.env.VUE_APP_API_VERSION +
            `/` +
            `user/GlobalWall?wall=true&offset=` +
            this.wallOffset
        )
        .then((res) => {
          this.loadingPosts = false;
          this.loadingWall = false;
          if (initial) {
            this.wallPosts = res.data.userWalls;
          } else {
            this.wallPosts.push(...res.data.userWalls);
          }
        });
    },
  },
  mounted() {
    if (this.$store.state.user.username) {
      this.axios
        .get(
          process.env.VUE_APP_API_ENDPOINT +
            process.env.VUE_APP_API_VERSION +
            `/` +
            `blog/posts`
        )
        .then((res) => {
          this.blogs = res.data;
        })
        .catch((e) => {
          AjaxErrorHandler(this.$store)(e);
        });
      this.getWall(true);
    }
  },
};
</script>