From 2094eeb48c0aae8ec003bf2c99677d15994f98b8 Mon Sep 17 00:00:00 2001
From: RickyMed <ricardo.med.gonzalez@gmail.com>
Date: Thu, 18 Jul 2019 23:31:51 -0700
Subject: [PATCH] Image Caption Feature Added

---
 src/models/howto.models.tsx                                  | 2 ++
 src/pages/Howto/Content/CreateHowto/CreateHowto.tsx          | 5 +++++
 src/pages/Howto/Content/CreateHowto/Step/Step.tsx            | 5 +++++
 .../Content/Howto/HowtoDescription/HowtoDescription.tsx      | 5 ++++-
 src/pages/Howto/Content/Howto/Step/Step.tsx                  | 1 +
 5 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/models/howto.models.tsx b/src/models/howto.models.tsx
index af3801ecde..4db8cf36be 100644
--- a/src/models/howto.models.tsx
+++ b/src/models/howto.models.tsx
@@ -17,6 +17,7 @@ export interface IHowtoStep extends IHowToStepFormInput {
   images: IUploadedFileMeta[]
   title: string
   text: string
+  caption?: string
   _animationKey?: string
 }
 
@@ -39,4 +40,5 @@ export interface IHowtoFormInput {
   slug: string
   // note, tags will remain optional as if populated {} will be stripped by db (firestore)
   tags?: ISelectedTags
+  caption?: string
 }
diff --git a/src/pages/Howto/Content/CreateHowto/CreateHowto.tsx b/src/pages/Howto/Content/CreateHowto/CreateHowto.tsx
index 617852f76e..ba17177344 100644
--- a/src/pages/Howto/Content/CreateHowto/CreateHowto.tsx
+++ b/src/pages/Howto/Content/CreateHowto/CreateHowto.tsx
@@ -191,6 +191,11 @@ export class CreateHowto extends React.Component<IProps, IState> {
                           validateFields={[]}
                           component={ImageInputField}
                         />
+                        <Field
+                          name="caption"
+                          component={InputField}
+                          placeholder="Insert Caption"
+                        />
                         <Field name="files" component={FileInputField} />
                       </BoxContainer>
                     </FlexContainer>
diff --git a/src/pages/Howto/Content/CreateHowto/Step/Step.tsx b/src/pages/Howto/Content/CreateHowto/Step/Step.tsx
index 8e6184ae30..8fa51bef9e 100644
--- a/src/pages/Howto/Content/CreateHowto/Step/Step.tsx
+++ b/src/pages/Howto/Content/CreateHowto/Step/Step.tsx
@@ -83,6 +83,11 @@ class Step extends Component<IProps, IState> {
           {/* right */}
           <BoxContainer p={0} width={[1, '305px', null]}>
             <Field name={`${step}.images`} component={ImageInputField} multi />
+            <Field
+              name={`${step}.caption`}
+              component={InputField}
+              placeholder="Insert Caption"
+            />
           </BoxContainer>
         </FlexContainer>
       </BoxContainer>
diff --git a/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx b/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx
index 4a5a43ca0b..3d6dc59f2c 100644
--- a/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx
+++ b/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx
@@ -80,7 +80,10 @@ export default class HowtoDescription extends React.PureComponent<IProps, any> {
             ))}
         </Box>
         <Flex justifyContent={'end'} width={[1 / 2]}>
-          <CoverImg src={howto.cover_image.downloadUrl} alt="how-to cover" />
+          <Box>
+            <CoverImg src={howto.cover_image.downloadUrl} alt="how-to cover" />
+            <Text pt={2}>{howto.caption}</Text>
+          </Box>
         </Flex>
       </Flex>
     )
diff --git a/src/pages/Howto/Content/Howto/Step/Step.tsx b/src/pages/Howto/Content/Howto/Step/Step.tsx
index c119cb8e54..af7eb0d664 100644
--- a/src/pages/Howto/Content/Howto/Step/Step.tsx
+++ b/src/pages/Howto/Content/Howto/Step/Step.tsx
@@ -26,6 +26,7 @@ export default class Step extends React.PureComponent<IProps> {
           <Linkify>{this.props.step.text}</Linkify>
         </Text>
         <ImageGallery images={this.props.step.images as IUploadedFileMeta[]} />
+        <Text pb={3}>{this.props.step.caption}</Text>
       </Box>
     )
   }