Update some forms

src/App.js

@@ -33,6 +33,9 @@ export class App extends Component {
 							<NavItem>
 								<NavLink className="nav-link" to="/camera/list">Cameras</NavLink>
 							</NavItem>
+							<NavItem>
+								<NavLink className="nav-link" to="/lenses/add">Lenses</NavLink>
+							</NavItem>
 							<NavItem>
 								<NavLink className="nav-link" to="/film/add">Films</NavLink>
 							</NavItem>

src/Routes.js

@@ -6,6 +6,7 @@ import {
 	HomeView,
 	OopsView,
 } from '//views';
+import {LensesAddView} from './views/Lenses/LensesAddView';
 
 export const Routes = () => (
 	<Switch>
@@ -13,6 +14,7 @@ export const Routes = () => (
 		<Route exact path="/home" component={HomeView} />
 		<Route path="/camera" component={CameraAddView} />
 		<Route path="/film" component={FilmAddView} />
+		<Route path="/lenses" component={LensesAddView} />
 		<Route component={OopsView} />
 	</Switch>
 );

src/views/Camera/CameraAddView.js

@@ -6,7 +6,6 @@ import {
 	CardFooter,
 	CardTitle,
 	Col,
-	Form,
 	Row,
 } from '//components/Bootstrap';
 import { DOMForm } from '//components';
@@ -64,6 +63,11 @@ export function CameraAddView (props) {
 									name="model"
 									required
 								/>
+								<FormBlock
+									label="Lens Mount"
+									name="mount"
+									required
+								/>
 								<FormBlock
 									label="Serial"
 									name="serial"
@@ -79,11 +83,16 @@ export function CameraAddView (props) {
 										name="film-format"
 									>
 										<option value="">&nbsp;</option>
+										<optgroup label="Miniature Format">
 											<option value="110">110</option>
+											<option value="135">35mm (135)</option>
+										</optgroup>
+										<optgroup label="Medium Format">
 											<option value="120">120</option>
 											<option value="127">127</option>
-										<option value="135">135</option>
 											<option value="220">220</option>
+											<option value="620">620</option>
+										</optgroup>
 									</select>
 								</FormBlock>
 							</Row>

src/views/Film/FilmAddView.js

@@ -1,5 +1,3 @@
-import { linkEvent, Component } from 'inferno';
-
 import {
 	Button,
 	Card,
@@ -8,11 +6,11 @@ import {
 	CardFooter,
 	CardTitle,
 	Col,
-	Form,
 	Row,
 } from '//components/Bootstrap';
 
 import { FormBlock } from '//components/Form';
+import { DOMForm } from '//components';
 
 /*
  * Fields from AnalogExif
@@ -24,35 +22,27 @@ import { FormBlock } from '//components/Form';
  * ISO Rating
  */
 
-export class FilmAddView extends Component {
+function logFormData (formData) {
-	constructor (props) {
+	const data = {};
-		super(props);
+	formData.forEach((value, key) => {
-
+		data[key] = value;
-		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,
-				},
-			},
 	});
-	}
+	console.log(data);
+}
 
-	render () {
+function handleFormChange (formData) {
+	// logFormData(formData);
+}
+
+function handleSave (formData) {
+	logFormData(formData);
+}
+
+export function FilmAddView () {
 	return (
 		<Row className="full-height">
 			<Col sm={12} md={8} lg={4} className="abs-center">
-					<Form onKeyDown={ linkEvent(this, this.handleFormChange) }>
+				<DOMForm onChange={handleFormChange} onSubmit={handleSave}>
 					<Card>
 						<CardHeader>
 							<CardTitle>Add a Film</CardTitle>
@@ -63,38 +53,45 @@ export class FilmAddView extends Component {
 									label="Brand"
 									name="brand"
 									required
-										value={this.state.form.values['brand']}
 								/>
 								<FormBlock
 									label="Film Name"
 									name="film-name"
 									required
-										value={this.state.form.values['film-name']}
 								/>
 								<FormBlock
-										label="Film Speed (ISO)"
+									label="Film Speed (ASA/ISO)"
 									max="6400"
+									min="1"
 									name="film-speed-asa"
 									required
 									type="number"
-										value={this.state.form.values['film-speed-asa']}
 								/>
 								<FormBlock
 									label="Film Speed (DIN)"
 									name="film-speed-din"
 									type="number"
-										value={this.state.form.values['film-speed-din']}
 								/>
 								<FormBlock
 									label="Film Format"
 									name="film-format"
-										value={this.state.form.values['film-format']}
 								>
-										<select className="custom-select" id="film-format" name="film-format">
+									<select
+										className="custom-select"
+										id="film-format"
+										name="film-format"
+									>
+										<option value="">&nbsp;</option>
+										<optgroup label="Miniature Format">
 											<option value="110">110</option>
+											<option value="135">35mm (135)</option>
+										</optgroup>
+										<optgroup label="Medium Format">
 											<option value="120">120</option>
 											<option value="127">127</option>
-											<option value="135">135</option>
+											<option value="220">220</option>
+											<option value="620">620</option>
+										</optgroup>
 									</select>
 								</FormBlock>
 							</Row>
@@ -107,9 +104,9 @@ export class FilmAddView extends Component {
 							</Row>
 						</CardFooter>
 					</Card>
-					</Form>
+				</DOMForm>
 			</Col>
 		</Row>
 	);
-	}
+};
-}
+

src/views/Lenses/LensesAddView.js

@@ -1,3 +1,16 @@
+import {
+	Button,
+	Card,
+	CardBody,
+	CardHeader,
+	CardFooter,
+	CardTitle,
+	Col,
+	Row,
+} from '//components/Bootstrap';
+
+import {FormBlock} from '//components/Form';
+import {DOMForm} from '//components';
 /*
  * Fields from AnalogExif
  *
@@ -7,9 +20,71 @@
  * Maximum Aperture
  */
 
-export const LensesAddView = () => {
+function logFormData (formData) {
-	return (
+	const data = {};
-		<div />
+	formData.forEach((value, key) => {
-	);
+		data[key] = value;
-};
+	});
+	console.log(data);
+}
 
+function handleFormChange (formData) {
+	// logFormData(formData);
+}
+
+function handleSave (formData) {
+	logFormData(formData);
+}
+
+export function LensesAddView () {
+	return (
+		<Row className="full-height">
+			<Col sm={12} md={8} lg={4} className="abs-center">
+				<DOMForm onChange={handleFormChange} onSubmit={handleSave}>
+					<Card>
+						<CardHeader>
+							<CardTitle>Add a Lens</CardTitle>
+						</CardHeader>
+						<CardBody>
+							<Row className="align-items-baseline">
+								<FormBlock
+									label="Brand"
+									name="brand"
+									required
+								/>
+								<FormBlock
+									label="Model"
+									name="model"
+									required
+								/>
+								<FormBlock
+									label="Lens Mount"
+									name="mount"
+									required
+								/>
+								<FormBlock
+									label="Serial"
+									name="serial"
+									required
+								/>
+								<FormBlock
+									label="Maximum Aperture"
+									name="max-aperture"
+									type="number"
+									required
+								/>
+							</Row>
+						</CardBody>
+						<CardFooter>
+							<Row>
+								<Col xs={12}>
+									<Button color="primary" type="submit">Save</Button>
+								</Col>
+							</Row>
+						</CardFooter>
+					</Card>
+				</DOMForm>
+			</Col>
+		</Row>
+	);
+}