Merge pull request #20 from Gift-WrApp-Crew/dev2

Dev2

src/App.css

@@ -1,5 +1,5 @@
 .Logo {
-  display: block;
+  display: flex;
   margin-left: auto;
   margin-right: auto;
   width: 300px;

src/App.jsx

@@ -6,57 +6,64 @@ import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-d
 import PostList from './components/PostList.jsx';
 import PostForm from './components/PostForm';
 import AboutUs from './components/AboutUs';
+import LandingPage from './components/LandingPage';
+import FavoritesList from './components/FavoritesList';
 
 import styles from './App.css';
 // import logo from './logo.png';
 
 import Navigation from './components/Navigation';
 
-
 export default function App() {
   const [currentUser, setCurrentUser] = useState({});
+  const [posts, setPosts] = useState(null);
 
   return (
     <Router>
-      <header>{currentUser.id ? <Navigation /> : !(<Navigation />)}
-       <img className={styles.Logo} src="./logo.png" /></header>
+      <header>
+        <Navigation />
+        <img className={styles.Logo} src="./newlogo.png" />
+      </header>
+
       <main>
         <Routes>
           <Route
             exact
             path="/"
             element={
-              !currentUser.id ? (
-                <SignIn setCurrentUser={setCurrentUser} />
-              ) : (
-                <Navigate to="/posts" />
-              )
+              currentUser.id ? <Navigate to="/posts" /> : <SignIn setCurrentUser={setCurrentUser} />
             }
           />
-
           <Route
             exact
             path="/signup"
             element={
-              !currentUser.id ? (
-                <SignUp setCurrentUser={setCurrentUser} />
+              currentUser.id ? (
+                <Navigate to="/landing" />
               ) : (
-                <Navigate to="/posts" />
+                <SignUp setCurrentUser={setCurrentUser} />
               )
             }
           />
+
           <Route exact path="/about" element={currentUser.id ? <AboutUs /> : <Navigate to="/" />} />
 
           <Route
             exact
             path="/posts"
-            element={currentUser.id ? <PostList /> : <Navigate to="/" />}
+            element={
+              currentUser.id ? <PostList posts={posts} setPosts={setPosts} /> : <Navigate to="/" />
+            }
           />
 
+          <Route exact path="/favorites" element={<FavoritesList />} />
+
+          <Route exact path="/landing" element={<LandingPage />} />
+
           <Route
             exact
             path="/create-post"
-            element={currentUser.id ? <PostForm /> : <Navigate to="/" />}
+            element={currentUser.id ? <PostForm setPosts={setPosts} /> : <Navigate to="/" />}
           />
         </Routes>
       </main>

src/components/AboutUs.css

@@ -3,12 +3,17 @@
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
+  /* position: absolute;
+  top: 30px; */
 }
 
 .AboutUsContainer {
   display: flex;
   flex-direction: column;
-  font-family: Varela Round;
+  font-family: 'Xhers', sans-serif;
+  position: absolute;
+  top: 300px;
+  left: 90px;
 }
 .ImageContainer {
   height: 170px;
@@ -22,11 +27,11 @@
 .TeamMember {
   height: 400=px;
   display: flex;
-  background-color: lightgreen;
+  background-color: #7e8f31;
   align-items: center;
   flex-wrap: wrap;
   /* padding-left: 20px; */
-  font-family: Varela Round;
+  font-family: 'Xhers', sans-serif;
   margin: 40px;
   border: 3px black solid;
   -webkit-box-shadow: 6px 9px 18px -3px rgba(0, 0, 0, 0.39);

src/components/AboutUs.jsx

@@ -16,23 +16,23 @@ export default function AboutUs() {
           </div>
         </div>
         <div className={styles.TeamMember}>
-          <img className={styles.ImageContainer} src="./delaney.jpg" />
+          <img className={styles.ImageContainer} src="./beth.png" />
           <h3>Beth Melesse</h3>
           <div className={styles.Buttons}>
             <LinkButton link="https://github.com/bethmelmtv" />
             <LinkButton link="https://www.linkedin.com/in/bethmelmtv/" linkedin={true} />
           </div>
         </div>
         <div className={styles.TeamMember}>
-          <img className={styles.ImageContainer} src="./delaney.jpg" />
+          <img className={styles.ImageContainer} src="./jeffpic.jpg" />
           <h3>Jeff Allison</h3>
           <div className={styles.Buttons}>
             <LinkButton link="https://github.com/JeffreyAllison" />
             <LinkButton link="https://www.linkedin.com/in/jeffrey-m-allison/" linkedin={true} />
           </div>
         </div>
         <div className={styles.TeamMember}>
-          <img className={styles.ImageContainer} src="./delaney.jpg" />
+          <img className={styles.ImageContainer} src="./hailey.png.jpg" />
           <h3>Hailey Steineke</h3>
           <div className={styles.Buttons}>
             <LinkButton link="https://github.com/hdsteineke" />

src/components/FavoritesList.css

@@ -0,0 +1,5 @@
+.FavoritesList {
+  display: flex;
+  justify-content: center;
+  flex-direction: rows;
+}

src/components/FavoritesList.jsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import { getFavorites } from '../../state/services/fetch-utils';
+import Post from './Post';
+import styles from './FavoritesList.css';
+
+export default function FavoritesList() {
+  const [favPosts, setFavPosts] = useState([]);
+
+  async function fetch() {
+    const postData = await getFavorites();
+    setFavPosts(postData);
+  }
+  useEffect(() => {
+    fetch();
+  }, []);
+
+  return (
+    <div className={styles.FavoritesList}>
+      {favPosts.map((post) => (
+        <Post key={post.id} post={post} favPosts={favPosts} fetch={fetch} />
+      ))}
+    </div>
+  );
+}

src/components/LandingPage.css

@@ -0,0 +1,18 @@
+.landingPageImage {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  align-content: stretch;
+  width: auto;
+}
+
+.Button {
+  margin: auto;
+  margin-top: 100px;
+  width: 50%;
+  padding: 10px;
+  padding: 50px;
+  margin-bottom: 75px;
+}

src/components/LandingPage.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import styles from './LandingPage.css';
+import { useNavigate } from 'react-router-dom';
+
+export default function LandingPage() {
+  const history = useNavigate();
+
+  async function gotoFeed() {
+    history('/posts');
+  }
+
+  return (
+    <>
+      <div className={styles.landingPageImage}>
+        <img className={styles.firstImage} src="phone.png" />
+      </div>
+      <button onClick={gotoFeed} className={styles.Button}>
+        Lets Get Started! ♻️
+      </button>
+    </>
+  );
+}

src/components/LinkButton.jsx

@@ -7,10 +7,10 @@ import { LinkedIn } from '@mui/icons-material';
 export default function LinkButton({ text, link, linkedin }) {
   const ColorButton = styled(Button)(({ theme }) => ({
     color: theme.palette.getContrastText('#221F1F'),
-    backgroundColor: 'grey',
+    backgroundColor: 'black',
     width: '20px',
     '&:hover': {
-      backgroundColor: 'green',
+      backgroundColor: '#ccb3ff',
     },
   }));
   return (

src/components/Navigation.jsx

@@ -5,7 +5,8 @@ import EmojiPeopleIcon from '@mui/icons-material/EmojiPeople';
 import ExitToAppIcon from '@mui/icons-material/ExitToApp';
 import AddBoxIcon from '@mui/icons-material/AddBox';
 import HomeIcon from '@mui/icons-material/Home';
-import { AppBar, Toolbar, Stack, Button } from '@mui/material';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import { AppBar, Toolbar, Stack, Button, Box, Typography } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { logoutUser } from '../../state/services/fetch-utils';
 
@@ -18,9 +19,9 @@ export default function Navigation() {
     setCurrentUser({});
   }
   return (
-    <AppBar position="static" style={{ backgroundColor: 'green' }} sx={{ width: '100%' }}>
-      <Toolbar style={{ color: 'black' }}>
-        <Stack direction="row" spacing={15}>
+    <AppBar position="static" style={{ backgroundColor: 'black' }} sx={{ width: '100%' }}>
+      <Toolbar style={{ color: '#7e8f31' }}>
+        <Stack direction="row" spacing={10}>
           <Button
             size="large"
             edge="start"
@@ -42,6 +43,16 @@ export default function Navigation() {
           >
             <AddBoxIcon sx={{ fontSize: 30 }} />
           </Button>
+          <Button
+            size="large"
+            edge="start"
+            color="inherit"
+            aria-label="logo"
+            component={Link}
+            to={'/favorites'}
+          >
+            <FavoriteIcon sx={{ fontSize: 30 }} />
+          </Button>
           <Button
             size="large"
             edge="start"

src/components/Post.css

@@ -42,10 +42,7 @@ body {
   color: black;
   padding: 20px;
   text-align: center;
-  text-decoration: none;
-  display: inline-block;
   font-size: 16px;
-  margin: 4px 2px;
   border-radius: 12px;
   font-family: 'Xhers', sans-serif;
 }
@@ -54,22 +51,17 @@ body {
   background-color: #c5dca3;
   border: none;
   color: black;
-  padding: 15px;
+  padding: 10px;
   text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  margin: 4px;
   border-radius: 10px;
   font-family: 'Xhers', sans-serif;
 }
 
-.ImageContainer {
-  height: 60%;
-}
-
 .PostImage {
-  width: 100%;
-  height: 100%;
+  height: 300px;
+  width: 280px;
+  background: transparent no-repeat center;
+  background-size: cover;
   border-radius: 5%;
   border: 7px solid #555;
   border-color: #c5dca3;
@@ -82,11 +74,25 @@ body {
 }
 
 .Button {
-  background-color: #c5dca3;
+  /* background-color: #c5dca3;
   border: none;
   border-radius: 12px;
   margin: 10px;
   padding: 5px;
   width: 30px;
-  height: 30px;
+  height: 30px; */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-end;
+  align-content: flex-end;
+}
+
+.DeleteButton {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-end;
 }