feat: add duration to the lecture

this closes #246
codetapacademy · Sep 19, 2019 · 05589e8 · 05589e8
1 parent 8c9cbd3
commit 05589e8
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 21 deletions.
diff --git a/src/component/_dumb/dynamic-form/dynamic-form.component.jsx b/src/component/_dumb/dynamic-form/dynamic-form.component.jsx
@@ -37,24 +37,28 @@ const DynamicForm = ({ schema, data, dbItem }) => {
 
   const renderForm = () =>
     Object.keys(filedList).map(field => {
-      const { type, value, placeholder, label, visible } = filedList[field];
+      const { type, value, placeholder, label, visible, step } = filedList[field];
+      const textInputPropList = {
+        key: field,
+        id: field,
+        type,
+        formId,
+        label,
+        value,
+        onEvent,
+        placeholder,
+        step,
+      }
+
       if (visible) {
         switch (type) {
           case 'text':
+          case 'time':
           case 'date':
           case 'number':
           case 'datetime-local':
             return (
-              <TextInput
-                key={field}
-                id={field}
-                type={type}
-                formId={formId}
-                label={label}
-                value={value}
-                onEvent={onEvent}
-                placeholder={placeholder}
-              />
+              <TextInput {...textInputPropList} />
             );
           default:
             return null

diff --git a/src/component/_dumb/text-input/text-input.component.jsx b/src/component/_dumb/text-input/text-input.component.jsx
@@ -1,21 +1,26 @@
 import React from 'react';
 import { StyledTextInput, StyledTextLabel, StyledTextWrapper } from './text-input.style';
 
-const TextInput = ({ id, formId, value, onEvent, placeholder, label, type = 'text' }) => {
+const TextInput = ({ id, formId, value, onEvent, placeholder, label, type = 'text', step }) => {
   const handleOnChange = e => onEvent(e.target.value, id, 'change');
   const handleOnBlur = e => onEvent(e.target.value, id, 'blur');
+  const styledTextInputPropList = {
+    placeholder,
+    id: `${formId}--${id}`,
+    type,
+    value,
+    onChange: handleOnChange,
+    onBlur: handleOnBlur,
+  }
+
+  if (step) {
+    styledTextInputPropList.step = step
+  }
 
   return (
     <StyledTextWrapper>
       <StyledTextLabel htmlFor={`${formId}--${id}`}>{label}</StyledTextLabel>
-      <StyledTextInput
-        placeholder={placeholder}
-        id={`${formId}--${id}`}
-        type={type}
-        value={value}
-        onChange={handleOnChange}
-        onBlur={handleOnBlur}
-      />
+      <StyledTextInput {...styledTextInputPropList} />
     </StyledTextWrapper>
   );
 };

diff --git a/src/component/lecture/lecture.schema.js b/src/component/lecture/lecture.schema.js
@@ -37,6 +37,16 @@ export default {
       visible: true,
       value: false
     },
+    duration: {
+      type: 'time',
+      placeholder: 'How long is the lesson?',
+      label: 'Duration of video',
+      defaultValue: false,
+      edit: true,
+      visible: true,
+      value: false,
+      step: 1,
+    },
     levelRequired: {
       type: 'number',
       placeholder: 'Level required to view',
@@ -63,4 +73,4 @@ export default {
       value: ''
     }
   }
-};
+};