From 34885be326b3e62e451ed944e7d63ab2b539730d Mon Sep 17 00:00:00 2001
From: rpkenney <kenneyrobert109@gmail.com>
Date: Wed, 15 Nov 2023 15:22:44 -0500
Subject: [PATCH] connected the wall to the db

---
 src/recommenderapp/app.py              |  8 +--
 src/recommenderapp/static/wall.js      | 67 ++++++++++++++++----------
 src/recommenderapp/templates/wall.html | 12 ++---
 src/recommenderapp/utils.py            | 11 +++++
 4 files changed, 63 insertions(+), 35 deletions(-)

diff --git a/src/recommenderapp/app.py b/src/recommenderapp/app.py
index 2da1dc44e..4b75e0ff4 100644
--- a/src/recommenderapp/app.py
+++ b/src/recommenderapp/app.py
@@ -13,7 +13,7 @@
 from flask import Flask, jsonify, render_template, request, g
 from flask_cors import CORS
 from search import Search
-from utils import beautify_feedback_data, send_email_to_user, createAccount, logintoAccount, submitReview
+from utils import beautify_feedback_data, send_email_to_user, createAccount, logintoAccount, submitReview, getWallPosts
 import mysql.connector
 import os
 from dotenv import load_dotenv
@@ -137,6 +137,10 @@ def review():
     submitReview(g.db, 1, data["movie"], data["score"], data["review"], timestamp)
     return request.data
 
+@app.route("/getWallData", methods=["GET"])
+def wallPosts():
+    return getWallPosts(g.db)
+
 
 @app.route("/feedback", methods=["POST"])
 def feedback():
@@ -166,7 +170,6 @@ def success():
 
 @app.before_request
 def before_request():
