Add min and max value to releasedYear, Change API to v2 endpoint

Thomasevano · Feb 13, 2021 · dd16484 · dd16484
1 parent 3d50b1c
commit dd16484
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 34 deletions.
diff --git a/components/atoms/Input.vue b/components/atoms/Input.vue
@@ -4,6 +4,8 @@
       :type="inputType"
       :id="inputId"
       placeholder
+      :min="minNumber"
+      :max="maxNumber"
       class="block w-full appearance-none focus:outline-none bg-transparent"
       v-on:input="updateValue($event.target.value)"
     />
@@ -19,12 +21,18 @@ export default {
     inputId: String,
     inputName: {
       type: String,
-      default: null,
+      // default: null,
     },
     value: {
       type: String,
-      default: null,
+      // default: null,
     },
+    minNumber: {
+      type: String,
+    },
+    maxNumber: {
+      type: String,
+    }
   },
   methods: {
     updateValue: function (value) {

diff --git a/pages/index.vue b/pages/index.vue
@@ -13,6 +13,8 @@
         <Select :items="genders" selectName="Genre" selectId="genders" v-model="sneakerGender"></Select>
         <Input
           inputType="number"
+          minNumber="1900"
+          maxNumber="2030"
           inputName="Année de sortie"
           inputId="releaseYear"
           v-model="sneakerReleaseYear"
@@ -28,24 +30,26 @@
     </section>
     <h2 class="section-title">{{ sectionTitle }}</h2>
     <section class="latest-articles">
-      <div v-for="sneaker in sneakers" :key="sneaker.id" class="article">
-        <nuxt-link :to="'/sneaker/' + sneaker.id">
+      <div v-for="sneaker in sneakers" :key="sneaker.sku" class="article">
+        <nuxt-link :to="'/sneaker/' + sneaker.sku">
           <div class="gradient-overlay"></div>
           <figure class="article-img">
-            <img v-if="sneaker.media" :src="sneaker.media.smallImageUrl" alt />
-            <img v-else src="http://via.placeholder.com/450x250" alt />
+            <img :src="sneaker.imgUrl" alt="sneaker image" />
           </figure>
           <div class="article-textblock">
             <div class="article-intro">
-              <h3 class="article-title">{{ sneaker.title }}</h3>
+              <h3 v-if="sneaker.name.length<45" class="article-title">{{ sneaker.name }}</h3>
+              <h3 v-if="sneaker.name.length>=45" class="article-title">{{ sneaker.name.substring(0,45)+"..." }}</h3>
               <p class="article-info">
                 Sortie le
                 {{ $moment(sneaker.releaseDate).format("dddd D MMMM YYYY") }}
               </p>
               <p class="article-info">{{ sneaker.retailPrice }} $</p>
             </div>
             <div class="article-description">
-              <p class="description-text">{{ sneaker.description }}</p>
+              <p v-if="sneaker.story.length<80" class="description-text">{{ sneaker.story }}</p>
+              <p v-if="sneaker.story.length>=80" class="description-text">{{ sneaker.story.substring(0,70)+"..." }}</p>
+              <p v-else class="description-text">{{ sneaker.name }}</p>
               <div class="button">
                 <p>Plus d'infos</p>
               </div>
@@ -75,11 +79,8 @@ export default {
   },
   methods: {
     searchSneaker() {
-      console.log(
-        `Checking name: ${this.sneakerName}, brand: ${this.sneakerBrand}, gender: ${this.sneakerGender}, releaseYear: ${this.sneakerReleaseYear}, releaseDate: ${this.sneakerReleaseDate}`
-      );
       fetch(
-        `https://api.thesneakerdatabase.com/v1/sneakers?limit=100&` +
+        `https://api.thesneakerdatabase.dev/v2/sneakers?limit=100&` +
           new URLSearchParams({
             ...(this.sneakerName && { name: this.sneakerName }),
             ...(this.sneakerBrand && { brand: this.sneakerBrand }),
@@ -88,16 +89,13 @@ export default {
               releaseYear: this.sneakerReleaseYear,
             }),
             ...(this.sneakerReleaseDate && {
-              releaseDate: this.sneakerReleaseDate + ' 23:59:59',
+              releaseDate: this.sneakerReleaseDate,
             }),
           })
       )
         .then((response) => response.json())
         .then((result) => (this.sneakers = result.results))
-        .then(
-          (number) =>
-            (this.sectionTitle = `${number.length} résultats correponsdant`)
-        );
+        .then((number) => (this.sectionTitle = `${number.length} résultats correponsdant`))
     },
   },
   data() {
@@ -115,22 +113,21 @@ export default {
   },
   created() {
     fetch(
-      `https://api.thesneakerdatabase.com/v1/sneakers?limit=10&releaseDate=lte:${
+      `https://api.thesneakerdatabase.dev/v2/sneakers?limit=10&gender=men&gender=women&releaseDate=lte:${
         this.nextRelease
       }&releaseDate=gte:${this.$moment().format(
         "YYYY-MM-DD"
       )}&sort=releaseDate:asc`
     )
       .then((response) => response.json())
       .then((result) => (this.sneakers = result.results))
-      .then(
-        (number) =>
-          (this.sectionTitle = `Les ${this.sneakers.length} prochaines sorties`)
-      );
-    fetch("https://api.thesneakerdatabase.com/v1/brands")
+      .then(() => (this.sectionTitle = `Les ${this.sneakers.length} prochaines sorties`))
+
+    fetch("https://api.thesneakerdatabase.dev/v2/brands")
       .then((response) => response.json())
       .then((result) => (this.brands = result));
-    fetch("https://api.thesneakerdatabase.com/v1/genders")
+
+    fetch("https://api.thesneakerdatabase.dev/v2/genders")
       .then((response) => response.json())
       .then((result) => (this.genders = result));
   },

diff --git a/pages/sneaker/_index.vue b/pages/sneaker/_index.vue
@@ -1,43 +1,48 @@
 <template>
   <div v-if="sneaker" class="post">
-    <h1 class="article_title">{{ sneaker.title }}</h1>
+    <h1 class="article_title">{{ sneaker.name }}</h1>
 
-    <img v-if="sneaker.media" :src="sneaker.media.imageUrl" alt="article image" />
-    <img v-else src="http://via.placeholder.com/250x250" alt="article image" />
+    <img :src="sneaker.imgUrl" alt="sneaker image" />
 
     <div class="article_details">
       <span class="article_author">{{ sneaker.brand }}</span>
-      <span class="article_author">{{ sneaker.retailPrice }} $</span>
+      <span class="article_author">Prix de vente: {{ sneaker.retailPrice }} $</span>
+      <span class="article_author">Prix de revente estimé: {{ sneaker.estimatedMarketValue }} $</span>
       <span
         class="article_date"
       >Sortie le {{ $moment(sneaker.releaseDate).format("dddd D MMMM YYYY") }}</span>
     </div>
 
-    <p class="article_content intro">{{ sneaker.description }}</p>
+    <p class="article_content intro">{{ sneaker.story }}</p>
+    <div v-if="resellLinks.length > 0">
+      <div v-for="(link, index) in resellLinks" :key="index">
+          <a :href="link" class="article_author">Acheter sur: {{ link }}</a>
+      </div>
+    </div>
+    <p v-else>Il n'y a pas de liens de revente connu</p>
   </div>
 </template>
 
 <script>
 export default {
   created() {
     fetch(
-      `https://api.thesneakerdatabase.com/v1/sneakers/${this.$route.params.index}`
+      `https://api.thesneakerdatabase.dev/v2/sneakers/${this.$route.params.index}`
     ).then((response) => {
       response.json().then((data) => {
         this.sneaker = data.results[0];
-        console.log(data.results);
-        console.log(this.$route);
+        this.resellLinks = this.sneaker.links.slice(1, -1).split(', ');
       });
     });
   },
   data() {
-    return { sneaker: {} };
+    return { sneaker: {}, resellLinks: [] };
   },
   head() {
     let sneaker = this.sneaker;
 
     return {
-      title: `${sneaker.title} - Sneakers Collection`,
+      title: `${sneaker.name} - Sneakers Collection`,
     };
   },
 };