Merge pull request #626 from ResearchHub/AsOne/hubs_redesign

AsOne work trial - Hubs Page Redesign (Frontend)

.gitignore

@@ -19,8 +19,10 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+*.patch
 
 # Elastic Beanstalk Files
 .elasticbeanstalk/*
 !.elasticbeanstalk/*.cfg.yml
 !.elasticbeanstalk/*.global.yml
+

components/Form/FormInput.js

@@ -18,9 +18,13 @@ class FormInput extends React.Component {
   };
 
   handleChange = (e) => {
-    let id = e.target.id;
-    let value = e.target.value;
-    this.props.onChange && this.props.onChange(id, value);
+    const id = e.target.id;
+    if (e.target.files) {
+      this.props.onChange && this.props.onChange(id, e.target.files[0]);
+    } else {
+      const value = e.target.value;
+      this.props.onChange && this.props.onChange(id, value);
+    }
   };
 
   render() {

components/Form/FormSelect.js

@@ -156,6 +156,7 @@ class FormSelect extends React.Component {
 
 const styles = StyleSheet.create({
   inputContainer: {
+    minHeight: 75,
     width: "100%",
     display: "flex",
     flexDirection: "column",

components/Hubs/CategoryList.js

@@ -0,0 +1,151 @@
+import React, { Fragment } from "react";
+import { StyleSheet, css } from "aphrodite";
+import Link from "next/link";
+import { connect } from "react-redux";
+import Ripples from "react-ripples";
+import ReactPlaceholder from "react-placeholder/lib";
+import "react-placeholder/lib/reactPlaceholder.css";
+
+// Component
+import HubEntryPlaceholder from "../Placeholders/HubEntryPlaceholder";
+
+// Config
+import colors from "../../config/themes/colors";
+
+class CategoryList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      categories:
+        this.props.categories && this.props.categories.results
+          ? this.props.categories.results
+          : [],
+    };
+  }
+
+  renderCategoryEntry = () => {
+    let categories = this.props.categories;
+    return categories.map((category, i) => {
+      let { category_name } = category;
+      let slug = category_name.toLowerCase().replace(/\s/g, "-");
+      return (
+        <Ripples
+          className={css(styles.categoryEntry)}
+          key={`${category_name}-${i}`}
+        >
+          <Link
+            href={{
+              pathname: "/hubs#${slug}",
+            }}
+            as={`/hubs#${slug}`}
+          >
+            <a className={css(styles.categoryLink)}>{category_name}</a>
+          </Link>
+        </Ripples>
+      );
+    });
+  };
+
+  render() {
+    let { overrideStyle } = this.props;
+    return (
+      <div className={css(styles.container, overrideStyle && overrideStyle)}>
+        <div className={css(styles.categoryListContainer)}>
+          <div className={css(styles.listLabel)} id={"categoryListTitle"}>
+            Categories
+          </div>
+          <div className={css(styles.categoryList)}>
+            {this.props.categories.length > 0 ? (
+              this.renderCategoryEntry()
+            ) : (
+              <Fragment>
+                <ReactPlaceholder
+                  showLoadingAnimation
+                  ready={false}
+                  customPlaceholder={
+                    <HubEntryPlaceholder color="#efefef" rows={9} />
+                  }
+                />
+              </Fragment>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: "fixed",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    paddingTop: 50,
+    "@media only screen and (max-height: 800px)": {
+      display: "none",
+    },
+  },
+  categoryListContainer: {
+    height: "100%",
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    textAlign: "left",
+    cursor: "default",
+  },
+  listLabel: {
+    textTransform: "uppercase",
+    fontWeight: 500,
+    fontSize: 13,
+    letterSpacing: 1.2,
+    marginBottom: 15,
+    textAlign: "left",
+    color: "#a7a6b0",
+    transition: "all ease-out 0.1s",
+    width: "90%",
+    paddingLeft: 25,
+    boxSizing: "border-box",
+  },
+  categoryEntry: {
+    width: "100%",
+    maxWidth: 175,
+    fontSize: 16,
+    fontWeight: 300,
+    cursor: "pointer",
+    transition: "all ease-out 0.1s",
+    borderRadius: 3,
+    border: "1px solid #fff",
+    marginBottom: 8,
+    ":hover": {
+      borderColor: "rgb(237, 237, 237)",
+      backgroundColor: "#FAFAFA",
+    },
+  },
+  categoryLink: {
+    width: "100%",
+    textDecoration: "none",
+    color: "#111",
+    display: "flex",
+    alignItems: "center",
+    padding: "8px",
+  },
+  categoryList: {
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "flex-start",
+    alignItems: "flex-start",
+    padding: "0px 30px",
+  },
+});
+
+const mapStateToProps = (state) => ({
+  auth: state.auth,
+  categories: state.hubs.categories,
+});
+
+export default connect(mapStateToProps)(CategoryList);