missing-person - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

dist/index.js

@@ -7,10 +7,35 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 var Button = _interopDefault(require('@material-ui/core/Button'));
+var styles = require('@material-ui/core/styles');
+var CssBaseline = _interopDefault(require('@material-ui/core/CssBaseline'));
 var Paper = _interopDefault(require('material-ui-core/Paper'));
 var Button$1 = _interopDefault(require('material-ui-core/Button'));
 
-var styles = {"header":"_1aDvk","cardContainer":"_2PVO1","wrapper":"_1I_qj","moreBtn":"_1CWDz","missingCard":"_2ku0N"};
+var theme = styles.createMuiTheme({
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 960,
+      lg: 1280,
+      xl: 1920
+    }
+  }
+});
 
-var styles$1 = {"wrapper":"_259pp","infoBtn":"_2kJmL"};
+var useStyles = styles.makeStyles({
+  wrapper: {
+    display: 'flexbox',
+    justifyItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    marginTop: '3rem',
+    paddingBottom: '3rem'
+  },
+  infoBtn: {
+    '': ''
+  }
+});
 
 function MissingPersonCard(props) {
+  var classes = useStyles();
   var _props$data = props.data,
@@ -37,3 +62,3 @@ date_reported = _props$data.date_reported,
   return /*#__PURE__*/React__default.createElement("div", {
-    className: styles$1.wrapper
+    className: classes.wrapper
   }, /*#__PURE__*/React__default.createElement("h1", null, "Please Help Find Me"), /*#__PURE__*/React__default.createElement("img", {
@@ -49,11 +74,61 @@ src: thumbnail_url,
   }, /*#__PURE__*/React__default.createElement("h3", null, "1-800-THE-LOST"))), /*#__PURE__*/React__default.createElement(Button$1, {
-    className: styles$1.infoBtn,
+    className: classes.infoBtn,
     href: link,
     color: "secondary",
-    variant: "outlined"
+    variant: "outlined",
+    style: {
+      backgroundColor: props.color,
+      color: props.btnTxtColor
+    }
   }, "More Information")));
 }
 
-function PageNotFound() {
-  var _useState = React.useState(Math.floor(Math.random() * 325 + 1)),
+var useStyles$1 = styles.makeStyles(function (theme) {
+  var _header, _cardContainer, _moreBtn;
+
+  return {
+    header: (_header = {
+      margin: '2em',
+      padding: '0.5em',
+      fontSize: '2em',
+      textAlign: 'center',
+      backgroundColor: '#A9A9A9',
+      color: 'white',
+      borderRadius: '10px',
+      maxWidth: '100%',
+      overflow: 'hidden'
+    }, _header[theme.breakpoints.down('sm')] = {
+      fontSize: '1rem'
+    }, _header),
+    cardContainer: (_cardContainer = {
+      display: 'grid',
+      gridTemplateColumns: '1fr 1fr'
+    }, _cardContainer[theme.breakpoints.down('sm')] = {
+      gridTemplateColumns: '1fr'
+    }, _cardContainer),
+    wrapper: {
+      textAlign: 'center'
+    },
+    moreBtn: (_moreBtn = {
+      position: 'sticky'
+    }, _moreBtn["position"] = '-webkit-sticky', _moreBtn.bottom = '3rem', _moreBtn.alignSelf = 'flex-end', _moreBtn.justifySelf = 'center', _moreBtn),
+    missingCard: {
+      display: 'flex',
+      justifyContent: 'center',
+      marginLeft: '3rem',
+      marginRight: '3rem',
+      marginBottom: '3rem',
+      flex: 1
+    }
+  };
+});
+
+function PageNotFound(_ref) {
+  var child = _ref.child,
+      color = _ref.color,
+      btnColor = _ref.btnColor,
+      btnTxtColor = _ref.btnTxtColor;
+  var classes = useStyles$1();
+
+  var _useState = React.useState(Math.floor(Math.random() * 40 + 1)),
       random = _useState[0];
@@ -69,2 +144,4 @@
 
+  var _useState4 = React.useState([]);
+
   React.useEffect(function () {
@@ -82,11 +159,25 @@ axios.get('https://missingpersonapi.herokuapp.com/missingperson/').then(function (res) {
 
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: styles.wrapper
+  var childData = [];
+  data.map(function (i) {
+    var age = parseInt(i.age_when_missing, 10);
+
+    if (age < 18) {
+      childData.push(i);
+    }
+  });
+  alert(childData.length);
+  return /*#__PURE__*/React__default.createElement(styles.ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React__default.createElement(CssBaseline, null), /*#__PURE__*/React__default.createElement("div", {
+    className: classes.wrapper
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: styles.header
+    className: classes.header,
+    style: {
+      backgroundColor: color
+    }
   }, /*#__PURE__*/React__default.createElement("h1", null, "MISSING PERSONS"), /*#__PURE__*/React__default.createElement("h4", null, "You have reached this page because the page you are looking for does not exist. Instead of giving you  the standard error page, we thought we would use this opportunity to show you some mising persons in the hope that you may have seen one. Every set of eyes helps bring them home!")), /*#__PURE__*/React__default.createElement("div", {
-    className: styles.cardContainer
-  }, data.slice(random, show).map(function (item) {
+    className: classes.cardContainer
+  }, child === 'true' ? childData.slice(random, show).map(function (item) {
     return /*#__PURE__*/React__default.createElement("div", {
-      className: styles.missingCard
+      className: classes.missingCard
     }, /*#__PURE__*/React__default.createElement(Paper, {
@@ -96,11 +187,28 @@ elevation: "20"
       key: item.id_number,
+      color: btnColor,
+      btnTxtColor: btnTxtColor,
       data: item
     })), " ");
+  }) : data.slice(random, show).map(function (item) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classes.missingCard
+    }, /*#__PURE__*/React__default.createElement(Paper, {
+      elevation: "20"
+    }, /*#__PURE__*/React__default.createElement(MissingPersonCard, {
+      key: item.id_number,
+      color: btnColor,
+      btnTxtColor: btnTxtColor,
+      data: item
+    })), " ");
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: styles.moreBtn
+    className: classes.moreBtn
   }, /*#__PURE__*/React__default.createElement(Button, {
     variant: "contained",
     onClick: handleClick,
-    color: "primary"
-  }, "Want to See More?")));
+    color: "primary",
+    style: {
+      backgroundColor: btnColor,
+      color: btnTxtColor
+    }
+  }, "Want to See More?"))));
 }
