refactor logic; implement header and footer fixed onscreen, like butt…

…on WIP b00tc4mp#168

staff/javier-romera/unsocial/src/App.jsx

@@ -4,16 +4,21 @@ import Login from './view/Login'
 import Register from './view/Register'
 import Home from './view/Home'
 
+import Header from './components/functional/Header'
+import Footer from './components/functional/Footer'
+
+import logic from './logic'
+
 class App extends Component {
   constructor(props) {
     super(props)
 
-    this.state = { view: typeof sessionStorage.loggedInUserId !== 'undefined' ? 'home' : 'login' }
+    this.state = { view: logic.isUserLoggedIn() ? 'home' : 'login' }
   }
 
   render() {
-    return <div>
-      <h1>laicosnU</h1>
+    return <>
+      <Header />
       {this.state.view === 'login' && <Login
         onLoggedIn={() => this.setState({ view: 'home' })}
         onRegisterClick={() => this.setState({ view: 'register' })}
@@ -22,7 +27,8 @@ class App extends Component {
         onLoginClick={() => this.setState({ view: 'login' })}
         onRegistered={() => this.setState({ view: 'login' })} />}
       {this.state.view === 'home' && <Home onLoggedOut={() => this.setState({ view: 'login' })} />}
-    </div>
+      <Footer />
+    </>
   }
 }
 

staff/javier-romera/unsocial/src/components/functional/CreatePost.css

@@ -0,0 +1,3 @@
+.CreatePost {
+    background-color: var(--back-color);
+}

staff/javier-romera/unsocial/src/components/functional/CreatePost.jsx

@@ -1,10 +1,18 @@
-import createPost from '../../logic/createPost'
+import './CreatePost.css'
+
+import logic from '../../logic'
+
+import Form from '../library/Form'
+import Field from '../library/Field'
+import Label from '../library/Label'
+import Input from '../library/Input'
+import Button from '../library/Button'
 
 function CreatePost(props) {
-    return <div>
+    return <div className="CreatePost">
         <h3>Create Post</h3>
 
-        <form onSubmit={event => {
+        <Form onSubmit={event => {
             event.preventDefault()
 
             const { target: form } = event
@@ -15,23 +23,26 @@ function CreatePost(props) {
             } = form
 
             try {
-                createPost(sessionStorage.loggedInUserId, image, text)
+                logic.createPost(sessionStorage.loggedInUserId, image, text)
 
                 props.onCreated()
             } catch (error) {
                 alert(error.message)
                 console.error(error)
             }
         }}>
-
-            <label htmlFor="image">Image</label>
-            <input type="text" id="image"></input>
-
-            <label htmlFor="text">Text</label>
-            <input type="text" id="text"></input>
-
-            <button type="Submit">Create</button>
-        </form>
+            <Field>
+                <Label htmlFor="image">Image</Label>
+                <Input type="text" id="image"></Input>
+            </Field>
+
+            <Field>
+                <Label htmlFor="text">Text</Label>
+                <Input type="text" id="text"></Input>
+            </Field>
+
+            <Button type="Submit">Create</Button>
+        </Form>
     </div>
 }
 

staff/javier-romera/unsocial/src/components/functional/Footer.css

@@ -0,0 +1,13 @@
+.Footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 5%;
+    width: 100%;
+    color: var(--color);
+    background-color: black;
+    position: fixed;
+    bottom: 0;
+    border-top: 1px solid var(--color);
+    font-size: 12px;
+}

staff/javier-romera/unsocial/src/components/functional/Footer.jsx

@@ -0,0 +1,7 @@
+import './Footer.css'
+
+function Footer() {
+    return <div className="Footer">Footer :)</div>
+}
+
+export default Footer

staff/javier-romera/unsocial/src/components/functional/Header.css

@@ -0,0 +1,17 @@
+.Header {
+    background-color: var(--back-color);
+    width: 100%;
+    height: 10%;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: black;
+    position: fixed;
+    top: 0;
+
+    h1 {
+        margin: 0;
+        font-size: 1rem;
+    }
+}

staff/javier-romera/unsocial/src/components/functional/Header.jsx

@@ -0,0 +1,9 @@
+import './Header.css'
+
+function Header({ }) {
+    return <header className='Header'>
+        <h1>laicosnU</h1>
+    </header>
+}
+
+export default Header

staff/javier-romera/unsocial/src/components/functional/PostList.css

@@ -0,0 +1,52 @@
+.PostList {
+    background-color: var(--back-color);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+
+    .delete-button {
+        width: 145px;
+        margin-top: 0.25rem;
+        font-size: 12px;
+    }
+
+    article {
+        text-align: start;
+        justify-content: center;
+        align-items: center;
+        width: 80%;
+        border: 1px solid var(--color);
+        padding-bottom: 1rem;
+        margin-bottom: 1rem;
+        padding-right: 0.5rem;
+        padding-left: 0.5rem;
+    }
+
+    time {
+        font-size: 10px;
+    }
+
+    img {
+        width: 100%;
+        margin-bottom: 0.25rem;
+    }
+
+    h4 {
+        margin: 0;
+        padding: 1rem 0 1rem 0;
+    }
+
+    p {
+        margin: 0;
+        padding: 0.5rem 0 0.5rem 0;
+    }
+
+    .comments-p {
+        font-size: 10px;
+    }
+
+    span {
+        font-size: 14px;
+    }
+}

staff/javier-romera/unsocial/src/components/functional/PostList.jsx

@@ -1,31 +1,39 @@
-import getPosts from '../../logic/getPosts'
-import deletePost from '../../logic/deletePost'
+import './PostList.css'
+
+import logic from '../../logic'
+
+import LikeButton from '../library/LikeButton'
+import Button from '../library/Button'
 
 function PostList(props) {
     let posts
 
     try {
-        posts = getPosts()
+        posts = logic.getPosts()
     } catch (error) {
         alert(error.message)
         console.error(error)
     }
 
-    return <div>
+    return <section className="PostList">
         <h3>Posts</h3>
 
         {posts.map(post => <article>
             <h4>{post.author.username}</h4>
-            <img src={post.image} style={{ width: '100%' }} />
+            <img src={post.image} />
+            <div>
+                <LikeButton id={sessionStorage.loggedInUserId} post={post} />
+            </div>
             <p>{post.text}</p>
             <time>{post.date}</time>
-            {sessionStorage.loggedInUserId === post.author.id && <button type="button" onClick={() => {
-                deletePost(post)
+            <p className="comments-p">View comments..</p>
+            {sessionStorage.loggedInUserId === post.author.id && <Button type="button" classname="delete-button" onClick={() => {
+                logic.deletePost(post)
 
                 props.onDeletedPost()
-            }}>Delete Post</button>}
+            }}>Delete Post</Button>}
         </article>)}
-    </div>
+    </section>
 }
 
 export default PostList

staff/javier-romera/unsocial/src/components/library/Anchor.css

@@ -0,0 +1,7 @@
+.Anchor {
+    margin-top: 0.25rem;
+}
+
+.Anchor:visited {
+    color: var(--color);
+}

staff/javier-romera/unsocial/src/components/library/Anchor.jsx

@@ -0,0 +1,7 @@
+import './Anchor.css'
+
+function Anchor({ href, onClick, children }) {
+    return <a className="Anchor" href={href} onClick={onClick}>{children}</a>
+}
+
+export default Anchor

staff/javier-romera/unsocial/src/components/library/Button.css

@@ -0,0 +1,9 @@
+.Button {
+    color: var(--color);
+    font-family: var(--font);
+    background-color: var(--back-color);
+    border-bottom: 1px solid #545454;
+    border-right: 1px solid #545454;
+    padding: 5px;
+    width: 125px;
+}

staff/javier-romera/unsocial/src/components/library/Button.jsx

@@ -0,0 +1,7 @@
+import './Button.css'
+
+function Button({ type, children, onClick, classname }) {
+    return <button type={type} onClick={onClick} className={"Button " + classname}> {children}</button >
+}
+
+export default Button

staff/javier-romera/unsocial/src/components/library/Field.css

@@ -0,0 +1,5 @@
+.Field {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+}

staff/javier-romera/unsocial/src/components/library/Field.jsx

@@ -0,0 +1,7 @@
+import './Field.css'
+
+function Field({ children }) {
+    return <div className="Field">{children}</div>
+}
+
+export default Field

staff/javier-romera/unsocial/src/components/library/Form.css

@@ -0,0 +1,7 @@
+.Form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    margin: 1rem;
+}

