feature/use context exports (#71)

* Move context into a separate folder, add PageContext

* utilized exported useAdmin and usePage

* Move all components into separate folder

* lint

* Revert "Move all components into separate folder"

This reverts commit f1027f0.

* Move Contexts to root

app/src/Gravatar.js

@@ -1,15 +1,13 @@
 import { Avatar } from "@material-ui/core";
-import { AdminContext } from "django-bananas";
+import { useAdmin } from "django-bananas";
 import gravatar from "gravatar";
 import React from "react";
 
-const Gravatar = ({ props }) => (
-  <AdminContext.Consumer>
-    {context => {
-      const url = gravatar.url(context.user.email);
-      return <Avatar src={url} {...props} />;
-    }}
-  </AdminContext.Consumer>
-);
+const Gravatar = ({ props }) => {
+  const { user } = useAdmin();
+  const url = gravatar.url(user.email);
+
+  return <Avatar src={url} {...props} />;
+};
 
 export default Gravatar;

app/src/components/GenericTitleBar.js

@@ -0,0 +1,9 @@
+import { TitleBar, usePage } from "django-bananas";
+import React from "react";
+
+const GenericTitleBar = props => {
+  const { title } = usePage();
+  return <TitleBar title={title} back={".."} {...props} />;
+};
+
+export default GenericTitleBar;

app/src/pages/example/user/create.js

@@ -1,38 +1,39 @@
-import { Box, Button, Tooltip, Typography } from "@material-ui/core";
-import { withStyles } from "@material-ui/core/styles";
 import {
-  AdminContext,
-  Content,
-  TitleBar,
-  ToolBar,
-  Tools,
-} from "django-bananas";
+  Box,
+  Button,
+  createStyles,
+  makeStyles,
+  Tooltip,
+  Typography,
+} from "@material-ui/core";
+import { Content, TitleBar, ToolBar, Tools } from "django-bananas";
 import { Form } from "django-bananas/forms";
-import PropTypes from "prop-types";
 import React from "react";
 
 import PermissionRequired from "../../../../../src/auth/PermissionRequired";
 import AutoField from "../../../components/CustomAutoField";
 
