feat(recommendation list): frontend WIP

frontend/src/components/app/App.js

@@ -35,6 +35,7 @@ import PageUniversity from "../pages/PageUniversity";
 import PageSearch from "../pages/PageSearch";
 import PageSettings from "../pages/PageSettings";
 import PageUser from "../pages/PageUser";
+import PageLists from "../pages/PageLists";
 
 const DRAWER_WIDTH = 240;
 
@@ -120,6 +121,7 @@ class App extends CustomComponentForAPI {
               <Route path="/app/search" component={PageSearch} />
               <Route path="/app/map" component={PageMap} />
               <Route path="/app/settings" component={PageSettings} />
+              <Route path="/app/lists" component={PageLists} />
               <Route
                 exact
                 path="/app/university/"

frontend/src/components/app/listItems.js

@@ -58,12 +58,14 @@ export const mainListItems = (
 
 export const secondaryListItems = (
   <>
-    <ListItem button>
-      <ListItemIcon>
-        <AssignmentIcon />
-      </ListItemIcon>
-      <ListItemText primary="Mes listes" />
-    </ListItem>
+    <NavLink to={"/app/lists"} style={{ textDecoration: "none" }}>
+      <ListItem button>
+        <ListItemIcon>
+          <AssignmentIcon />
+        </ListItemIcon>
+        <ListItemText primary="Mes listes" />
+      </ListItem>
+    </NavLink>
 
     {/* eslint-disable-next-line no-undef */}
     <NavLink to={`/app/user/${__AppUserId}`} style={{ textDecoration: "none" }}>

frontend/src/components/pages/PageLists.js

+import React from "react";
+import PropTypes from "prop-types";
+import compose from "recompose/compose";
+import { connect } from "react-redux";
+
+import withStyles from "@material-ui/core/styles/withStyles";
+import Paper from "@material-ui/core/Paper";
+import Typography from "@material-ui/core/Typography";
+import AddIcon from "@material-ui/icons/Add";
+import Fab from "@material-ui/core/Fab";
+
+import Markdown from "../common/Markdown";
+import CustomComponentForAPI from "../common/CustomComponentForAPI";
+import getActions from "../../redux/api/getActions";
+import Recommendation from "../recommendation/Recommendation";
+
+const source = "Ici vous pourrez bientôt voir toutes vos listes d'universités";
+
+const RECOMMENDATIONS = {
+  content: [
+    {
+      name: "List Test 1",
+      public: true,
+      user: "UserTest",
+      descriptive: { id: "1", type: "field", text: "\n **Ajouter** un descriptif " },
+      content: [
+        {
+          type: "univ",
+          id: "66",
+          name: "EPFL",
+          city: "Lausanne",
+          country: "Suisse",
+          comment: { id: "2", type: "field", text: "\n Ajouter un commentaire" }
+        },
+        {
+          type: "univ",
+          id: "33",
+          name: "Seoul National University Of Science And Technology Seoultech",
+          city: "Seoul",
+          country: "République de Corée",
+          comment: { id: "1", type: "comment", text: "\n Commentaire pour l'**université de Séoul**. Ça à l'air cool comme univ ! :) " }
+        }
+      ]
+    },
+    {
+      name: "List Test 2",
+      public: false,
+      user: "me",
+      descriptive: { id: "1", type: "comment", text: "\n Ceci est ma listes d'universités pour mes départs en A19 " },
+      content: [
+        {
+          type: "univ",
+          id: "66",
+          name: "EPFL",
+          city: "Lausanne",
+          country: "Suisse",
+          comment: { id: "2", type: "comment", text: "\n Une super **bonne univ**, mais il faudra **bosser**.... :/ " }
+        },
+        {
+          type: "univ",
+          id: "33",
+          name: "Seoul National University Of Science And Technology Seoultech",
+          city: "Seoul",
+          country: "République de Corée",
+          comment: { id: "1", type: "fiel", text: "" }
+        }
+      ]
+    }
+  ]
+};
+
+/**
+ * Component holding the page with the lists of universities
+ *
+ * @class PageLists
+ * @extends {React.Component}
+ */
+
+class PageLists extends CustomComponentForAPI {
+  customRender() {
+    const { theme } = this.props;
+    const { classes } = this.props;
+    return (
+      <Paper style={theme.myPaper}>
+        <Typography variant="h4" gutterBottom>
+          Mes Listes
+        </Typography>
+        <Markdown source={source} />
+        {RECOMMENDATIONS.content.map((el, idx) => <div key={idx}> <Recommendation list={ el } /> </div> )}
+        <Fab color="primary" className={classes.fab}>
+          <AddIcon/>
+        </Fab>
+      </Paper>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    universities: state.api.universitiesAll,
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    api: {
+      universities: () => dispatch(getActions("universities").readAll()),
+    },
+  };
+};
+
+
+
+PageLists.propTypes = {
+  theme: PropTypes.object.isRequired,
+};
+
+
+const styles = theme => ({
+  fab: {
+    margin: theme.spacing.unit,
+    position: "fixed",
+    bottom: "1rem",
+    right: "1rem",
+  },
+  extendedIcon: {
+    marginRight: theme.spacing.unit,
+  },
+});
+
+export default compose(
+  withStyles(styles, { withTheme: true }),
+  connect(mapStateToProps, mapDispatchToProps)
+)(PageLists);

frontend/src/components/pages/PageUniversity.js

@@ -111,7 +111,7 @@ function renderFirstTimeHere() {
   return (
     <Paper>
       <Typography >
-        C'est la première fois que vous utilisé cet onglet et vous n'avez pas encore util....
+        C'est la première fois que vous utilisez cet onglet et vous n'avez pas encore util....
       </Typography>
     </Paper>
   );

frontend/src/components/recommendation/Recommendation.js

+import React from "react";
+import PropTypes from "prop-types";
+
+import withStyles from "@material-ui/core/styles/withStyles";
+import { Paper } from "@material-ui/core";
+import Button from "@material-ui/core/Button";
+import AddIcon from "@material-ui/icons/Add";
+// import {compose} from "redux";
+// import getActions from "../../redux/api/getActions";
+// import {connect} from "react-redux";
+
+import TextBlock from "../recommendation/TextBlock";
+import UnivBlock from "../recommendation/UnivBlock";
+import RecommendationEditor from "../recommendation/RecommendationEditor";
+import CustomComponentForAPI from "../common/CustomComponentForAPI";
+
+// import editorStyle from "../university/editors/common/editorStyle.js";
+
+// const RECOMMENDATION = {
+//   name: "List Test 1",
+//   public: true,
+//   user: "UserTest",
+//   descriptive: { id: "1", type: "field", text: "\n **Ajouter** un descriptif " },
+//   content: [
+//     {
+//       type: "univ",
+//       id: "66",
+//       name: "EPFL",
+//       city: "Lausanne",
+//       country: "Suisse",
+//       comment: { id: "2", type: "field", text: "\n Ajouter un commentaire" }
+//     },
+//     {
+//       type: "univ",
+//       id: "33",
+//       name: "Seoul National University Of Science And Technology Seoultech",
+//       city: "Seoul",
+//       country: "République de Corée",
+//       comment: { id: "1", type: "comment", text: "\n Commentaire pour l'**université de Séoul**. Ça à l'air cool comme univ ! :) " }
+//     }
+//   ]
+// };
+
+/**
+ * Liste de blocks
+ *
+ * @class Recommendation
+ * @extends {React.Component}
+ */
+
+class Recommendation extends CustomComponentForAPI {
+  state = {editorOpen: false};
+
+  openEditorPanel() {
+    this.setState({editorOpen: true});
+  }
+
+  closeEditorPanel() {
+    this.setState({editorOpen: false});
+  }
+
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    super.componentDidUpdate(prevProps, prevState, snapshot);
+  }
+
+  customRender() {
+    const {list, classes} = this.props,
+      recommendationModelData = list;
+
+    return (
+      <Paper style={{ color: "white", margin: "1em", padding: "1em" }}>
+        <h2>
+          {list.name}
+        </h2>
+        <p>
+          {list.public ? "Liste publique" : "liste privée"} créée par : {list.user}
+        </p>
+        <div id="Descriptive">
+          <TextBlock id={list.descriptive.id} type={list.descriptive.type} text={list.descriptive.text} />
+        </div>
+        {list.content.map((el, idx) => <div key={idx}> <UnivBlock univ={el} /> </div>)}
+        <Button variant={"contained"}
+            color={"secondary"}
+            onClick={() => this.openEditorPanel()}>
+          <AddIcon className={classes.rightIcon}/>
+        </Button>
+        <RecommendationEditor open={this.state.editorOpen}
+          closeEditorPanel={() => this.closeEditorPanel()}
+          rawModelData={recommendationModelData}/>
+      </Paper>
+    );
+  }
+}
+
+Recommendation.propTypes = {
+  classes: PropTypes.object.isRequired,
+  list: PropTypes.object.isRequired,
+};
+
+Recommendation.defaultProps = {
+
+};
+
+const styles = theme => ({
+  root: {
+    maxWidth: 650,
+    marginLeft: "auto",
+    marginRight: "auto",
+    flexGrow: 1,
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    height: 50,
+    paddingLeft: theme.spacing.unit * 4,
+    marginBottom: 20,
+    backgroundColor: theme.palette.background.default,
+  },
+});
+
+export default withStyles(styles, { withTheme: true })(Recommendation);

frontend/src/components/recommendation/RecommendationEditor.js

+import React from "react";
+import withStyles from "@material-ui/core/styles/withStyles";
+import compose from "recompose/compose";
+import {connect} from "react-redux";
+
+import {withSnackbar} from "notistack";
+import Form from "../form/Form";
+import editorStyle from "../editor/editorStyle";
+import Editor from "../editor/Editor";
+import getMapStateToPropsForEditor from "../editor/getMapStateToPropsForEditor";
+import getMapDispatchToPropsForEditor from "../editor/getMapDispatchToPropsForEditor";
+import BooleanField from "../form/fields/BooleanField";
+
+const styles = theme => ({
+  ...editorStyle(theme)
+});
+
+class RecommendationForm extends Form {
+  // /**
+  //  * @override
+  //  */
+  // formLevelErrors = [
+  //   new FormLevelError(
+  //     ["error_recommendation"],
+  //     "Error in Recommendation Form")
+  // ];
+
+  render() {
+    return (
+      <>
+        <BooleanField label={"Liste Publique ou privée ?"}
+                      {...this.getReferenceAndValue("public")}
+                      required={true}
+                      labelIfTrue="(La liste est publique)"
+                      labelIfFalse="(La liste est privée)"/>
+
+
+      </>
+    );
+  }
+}
+
+
+class RecommendationEditor extends Editor {
+  renderForm() {
+    return <RecommendationForm
+      modelData={this.props.rawModelData}
+      ref={this.formRef}
+    />;
+  }
+}
+
+export default compose(
+  withSnackbar,
+  withStyles(styles, {withTheme: true}),
+  connect(
+    getMapStateToPropsForEditor("users"),
+    getMapDispatchToPropsForEditor("users")
+  )
+)(RecommendationEditor);

frontend/src/components/recommendation/TextBlock.js

+import React from "react";
+
+import withStyles from "@material-ui/core/styles/withStyles";
+import { Paper } from "@material-ui/core";
+import TextField from "@material-ui/core/TextField";
+
+import Markdown from "../common/Markdown";
+import PropTypes from "prop-types";
+
+/**
+ * Bloc de commentaire Markdown
+ *
+ * @class TextBlock
+ * @extends React.Component
+ */
+
+class TextBlock extends React.Component {
+  render() {
+    let { id , type , text } = this.props;
+    return (
+      <Paper style={{ color: "white", margin: "1em", padding: "1em" }}>
+        {type === "comment" ? <Markdown id={id} source={text} /> : <TextField style={{ margin: 8 }} placeholder="Vous pouvez ajouter un commentaire ici" fullWidth margin="normal" InputLabelProps={{ shrink: true, }} />}
+      </Paper>
+    );
+  }
+}
+
+TextBlock.propTypes = {
+  id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+};
+
+TextBlock.defaultProps = {
+};
+
+const styles = theme => ({
+  root: {
+    maxWidth: 650,
+    marginLeft: "auto",
+    marginRight: "auto",
+    flexGrow: 1,
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    height: 50,
+    paddingLeft: theme.spacing.unit * 4,
+    marginBottom: 20,
+    backgroundColor: theme.palette.background.default,
+  },
+});
+
+export default withStyles(styles, { withTheme: true })(TextBlock);

frontend/src/components/recommendation/UnivBlock.js

+import React from "react";
+import PropTypes from "prop-types";
+
+import withStyles from "@material-ui/core/styles/withStyles";
+import { Paper } from "@material-ui/core";
+
+import Markdown from "../common/Markdown";
+import TextBlock from "../recommendation/TextBlock.js";
+
+/**
+ * Bloc de commentaire Markdown
+ *
+ * @class UnivBlock
+ * @extends CustomComponentForAPI
+ */
+class UnivBlock extends React.Component {
+  render() {
+    let { univ } = this.props,
+      comment = univ.comment,
+      link = `/app/university/${univ.id}`,
+      source = `# [${univ.name}](${link}) \n ${univ.city}, ${univ.country}`;
+    return (
+      <Paper style={{ color: "white", margin: "1em", padding: "1em" }}>
+        <Markdown source={source} />
+        <TextBlock id={comment.id} type={comment.type} text={comment.text} />
+      </Paper>
+    );
+  }
+}
+
+UnivBlock.propTypes = {
+  // coucou: PropTypes.string.isRequired,
+  univ: PropTypes.object.isRequired,
+};
+
+UnivBlock.defaultProps = {
+
+};
+
+const styles = theme => ({
+  root: {
+    maxWidth: 650,
+    marginLeft: "auto",
+    marginRight: "auto",
+    flexGrow: 1,
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    height: 50,
+    paddingLeft: theme.spacing.unit * 4,
+    marginBottom: 20,
+    backgroundColor: theme.palette.background.default,
+  },
+});
+
+export default withStyles(styles, { withTheme: true })(UnivBlock);