Minor fixes and README written

pedsm · Mar 23, 2019 · f95bf37 · f95bf37
1 parent 88ac312
commit f95bf37
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 23 deletions.
diff --git a/.github/screenshot.png b/.github/screenshot.png
diff --git a/README.md b/README.md
@@ -1,2 +1,32 @@
 # safePostcode
 
+![Safe Postcode](.github/screenshot.png)
+
+Safe Postcode is a demonstration of an API integration designed by [@pedsm](https://github.com/pedsm) and [@jonathanballs](https://github.com/jonathanballs) with the intention of making teaching the concept of APIs to programming students.
+
+Safe postcode uses 2 publicaly avaliable APIs in order to fetch crimes reported around a certain area.
+
+1. [Postcodes.io](https://postcodes.io/) a postcode api for the UK
+2. [UK Police API](https://data.police.uk/) the UK police open api
+
+## How it works
+
+Safe postcode uses `postcodes.io` in order to fetch the latitude and longitude of a particular postcode
+
+``` bash
+http https://postcodes.io/postcodes/SW1A%201AA
+```
+
+Then uses the result to create a query to the UK police api
+
+```bash
+http https://data.police.uk/api/crimes-at-location\?lat\=51.501009\&lng\=-0.141588
+```
+
+This is an intresting way of teaching begginers about what APIs can do in a way that generates something relatable.
+
+## Built with
+
+- [React.js](https://reactjs.org/) - Frontend framework
+- [Next.js](https://nextjs.org/) - Server side rendering for React.js
+- [Zeit Now](https://zeit.co/now) - Serverless deployment service
diff --git a/components/stats.js b/components/stats.js
@@ -12,7 +12,7 @@ export default class Level extends React.Component {
                         } else if (crimes.length == 0) {
                             return (<>No records found for <strong>{postcode.toUpperCase()}</strong></>)
                         }
-                        return (<><strong>{crimes.length}</strong> records found for <strong>{postcode.toUpperCase()}</strong></>)
+                        return (<><strong>{crimes.length}</strong>&nbsp;records found for <strong>{postcode.toUpperCase()}</strong></>)
                     })()}
                 </p>
             </nav>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "safepostcode",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "index.js",
   "dependencies": {

diff --git a/pages/index.js b/pages/index.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import Crime from '../components/crime'
 import Stats from '../components/stats'
 import { fetchPostcodeInfo, fetchPoliceRecords } from '../utils/api'
@@ -18,7 +18,7 @@ class Home extends React.Component {
     static async getInitialProps({ query }) {
         const postcode = query.postcode || ""
         const postcodeDetails = await fetchPostcodeInfo(postcode)
-        if(postcodeDetails == null) {
+        if (postcodeDetails == null) {
             return { postcode, crimes: [] }
         }
         const { latitude, longitude } = postcodeDetails
@@ -45,25 +45,32 @@ class Home extends React.Component {
 
     render() {
         return (
-            <section className="section">
-                <div className="container">
-                    <h1 className="title">👮🏻‍♀Safe postcode</h1>
-                    <form action="/" method="GET">
-                        <input 
-                            name="postcode"
-                            style={{ marginBottom: 10 }}
-                            className="input"
-                            onChange={this.handleInput.bind(this)}
-                            placeholder="postcode" 
-                            value={this.state.postcode}
-                        />
-                    </form>
-                    <Stats crimes={this.state.crimes} postcode={this.state.postcode} />
-                    {this.state.crimes.map((crime, i) => (
-                        <Crime crime={crime} key={i} />
-                    ))}
-                </div>
-            </section>
+            <>
+                <section className="section">
+                    <div className="container">
+                        <h1 className="title">👮🏻‍♀Safe postcode</h1>
+                        <form action="/" method="GET">
+                            <input
+                                name="postcode"
+                                style={{ marginBottom: 10 }}
+                                className="input"
+                                onChange={this.handleInput.bind(this)}
+                                placeholder="postcode"
+                                value={this.state.postcode}
+                            />
+                        </form>
+                        <Stats crimes={this.state.crimes} postcode={this.state.postcode} />
+                        {this.state.crimes.map((crime, i) => (
+                            <Crime crime={crime} key={i} />
+                        ))}
+                    </div>
+                </section>
+                <footer style={{ boxShadow: "0 100vh 0 100vh #fafafa"}} class="footer">
+                    <div class="content has-text-centered">
+                        <a href="https://github.com/pedsm/safePostcode"><strong>Safe Postcode</strong></a>  built by <a href="https://github.com/pedsm">Pedro Mendonca</a> with <a href="https://nextjs.org/">Next.js</a>
+                    </div>
+                </footer>
+            </>
         )
     }
 }