Merge pull request #257 from bounswe/frontend/feature/homepage_layout…

…_added-#250

[Frontend] Created Homepage Layout with Posts And Articles in it.

app/frontend/src/layouts/HomePage/HomePage.css

@@ -0,0 +1,81 @@
+.layout {
+    height: 100%;
+    width: 100%;
+    display: block;
+}
+
+.header {
+    height: 8vh;
+    width: 100%;
+}
+
+.content {
+    background-image: url("./HomepageBackground.jpg");
+    width: 100%;
+    height: 92vh;
+}
+
+.footer {
+    width: 100%;
+    height: 8vh;
+    background-color: lightgray;
+}
+
+.forum-article-buttons {
+    height: 10vh;
+    width: 100%;
+    display: flex;
+    align-content: center;
+    justify-content: space-between;
+    padding-right: 5vw;
+    padding-left: 5vw;
+    padding-top: 3vh;
+}
+
+.category-post-articles {
+    display: flex;
+    height: 76vh;
+    width: 96vw;
+    margin-left: 2vw;
+    margin-right: 2vw;
+    margin-top: 3vh;
+}
+
+.categories-and-create-post {
+    display: block;
+    height: 56vh;
+    width: 20vw;
+}
+
+.categories {
+    display: block;
+    height: 44vh;
+    width: 18vw;
+    margin-top: 2vh;
+    margin-left: 1vw;
+    padding-top: 1vh;
+    padding-left: 2vw;
+    padding-bottom: 1vh;
+    background-color: #EBECF0;
+    border-radius: 5%;
+    border: 0.5px solid lightblue;
+    overflow: scroll;
+}
+
+.articles-or-posts {
+    border-radius: 5%;
+    border: 4px solid lightblue;
+    height: 74vh;
+    width: 74vw;
+    padding-left: 2vw;
+    padding-top: 1vh;
+    padding-right: 2vw;
+    padding-bottom: 2vw;
+    margin-left: 2vw;
+    overflow: scroll;
+    background: rgba(240,255,240,0.6);
+}
+
+.category-search-bar {
+    width: 25vw,
+}

app/frontend/src/layouts/HomePage/HomePage.js

@@ -1,12 +1,168 @@
-import React from "react";
+import Layout from "antd/lib/layout/layout";
+import React, { useState } from "react";
 import { useSelector } from 'react-redux';
 
+import NavBar from "../NavBar/NavBar";
+import Articles from "../Article/Article";
+import Forum from "../Forum/Forum";
+
+import "./HomePage.css";
+import { Button, Input} from "antd";
+
+const buttonStyleClicked = {
+    width: "45%",
+    borderRadius: 50,
+    borderColor:'rgba(0,0,0,0.5)',
+    backgroundColor: 'rgb(104,172,252)',
+    color: 'rgb(255,255,255)'
+}
+
+const buttonStyleUnclicked = {
+    width: "45%",
+    borderRadius: 50,
+    borderColor:'rgba(0,0,0,0.5)',
+    backgroundColor: 'rgb(255,255,255)',
+    color: 'rgb(104,172,252)',
+}
+
+const categoryButtonsStyle = {
+    height: "10%",
+    width: "90%",
+    borderRadius: "15%",
+    backgroundColor: 'rgb(173,216,230)',
+    marginTop: "1%"
+}
+
+const categorySearchStyle = {
+    width: "90%",
+}
+
+const renderPosts = () => {
+    return (
+        <div>
+            <Forum/>
+        </div>
+    )
+}
+
+const renderArticles = () => {
+    return (
+        <div>
+            <Articles/>
+        </div>
+    )
+}
+
+const renderCategories = (searchKey) => {
+    // There should be categories and related links
+    const categories = [
+        {
+            name: "Dermatology",
+            link: "/"
+        }, 
+        {
+            name: "Cardiovascular",
+            link: "/"
+        }, 
+        {
+            name: "Infection",
+            link: "/"
+        }, 
+        {
+            name: "Cancer and Neoplasms",
+            link: "/"
+        }, 
+        {
+            name: "Inflamatory and Immune",
+            link: "/"
+        }, 
+        {
+            name: "Mental Health",
+            link: "/"
+        }, 
+        {
+            name: "Metabolic and Endocrine",
+            link: "/"
+        }, 
+        {
+            name: "Musculosketal",
+            link: "/"
+        }, 
+        {
+            name: "Neurological",
+            link: "/"
+        }, 
+    ]
+
+    return (
+        categories.filter(function(obj) {
+            if(obj.name.toLowerCase().search(searchKey.toLowerCase()) > -1) {
+                return obj
+            }
+          }).map((item) => (
+            <Button style={categoryButtonsStyle}>
+                {item.name}
+            </Button>
+        ))
+    )
+}
+
 const HomePageLayout = () => {
     const { status: userStatus } = useSelector((state) => state.user);
+    const [categorySearchInput, setCategorySearchInput] = useState("");
+
+    const [pageType, setPageType] = useState(0);
+    // This is for determining whether the page renders post or article. 0 for post, 1 for article
 
     return(
-        <div>
-            HOMEPAGE
+        <div className="layout">
+            <div className="header">
+                <NavBar></NavBar>
+            </div>
+            <div className="content">
+                <div className="forum-article-buttons">
+                    <Button 
+                    shape="round" 
+                    size="large" 
+                    style={pageType === 0 ? buttonStyleClicked : buttonStyleUnclicked}
+                    onClick={() => setPageType(0)}
+                    >
+                        Posts
+                    </Button>
+                    <Button 
+                    shape="round" 
+                    size="large" 
+                    style={pageType === 1 ? buttonStyleClicked : buttonStyleUnclicked}
+                    onClick={() => setPageType(1)}
+                    >
+                        Articles
+                    </Button>
+                </div>
+                <div className="category-post-articles">
+                    <div className="categories-and-create-post">
+                        <Button shape="round" size="large" style={{width:"60%", height:"12%", flex:1, marginLeft:"20%", marginTop:"5%"}}>
+                            Create Post
+                        </Button>
+                        <div className="categories">
+                            <div className="category-search-bar">
+                                <Input 
+                                    style={categorySearchStyle}
+                                    placeholder="Search Categories" 
+                                    value={categorySearchInput}
+                                    onChange={(e) => setCategorySearchInput(e.target.value)}
+                                />
+                            </div>
+                            {renderCategories(categorySearchInput)}
+                        </div>
+                    </div>
+                    <div className="articles-or-posts">
+                        {pageType === 0 ? renderPosts(): renderArticles()}
+                    </div>
+                </div>
+            </div>
+            {/* <div className="footer">
+                Footer
+            </div> */}
         </div>
     )
 }