add option to focus on input box

client/src/app.js

@@ -392,7 +392,7 @@ function App() {
       <InputBox id='id' name='id' value={boxID} readOnly={true} hidden={true} />
       <h1>Edit Box</h1>
       <fieldset>
-        <InputBox id='box-name' label='name' onChange={boxHandler.handleName} value={boxName} name='name' type='text' />
+        <InputBox focus={true} id='box-name' label='name' onChange={boxHandler.handleName} value={boxName} name='name' type='text' />
         <InputBox id='box-description' label='description' onChange={boxHandler.handleDescription} value={boxDescription} name='description' type='text' />
         {colorSelector}
       </fieldset>
@@ -402,7 +402,7 @@ function App() {
     <h1>Edit Item</h1>
     <fieldset>
       <InputBox id='id' name='id' value={itemID} readOnly={true} hidden={true} />
-      <InputBox id='item-name' label='name' onChange={itemHandler.handleName} value={itemName} name='name' type='text' />
+      <InputBox focus={true} id='item-name' label='name' onChange={itemHandler.handleName} value={itemName} name='name' type='text' />
       <InputBox id='item-description' label='description' onChange={itemHandler.handleDescription} value={itemDescription} name='description' type='text' />
       <InputBox id='item-quantity' label='quantity' onChange={itemHandler.handleQuantity} value={itemQuantity} name='quantity' type='text' />
     </fieldset>
@@ -410,6 +410,7 @@ function App() {
   const itemView = <div>
     <h1>{itemName}</h1>
     <h2>{itemDescription}</h2>
+    <h3>{itemQuantity}</h3>
   </div>
 
   return (

client/src/inputBox.js

@@ -1,11 +1,15 @@
-import React from 'react';
+import React, {useEffect, useRef} from 'react';
 import './styles/inputBox.css';
 
-const InputBox = ({ id, name, label, onChange, value, type, readOnly, hidden }) => {
+const InputBox = ({ id, name, label, onChange, value, type, readOnly, hidden, focus}) => {
+    const focusInput = useRef(null);
+    useEffect(()=>{
+        if(focus) focusInput.current.focus();
+     },[])
     return (
         <>
             <label className='input' htmlFor={id}>{label}</label>
-            <input className='input' readOnly={readOnly} hidden={hidden} autoFocus onChange={onChange} value={value} id={id} name={name} type={type} />
+            <input ref={focusInput} className='input' readOnly={readOnly} hidden={hidden} autoFocus onChange={onChange} value={value} id={id} name={name} type={type} />
         </>
     )
 }

server/server.js

@@ -8,8 +8,7 @@ app.use(cors(), express.json());
 
 const port = process.env.PORT || 5000;
 const MONGO_IP_ADDRESS = '192.168.100.102';
-
-mongoose.connect(`mongodb://${MONGO_IP_ADDRESS}/storage`, { useNewUrlParser: true });
+mongoose.connect('mongodb://root:exampleok@nas.local.net:27017/?authMechanism=DEFAULT', { useNewUrlParser: true });
 const db = mongoose.connection;
 
 db.on('error', console.error.bind(console, 'connection error:'));