feat: use simpler context consumers

src/About/About.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Card, CardBody, CardHeader } from 'reactstrap'
 import { Cache } from 'aws-amplify'
-import { IdentityIdContext } from '../App'
+import { IdentityIdConsumer } from '../App'
 
 export const About = () => (
 	<Card>
@@ -10,9 +10,9 @@ export const About = () => (
 			<dl>
 				<dt>User</dt>
 				<dd>
-					<IdentityIdContext.Consumer>
+					<IdentityIdConsumer>
 						{identityId => identityId}
-					</IdentityIdContext.Consumer>
+					</IdentityIdConsumer>
 				</dd>
 			</dl>
 			<hr />

src/AccelerometerDiagram/AccelerometerDiagram.scss

@@ -0,0 +1,4 @@
+div.historicalDataChart {
+  width: 100%;
+  height: 250px;
+}

src/App.tsx

@@ -46,8 +46,9 @@ Amplify.configure({
 	},
 })
 
-export const IdentityIdContext = React.createContext<string>('unauthorized')
-export const CredentialsContext = React.createContext<{
+const IdentityIdContext = React.createContext<string>('unauthorized')
+export const IdentityIdConsumer = IdentityIdContext.Consumer
+const CredentialsContext = React.createContext<{
 	accessKeyId: string
 	sessionToken: string
 	secretAccessKey: string
@@ -56,12 +57,14 @@ export const CredentialsContext = React.createContext<{
 	sessionToken: '',
 	secretAccessKey: '',
 })
-export const IotContext = React.createContext<{ iot: Iot; iotData: IotData }>({
+export const CredentialsConsumer = CredentialsContext.Consumer
+const IotContext = React.createContext<{ iot: Iot; iotData: IotData }>({
 	iot: new Iot(),
 	iotData: new IotData({
 		endpoint: process.env.REACT_APP_MQTT_ENDPOINT,
 	}),
 })
+export const IotConsumer = IotContext.Consumer
 
 const Navigation = (props: {
 	navbar?: boolean

src/Cat/Cat.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { IdentityIdContext, IotContext, CredentialsContext } from '../App'
+import { IdentityIdConsumer, IotConsumer, CredentialsConsumer } from '../App'
 import { Card, CardHeader, CardBody } from 'reactstrap'
 import { Iot, IotData, S3 } from 'aws-sdk'
 import { Loading } from '../Loading/Loading'
@@ -358,9 +358,9 @@ export const Cat = ({ catId }: { catId: string }) => (
 								/>
 							)
 						}}
-					</IotContext.Consumer>
+					</IotConsumer>
 				)}
-			</IdentityIdContext.Consumer>
+			</IdentityIdConsumer>
 		)}
-	</CredentialsContext.Consumer>
+	</CredentialsConsumer>
 )

src/Cats/List.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { IotContext } from '../App'
+import { IotConsumer } from '../App'
 import { Table, Card, CardHeader, CardBody } from 'reactstrap'
 import { Iot } from 'aws-sdk'
 import { Loading } from '../Loading/Loading'
@@ -64,7 +64,7 @@ const ListCats = ({ iot }: { iot: Iot }) => {
 }
 
 export const List = () => (
-	<IotContext.Consumer>
+	<IotConsumer>
 		{({ iot }) => <ListCats iot={iot} />}
-	</IotContext.Consumer>
+	</IotConsumer>
 )