Merge pull request #8 from jacksonrgoodman/jrg--cap1-2-2A

navbar layout laid out

api/database.json

@@ -46,42 +46,42 @@
  "movieLists": [
  {
  "id": 1,
- "creatorId": 1,
+ "userId": 1,
  "name": "Spielberg's Water-Based Filmography",
  "listTheme": "Violet",
  "desc": "didactic"
  },
  {
  "id": 2,
- "creatorId": 2,
+ "userId": 2,
  "name": "Fincher Flicks",
  "listTheme": "Fuscia",
  "desc": "context-sensitive"
  },
  {
  "id": 3,
- "creatorId": 3,
+ "userId": 3,
  "name": "spike Lee joints",
  "listTheme": "Red",
  "desc": "not just Do the Right Thing"
  },
  {
  "id": 4,
- "creatorId": 4,
+ "userId": 4,
  "name": "Lynch Filmography 1988-1994",
  "listTheme": "Pink",
  "desc": "function"
  },
  {
  "id": 5,
- "creatorId": 5,
+ "userId": 5,
  "name": "Action Films",
  "listTheme": "Purple",
  "desc": "Monitored"
  },
  {
  "id": 6,
- "creatorId": 5,
+ "userId": 5,
  "name": "Westerns",
  "listTheme": "Red",
  "desc": "Graphic Interface"
@@ -116,7 +116,7 @@
  "userId": 3,
  "movieListId": 3,
  "date": "5/7/2020",
- "description": "not just 'Do the Right Thing'",
+ "description": "BRAGG 103",
  "isFull": false
  },
  {
@@ -128,6 +128,16 @@
  "date": "9/4/2020",
  "description": "Best of David Lynch",
  "isFull": false
+ },
+ {
+ "id": 6,
+ "name": "Dad's Picks Cinema Club",
+ "address": "6962 Logan Circle",
+ "userId": 5,
+ "movieListId": 5,
+ "date": "9/4/2020",
+ "description": "Movies My Dad Likes",
+ "isFull": false
  }
  ]
 }

src/ApplicationViews.js

@@ -8,7 +8,7 @@ import { ProfileList } from "./components/profiles/ProfileList"
 
 import { UserList } from "./components/lists/UserList"
 import { MeetupList } from "./components/meetups/MeetupList"
-//import { ListList } from "./components/lists/ListList"
+import { ListList } from "./components/lists/ListList"
 
 import { UserMeetup } from "./components/meetups/UserMeetup"
 
