From 33742e7907c2977614f12c1865bb7d610b953dc3 Mon Sep 17 00:00:00 2001
From: "Papu Kumar(ReX)" <papu.kumar@kelltontech.com>
Date: Mon, 11 Oct 2021 19:18:24 +0530
Subject: [PATCH] Fix PropTypes Error Create New Post Page (#14969)

---
 app/javascript/article-form/articleForm.jsx   |  2 +-
 .../components/ArticleCoverImage.jsx          |  2 +-
 .../article-form/components/EditorActions.jsx |  2 +-
 .../article-form/components/ErrorList.jsx     |  4 ++--
 .../article-form/components/Form.jsx          |  4 ++--
 .../article-form/components/Header.jsx        |  6 ++---
 .../components/Help/EditorFormattingHelp.jsx  |  2 +-
 .../article-form/components/Help/index.jsx    | 20 +++++++++--------
 .../article-form/components/Meta.jsx          |  2 +-
 .../article-form/components/PageTitle.jsx     |  6 ++---
 .../article-form/components/Preview.jsx       |  2 +-
 .../article-form/components/TagsField.jsx     |  2 +-
 app/javascript/crayons/Button/Button.jsx      |  3 ++-
 app/javascript/leftSidebar/TagsFollowed.jsx   | 22 ++++++++++---------
 app/javascript/packs/articleForm.jsx          |  2 +-
 app/javascript/shared/components/tags.jsx     |  4 ++--
 16 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/app/javascript/article-form/articleForm.jsx b/app/javascript/article-form/articleForm.jsx
index f4e8a0ef9..ad17139ba 100644
--- a/app/javascript/article-form/articleForm.jsx
+++ b/app/javascript/article-form/articleForm.jsx
@@ -65,7 +65,7 @@ export class ArticleForm extends Component {
   };
 
   static defaultProps = {
-    organizations: '',
+    organizations: '[]',
   };
 
   constructor(props) {
diff --git a/app/javascript/article-form/components/ArticleCoverImage.jsx b/app/javascript/article-form/components/ArticleCoverImage.jsx
index be716e9fa..2e0ceb404 100644
--- a/app/javascript/article-form/components/ArticleCoverImage.jsx
+++ b/app/javascript/article-form/components/ArticleCoverImage.jsx
@@ -228,7 +228,7 @@ export class ArticleCoverImage extends Component {
 }
 
 ArticleCoverImage.propTypes = {
-  mainImage: PropTypes.string.isRequired,
+  mainImage: PropTypes.string,
   onMainImageUrlChange: PropTypes.func.isRequired,
 };
 
diff --git a/app/javascript/article-form/components/EditorActions.jsx b/app/javascript/article-form/components/EditorActions.jsx
index bc4dfd2c2..21be7fb09 100644
--- a/app/javascript/article-form/components/EditorActions.jsx
+++ b/app/javascript/article-form/components/EditorActions.jsx
@@ -74,7 +74,7 @@ EditorActions.propTypes = {
   edited: PropTypes.bool.isRequired,
   version: PropTypes.string.isRequired,
   onClearChanges: PropTypes.func.isRequired,
-  passedData: PropTypes.string.isRequired,
+  passedData: PropTypes.object.isRequired,
   onConfigChange: PropTypes.func.isRequired,
   submitting: PropTypes.bool.isRequired,
 };
diff --git a/app/javascript/article-form/components/ErrorList.jsx b/app/javascript/article-form/components/ErrorList.jsx
index 79b4d6e85..39c0da955 100644
--- a/app/javascript/article-form/components/ErrorList.jsx
+++ b/app/javascript/article-form/components/ErrorList.jsx
@@ -11,7 +11,7 @@ export const ErrorList = ({ errors }) => {
       <ul className="list-disc pl-6">
         {Object.keys(errors).map((key) => {
           return (
-            <li>
+            <li key={key}>
               {key}
               {`: `}
               {errors[key]}
@@ -24,7 +24,7 @@ export const ErrorList = ({ errors }) => {
 };
 
 ErrorList.propTypes = {
-  errors: PropTypes.objectOf(PropTypes.string).isRequired,
+  errors: PropTypes.object.isRequired,
 };
 
 ErrorList.displayName = 'ErrorList';
diff --git a/app/javascript/article-form/components/Form.jsx b/app/javascript/article-form/components/Form.jsx
index 2ca56d37f..f56d3e35f 100644
--- a/app/javascript/article-form/components/Form.jsx
+++ b/app/javascript/article-form/components/Form.jsx
@@ -54,10 +54,10 @@ Form.propTypes = {
   bodyOnChange: PropTypes.func.isRequired,
   bodyHasFocus: PropTypes.bool.isRequired,
   version: PropTypes.string.isRequired,
-  mainImage: PropTypes.string.isRequired,
+  mainImage: PropTypes.string,
   onMainImageUrlChange: PropTypes.func.isRequired,
   switchHelpContext: PropTypes.func.isRequired,
-  errors: PropTypes.func.isRequired,
+  errors: PropTypes.object,
 };
 
 Form.displayName = 'Form';
diff --git a/app/javascript/article-form/components/Header.jsx b/app/javascript/article-form/components/Header.jsx
index 43bec523c..d1463dcd8 100644
--- a/app/javascript/article-form/components/Header.jsx
+++ b/app/javascript/article-form/components/Header.jsx
@@ -35,9 +35,9 @@ Header.propTypes = {
   displayModal: PropTypes.func.isRequired,
   onPreview: PropTypes.func.isRequired,
   previewShowing: PropTypes.bool.isRequired,
-  organizations: PropTypes.string.isRequired,
-  organizationId: PropTypes.string.isRequired,
-  onToggle: PropTypes.string.isRequired,
+  organizations: PropTypes.arrayOf(PropTypes.object).isRequired,
+  organizationId: PropTypes.string,
+  onToggle: PropTypes.func.isRequired,
   siteLogo: PropTypes.string.isRequired,
 };
 
diff --git a/app/javascript/article-form/components/Help/EditorFormattingHelp.jsx b/app/javascript/article-form/components/Help/EditorFormattingHelp.jsx
index a47c63d8a..49cef9e8d 100644
--- a/app/javascript/article-form/components/Help/EditorFormattingHelp.jsx
+++ b/app/javascript/article-form/components/Help/EditorFormattingHelp.jsx
@@ -123,5 +123,5 @@ export const EditorFormattingHelp = ({ openModal }) => (
 );
 
 EditorFormattingHelp.propTypes = {
-  toggleModal: PropTypes.func.isRequired,
+  openModal: PropTypes.func.isRequired,
 };
diff --git a/app/javascript/article-form/components/Help/index.jsx b/app/javascript/article-form/components/Help/index.jsx
index 2cf8eec8a..9ca8dbe54 100644
--- a/app/javascript/article-form/components/Help/index.jsx
+++ b/app/javascript/article-form/components/Help/index.jsx
@@ -22,10 +22,10 @@ const renderModal = (onClose, title, selector) => {
 
 /**
  * Renders help component for given section
- *
+ * @param {object} props Component properties
  * @param {boolean} props.previewShowing Boolean to decide if to show the preview
  * @param {string} props.helpFor Section for which help is shown
- * @param {string} props.helpPosition Offset from the top of the help component
+ * @param {number} props.helpPosition Offset from the top of the help component
  * @param {string} props.version Version of the editor used for article
  *
  * @returns Help component for the given section
@@ -49,11 +49,8 @@ export const Help = ({ previewShowing, helpFor, helpPosition, version }) => {
     });
   };
 
-  const {
-    liquidShowing,
-    markdownShowing,
-    frontmatterShowing,
-  } = helpSectionVisibility;
+  const { liquidShowing, markdownShowing, frontmatterShowing } =
+    helpSectionVisibility;
 
   return (
     <div className="crayons-article-form__aside">
@@ -96,10 +93,15 @@ export const Help = ({ previewShowing, helpFor, helpPosition, version }) => {
   );
 };
 
+Help.defaultProps = {
+  helpFor: '',
+  helpPosition: 0,
+};
+
 Help.propTypes = {
   previewShowing: PropTypes.bool.isRequired,
-  helpFor: PropTypes.string.isRequired,
-  helpPosition: PropTypes.string.isRequired,
+  helpFor: PropTypes.string,
+  helpPosition: PropTypes.number,
   version: PropTypes.string.isRequired,
 };
 
diff --git a/app/javascript/article-form/components/Meta.jsx b/app/javascript/article-form/components/Meta.jsx
index 76a2cb155..ffba2388d 100644
--- a/app/javascript/article-form/components/Meta.jsx
+++ b/app/javascript/article-form/components/Meta.jsx
@@ -38,7 +38,7 @@ Meta.propTypes = {
   titleOnChange: PropTypes.func.isRequired,
   tagsDefaultValue: PropTypes.string.isRequired,
   tagsOnInput: PropTypes.func.isRequired,
-  mainImage: PropTypes.string.isRequired,
+  mainImage: PropTypes.string,
   onMainImageUrlChange: PropTypes.func.isRequired,
   switchHelpContext: PropTypes.func.isRequired,
 };
diff --git a/app/javascript/article-form/components/PageTitle.jsx b/app/javascript/article-form/components/PageTitle.jsx
index 0a307603b..fce83776d 100644
--- a/app/javascript/article-form/components/PageTitle.jsx
+++ b/app/javascript/article-form/components/PageTitle.jsx
@@ -26,9 +26,9 @@ export const PageTitle = ({ organizations, organizationId, onToggle }) => {
 };
 
 PageTitle.propTypes = {
-  organizations: PropTypes.string.isRequired,
-  organizationId: PropTypes.string.isRequired,
-  onToggle: PropTypes.string.isRequired,
+  organizations: PropTypes.arrayOf(PropTypes.string).isRequired,
+  organizationId: PropTypes.string,
+  onToggle: PropTypes.func.isRequired,
 };
 
 PageTitle.displayName = 'Organization';
diff --git a/app/javascript/article-form/components/Preview.jsx b/app/javascript/article-form/components/Preview.jsx
index 074c23a65..d54d512c7 100644
--- a/app/javascript/article-form/components/Preview.jsx
+++ b/app/javascript/article-form/components/Preview.jsx
@@ -122,7 +122,7 @@ function attachTwitterTimelineScript() {
 
 Preview.propTypes = {
   previewResponse: previewResponsePropTypes.isRequired,
-  errors: PropTypes.string.isRequired,
+  errors: PropTypes.object,
   markdownLintErrors: PropTypes.arrayOf(PropTypes.object),
   articleState: PropTypes.shape({
     id: PropTypes.number,
diff --git a/app/javascript/article-form/components/TagsField.jsx b/app/javascript/article-form/components/TagsField.jsx
index f06db7afa..40ca702d7 100644
--- a/app/javascript/article-form/components/TagsField.jsx
+++ b/app/javascript/article-form/components/TagsField.jsx
@@ -14,7 +14,7 @@ export const TagsField = ({
     <div className="crayons-article-form__tagsfield">
       <Tags
         defaultValue={defaultValue}
-        maxTags="4"
+        maxTags={4}
         onInput={onInput}
         onFocus={switchHelpContext}
         classPrefix="crayons-article-form"
diff --git a/app/javascript/crayons/Button/Button.jsx b/app/javascript/crayons/Button/Button.jsx
index 306b12f84..8121b3ad1 100644
--- a/app/javascript/crayons/Button/Button.jsx
+++ b/app/javascript/crayons/Button/Button.jsx
@@ -124,6 +124,7 @@ Button.defaultProps = {
   tagName: 'button',
   size: 'default',
   contentType: 'text',
+  variant: 'primary',
 };
 
 Button.propTypes = {
@@ -138,7 +139,7 @@ Button.propTypes = {
     'ghost-success',
     'ghost-warning',
     'ghost-danger',
-  ]).isRequired,
+  ]),
   contentType: PropTypes.oneOf([
     'text',
     'icon-left',
diff --git a/app/javascript/leftSidebar/TagsFollowed.jsx b/app/javascript/leftSidebar/TagsFollowed.jsx
index 9bd515280..e99602c60 100644
--- a/app/javascript/leftSidebar/TagsFollowed.jsx
+++ b/app/javascript/leftSidebar/TagsFollowed.jsx
@@ -33,13 +33,15 @@ export const TagsFollowed = ({ tags = [] }) => {
 };
 
 TagsFollowed.displayName = 'TagsFollowed';
-TagsFollowed.propTypes = PropTypes.arrayOf(
-  PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    name: PropTypes.string.isRequired,
-    hotness_score: PropTypes.number.isRequired,
-    points: PropTypes.number.isRequired,
-    bg_color_hex: PropTypes.string.isRequired,
-    text_color_hex: PropTypes.string.isRequired,
-  }),
-);
+TagsFollowed.propTypes = {
+  tags: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      name: PropTypes.string.isRequired,
+      hotness_score: PropTypes.number.isRequired,
+      points: PropTypes.number.isRequired,
+      bg_color_hex: PropTypes.string.isRequired,
+      text_color_hex: PropTypes.string.isRequired,
+    }),
+  ),
+};
diff --git a/app/javascript/packs/articleForm.jsx b/app/javascript/packs/articleForm.jsx
index 2bb28ef18..067ea6c48 100644
--- a/app/javascript/packs/articleForm.jsx
+++ b/app/javascript/packs/articleForm.jsx
@@ -16,7 +16,7 @@ function loadForm() {
   const snackZone = document.getElementById('snack-zone');
 
   if (snackZone) {
-    render(<Snackbar lifespan="3" />, snackZone);
+    render(<Snackbar lifespan={3} />, snackZone);
   }
 
   getUserDataAndCsrfToken().then(({ currentUser, csrfToken }) => {
diff --git a/app/javascript/shared/components/tags.jsx b/app/javascript/shared/components/tags.jsx
index 614c48fb5..98d6b6b8e 100644
--- a/app/javascript/shared/components/tags.jsx
+++ b/app/javascript/shared/components/tags.jsx
@@ -494,8 +494,8 @@ Tags.propTypes = {
   maxTags: PropTypes.number.isRequired,
   classPrefix: PropTypes.string.isRequired,
   fieldClassName: PropTypes.string.isRequired,
-  listing: PropTypes.string.isRequired,
-  category: PropTypes.string.isRequired,
+  listing: PropTypes.string,
+  category: PropTypes.string,
   onFocus: PropTypes.func.isRequired,
   pattern: PropTypes.string.isRequired,
 };