add: public pages

Author: jatinkatyal13

nuxt.config.js

@@ -36,7 +36,8 @@ export default {
   plugins: [
     { src: './plugins/vue-carousel.js', mode: 'client' },
     { src: './plugins/ga.js', mode: 'client' },
-    { src: './plugins/axios.js' }
+    { src: './plugins/axios.js' },
+    { src: './plugins/jsonapi-datastore.js' }
   ],
   /*
    ** Nuxt.js dev-modules

package.json

@@ -15,6 +15,8 @@
     "@nuxtjs/axios": "^5.3.6",
     "@nuxtjs/pwa": "^3.0.0-0",
     "cookie-universal-nuxt": "^2.1.3",
+    "jsonapi-datastore": "^0.4.0-beta",
+    "moment": "^2.24.0",
     "nuxt": "^2.0.0",
     "vue-carousel": "^0.18.0"
   },

pages/contests/_id.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="container">
+    <img 
+      :src="contest.image" 
+      alt="Cover Photo"
+      class="w-100"
+    >
+    <div class="border-card p-5 bg-black white br-none">
+      <div class="row align-items-center justify-content-between">
+        <div class="row no-gutters col-md-8 col-12 align-items-center">
+          <div class="col-md-4 col-12 pr-2">
+            <h3>{{ contest.name }}</h3>
+          </div>
+          <div class="col-12 col-md-8 my-lg-0 my-4">
+            <ul class="divided-list my-0">
+              <li class="pr-4">
+                <div class="list-heading font-md extra-bold mb-2 orange">
+                  {{ contest.stats['content-count'] }}
+                </div>
+                <div class="list-data font-mds">
+                  Challenges
+                </div>
+              </li>
+              <li class="px-4">
+                <div class="list-heading font-md extra-bold mb-2 orange">
+                  {{ startTime }}
+                </div>
+                <div class="list-data font-mds">
+                  Starts
+                </div>
+              </li>
+              <li class="pl-4">
+                <div class="list-heading font-md extra-bold mb-2 orange">
+                  {{ endTime }}
+                </div>
+                <div class="list-data font-mds">
+                  Ends
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div>
+          <button class="button-solid button-orange font-sm extra-bold my-3">
+            Start Challenge
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="font-xs my-5">
+      <div class="bold">
+        Instructions
+      </div>
+      <p>{{ contest.description }}</p>
+    </div>
+  </div>
+</template>
+<script>
+import moment from 'moment';
+
+export default {
+  async asyncData({ params, $axios, app, redirect }) {
+    const res = await $axios.get(`/contests/${params.id}/details`)
+    const contest = app.$jsonApiStore.sync(res.data)
+
+    if (!contest['public-page']) {
+      return redirect(`/app/contests/${params.id}`)
+    }
+
+    return {
+      contest
+    }
+  },
+  data: () => ({
+    contest: {}
+  }),
+  computed: {
+    startTime() {
+      return moment(this.contest && this.contest['start-time']).format('D MMM h:mm A')
+    },
+    endTime() {
+      return moment(this.contest && this.contest['end-time']).format('D MMM h:mm A')
+    }
+  }
+}
+</script>

plugins/jsonapi-datastore.js

@@ -0,0 +1,7 @@
+import { JsonApiDataStore } from 'jsonapi-datastore'
+
+// eslint-disable-next-line
+export default ({ app }, inject) => {
+  const store = new JsonApiDataStore()
+  inject('jsonApiStore', store)
+}

yarn.lock

@@ -4773,6 +4773,11 @@ json5@^2.1.2:
   dependencies:
     minimist "^1.2.5"
 
+jsonapi-datastore@^0.4.0-beta:
+  version "0.4.0-beta"
+  resolved "https://registry.yarnpkg.com/jsonapi-datastore/-/jsonapi-datastore-0.4.0-beta.tgz#b499fce924d45e2bc3c6178681520063e2361f10"
+  integrity sha1-tJn86STUXivDxheGgVIAY+I2HxA=
+
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
@@ -5292,6 +5297,11 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+moment@^2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 moo-server@*, moo-server@1.3.x:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/moo-server/-/moo-server-1.3.0.tgz#5dc79569565a10d6efed5439491e69d2392e58f1"