@@ -107,0 +215,0 @@

dist/index.modern.js

 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import Button$1 from '@material-ui/core/Button';
+import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
 import Paper from 'material-ui-core/Paper';
 import Button from 'material-ui-core/Button';
 
-var styles = {"header":"_1aDvk","cardContainer":"_2PVO1","wrapper":"_1I_qj","moreBtn":"_1CWDz","missingCard":"_2ku0N"};
+var theme = createMuiTheme({
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 960,
+      lg: 1280,
+      xl: 1920
+    }
+  }
+});
 
-var styles$1 = {"wrapper":"_259pp","infoBtn":"_2kJmL"};
+var useStyles = makeStyles({
+  wrapper: {
+    display: 'flexbox',
+    justifyItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    marginTop: '3rem',
+    paddingBottom: '3rem'
+  },
+  infoBtn: {
+    '': ''
+  }
+});
 
 function MissingPersonCard(props) {
+  var classes = useStyles();
   var _props$data = props.data,
@@ -33,3 +58,3 @@ date_reported = _props$data.date_reported,
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$1.wrapper
+    className: classes.wrapper
   }, /*#__PURE__*/React.createElement("h1", null, "Please Help Find Me"), /*#__PURE__*/React.createElement("img", {
@@ -45,11 +70,61 @@ src: thumbnail_url,
   }, /*#__PURE__*/React.createElement("h3", null, "1-800-THE-LOST"))), /*#__PURE__*/React.createElement(Button, {
-    className: styles$1.infoBtn,
+    className: classes.infoBtn,
     href: link,
     color: "secondary",
-    variant: "outlined"
+    variant: "outlined",
+    style: {
+      backgroundColor: props.color,
+      color: props.btnTxtColor
+    }
   }, "More Information")));
 }
 
