From 48c762ddbd2f10d2331022362c0372194ed1e85d Mon Sep 17 00:00:00 2001
From: kadimakeith <keithkadima@gmail.com>
Date: Fri, 14 Jun 2024 10:42:25 +0000
Subject: [PATCH] feat: start landing page update

---
 src/components/FeaturedCard.vue   |  45 ++++++++
 src/components/ReviewerCard.vue   |  47 ++++++++
 src/components/WelcomeSection.vue |  41 +++++++
 src/store/index.js                |  53 ++++-----
 src/views/Home.vue                | 177 +++++++++++++++++++-----------
 vue.config.js                     |   6 +-
 6 files changed, 266 insertions(+), 103 deletions(-)
 create mode 100644 src/components/FeaturedCard.vue
 create mode 100644 src/components/ReviewerCard.vue
 create mode 100644 src/components/WelcomeSection.vue

diff --git a/src/components/FeaturedCard.vue b/src/components/FeaturedCard.vue
new file mode 100644
index 0000000..0209f36
--- /dev/null
+++ b/src/components/FeaturedCard.vue
@@ -0,0 +1,45 @@
+<template>
+    <div class="featured-card">
+      <img :src="post.image" alt="Post Image" class="post-image"/>
+      <h2>{{ post.title }}</h2>
+      <p>{{ post.excerpt }}</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: "FeaturedCard",
+    props: {
+      post: Object
+    }
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .featured-card {
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    text-align: center;
+    padding: 20px;
+  
+    .post-image {
+      width: 100%;
+      height: 200px;
+      object-fit: cover;
+    }
+  
+    h2 {
+      font-size: 24px;
+      margin: 10px 0;
+      color: #34495e;
+    }
+  
+    p {
+      font-size: 16px;
+      color: #7f8c8d;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/ReviewerCard.vue b/src/components/ReviewerCard.vue
new file mode 100644
index 0000000..d1332a9
--- /dev/null
+++ b/src/components/ReviewerCard.vue
@@ -0,0 +1,47 @@
+<template>
+    <div class="reviewer-card">
+      <img :src="reviewer.avatar" alt="Reviewer Avatar" class="reviewer-avatar"/>
+      <h3>{{ reviewer.name }}</h3>
+      <p>{{ reviewer.bio }}</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: "ReviewerCard",
+    props: {
+      reviewer: Object
+    }
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .reviewer-card {
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    text-align: center;
+    padding: 20px;
+  
+    .reviewer-avatar {
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      object-fit: cover;
+      margin-bottom: 10px;
+    }
+  
+    h3 {
+      font-size: 20px;
+      margin: 10px 0;
+      color: #34495e;
+    }
+  
+    p {
+      font-size: 16px;
+      color: #7f8c8d;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/WelcomeSection.vue b/src/components/WelcomeSection.vue
new file mode 100644
index 0000000..16e38ad
--- /dev/null
+++ b/src/components/WelcomeSection.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="welcome-section">
+      <img :src="post.photo" alt="Welcome Image" class="welcome-image"/>
+      <h1>{{ post.title }}</h1>
+      <p>{{ post.blogPost }}</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: "WelcomeSection",
+    props: {
+      post: Object
+    }
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .welcome-section {
+    text-align: center;
+    margin: 20px 0;
+  
+    .welcome-image {
+      width: 100%;
+      max-height: 400px;
+      object-fit: cover;
+    }
+  
+    h1 {
+      font-size: 36px;
+      margin: 20px 0;
+      color: #2c3e50;
+    }
+  
+    p {
+      font-size: 18px;
+      color: #7f8c8d;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index e569304..e2c7ae1 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -30,19 +30,25 @@ export default new Vuex.Store({
     blogPostsFeed(state) {
       return state.blogPosts.slice(0, 1);
     },
-
     blogPostsCards(state) {
       return state.blogPosts.slice(0, 4);
     },
-
+    featuredPosts(state) {
+      return state.blogPosts.filter(post => post.isFeatured).slice(0, 4);
+    },
+    topReviewers() {
+      return [
+        { id: 1, name: "John Doe", bio: "Movie enthusiast and critic", avatar: "path/to/avatar1.jpg" },
+        { id: 2, name: "Jane Smith", bio: "Cinema lover and reviewer", avatar: "path/to/avatar2.jpg" },
+        // Add more reviewers as needed
+      ];
+    },
     cartTotal(state) {
       return state.cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
     },
-
     cartItemCount(state) {
       return state.cartItems.reduce((count, item) => count + item.quantity, 0);
     },
-
     cartItems(state) {
       return state.cartItems;
     }
@@ -51,46 +57,36 @@ export default new Vuex.Store({
     createFileURL(state, payload) {
       state.blogPhotoFileURL = payload;
     },
-
     openPhotoPreview(state) {
       state.blogPhotoPreview = !state.blogPhotoPreview;
     },
-    
     fileNameChange(state, payload) {
       state.blogPhotoName = payload;
     },
-
     newBlogPost(state, payload) {
       state.blogHTML = payload;
     },
-
     updateBlogTitle(state, payload) {
       state.blogTitle = payload;
     },
-    
     toggleEditPost(state, payload) {
       state.editPost = payload;
     },
-
     filterBlogPost(state, payload) {
       state.blogPosts = state.blogPosts.filter((post) => post.blogID !== payload);
     },
-
     setProfileAdmin(state, payload) {
       state.profileAdmin = payload;
     },
-
     setBlogState(state, payload) {
       state.blogTitle = payload.blogTitle;
       state.blogHTML = payload.blogHTML;
       state.blogPhotoFileURL = payload.blogCoverPhoto;
       state.blogPhotoName = payload.blogCoverPhotoName;
     },
-    
     updateUser(state, payload) {
-      state.user = payload; 
+      state.user = payload;
     },
-    
     setProfileInfo(state, doc) {
       state.profileId = doc.id;
       state.profileEmail = doc.data().email;
@@ -98,25 +94,20 @@ export default new Vuex.Store({
       state.profileLastName = doc.data().lastName;
       state.profileUsername = doc.data().userName;
     },
-
     setProfileInitials(state) {
-      state.profileInitials = 
+      state.profileInitials =
         state.profileFirstName.match(/(\b\S)?/g).join("") +
-        state.profileLastName.match(/(\b\S)?/g).join("");                            
+        state.profileLastName.match(/(\b\S)?/g).join("");
     },
-    
     changeFirstName(state, payload) {
       state.profileFirstName = payload;
     },
-
     changeLastName(state, payload) {
       state.profileLastName = payload;
     },
-
     changeUsername(state, payload) {
       state.profileUsername = payload;
     },
-
     // Cart mutations
     addToCart(state, product) {
       const existingProduct = state.cartItems.find(item => item.id === product.id);
@@ -127,12 +118,10 @@ export default new Vuex.Store({
       }
       localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
     },
-
     removeFromCart(state, product) {
       state.cartItems = state.cartItems.filter(item => item.id !== product.id);
       localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
     },
-
     updateCartQuantity(state, { product, quantity }) {
       const cartItem = state.cartItems.find(item => item.id === product.id);
       if (cartItem) {
@@ -156,12 +145,11 @@ export default new Vuex.Store({
       const admin = await token.claims.admin;
       commit('setProfileAdmin', admin);
     },
-
     async getPost({ state }) {
       const dataBase = await db.collection('blogPosts').orderBy('date', 'desc');
       const dbResults = await dataBase.get();
       dbResults.forEach((doc) => {
-        if (!state.blogPosts.some(post => post.blogID == doc.id)) {
+        if (!state.blogPosts.some(post => post.blogID === doc.id)) {
           const data = {
             blogID: doc.data().blogID,
             blogHTML: doc.data().blogHTML,
@@ -169,24 +157,22 @@ export default new Vuex.Store({
             blogTitle: doc.data().blogTitle,
             blogDate: doc.data().date,
             blogCoverPhotoName: doc.data().blogCoverPhotoName,
+            isFeatured: doc.data().isFeatured // Ensure you have this field in your Firestore document
           };
           state.blogPosts.push(data);
         }
       });
       state.postLoaded = true;
     },
-
     async deletePost({ commit }, payload) {
       const getPost = await db.collection("blogPosts").doc(payload);
       await getPost.delete();
       commit("filterBlogPost", payload);
     },
-
     async updatePost({ commit, dispatch }, payload) {
       commit("filterBlogPost", payload);
       await dispatch("getPost");
     },
-
     async updateUserSettings({ commit, state }) {
       const dataBase = await db.collection('users').doc(state.profileId);
       await dataBase.update({
@@ -196,21 +182,20 @@ export default new Vuex.Store({
       });
       commit("setProfileInitials");
     },
-
     // Cart actions
     addToCart({ commit }, product) {
       commit('addToCart', product);
     },
-
     removeFromCart({ commit }, product) {
       commit('removeFromCart', product);
     },
-
     updateCartQuantity({ commit }, payload) {
       commit('updateCartQuantity', payload);
     }
   },
   modules: {
-    // if needed
+    // Add modules if needed
   }
-})
+});
+
+
diff --git a/src/views/Home.vue b/src/views/Home.vue
index ca86425..60be633 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,15 +1,43 @@
 <template>
   <div class="home">
     <BlogPost v-if="!user" :post="welcomeScreen" />
-    
-    <div>
+
+    <div class="content">
       <TrendingMovies />
-      <!--<BlogPost :post="post" v-for="(post, index) in blogPostsFeed" :key="index" />-->
-      
-      <div class="blog-card-wrap">
-        <h1 style="text-align:center;">Recent Reviews</h1>
+
+      <!-- Editor's Picks Section -->
+      <div class="featured-reviews">
+        <h1>Editor's Picks</h1>
+        <div class="featured-cards">
+          <FeaturedCard
+            :post="post"
+            v-for="(post, index) in featuredPosts"
+            :key="index"
+          />
+        </div>
+      </div>
+
+      <!-- Recent Reviews Section -->
+      <div class="recent-reviews">
+        <h1>Recent Reviews</h1>
         <div class="blog-cards">
-          <BlogCards :post="post" v-for="(post, index) in blogPostsCards" :key="index" />
+          <BlogCards
+            :post="post"
+            v-for="(post, index) in blogPostsCards"
+            :key="index"
+          />
+        </div>
+      </div>
+
+      <!-- Top Reviewers Section -->
+      <div class="top-reviewers">
+        <h1>Top Reviewers</h1>
+        <div class="reviewer-cards">
+          <ReviewerCard
+            :reviewer="reviewer"
+            v-for="(reviewer, index) in topReviewers"
+            :key="index"
+          />
         </div>
       </div>
     </div>
@@ -17,94 +45,113 @@
 </template>
 
 <script>
-import BlogPost from '../components/BlogPost.vue';
-import BlogCards from '../components/BlogCard.vue';
-import TrendingMovies from '../components/TrendingMovies.vue';
-
+import BlogPost from "../components/BlogPost.vue";
+import BlogCards from "../components/BlogCard.vue";
+import TrendingMovies from "../components/TrendingMovies.vue";
+import FeaturedCard from "../components/FeaturedCard.vue";
+import ReviewerCard from "../components/ReviewerCard.vue";
+import axios from "axios";
 
 export default {
   name: "Home",
-  components: { BlogPost, BlogCards, TrendingMovies },
+  components: {
+    BlogPost,
+    BlogCards,
+    TrendingMovies,
+    FeaturedCard,
+    ReviewerCard,
+  },
   data() {
     return {
       welcomeScreen: {
-        title: "Niaje",
-        blogPost: "Do you like watching movies and TV shows? Do you always feel like you want to rant or just express your opinions? Welcome to BFR.",
+        title: "Welcome to Biased Film Review",
+        blogPost:
+          "Love movies? Want to share your thoughts? Join our community of movie enthusiasts. Discover trending movies, read reviews, and write your own!",
         welcomeScreen: true,
-        photo: "movie1"
-      }
+        photo: "movie1",
+      },
+      featuredPosts: [], 
+      topReviewers: [], 
     };
   },
   computed: {
     blogPostsCards() {
       return this.$store.getters.blogPostsCards;
     },
-    blogPostsFeed() {
-      return this.$store.getters.blogPostsFeed;
-    },
     user() {
       return this.$store.state.user;
+    },
+  },
+  async created() {
+    try {
+      const response = await axios.get(
+        "https://api.themoviedb.org/3/movie/popular",
+        {
+          params: {
+            api_key: process.env.VUE_APP_TMDB_API_KEY,
+            language: "en-US",
+            page: 1,
+          },
+        }
+      );
+      this.featuredPosts = response.data.results.slice(0, 4); 
+    } catch (error) {
+      console.error("Error fetching Editor's Picks:", error);
     }
-  }
+
+    try {
+      const response = await axios.get(
+        "https://api.themoviedb.org/3/person/popular",
+        {
+          params: {
+            api_key: process.env.VUE_APP_TMDB_API_KEY, 
+            language: "en-US",
+            page: 1,
+          },
+        }
+      );
+      this.topReviewers = response.data.results.slice(0, 4); // Adjust as per your application's needs
+    } catch (error) {
+      console.error("Error fetching Top Reviewers:", error);
+    }
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .home {
-  background: #d4dfc9;
-}
+  background: #f9f9f9;
+  padding: 20px;
 
-.vue {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.blog-card-wrap {
-  //background: linear-gradient(to bottom left, #625643, #eae3b8);
-  
-  h1 {
-    font-weight: 800;
-    font-size: 21px;
-    margin-bottom: 12px;
-    color: black;
-  }
-}
-
-.updates {
-  .container {
-    padding: 100px 25px;
+  .content {
     display: flex;
     flex-direction: column;
     align-items: center;
-    @media (min-width: 800px) {
-      padding: 125px 25px;
-      flex-direction: row;
-    }
+    padding: 20px;
+  }
 
-    .router-button {
-      display: flex;
-      font-size: 14px;
-      text-decoration: none;
+  .featured-reviews,
+  .recent-reviews,
+  .top-reviewers {
+    width: 100%;
+    max-width: 1200px;
+    margin-top: 20px;
 
-      @media (min-width: 800px) {
-        margin-left: auto;
-      }
+    h1 {
+      font-weight: bold;
+      font-size: 28px;
+      text-align: center;
+      color: #333;
+      margin-bottom: 20px;
     }
 
-    h2 {
-      font-weight: 300;
-      font-size: 32px;
-      max-width: 725px;
-      width: 100%;
-      text-align: center;
-      text-transform: uppercase;
+    .featured-cards,
+    .blog-cards,
+    .reviewer-cards {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 
-      @media (min-width: 800px) {
-        font-size: 40px;
-      }
+      gap: 20px;
     }
   }
 }
diff --git a/vue.config.js b/vue.config.js
index c8ee2d5..2c1b7c2 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -19,9 +19,7 @@ module.exports = {
     },
   },
   devServer: {
-    allowedHosts: [
-      '8acf37da7fa549fc9a6fcbc39490ccae.vfs.cloud9.us-east-1.amazonaws.com'
-    ]
-  },
+    disableHostCheck: true
+  }
 };