Refactor frontend (#52)

nokia-wroclaw · Jun 21, 2019 · b019bee · b019bee
2 parents 688a16c + 718edf8
commit b019bee
Show file tree

Hide file tree

Showing 24 changed files with 664 additions and 227 deletions.
diff --git a/backend/app/api/tags.py b/backend/app/api/tags.py
@@ -58,10 +58,10 @@ def get(self) -> list:
         # paginated_query = Tag.query.options(db.noload('models')).paginate(args["page"], args["per_page"], False)
         paginated_query = Tag.query.paginate(args["page"], args["per_page"], False)
         return NestedResponse(
-            schema=TagSchema,
-            # exclude=("models",),
-            many=True,
-            pagination=paginated_query,
+            schema=TagSchema, 
+            exclude=("models",), 
+            many=True, 
+            pagination=paginated_query
         ).dump(paginated_query.items)
 
     def post(self) -> dict:

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,58 +1,70 @@
 import * as React from 'react';
 import {
-   CssBaseline} from '@material-ui/core';
+   CssBaseline
+} from '@material-ui/core';
 import createStyles from '@material-ui/core/styles/createStyles';
 import withRoot from './withRoot';
-import { Login } from './pages/login';
-import { Account } from './pages/account';
-import { Projects } from './pages/projects';
-import { ProjectView } from './pages/project';
+import { Login } from './user/LoginPage';
+import { Register } from './user/RegisterPage';
+import { Account } from './user/AccountPage';
+import { Projects } from './project/ProjectsListPage';
+import { ProjectView } from './project/ProjectPage';
 import { Users } from './pages/users';
+import { Home } from './pages/home';
 import { UserView } from './pages/user';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 import { withStyles } from '@material-ui/core/styles';
 import NavBar from './components/NavBar'
 import 'typeface-roboto';
 import { Auth } from './utils/connect';
+import { makeStyles } from '@material-ui/styles';
+import {SnackbarControler,SnackbarControlerIO} from './components/SnackbarControler';
 
-const styles = () =>
-   createStyles({
-      container:{
-         maxWidth:"940px",
-         marginLeft:"auto",
-         marginRight:"auto"
-      }
-   });
-
+const styles = makeStyles(theme => ({
+      container: {
+         maxWidth: "940px",
+         marginLeft: "auto",
+         marginRight: "auto"
+      },
+    }));
 