-function PageNotFound() {
-  var _useState = useState(Math.floor(Math.random() * 325 + 1)),
+var useStyles$1 = makeStyles(function (theme) {
+  var _header, _cardContainer, _moreBtn;
+
+  return {
+    header: (_header = {
+      margin: '2em',
+      padding: '0.5em',
+      fontSize: '2em',
+      textAlign: 'center',
+      backgroundColor: '#A9A9A9',
+      color: 'white',
+      borderRadius: '10px',
+      maxWidth: '100%',
+      overflow: 'hidden'
+    }, _header[theme.breakpoints.down('sm')] = {
+      fontSize: '1rem'
+    }, _header),
+    cardContainer: (_cardContainer = {
+      display: 'grid',
+      gridTemplateColumns: '1fr 1fr'
+    }, _cardContainer[theme.breakpoints.down('sm')] = {
+      gridTemplateColumns: '1fr'
+    }, _cardContainer),
+    wrapper: {
+      textAlign: 'center'
+    },
+    moreBtn: (_moreBtn = {
+      position: 'sticky'
+    }, _moreBtn["position"] = '-webkit-sticky', _moreBtn.bottom = '3rem', _moreBtn.alignSelf = 'flex-end', _moreBtn.justifySelf = 'center', _moreBtn),
+    missingCard: {
+      display: 'flex',
+      justifyContent: 'center',
+      marginLeft: '3rem',
+      marginRight: '3rem',
+      marginBottom: '3rem',
+      flex: 1
+    }
+  };
+});
+
+function PageNotFound(_ref) {
+  var child = _ref.child,
+      color = _ref.color,
+      btnColor = _ref.btnColor,
+      btnTxtColor = _ref.btnTxtColor;
+  var classes = useStyles$1();
+
+  var _useState = useState(Math.floor(Math.random() * 40 + 1)),
       random = _useState[0];
@@ -65,2 +140,4 @@
 
+  var _useState4 = useState([]);
+
   useEffect(function () {
@@ -78,11 +155,25 @@ axios.get('https://missingpersonapi.herokuapp.com/missingperson/').then(function (res) {
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.wrapper
+  var childData = [];
+  data.map(function (i) {
+    var age = parseInt(i.age_when_missing, 10);
+
+    if (age < 18) {
+      childData.push(i);
+    }
+  });
+  alert(childData.length);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement(CssBaseline, null), /*#__PURE__*/React.createElement("div", {
+    className: classes.wrapper
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles.header
+    className: classes.header,
+    style: {
+      backgroundColor: color
+    }
   }, /*#__PURE__*/React.createElement("h1", null, "MISSING PERSONS"), /*#__PURE__*/React.createElement("h4", null, "You have reached this page because the page you are looking for does not exist. Instead of giving you  the standard error page, we thought we would use this opportunity to show you some mising persons in the hope that you may have seen one. Every set of eyes helps bring them home!")), /*#__PURE__*/React.createElement("div", {
-    className: styles.cardContainer
-  }, data.slice(random, show).map(function (item) {
+    className: classes.cardContainer
+  }, child === 'true' ? childData.slice(random, show).map(function (item) {
     return /*#__PURE__*/React.createElement("div", {
-      className: styles.missingCard
+      className: classes.missingCard
     }, /*#__PURE__*/React.createElement(Paper, {
@@ -92,11 +183,28 @@ elevation: "20"
       key: item.id_number,
+      color: btnColor,
+      btnTxtColor: btnTxtColor,
       data: item
     })), " ");
+  }) : data.slice(random, show).map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.missingCard
+    }, /*#__PURE__*/React.createElement(Paper, {
+      elevation: "20"
+    }, /*#__PURE__*/React.createElement(MissingPersonCard, {
+      key: item.id_number,
+      color: btnColor,
+      btnTxtColor: btnTxtColor,
+      data: item
+    })), " ");
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles.moreBtn
+    className: classes.moreBtn
   }, /*#__PURE__*/React.createElement(Button$1, {
     variant: "contained",
     onClick: handleClick,
-    color: "primary"
-  }, "Want to See More?")));
+    color: "primary",
+    style: {
+      backgroundColor: btnColor,
+      color: btnTxtColor
+    }
+  }, "Want to See More?"))));
 }
@@ -103,0 +211,0 @@

package.json

 {
   "name": "missing-person",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "A simple 404 page that displays missing persons data instead of the same ole 404",
+  "keywords": [
+    "404",
+    "page Not Found",
+    "Error Page",
+    "Error",
+    "React",
+    "Component",
+    "Missing Person",
+    "Missing Persons",
+    "Missing Children"
+  ],
   "author": "Too-Far",
@@ -6,0 +17,0 @@ "license": "MIT",

README.md

@@ -19,3 +19,2 @@ # missing-person-404
 import PageNotFound from 'missing-person'
-import 'missing-person/dist/index.css'
 
@@ -28,2 +27,15 @@ class Example extends Component {
 ```
+
+## Customizable features:
+  To change the background color of the header, buttons and button text:
+    ```jsx
+    <PageNotFound color='desired color value here' btnColor='purple' btnTxtColor='hot pink'>
+    ```
+  To change search parameters to return children under the age of 18:
+  ```jsx
+  <PageNotFound child='true'>
+  ```
+  **Note that you must pass true as a string**
+
+  The API will return 500 randomized records. The records are further randomized on the front end. 
 ## For any issues, or for feature requests please reach out to me:
@@ -30,0 +42,0 @@

No alert changes

Improved metrics

Total package byte prevSize

48341

increased by59.41%

Lines of code

460

increased by81.1%

Number of lines in readme file

48

increased by33.33%

No dependency changes