Merge pull request #113 from HarrisSte/playlater

added dummy data for play later cards

client/src/components/Profile/ProfilePage.jsx

@@ -1,111 +1,90 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Col from 'react-bootstrap/Col';
 import Container from 'react-bootstrap/Container';
 import Image from 'react-bootstrap/Image';
 import Row from 'react-bootstrap/Row';
 import Button from 'react-bootstrap/Button';
 import Card from 'react-bootstrap/Card';
-import ListGroup from 'react-bootstrap/ListGroup';
 import ProfileImageUpload from '../ProfileImageUpload/ProfileImageUpload';
 import { useCurrentUserContext } from '../../context/CurrentUser';
+import RDR2 from '../../assets/playlater/rdr2.jpg';
+import Horizon from '../../assets/playlater/horizon.jpg';
+import SeaOfThieves from '../../assets/playlater/Sea-of-Thieves.jpg';
+import Journey from '../../assets/playlater/journey.jpg';
+import DeepRock from '../../assets/playlater/DRG.jpg';
+import Stardew from '../../assets/playlater/stardew.jpg';
 
 import svenImage from '../../assets/sven.jpg';
 import './profileStyle.css';
 
-// function ProfilePage() {
-//   const { currentUser } = useCurrentUserContext();
-//   const [username, setUsername] = useState('');
-
-//   // console.log(currentUser);
-
-//   useEffect(() => {
-//     if (currentUser.isAuthenticated) {
-//       setUsername(currentUser.username);
-//     }
-//   }, [currentUser]);
+function ProfilePage() {
+  const { currentUser } = useCurrentUserContext();
+  const [username, setUsername] = useState('');
 
-//   const [playLaterCards, setPlayLaterCards] = useState([
+  // console.log(currentUser);
 
+  useEffect(() => {
+    if (currentUser.isAuthenticated) {
+      setUsername(currentUser.username);
+    }
+  }, [currentUser]);
 
-function ProfilePage() {
-  const { currentUser } = useCurrentUserContext();
-  const [userProfileImage, setUserProfileImage] = useState(localStorage.getItem("profileImageUrl") ?? 
-    currentUser.profileImageUrl ?? svenImage);
   const [playLaterCards, setPlayLaterCards] = useState([
     {
-      title: 'PLAY LATER CARD 1',
+      title: 'Red Dead Redemption 2',
       text: 'Some quick example text for the 1st card.',
-      imageSrc: '',
+      imageSrc: RDR2,
     },
     {
-      title: 'PLAY LATER CARD 2',
+      title: 'Horizon: Forbidden West',
       text: 'Some quick example text for the 2nd card.',
-      imageSrc: '',
+      imageSrc: Horizon,
     },
     {
-      title: 'PLAY LATER CARD 3',
+      title: 'Sea of Thieves',
       text: 'Some quick example text for the 3rd card.',
-      imageSrc: '',
+      imageSrc: SeaOfThieves,
     },
     {
-      title: 'PLAY LATER CARD 4',
+      title: 'Journey to the Savage Planet',
       text: 'Some quick example text for the 4th card.',
-      imageSrc: '',
+      imageSrc: Journey,
     },
     {
-      title: 'PLAY LATER CARD 5',
+      title: 'Deep Rock Galactic',
       text: 'Some quick example text for the 5th card.',
-      imageSrc: '',
+      imageSrc: DeepRock,
     },
     {
-      title: 'PLAY LATER CARD 6',
+      title: 'Stardew Valley',
       text: 'Some quick example text for the 6th card.',
-      imageSrc: '',
+      imageSrc: Stardew,
     },
   ]);
 
-
-  function updateProfileImage(url) {
-    localStorage.setItem("profileImageUrl", url);
-    setUserProfileImage(url);
-  }
-
   return (
     <Container>
       <div className='welcome text-center pt-2'>
         <h1>Welcome To Your Profile, {currentUser.firstName}!</h1>
       </div>
-      <ProfileImageUpload profileImageUpdated={updateProfileImage} />
       <Row className='profile-image-row d-flex flex-column align-items-center'>
         <Col md={2.5}>
           <div>
             <Image
-              src={userProfileImage}
+              src={currentUser.profileImageUrl ?? svenImage}
               className='profile-image'
             />
           </div>
         </Col>
-        <Col md={8} className='top-five-list'>
-          <ListGroup as='ul'>
-            <h1>My Top Five Games</h1>
-            <ListGroup>
-              <ListGroup.Item>Cras justo odio</ListGroup.Item>
-              <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
-              <ListGroup.Item>Morbi leo risus</ListGroup.Item>
-              <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
-              <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
-            </ListGroup>
-          </ListGroup>
-        </Col>
       </Row>
-
-      <Row>
+      <ProfileImageUpload/>
+      <Row className='profile-cards'>
         {playLaterCards.map((card, index) => (
           <Col key={index} xs={12} md={4} className='play-later-card'>
             <Card
             style={{ backgroundColor: '#343a40' }}
             >
-              <Card.Img variant='top' src='holder.js/100px180' />
+              <Card.Img className='play-later-image' variant='top' src={card.imageSrc} />
               <Card.Body>
                 <Card.Title className='profile-card-title'>{card.title}</Card.Title>
                 <Card.Text className='profile-card-text' style={{ color: 'white' }}>{card.text}</Card.Text>
@@ -121,4 +100,4 @@ function ProfilePage() {
   );
 }
 
-export default ProfilePage;
+export default ProfilePage;

client/src/components/Profile/profileStyle.css

@@ -31,11 +31,20 @@
     padding: 1rem;
 } */
 
+.profile-cards {
+    padding-top: 1rem;
+}
+
+.play-later-image {
+    max-height: 12rem;
+}
+
 .profile-card-title {
     background: rgb(0,255,34);
     background: linear-gradient(90deg, rgb(23, 184, 120) 0%, rgba(0,255,136,1) 50%, rgb(0, 247, 255) 100%);
     padding: .5rem;
     border-radius: .4rem;
+    text-align: center;
 }
 
 .play-later-card {