+
+
 
 class App extends React.Component {
-   componentDidMount(){
+   constructor(){
+      super();
+   }
+   alerts = SnackbarControlerIO;
+   componentDidMount() {
       Auth.refresh();
+      window.alerts = this.alerts;
    }
    render() {
       // @ts-ignore
       return (
          <div id="app">
-               <Router>
-                  <CssBaseline/>
-                  <NavBar/>
-                  <div id="main" className={this.props.classes.container}>
-                     <Route path="/login" component={Login}/>
-                     <Route path="/account" component={Account}/>
-                     <Route path="/projects" component={Projects}/>
-                     <Route path="/users" component={Users}/>
-                     <Route
-                        path="/project/:projectId"
-                        component={ProjectView}
-                     />
-                     <Route
-                        path="/user/:userId"
-                        component={UserView}
-                     />
-                     <Route exact path="/" component={Projects}/>
-                  </div>
-               </Router>
+            <SnackbarControler ctrl={this.alerts}/>
+            <Router>
+               <CssBaseline />
+               <NavBar />
+               <div id="main" className={this.props.classes.container}>
+                  <Route path="/login" component={Login} />
+                  <Route path="/register" component={Register} />
+                  <Route path="/account" component={Account} />
+                  <Route path="/projects" component={Projects} />
+                  <Route path="/users" component={Users} />
+                  <Route
+                     path="/project/:projectId"
+                     component={ProjectView}
+                  />
+                  <Route
+                     path="/user/:userId"
+                     component={UserView}
+                  />
+                  <Route exact path="/" component={Home} />
+               </div>
+            </Router>
          </div>
       );
    }

diff --git a/frontend/src/components/ModelsList.jsx b/frontend/src/components/ModelsList.jsx
diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx
@@ -7,7 +7,8 @@ import {Button} from '@material-ui/core/';
 import { withStyles } from '@material-ui/core/styles';
 import Assignment from '@material-ui/icons/Assignment';
 import People from '@material-ui/icons/People';
-import { CredsStore } from '../store/CredsStore';
+import { CredsStore } from '../user/CredsStore';
+import { SnackbarControlerIO as alerts} from './SnackbarControler'
 
 const styles = theme => ({
   root: {
@@ -38,14 +39,12 @@ class PrimarySearchAppBar extends React.Component {
   constructor(){
     super();
     this.state = {
-      loggedIn:!!(CredsStore.getCreds() && CredsStore.getCreds().access_token)
+      loggedIn:CredsStore.getLoggedIn()
     }
-    CredsStore.subscribeToken(this.update); 
+    CredsStore.subscribeLoggedIn("navbar",this.update); 
   }
-  update = (creds)=>{
-    this.setState({
-      loggedIn:!!(creds && creds.access_token)
-    })
+  update = (loggedIn)=>{
+    this.setState({ loggedIn });
   }
   render() {
     const { classes } = this.props;
@@ -66,11 +65,17 @@ class PrimarySearchAppBar extends React.Component {
             </Button>
             <div className={classes.grow} />
             <div className={classes.section}>
+              {this.state.loggedIn ? 
+            <Button color="inherit" onClick={()=>{CredsStore.update(false,null); alerts.add("You've been logged out.","success")}}>
+              <Typography className={classes.link} variant="h6" color="inherit" noWrap>
+                Log out
+              </Typography>
+            </Button> : 
             <Button color="inherit"  component={Link} to="/login" >
               <Typography className={classes.link} variant="h6" color="inherit" noWrap>
-                {this.state.loggedIn ? "Log Out" : "Log in"}
+                Log in
               </Typography>
-            </Button>
+            </Button>}
             </div>
           </Toolbar>
         </AppBar>

diff --git a/frontend/src/components/SnackbarControler.jsx b/frontend/src/components/SnackbarControler.jsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import {SuperSnackbar} from './SuperSnackbar';
+import { makeStyles } from '@material-ui/styles';
+
+const styles = makeStyles(theme => ({
+
+    }));
+
+// const ex_alert = {
+// 	type:"default", // error, warning, information, success
+// 	msg: "bla bla",
+// 	actions: [
+// 		{
+// 			label:"dda",
+// 			handler:(alert)=>true
+// 		}
+// 	]
+// }
+
+
+class SnackbarControlerC extends React.Component {
+	constructor(props){
+		super();
+		this.state={
+			alerts:[]
+		}
+		props.ctrl.attach(this);
+	}
+   handler = (action,alert)=>{
+		if(action==="close") this.setState({alerts:this.state.alerts.filter( al => al!==alert)});
+	}
+	drop = alert => {
+		this.setState({alerts:this.state.alerts.filter(al => al !== alert)})
+	}
+	add = (alert)=>{
+		this.setState({alerts:[...this.state.alerts,alert]})
+	}
+   render() {
+      return (
+         <div>
+				{this.state.alerts.map(alert => <SuperSnackbar alert={alert} handler={(action)=>this.handler(action,alert)} />)}
+         </div>
+      );
+   }
+}
+
+export const SnackbarControler = withStyles(styles, { withTheme:true })(SnackbarControlerC);
+
+let that={}
+
+export const SnackbarControlerIO = {
+	add:(msg,type,actions)=>{
+		const alert = {msg,type,actions};
+		that.add(alert);
+		return alert;
+	},
+	drop:(alert)=>{
+		that.drop(alert);
+	},
+	attach:(snackbarControlerComponentContext)=>{
+		that=snackbarControlerComponentContext
+	}
+}
diff --git a/frontend/src/components/SuperSelect.jsx b/frontend/src/components/SuperSelect.jsx
@@ -41,7 +41,7 @@ const styles = theme => ({
 		overflow: 'hidden',
 	},
 	chip: {
-		margin: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 4}px`,
+		margin: `${theme.spacing(0.5)}px ${theme.spacing(0.25)}px`,
 	},
 	chipFocused: {
 		backgroundColor: emphasize(
@@ -50,7 +50,7 @@ const styles = theme => ({
 		),
 	},
 	noOptionsMessage: {
-		padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+		padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
 	},
 	singleValue: {
 		fontSize: 16,
@@ -63,12 +63,12 @@ const styles = theme => ({
 	paper: {
 		position: 'absolute',
 		zIndex: 1,
-		marginTop: theme.spacing.unit,
+		marginTop: theme.spacing(1),
 		left: 0,
 		right: 0,
 	},
 	divider: {
-		height: theme.spacing.unit * 2,
+		height: theme.spacing(2),
 	},
 });