staff/javier-romera/unsocial/src/components/library/Form.jsx

@@ -0,0 +1,7 @@
+import './Form.css'
+
+function Form({ children, onSubmit }) {
+    return <form className="Form" onSubmit={onSubmit}>{children}</form>
+}
+
+export default Form

staff/javier-romera/unsocial/src/components/library/Input.css

@@ -0,0 +1,5 @@
+.Input {
+    color: var(--color);
+    background-color: var(--back-color);
+    font-family: inherit;
+}

staff/javier-romera/unsocial/src/components/library/Input.jsx

@@ -0,0 +1,7 @@
+import './Input.css'
+
+function Input({ type, id }) {
+    return <input className="Input" id={id} type={type}></input>
+}
+
+export default Input

staff/javier-romera/unsocial/src/components/library/Label.css

@@ -0,0 +1,9 @@
+.Label {
+    &::before {
+        content: '[';
+    }
+
+    &::after {
+        content: ']';
+    }
+}

staff/javier-romera/unsocial/src/components/library/Label.jsx

@@ -0,0 +1,7 @@
+import './Label.css'
+
+function Label({ htmlFor, children }) {
+    return <label className="Label" htmlFor={htmlFor}>{children}</label>
+}
+
+export default Label

staff/javier-romera/unsocial/src/components/library/LikeButton.css

@@ -0,0 +1,9 @@
+.LikeButton {
+    background-color: var(--back-color);
+    border: 0;
+    width: 20px;
+    height: 20px;
+    font-size: 14px;
+    padding: 0;
+    margin-right: .25rem;
+}