@@ -36,6 +36,9 @@ export const ApplicationViews = ({ isAuthenticated,setAuthUser}) => {
  <Route exact path="/meetups">
  <MeetupList />
  </Route>
+ <Route exact path="/lists">
+ <ListList />
+ </Route>
  <Route exact path="/profiles">
  <ProfileList setAuthUser={setAuthUser}/> 
  </Route>

src/Popscore.css

@@ -22,6 +22,7 @@ h6 {
 
 p {
  color: white;
+ font-family: 'Lato', sans-serif;
 }
 
 strong {

src/Popscore.js

@@ -17,7 +17,7 @@ export const Popscore = () => {
  const clearUser = () => {
  sessionStorage.clear();
  setIsAuthenticated(sessionStorage.getItem("popscore_User") !== null)
-  }
+ }
 
  return (
  <>

src/components/lists/ListCard.css

@@ -3,7 +3,7 @@ h3,h5 {
  margin: 1rem;
 }
 
-.mylists-cards {
+.mylists-cards, .all-list-card-box {
  margin: 1rem;
  background: purple;
  border-radius: 1rem;

src/components/lists/ListCard.js

@@ -9,19 +9,19 @@ export const ListCard = ({ list }) => {
  // console.log("Object Passed Into List Card:",list)
 
  return (
- <div className="list-card">
- <div className="card-content">
+ <div className="all-list-cards">
+ <div className="all-list-card-box">
  <picture>
  {/* <img src={require('./dog.svg').default} alt="My Dog" /> */}
  </picture>
  <h3>
  <span className="card-name">
- <p>{list.name}</p>
+ {list.name}
  </span>
  </h3>
  <h5> 
  <span className="card-detail">
- {/* {movieList.creatorId.userName} */}
+ <p><p className="card-highlight">Curated By:</p>{list.user.userName}</p>
  </span>
  </h5>
  {/* <h5>{user.name}</h5> */}

src/components/lists/ListList.js

@@ -1,29 +1,29 @@
 import React, { useState, useEffect } from 'react';
-import { ProfileCard } from './ProfileCard';
-import { getAllUsers, remove, getUserById } from '../../modules/UserManager.js';
+import { ListCard } from './ListCard';
+import { getAllLists, remove, getUserById } from '../../modules/ListManager.js';
 import { useHistory } from "react-router-dom";
 import userEvent from '@testing-library/user-event';
 
 
-export const ProfileList = () => {
- const [users, setUsers] = useState([]);
- const getUsers = () => {
- return getAllUsers().then(usersFromAPI => {
- setUsers(usersFromAPI)
+export const ListList = () => {
+ const [lists, setLists] = useState([]);
+ const getLists = () => {
+ return getAllLists().then(listsFromAPI => {
+ setLists(listsFromAPI)
  });
  };
  useEffect(() => {
- getUsers();
+ getLists();
  }, []);
  const history = useHistory();
  return (
  <>
  <section className="button"> 
  <div className="container-cards">
  {/* <ProfileCard /> */}
- {users.map(user => 
- <ProfileCard
- key={user.id} user={user}/>)}
+ {lists.map(list => 
+ <ListCard
+ key={list.id} list={list}/>)}
  </div>
  </section>
  </>

src/components/lists/UserList.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { ListCard } from './ListCard';
+import { UserListCard } from './UserListCard';
 import { getAllLists, remove, getMovieListsByUserId } from '../../modules/ListManager.js';
 import { useHistory } from "react-router-dom";
 import userEvent from '@testing-library/user-event';
@@ -33,7 +33,7 @@ export const UserList = () => {
  <div className="mylists-cards">
  <h3>My Lists:</h3> 
  {lists.map(lists => 
- <ListCard key={lists.id} list={lists}/>)}
+ <UserListCard key={lists.id} list={lists}/>)}
  </div>
  </section>
  </>

src/components/lists/UserListCard.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import "./ListCard.css";
+import { Link } from "react-router-dom";
+import userEvent from '@testing-library/user-event';
+
+
+
+export const UserListCard = ({ list }) => {
+ // console.log("Object Passed Into List Card:",list)
+
+ return (
+ <div className="my-list-cards">
+ <div className="list-card-content">
+ <picture>
+ {/* <img src={require('./dog.svg').default} alt="My Dog" /> */}
+ </picture>
+ <h3>
+ <span className="list-card-name">
+ <p>{list.name}</p>
+ </span>
+ </h3>
+ <h5> 
+ <span className="list-card-detail">
+ {/* {movieList.creatorId.userName} */}
+ </span>
+ </h5>
+ {/* <h5>{user.name}</h5> */}
+ </div>
+ </div>
+ );
+}

src/components/meetups/MeetupCard.css

@@ -1,6 +1,5 @@
 h3,h5 {
  color: greenyellow;
- margin: 1rem;
 }
 
 .mymeetups-cards {
@@ -18,4 +17,17 @@ h3,h5 {
 }
 .meetup-card-name {
  text-align: center;
+}
+
+.card-detail {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ margin-top: 0;
+}
+
+.card-highlight {
+ color: lightskyblue;
+ display: flex;
+ justify-content: center;
 }

src/components/meetups/MeetupCard.js

@@ -17,33 +17,33 @@ export const MeetupCard = ({ meetup }) => {
  <span className="card-name">
  <h3>
  {meetup.name}
+ <p>{meetup.description}</p>
  </h3>
  </span>
 
  <span className="card-detail">
- <p>
- On:
- <p>
+ <p className="card-highlight">
+ On:&nbsp;
+ </p>
+ <p className="generated-detail">
  {meetup.date}
  </p>
- </p>
  </span>
  <span className="card-detail">
- <p>
- By: 
- <p>
- {/* {meetup.user.name} */}
- {meetup.userId}
- </p>
+ <p className="card-highlight">
+ Organized By:&nbsp; 
  </p>
+ <p className=" meetup-username">
+ {meetup.user.userName}
+ </p>
  </span>
  <span className="card-detail">
- <p>
- Marquee:
- <p>
+ <p className="card-highlight">
+ Marquee:&nbsp;
+ </p>
+ <p className="generated-detail">
  {meetup.movieList.name}
  </p>
- </p>
  </span>
  {/* <h5>{user.name}</h5> */}
  </div>

src/components/meetups/UserMeetupCard.js

@@ -15,7 +15,7 @@ export const UserMeetupCard = ({ meetup }) => {
  {/* <img src={require('./dog.svg').default} alt="My Dog" /> */}
  </picture>
  <span className="meetup-card-name">
- <p>{meetup.name}</p>
+ <h3><p>{meetup.name}</p></h3>
  </span>
  </div>
  </div>

src/components/profiles/ProfileCard.css

@@ -26,10 +26,3 @@ h3,h5 {
 .card-text {
  margin-top: -1rem;
 }
-
-.all-user-cards-body {
- display: flex;
- flex-direction: column;
- margin: 0rem;
- margin-top: -1rem;
-}

src/components/profiles/ProfileCard.js

@@ -21,10 +21,10 @@ export const ProfileCard = ({ user }) => {
  </h3>
  <div className="all-user-cards-body">
  <span className="card-bio">
- <h5>About: {user.bio}</h5>
+ <p className="card-highlight">About: </p><p>{user.bio}</p>
  </span>
  <span className="card-email" >
- <h5>Email: {user.email}</h5>
+ <p className="card-highlight">Email: </p><p>{user.email}</p>
  </span>
  </div>
  </div>

src/components/profiles/UserCard.js

@@ -17,16 +17,16 @@ export const UserCard = ({ user }) => {
  <img src={(user.pic).default} alt="Profile Picture" />
  </picture> */}
  <div className="card-text">
- <h3>
+ <h2>
  <span className="card-userName">
  User: {user.userName}
  </span>
- </h3>
- <h5> 
+ </h2>
+ <h3> 
  <span className="card-name">
- Hi {user.name}!
+ <p>Hi {user.name}!</p>
  </span>
- </h5>
+ </h3>
  </div>
  </div>
  </div>

src/modules/ListManager.js

@@ -1,7 +1,7 @@
 import { remoteURL } from "./tools"
 
 export const getAllLists = () => {
- return fetch(`${remoteURL}/movieLists`)
+ return fetch(`${remoteURL}/movieLists?_expand=user`)
  .then(result => result.json())
 }