added prop-types for more safety with components (#9)

Author: dholms

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@material-ui/core": "^4.3.2",
     "@material-ui/icons": "^4.2.1",
+    "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-scripts": "3.1.1",

src/components/ErrorSnackbar.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { withStyles, createStyles } from "@material-ui/core/styles";
 import Snackbar from "@material-ui/core/Snackbar";
 import SnackbarContent from "@material-ui/core/SnackbarContent";
@@ -19,26 +20,30 @@ const ErrorSnackbar = props => {
       autoHideDuration={5000}
       className={classes.snackbar}
     >
-      {props.error && (
-        <SnackbarContent
-          className={classes.content}
-          message={
-            <span className={classes.message}>
-              <ErrorIcon className={classes.errorIcon} />
-              {props.error.toString()}
-            </span>
-          }
-          action={[
-            <IconButton key="close" color="inherit" onClick={props.onClose}>
-              <CloseIcon className={classes.closeIcon} />
-            </IconButton>
-          ]}
-        />
-      )}
+      <SnackbarContent
+        className={classes.content}
+        message={
+          <span className={classes.message}>
+            <ErrorIcon className={classes.errorIcon} />
+            {props.error}
+          </span>
+        }
+        action={[
+          <IconButton key="close" color="inherit" onClick={props.onClose}>
+            <CloseIcon className={classes.closeIcon} />
+          </IconButton>
+        ]}
+      />
     </Snackbar>
   );
 };
 
