tried refactoring

client/package.json

@@ -2,21 +2,22 @@
     "name": "barscapes",
     "version": "0.1.0",
     "private": true,
-    "dependencies": {   
+    "dependencies": {
         "@apollo/client": "^3.7.5",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "express": "^4.18.2",
         "express-graphql": "^0.12.0",
         "graph": "^0.2.0",
+        "jwt-decode": "^3.1.2",
         "ql": "^0.1.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.2.1",
         "react-scripts": "^5.0.1",
         "web-vitals": "^2.1.4"
-    },   
+    },
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",

client/src/components/comment-list.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+const CommentList = ({ comments = [] }) => {
+  if (!comments.length) {
+    return <h3>No Comments Yet</h3>;
+  }
+
+  return (
+    <>
+      <h3
+        className="p-5 display-inline-block"
+        style={{ borderBottom: '1px dotted #1a1a1a' }}
+      >
+        Comments
+      </h3>
+      <div className="flex-row my-4">
+        {comments &&
+          comments.map((comment) => (
+            <div key={comment._id} className="col-12 mb-3 pb-3">
+              <div className="p-3 bg-dark text-light">
+                <h5 className="card-header">
+                  {comment.commentAuthor} commented{' '}
+                  <span style={{ fontSize: '0.825rem' }}>
+                    on {comment.createdAt}
+                  </span>
+                </h5>
+                <p className="card-body">{comment.commentText}</p>
+              </div>
+            </div>
+          ))}
+      </div>
+    </>
+  );
+};
+
+export default CommentList;

client/src/pages/comment.js

@@ -1,8 +1,10 @@
 import React from 'react'
 import drunkBee from '../assets/images/drunkbee.png'
-export default function Comment() {
+import CommentList from '../components/comment-list'
+
+function Comment() {
   return (
-     
+
     <div class="top-buzz-container bg-yellow-200"><br></br>
        <img class ="mx-auto outline" src={drunkBee} alt="Drunk bee" width="300" height="350"/>
        <br></br><br></br>
@@ -53,5 +55,5 @@ export default function Comment() {
 </div>
   )
 }
-
+export default Comment
 // need export default here

client/src/pages/create-account.js

@@ -4,7 +4,7 @@ import signupPhoto from '../assets/images/signup.png'
 import { Link } from 'react-router-dom';
 import { useMutation } from '@apollo/client';
 import { ADD_USER } from '../utils/mutations';
-
+import Auth from '../utils/auth';
 function Signup() {