<template>
  <Authenticated>
    <div v-if="!user">User not found</div>
    <div v-else>
      <p>Name: {{ user.name }}</p>
      <p>Join date: {{ user.creationDate }}</p>
      <p>User id: {{ user.id }}</p>
    </div>
  </Authenticated>
</template>

<script>
import Authenticated from "@/components/Authenticated";
import { getJson } from "@/util/fetch";

export default {
  components: { Authenticated },
  data() {
    return {
      user: undefined,
      notFound: false
    };
  },
  methods: {
    getUser() {
      const name = this.$route.params.name;
      const path = name ? `/user/${name}` : '/user';

      getJson(path).then(user => {
        this.user = user;
        this.user.creationDate = new Date(user.creationDate).toDateString();
      });
    }
  },
  created() {
    this.getUser();
  },
  watch: {
    "$route.params.name": {
      handler() {
        this.getUser();
      },
    }
  }
}
</script>
