stable version of UI

front-end/src/Components/Home/index.js

@@ -1,37 +1,63 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import './style.css';
-
-import Plugin from "../Plugin/Plugin";
-import {useDispatch, useStore} from "react-redux";
+import {useDispatch, useSelector} from "react-redux";
 import {SET_PLUGIN_LIST} from "../../store/actions/PluginList";
+import Plugin from "../Plugin/Plugin";
+import shallowEqual from "react-redux/lib/utils/shallowEqual";
+import NavBar from "../Navbar/Navbar";
+
+
+function Home(properties) {
 
-const url = "http://localhost:4000/plugins";
-const fetchDetails = {
-    method: 'get',
-    mode: 'cors',
-    headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-    }
-};
-function fetchPlugins() {
-    const response = await fetch(url, fetchDetails);
-    return await response.json();
-}
-async function Home(properties){
-    //on render, fetch the list of all plugins
-    const plugins = fetchPlugins().then();
     const dispatch = useDispatch();
-    dispatch({
-        type:SET_PLUGIN_LIST,
-        list:plugins
+    const pluginsList = useSelector(state => state.pluginListReducer.pluginsList, shallowEqual);
+
+    async function fetchPlugins() {
+
+        const url = "http://localhost:4000/plugins";
+        const fetchDetails = {
+            method: 'get',
+            mode: 'cors',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            }
+        };
+        try {
+            let response = await fetch(url, fetchDetails);
+            if (!response || response.status !== 200) {
+                console.error("Error while fetching from server")
+            } else {
+                response = await response.json();
+                if (response && response.data && response.data.plugins) {
+                    dispatch({
+                        type: SET_PLUGIN_LIST,
+                        pluginsList: response.data.plugins
+                    });
+                }
+            }
+        } catch (e) {
+            console.error(e);
+
+        }
+    }
+
+    useEffect(() => {
+        fetchPlugins();
+    }, []);
+
+    let list = (pluginsList || []).map(plugin => {
+        return <Plugin plugin={plugin}/>
     });
-    //let pluginList =  plugins.data.plugins.map(plugin => {
-    //return <Plugin />});
+
     return (
-        <div>
-            <p>Hello from Home !</p>
+        <div id={"page"}>
+            <NavBar/>
+            <div id={"list"}>
+                {list}
+            </div>
         </div>
     )
 }
+
 export default Home

front-end/src/Components/Home/style.css

@@ -0,0 +1,18 @@
+#list{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 80%;
+    justify-content: space-evenly;
+}
+
+#page{
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+
+
+

front-end/src/Components/Navbar/NavBar.css

@@ -0,0 +1,5 @@
+.nav-bar{
+    background-color: black;
+    height: 7%;
+}
+

front-end/src/Components/Navbar/Navbar.js

@@ -0,0 +1,26 @@
+// eslint-disable-file no-unused-vars
+import React from 'react';
+import "./NavBar.css";
+import AppBar from "@material-ui/core/AppBar";
+import Tabs from "@material-ui/core/Tabs";
+
+const PluginModel = require("../../model/plugin-model");
+
+
+function NavBar(properties) {
+    // let plugin = new PluginModel(...properties.plugin);
+    return (
+        <div >
+            <AppBar className={"nav-bar"} style={{backgroundColor : "#69585F"}}   position="fixed">
+                <Tabs
+                    variant="fullWidth"
+                    aria-label="nav tabs example"
+                >
+                </Tabs>
+            </AppBar>
+        </div>
+
+    )
+}
+
+export default NavBar

front-end/src/Components/Plugin/Plugin.css

@@ -1,4 +1,44 @@
-#plugin-preview{
+.plugin_preview{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+img{
+    width: 80%;
+}
+
+.tags{
     display: flex;
     flex-direction: row;
-}
+    justify-content: flex-start;
+    width: 100%;
+}
+
+.tag{
+    margin-right: 2%;
+}
+
+.plugin{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+h2, h1{
+    color: #69585F;
+    font-family: "Calibri Light";
+}
+
+h1{
+    font-weight: bolder;
+}
+
+.card{
+    width: 30%;
+    min-width: 400px;
+    margin-bottom: 3%;
+    color: #69585F;
+
+}

front-end/src/Components/Plugin/Plugin.js

@@ -1,22 +1,42 @@
 // eslint-disable-file no-unused-vars
 import React from 'react';
 import "./Plugin.css";
+import Button from '@material-ui/core/Button';
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import CardActions from "@material-ui/core/CardActions";
+import Chip from "@material-ui/core/Chip";
+import Avatar from "@material-ui/core/Avatar";
 const PluginModel = require("../../model/plugin-model");
 
 
 function Plugin(properties){
-    let plugin = new PluginModel(...properties.plugin);
+    const plugin = properties.plugin;
+    let tags = plugin.tags.map(tag => {
+        return <Chip className={"tag"} size={"medium"}
+            label={tag}
+            color="secondary"
+        />
+    });
+
     return (
-        <div>
-            <img src={plugin.imageUrl}/>
-            <div id={"plugin_preview"}>
-                <h1>{plugin.name}</h1>
-                <h2>{plugin.category}</h2>
-                <h2>{plugin.score}</h2>
-                <h2>{plugin.tags}</h2>
-            </div>
+        <Card raised={"true"} className={"card"} >
+            <CardContent >
+                <div className={"plugin"}>
+                    <h1>{plugin.name}</h1>
+                    <img src={"https://www.moddevices.com/hubfs/assets/images/images/gear-gallery/Leslie-600x450.png"} />
+                    <div className={"plugin_preview"}>
+                        <h2>{plugin.score}</h2>
+                        <Button variant={"contained"}>Détails</Button>
+                        <div className={"tags"}>
+                            {tags}
+                        </div>
+                    </div>
+                </div>
+            </CardContent>
+
+        </Card>
 
-        </div>
     )
 }
 

front-end/src/store/actions/PluginList.js

@@ -0,0 +1 @@
+export const SET_PLUGIN_LIST = "SET_PLUGIN_LIST";

front-end/src/store/reducers/LoginPending.js

@@ -7,6 +7,7 @@ const loginPendingReducer = (state = defaultState, action) => {
         return {loginError : action.isLoginPending};
     } else {
         return state;
+
     }
 };
 export default loginPendingReducer;

front-end/src/store/reducers/PluginList.js

@@ -0,0 +1,12 @@
+import {SET_PLUGIN_LIST} from "../actions/PluginList";
+
+const defaultState = {pluginsList:[]};
+
+const pluginListReducer = (state = defaultState, action) => {
+    if (action.type === SET_PLUGIN_LIST) {
+        return {...state, pluginsList:action.pluginsList};
+    } else {
+        return state;
+    }
+};
+export default pluginListReducer;

front-end/src/store/reducers/index.js

@@ -2,12 +2,14 @@ import { combineReducers } from 'redux';
 import loginErrorReducer from "./LoginError";
 import loginPendingReducer from "./LoginPending";
 import loginSuccessReducer from "./LoginSuccess";
+import pluginListReducer from "./PluginList";
 
 
 const reducers = combineReducers({
     loginErrorReducer,
     loginPendingReducer,
     loginSuccessReducer,
+    pluginListReducer,
 });
 
 export default reducers;