-    print('opening db connection')
     load_dotenv()
     g.db = mysql.connector.connect(user='root', password=os.getenv('DB_PASSWORD'),
                                 host='127.0.0.1',
@@ -174,7 +177,6 @@ def before_request():
 
 @app.after_request
 def after_request(response):
-    print('closing db connection')
     g.db.close()
     return response
 
diff --git a/src/recommenderapp/static/wall.js b/src/recommenderapp/static/wall.js
index 076593634..292f5e9eb 100644
--- a/src/recommenderapp/static/wall.js
+++ b/src/recommenderapp/static/wall.js
@@ -1,26 +1,29 @@
 
-const posts = [
-    { username: 'User1', movie: 'Movie1', review: 4, comment: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', imdbID:'tt0086190' },
-    { username: 'User2', movie: 'Movie1', review: 3.5, comment: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', imdbID:'tt0371746' },
-    { username: 'User3', movie: 'Movie1', review: 2, comment:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', imdbID:'tt0126029' },
-    { username: 'User1', movie: 'Movie1', review: 4, comment: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', imdbID:'tt0415306' },
-    { username: 'User2', movie: 'Movie1', review: 3.5, comment: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', imdbID:'tt0120484' },
-    { username: 'User3', movie: 'Movie1', review: 2, comment:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', imdbID:'tt0317219' },
-  ];
+posts = []
 
+function loadPosts(){
 
-  $(document).ready(function () {
-    renderPosts();
-  });
-
-  var result = '';
+    return new Promise(function(resolve, reject){
+        $.ajax({
+            type: 'GET',
+            url: '/getWallData',
+            contentType: "application/json;charset=UTF-8",
+            success: function(response) {
+                console.log(response)
+                resolve(response)
+            },
+            error: function(error) {
+                reject(error);
+            }
+            });
+        });
+}
 
-  function fetchMovieData(imdbID){
+function fetchMovieData(imdbID){
 
     var apikey = '77da67f1';
-    
-    return new Promise(function(resolve, reject){
 
+    return new Promise(function(resolve, reject){
         $.ajax({
             type: 'GET',
             url: 'http://www.omdbapi.com/',
@@ -35,15 +38,15 @@ const posts = [
             error: function(error) {
                 reject(error);
             }
+            });
         });
-    });
-  }
+}
 
-  async function renderPosts() {
+async function renderPosts() {
     const postContainer = $('#post-container');
 
     posts.forEach(post => buildPost(post, postContainer));
-  }
+}
 
 async function buildPost(post, postContainer){
 
@@ -54,7 +57,7 @@ async function buildPost(post, postContainer){
     
     var movieData;
     try{
-        movieData = await fetchMovieData(post.imdbID);
+        movieData = await fetchMovieData(post.imdb_id);
     } catch(error){
         console.error(error);
     }
@@ -73,17 +76,17 @@ async function buildPost(post, postContainer){
 
     var reviewDiv = $('<div>').addClass('review');
 
-    for(let i = 0; i < post.review; i++){
+    for(let i = 0; i < post.score; i++){
         var star = $('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></svg>');
         reviewDiv.append(star);
     }
 
     var halfStar = $('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-half" viewBox="0 0 16 16"><path d="M5.354 5.119 7.538.792A.516.516 0 0 1 8 .5c.183 0 .366.097.465.292l2.184 4.327 4.898.696A.537.537 0 0 1 16 6.32a.548.548 0 0 1-.17.445l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256a.52.52 0 0 1-.146.05c-.342.06-.668-.254-.6-.642l.83-4.73L.173 6.765a.55.55 0 0 1-.172-.403.58.58 0 0 1 .085-.302.513.513 0 0 1 .37-.245l4.898-.696zM8 12.027a.5.5 0 0 1 .232.056l3.686 1.894-.694-3.957a.565.565 0 0 1 .162-.505l2.907-2.77-4.052-.576a.525.525 0 0 1-.393-.288L8.001 2.223 8 2.226v9.8z"/></svg>');
-    if((post.review * 10) % 10 > 0){
+    if((post.score * 10) % 10 > 0){
         reviewDiv.append(halfStar);
     }
 
-    var commentDiv = $('<div>').addClass('comment').text(post.comment);
+    var commentDiv = $('<div>').addClass('comment').text(post.review);
 
  
     var dataDiv = $('<div>').addClass('movie-data');
@@ -99,4 +102,18 @@ async function buildPost(post, postContainer){
     userDiv.append(titleDiv, reviewDiv, commentDiv);
     postDiv.append(imageDiv, userDiv, dataDiv);
     postContainer.append(postDiv);
-}
\ No newline at end of file
+}
+
+var loaded = false;
+
+$(document).ready(async function () {
+    if(!loaded){
+        loaded = true;
+        try{
+            posts = await loadPosts();
+        } catch(error){
+            console.error(error);
+        }
+        renderPosts();
+    }
+});
\ No newline at end of file
diff --git a/src/recommenderapp/templates/wall.html b/src/recommenderapp/templates/wall.html
index e97ead34e..26821227e 100644
--- a/src/recommenderapp/templates/wall.html
+++ b/src/recommenderapp/templates/wall.html
@@ -13,7 +13,11 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width device-width, initial-scale=1" />
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-  </head>
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" crossorigin="anonymous"></script>
+    <script src="{{ url_for('static', filename='script.js') }}"></script>
+    <script src="{{ url_for('static', filename='wall.js') }}"></script>
+</head>
   <body>
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark topNavBar fixed-top">
       <div class="container-fluid">
@@ -32,11 +36,5 @@ <h2><center>Popcorn Picks Wall</center></h2>
     </div>
     <div id="post-container" style="margin: auto; max-width: 1100px; height: 95%; overflow-y:auto; background-color: white;">
     </div>
-          
-
   </body>
-  <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
-  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" crossorigin="anonymous"></script>
-  <script src="{{ url_for('static', filename='script.js') }}"></script>
-  <script src="{{ url_for('static', filename='wall.js') }}"></script>
 </html>
diff --git a/src/recommenderapp/utils.py b/src/recommenderapp/utils.py
index 6ecb97c7f..5d0b61499 100644
--- a/src/recommenderapp/utils.py
+++ b/src/recommenderapp/utils.py
@@ -10,6 +10,7 @@
 from smtplib import SMTPException
 from email.mime.text import MIMEText
 from email.mime.multipart import MIMEMultipart
+from flask import jsonify
 
 import pandas as pd
 
@@ -194,3 +195,13 @@ def submitReview(db, user, movie, score, review, timestamp):
     print("REVIEW IS " + review)
     executor.execute("INSERT INTO popcornpicksdb.ratings(user_id, movie_id, score, review, time) VALUES (%s, %s, %s, %s, %s);", (int(user), int(movie_id), int(score), str(review), int(timestamp)))
     db.commit()
+
+def getWallPosts(db):
+    executor = db.cursor()
+    executor.execute("SELECT name, imdb_id, review, score, username, time FROM users JOIN (SELECT name, imdb_id, review, score, user_id, time FROM ratings JOIN movies on ratings.movie_id = movies.idMovies) AS moviereview ON users.idUsers = moviereview.user_id ORDER BY time limit 50")
+    rows = [x[0] for x in executor.description]
+    result = executor.fetchall()
+    json_data = []
+    for r in result:
+        json_data.append(dict(zip(rows, r)))
+    return jsonify(json_data)