From 161b3c9a423611f50f4fcff927671e5c36828d27 Mon Sep 17 00:00:00 2001 From: JacksonRGoodman Date: Tue, 4 May 2021 17:38:30 -0500 Subject: [PATCH] navbar layout laid out --- api/database.json | 24 ++++++++++++------ src/ApplicationViews.js | 5 +++- src/Popscore.css | 1 + src/Popscore.js | 2 +- src/components/lists/ListCard.css | 2 +- src/components/lists/ListCard.js | 8 +++--- src/components/lists/ListList.js | 22 ++++++++--------- src/components/lists/UserList.js | 4 +-- src/components/lists/UserListCard.js | 31 ++++++++++++++++++++++++ src/components/meetups/MeetupCard.css | 14 ++++++++++- src/components/meetups/MeetupCard.js | 28 ++++++++++----------- src/components/meetups/UserMeetupCard.js | 2 +- src/components/profiles/ProfileCard.css | 7 ------ src/components/profiles/ProfileCard.js | 4 +-- src/components/profiles/UserCard.js | 10 ++++---- src/modules/ListManager.js | 2 +- 16 files changed, 108 insertions(+), 58 deletions(-) create mode 100644 src/components/lists/UserListCard.js diff --git a/api/database.json b/api/database.json index 14ad9fb..736ca28 100644 --- a/api/database.json +++ b/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 } ] } \ No newline at end of file diff --git a/src/ApplicationViews.js b/src/ApplicationViews.js index 9374b44..64e6378 100644 --- a/src/ApplicationViews.js +++ b/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}) => { + + + diff --git a/src/Popscore.css b/src/Popscore.css index d1a2d6b..08867da 100644 --- a/src/Popscore.css +++ b/src/Popscore.css @@ -22,6 +22,7 @@ h6 { p { color: white; + font-family: 'Lato', sans-serif; } strong { diff --git a/src/Popscore.js b/src/Popscore.js index e06eb6d..945e440 100644 --- a/src/Popscore.js +++ b/src/Popscore.js @@ -17,7 +17,7 @@ export const Popscore = () => { const clearUser = () => { sessionStorage.clear(); setIsAuthenticated(sessionStorage.getItem("popscore_User") !== null) - } + } return ( <> diff --git a/src/components/lists/ListCard.css b/src/components/lists/ListCard.css index f118894..29d32c7 100644 --- a/src/components/lists/ListCard.css +++ b/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; diff --git a/src/components/lists/ListCard.js b/src/components/lists/ListCard.js index e207b28..0fe71a7 100644 --- a/src/components/lists/ListCard.js +++ b/src/components/lists/ListCard.js @@ -9,19 +9,19 @@ export const ListCard = ({ list }) => { // console.log("Object Passed Into List Card:",list) return ( -
-
+
+
{/* My Dog */}

-

{list.name}

+ {list.name}

- {/* {movieList.creatorId.userName} */} +

Curated By:

{list.user.userName}
{/*
{user.name}
*/} diff --git a/src/components/lists/ListList.js b/src/components/lists/ListList.js index ca38664..5d6a94a 100644 --- a/src/components/lists/ListList.js +++ b/src/components/lists/ListList.js @@ -1,19 +1,19 @@ 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 ( @@ -21,9 +21,9 @@ export const ProfileList = () => {
{/* */} - {users.map(user => - )} + {lists.map(list => + )}
diff --git a/src/components/lists/UserList.js b/src/components/lists/UserList.js index a2923d0..d53b43d 100644 --- a/src/components/lists/UserList.js +++ b/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 = () => {

My Lists:

{lists.map(lists => - )} + )}
diff --git a/src/components/lists/UserListCard.js b/src/components/lists/UserListCard.js new file mode 100644 index 0000000..b125bd7 --- /dev/null +++ b/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 ( +
+
+ + {/* My Dog */} + +

+ +

{list.name}

+ +

+
+ + {/* {movieList.creatorId.userName} */} + +
+ {/*
{user.name}
*/} +
+
+ ); +} \ No newline at end of file diff --git a/src/components/meetups/MeetupCard.css b/src/components/meetups/MeetupCard.css index d87aafe..9ded5cd 100644 --- a/src/components/meetups/MeetupCard.css +++ b/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; } \ No newline at end of file diff --git a/src/components/meetups/MeetupCard.js b/src/components/meetups/MeetupCard.js index 4798b4e..140fe6e 100644 --- a/src/components/meetups/MeetupCard.js +++ b/src/components/meetups/MeetupCard.js @@ -17,33 +17,33 @@ export const MeetupCard = ({ meetup }) => {

{meetup.name} +

{meetup.description}

 -

- On: -

+

+ On:  +

+

{meetup.date}

-

-

- By: -

- {/* {meetup.user.name} */} - {meetup.userId} -

+

+ Organized By: 

+

+ {meetup.user.userName} +

-

- Marquee: -

+

+ Marquee:  +

+

{meetup.movieList.name}

-

{/*
{user.name}
*/}
diff --git a/src/components/meetups/UserMeetupCard.js b/src/components/meetups/UserMeetupCard.js index a4d7e9d..4edc291 100644 --- a/src/components/meetups/UserMeetupCard.js +++ b/src/components/meetups/UserMeetupCard.js @@ -15,7 +15,7 @@ export const UserMeetupCard = ({ meetup }) => { {/* My Dog */} -

{meetup.name}

+

{meetup.name}
diff --git a/src/components/profiles/ProfileCard.css b/src/components/profiles/ProfileCard.css index 4b6e0d8..a83f195 100644 --- a/src/components/profiles/ProfileCard.css +++ b/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; -} \ No newline at end of file diff --git a/src/components/profiles/ProfileCard.js b/src/components/profiles/ProfileCard.js index a6f5db7..cddfcc3 100644 --- a/src/components/profiles/ProfileCard.js +++ b/src/components/profiles/ProfileCard.js @@ -21,10 +21,10 @@ export const ProfileCard = ({ user }) => {
-
About: {user.bio}
+

About:

{user.bio}

 -
Email: {user.email}
+

Email:

{user.email}
diff --git a/src/components/profiles/UserCard.js b/src/components/profiles/UserCard.js index c2186b1..581a918 100644 --- a/src/components/profiles/UserCard.js +++ b/src/components/profiles/UserCard.js @@ -17,16 +17,16 @@ export const UserCard = ({ user }) => { Profile Picture */}
-

+

User: {user.userName} -

-
+
+

- Hi {user.name}! +

Hi {user.name}!

 -

+
diff --git a/src/modules/ListManager.js b/src/modules/ListManager.js index 5c10c81..28c872b 100644 --- a/src/modules/ListManager.js +++ b/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()) }