-const styles = theme => ({
-  paper: {
-    margin: theme.spacing(2),
-    padding: theme.spacing(2),
-  },
-  formRoot: {
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: 1,
-    width: "100%",
-    height: "100%",
-    backgroundColor: theme.palette.background.paper,
-  },
-  spacing: {
-    "& > *": {
-      marginTop: 20,
+const useStyles = makeStyles(
+  createStyles(theme => ({
+    paper: {
+      margin: theme.spacing(2),
+      padding: theme.spacing(2),
     },
-  },
-});
+    formRoot: {
+      display: "flex",
+      flexDirection: "column",
+      flexGrow: 1,
+      width: "100%",
+      height: "100%",
+      backgroundColor: theme.palette.background.paper,
+    },
+    spacing: {
+      "& > *": {
+        marginTop: 20,
+      },
+    },
+  }))
+);
 
 const RawInput = ({ input, fieldProps: { label, helperText, ...rest } }) => (
   <label>
@@ -43,62 +44,54 @@ const RawInput = ({ input, fieldProps: { label, helperText, ...rest } }) => (
   </label>
 );
 
-class UserForm extends React.Component {
-  static contextType = AdminContext;
+const UserCreate = () => {
+  const classes = useStyles();
 
-  render() {
-    const { classes } = this.props;
-
-    return (
-      <Form
-        initialValues={{}}
-        route="example.user:create"
-        formProps={{ className: classes.formRoot }}
-      >
-        <TitleBar title="Form" back=".." />
-        <Content>
-          <Typography variant="h4" component="h1">
-            Create
-          </Typography>
-          <Typography gutterBottom variant="body1">
-            This page utilizes a custom AutoField component
+  return (
+    <Form
+      initialValues={{}}
+      route="example.user:create"
+      formProps={{ className: classes.formRoot }}
+    >
+      <TitleBar title="Form" back=".." />
+      <Content>
+        <Typography variant="h4" component="h1">
+          Create
+        </Typography>
+        <Typography gutterBottom variant="body1">
+          This page utilizes a custom AutoField component
+        </Typography>
+        <Box className={classes.spacing}>
+          <AutoField name="username" />
+          <AutoField name="first_name" />
+          <AutoField name="last_name" />
+          <Typography>
+            ... And a raw input utilizing the FieldComponent prop to supply a
+            custom component:
           </Typography>
-          <Box className={classes.spacing}>
-            <AutoField name="username" />
-            <AutoField name="first_name" />
-            <AutoField name="last_name" />
-            <Typography>
-              ... And a raw input utilizing the FieldComponent prop to supply a
-              custom component:
-            </Typography>
-            <AutoField name="email" FieldComponent={RawInput} />
-          </Box>
-        </Content>
-        <ToolBar color="paper" justify="end">
-          <Tools>
-            <Button type="submit" variant="contained" color="primary">
-              Save
-            </Button>
-            <PermissionRequired permission={"auth.delete_user"}>
-              <Tooltip
-                title={
-                  "only visible if you have the permission 'auth.delete_user'"
-                }
-              >
-                <Button type="submit" variant="contained" color="secondary">
-                  Special save
-                </Button>
-              </Tooltip>
-            </PermissionRequired>
-          </Tools>
-        </ToolBar>
-      </Form>
-    );
-  }
-}
-
-UserForm.propTypes = {
-  classes: PropTypes.object.isRequired,
+          <AutoField name="email" FieldComponent={RawInput} />
+        </Box>
+      </Content>
+      <ToolBar color="paper" justify="end">
+        <Tools>
+          <Button type="submit" variant="contained" color="primary">
+            Save
+          </Button>
+          <PermissionRequired permission={"auth.delete_user"}>
+            <Tooltip
+              title={
+                "only visible if you have the permission 'auth.delete_user'"
+              }
+            >
+              <Button type="submit" variant="contained" color="secondary">
+                Special save
+              </Button>
+            </Tooltip>
+          </PermissionRequired>
+        </Tools>
+      </ToolBar>
+    </Form>
+  );
 };
 
-export default withStyles(styles)(UserForm);
+export default UserCreate;

app/src/pages/example/user/form.read.js

@@ -1,79 +1,66 @@
 import { Button } from "@material-ui/core";
-import { withStyles } from "@material-ui/core/styles";
-import {
-  AdminContext,
-  Content,
-  TitleBar,
-  ToolBar,
-  Tools,
-} from "django-bananas";
+import { createStyles, makeStyles } from "@material-ui/core/styles";
+import { Content, TitleBar, ToolBar, Tools } from "django-bananas";
 import { AutoField, Form } from "django-bananas/forms";
 import PropTypes from "prop-types";
 import React from "react";
 
-const styles = theme => ({
-  paper: {
-    margin: theme.spacing(2),
-    padding: theme.spacing(2),
-  },
-  formRoot: {
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: 1,
-    width: "100%",
-    height: "100%",
-    backgroundColor: theme.palette.background.paper,
-  },
-});
+const useStyles = makeStyles(
+  createStyles(theme => ({
+    paper: {
+      margin: theme.spacing(2),
+      padding: theme.spacing(2),
+    },
+    formRoot: {
+      display: "flex",
+      flexDirection: "column",
+      flexGrow: 1,
+      width: "100%",
+      height: "100%",
+      backgroundColor: theme.palette.background.paper,
+    },
+  }))
+);
 
-class UserForm extends React.Component {
-  static contextType = AdminContext;
-
-  render() {
-    const {
-      classes,
-      data: { obj: data },
-    } = this.props;
-
-    return (
-      <Form
-        initialValues={data}
-        route="example.user:form.create"
-        formProps={{ className: classes.formRoot }}
-      >
-        <TitleBar title="Form" back=".." />
-        <Content>
-          <AutoField name="text" />
-          <br />
-          <AutoField name="date" />
-          <br />
-          <AutoField name="datetime" />
-          <br />
-          <AutoField name="boolean" variant="checkbox" />
-          <br />
-          <AutoField name="boolean" variant="switch" />
-          <br />
-          <AutoField name="integer" />
-          <br />
-          <AutoField name="choices" />
-          <br />
-          <AutoField name="multiple_choices" />
-        </Content>
-        <ToolBar color="paper" justify="end">
-          <Tools>
-            <Button type="submit" variant="contained" color="primary">
-              Save
-            </Button>
-          </Tools>
-        </ToolBar>
-      </Form>
-    );
-  }
-}
+const UserForm = ({ data: { obj: data } }) => {
+  const classes = useStyles();
+  return (
+    <Form
+      initialValues={data}
+      route="example.user:form.create"
+      formProps={{ className: classes.formRoot }}
+    >
+      <TitleBar title="Form" back=".." />
+      <Content>
+        <AutoField name="text" />
+        <br />
+        <AutoField name="date" />
+        <br />
+        <AutoField name="datetime" />
+        <br />
+        <AutoField name="boolean" variant="checkbox" />
+        <br />
+        <AutoField name="boolean" variant="switch" />
+        <br />
+        <AutoField name="integer" />
+        <br />
+        <AutoField name="choices" />
+        <br />
+        <AutoField name="multiple_choices" />
+      </Content>
+      <ToolBar color="paper" justify="end">
+        <Tools>
+          <Button type="submit" variant="contained" color="primary">
+            Save
+          </Button>
+        </Tools>
+      </ToolBar>
+    </Form>
+  );
+};
 
 UserForm.propTypes = {
-  classes: PropTypes.object.isRequired,
   data: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(UserForm);
+export default UserForm;