+ErrorSnackbar.propTypes = {
+  error: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+  classes: PropTypes.objectOf(PropTypes.string)
+};
+
 const styles = theme =>
   createStyles({
     snackbar: {

src/components/Main.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { withStyles, createStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";
 import Grid from "@material-ui/core/Grid";
@@ -14,10 +15,8 @@ class Main extends React.Component {
   state = {
     cid: "",
     preferences: {
-      one: "",
-      two: "",
-      three: "",
-      codeStyle: "docco"
+      username: "",
+      codeStyle: "darcula"
     },
     justSaved: false,
     justLoaded: false,
@@ -53,7 +52,7 @@ class Main extends React.Component {
     try {
       preferences = await loadPreferences(cid);
     } catch (error) {
-      this.setState({ error });
+      this.setState({ error: error.toString() });
       return;
     }
     this.setState({
@@ -77,7 +76,7 @@ class Main extends React.Component {
       try {
         cid = await savePreferences(preferences);
       } catch (error) {
-        this.setState({ error });
+        this.setState({ error: error.toString() });
         return;
       }
       localStorage.setItem("preferenceCID", cid);
@@ -137,6 +136,10 @@ class Main extends React.Component {
   }
 }
 
+Main.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string).isRequired
+};
+
 const styles = theme =>
   createStyles({
     container: {

src/components/PreferenceForm.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { withStyles, createStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import TextField from "@material-ui/core/TextField";
@@ -9,6 +10,8 @@ import Divider from "@material-ui/core/Divider";
 import LoadIcon from "@material-ui/icons/Unarchive";
 import SaveIcon from "@material-ui/icons/Save";
 import SubmitButton from "./SubmitButton";
+import styleOptions from "../utils/styleOptions";
+import PrefPropType from "../utils/prefPropType";
 
 class PreferenceForm extends React.Component {
   handleCIDChange = evt => {
@@ -46,23 +49,9 @@ class PreferenceForm extends React.Component {
         <Divider className={classes.divider} />
         <form onSubmit={this.props.onSave}>
           <TextField
-            label="one"
-            value={preferences.one}
-            onChange={this.handlePrefChange("one")}
-            fullWidth
-            className={classes.input}
-          />
-          <TextField
-            label="two"
-            value={preferences.two}
-            onChange={this.handlePrefChange("two")}
-            fullWidth
-            className={classes.input}
-          />
-          <TextField
-            label="three"
-            value={preferences.three}
-            onChange={this.handlePrefChange("three")}
+            label="username"
+            value={preferences.username}
+            onChange={this.handlePrefChange("username")}
             fullWidth
             className={classes.input}
           />
@@ -91,22 +80,17 @@ class PreferenceForm extends React.Component {
   }
 }
 
-const styleOptions = [
-  "arduinoLight",
-  "codepenEmbed",
-  "darcula",
-  "docco",
-  "github",
-  "googlecode",
-  "hybrid",
-  "monokaiSublime",
-  "nord",
-  "ocean",
-  "pojoaque",
-  "tomorrow",
-  "tomorrowNight",
-  "vs"
-];
+PreferenceForm.propTypes = {
+  cid: PropTypes.string.isRequired,
+  preferences: PrefPropType.isRequired,
+  justSaved: PropTypes.bool.isRequired,
+  justLoaded: PropTypes.bool.isRequired,
+  onCIDChange: PropTypes.func.isRequired,
+  onPrefChange: PropTypes.func.isRequired,
+  onLoad: PropTypes.func.isRequired,
+  onSave: PropTypes.func.isRequired,
+  classes: PropTypes.objectOf(PropTypes.string)
+};
 
 const styles = theme =>
   createStyles({

src/components/Preview.js

@@ -1,9 +1,12 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { withStyles, createStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
 import js from "react-syntax-highlighter/dist/esm/languages/hljs/javascript";
 import * as codeStyles from "react-syntax-highlighter/dist/esm/styles/hljs";
+import codeSample from "../utils/codeSample";
+import PrefPropType from "../utils/prefPropType";
 SyntaxHighlighter.registerLanguage("javascript", js);
 
 class Preview extends React.Component {
@@ -14,9 +17,7 @@ class Preview extends React.Component {
         <Typography variant="h5" className={classes.header}>
           Preview
         </Typography>
-        <div>One: {preferences.one}</div>
-        <div>Two: {preferences.two}</div>
-        <div>Three: {preferences.three}</div>
+        <div>One: {preferences.username}</div>
         <SyntaxHighlighter
           language="javascript"
           style={codeStyles[preferences.codeStyle]}
@@ -28,20 +29,10 @@ class Preview extends React.Component {
   }
 }
 
-const codeSample = `
-export const ipfsIsWorking = async ipfs => {
-  try {
-    const id = await ipfs.id();
-    if (id.id !== undefined && id.agentVersion !== undefined) {
-      return true;
-    } else {
-      return false;
-    }
-  } catch (err) {
-    return false;
-  }
+Preview.propTypes = {
+  preferences: PrefPropType,
+  classes: PropTypes.objectOf(PropTypes.string)
 };
-`;
 
 const styles = theme =>
   createStyles({

src/components/SubmitButton.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { withStyles, createStyles } from "@material-ui/core/styles";
 import Button from "@material-ui/core/Button";
 import CheckIcon from "@material-ui/icons/Check";
@@ -22,6 +23,13 @@ const SubmitButton = props => {
   );
 };
 
+SubmitButton.propTypes = {
+  textNormal: PropTypes.string.isRequired,
+  textSubmitted: PropTypes.string.isRequired,
+  icon: PropTypes.element,
+  submitted: PropTypes.bool
+};
+
 const styles = theme =>
   createStyles({
     button: {

src/utils/codeSample.js

@@ -0,0 +1,14 @@
+export default `
+export const ipfsIsWorking = async ipfs => {
+  try {
+    const id = await ipfs.id();
+    if (id.id !== undefined && id.agentVersion !== undefined) {
+      return true;
+    } else {
+      return false;
+    }
+  } catch (err) {
+    return false;
+  }
+};
+`;

src/utils/prefPropType.js

@@ -0,0 +1,6 @@
+import PropTypes from "prop-types";
+
+export default PropTypes.shape({
+  username: PropTypes.string,
+  codeStyle: PropTypes.string
+});

src/utils/styleOptions.js

@@ -0,0 +1,16 @@
+export default [
+  "arduinoLight",
+  "codepenEmbed",
+  "darcula",
+  "docco",
+  "github",
+  "googlecode",
+  "hybrid",
+  "monokaiSublime",
+  "nord",
+  "ocean",
+  "pojoaque",
+  "tomorrow",
+  "tomorrowNight",
+  "vs"
+];