Add more views

src/Routes.js

@@ -5,7 +5,7 @@ import * as V from './views';
 export const Routes = (props) => (
 	<Switch>
 		<Route exact path="/" component={V.HomeView} />
-		<Route path="/camera" component={V.CameraListView} />
+		<Route path="/camera" component={V.CameraAddView} />
 		<Route path="/film" component={V.FilmAddView} />
 		<Route component={V.OopsView} />
 	</Switch>

src/views/Camera/CameraAddView.js

@@ -0,0 +1,91 @@
+import { linkEvent, Component } from 'inferno';
+
+import {
+	Button,
+	Card,
+	CardBody,
+	CardHeader,
+	CardFooter,
+	CardTitle,
+	Col,
+	Form,
+	Row,
+} from '../../components/Bootstrap';
+
+import { FormBlock } from '../../components/Form';
+
+export class CameraAddView extends Component {
+	constructor (props) {
+		super(props);
+
+		this.state = {
+			form: {
+				valid: {},
+				values: {},
+			},
+		};
+	}
+
+	handleFormChange (instance, e) {
+		instance.setState({
+			form: {
+				...instance.state.form,
+				values: {
+					...instance.state.form.values,
+					[e.target.id]: e.target.value,
+				},
+			},
+		});
+	}
+
+	render () {
+		return (
+			<Row className="full-height">
+				<Col sm={12} md={8} lg={4} className="abs-center">
+					<Form onKeyDown={ linkEvent(this, this.handleFormChange) }>
+						<Card>
+							<CardHeader>
+								<CardTitle>Add a Camera</CardTitle>
+							</CardHeader>
+							<CardBody>
+								<Row className="align-items-baseline">
+									<FormBlock
+										label="Brand"
+										name="brand"
+										required
+										value={this.state.form.values['brand']}
+									/>
+									<FormBlock
+										label="Model"
+										name="model"
+										required
+										value={this.state.form.values['model']}
+									/>
+									<FormBlock
+										label="Film Format"
+										name="film-format"
+										value={this.state.form.values['film-format']}
+									>
+										<select className="custom-select" id="film-format" name="film-format">
+											<option value="110">110</option>
+											<option value="120">120</option>
+											<option value="127">127</option>
+											<option value="135">135</option>
+										</select>
+									</FormBlock>
+								</Row>
+							</CardBody>
+							<CardFooter>
+								<Row>
+									<Col xs={12}>
+										<Button color="primary" type="submit">Save</Button>
+									</Col>
+								</Row>
+							</CardFooter>
+						</Card>
+					</Form>
+				</Col>
+			</Row>
+		);
+	}
+}

src/views/Camera/index.js

@@ -1 +1,2 @@
+export * from './CameraAddView';
 export * from './CameraListView';

src/views/Lenses/LensesListView.js

@@ -0,0 +1,3 @@
+export const LensesListView = () => {
+	return <div />
+};

src/views/Lenses/index.js

@@ -0,0 +1 @@
+export * from './LensesListView';