7 votes

nc-news/src/App.css

@@ -93,24 +93,8 @@ p {
   min-width: 100%;
 }
 
-.TopicCard {
-  box-shadow: 2px 2px 5px 2px gray;
-
-  border-radius: 5px;
-  margin: 10px;
-  padding: 5px;
-  height: 25%;
-  min-height: 25%;
-  max-height: 25%;
-  width: 95%;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: nowrap;
-}
 .ArticlePage-Header {
-  font-size: medium;
+  font-size: x-large;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -134,6 +118,15 @@ p {
   display: flex;
 }
 
+.ArticlePage-VotesDiv {
+  padding: 10px;
+  margin: 10px;
+  font-size: medium;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .ArticlePage-Body {
   text-align: justify;
   padding: 10px;
@@ -144,6 +137,23 @@ p {
   justify-content: center;
 }
 
+.TopicCard {
+  box-shadow: 2px 2px 5px 2px gray;
+
+  border-radius: 5px;
+  margin: 10px;
+  padding: 5px;
+  height: 25%;
+  min-height: 25%;
+  max-height: 25%;
+  width: 95%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+}
+
 .TopicCard-Slug {
   text-decoration: underline red solid 2px;
   font-size: x-large;

nc-news/src/api.js

@@ -6,7 +6,6 @@ export function fetchArticles(params) {
         url = `https://callums-be-project.herokuapp.com/api/articles?topic=${params}`
     }
 
-    console.log(url)
     return axios.get(url)
         .then(({ data: { articles } }) => {
 
@@ -28,4 +27,12 @@ export function fetchTopics() {
 
             return topics;
         })
-};
+};
+
+export function patchArticle(article_id, patchData) {
+    return axios.patch(`https://callums-be-project.herokuapp.com/api/articles/${article_id}`, patchData)
+    .then(({ data: { article } }) => {
+
+        return article;
+    })
+}

nc-news/src/components/ArticleList.js

@@ -11,7 +11,6 @@ export default function ArticleList() {
 
     const params = useParams();
 
-    console.log(params)
     useEffect(() => {
         fetchArticles(params.topic)
             .then((articles) => {
@@ -30,8 +29,8 @@ export default function ArticleList() {
                 <section className='ArticleCards'>
                     {articlesState.map(article => {
                         return (
-                            <Link className='ArticleCard' to={`/articles/${article.article_id}`}>
-                                <ArticleCard key={article.article_id} article={article} />
+                            <Link className='ArticleCard' key={article.article_id} to={`/articles/${article.article_id}`}>
+                                <ArticleCard  article={article} />
                             </Link>
                         )
                     })}

nc-news/src/components/ArticlePage.js

@@ -1,35 +1,56 @@
 import { useState, useEffect } from "react";
 
-import { fetchArticle } from "../api";
+import { fetchArticle, patchArticle } from "../api";
 
 export default function ArticlePage({ article_id }) {
     const [articleState, setArticleState] = useState({});
     const [loadingState, setLoadingState] = useState(true);
 
+    const changeVotes = (voteChange) => {
+        let newArticleState = { ...articleState }
+        newArticleState.votes += voteChange
+        setArticleState(newArticleState)
+
+        patchArticle(article_id, { votes: voteChange })
+            .then((article) => {
+                return article;
+            })
+            .catch(error => {
+                window.alert('Could not communicate with server, please try again later.')
+            })
+    }
+
     useEffect(() => {
         fetchArticle(article_id)
             .then((article) => {
                 setArticleState(article)
                 setLoadingState(false)
             })
     },
-        [])
-
-    return (
-        <section className="ArticlePage">
-            <h2 className="ArticlePage-Topic">{articleState.topic}</h2>
-            <h3 className="ArticlePage-Header">{articleState.title}</h3>
-            <div className="Articlepage-Author">
-                    <label for='ArticlePage-Author'>Author: </label><p id='ArticlePage-Author'>{articleState.author}</p>
-            </div>
+        [article_id])
+
+
+    if (loadingState) {
+        return <p>Loading...</p>
+    } else {
+        return (
+            <section className="ArticlePage">
+                <h2 className="ArticlePage-Topic">{articleState.topic}</h2>
+                <h3 className="ArticlePage-Header">{articleState.title}</h3>
+                <div className="Articlepage-Author">
+                    <label htmlFor='ArticlePage-Author'>Author: </label><p id='ArticlePage-Author'>{articleState.author}</p>
+                </div>
                 <div className="ArtclePage-Details">
-                    <label for='ArticlePard-Votes'>Votes:</label><p id='ArticlePage-Votes'>{articleState.votes}</p><br />
-                    <label for='ArticlePard-Comments'>Comments:</label><p id='ArticlePage-Comments'>{articleState.comment_count}</p><br />
+                    <div className="ArticlePage-VotesDiv">
+                        <button onClick={() => { changeVotes(1) }}>⬆️</button><label htmlFor='ArticlePage-Votes'>Votes:</label><p id='ArticlePage-Votes'>{articleState.votes}</p><button onClick={() => { changeVotes(-1) }}>⬇️</button><br />
+                    </div>
+                    <label htmlFor='ArticlePage-Comments'>Comments:</label><p id='ArticlePage-Comments'>{articleState.comment_count}</p><br />
                 </div>
                 <div className="ArtclePage-Body">
                     <p className="ArticlePage-Body">{articleState.body}</p>
                 </div>
 
-        </section>
-    )
-}
+            </section>
+        )
+    }
+}