Fix PropTypes Error Create New Post Page (#14969)

app/javascript/article-form/articleForm.jsx

@@ -65,7 +65,7 @@ export class ArticleForm extends Component {
   };
 
   static defaultProps = {
-    organizations: '',
+    organizations: '[]',
   };
 
   constructor(props) {

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,
 };
 

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,
 };

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';

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';

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,
 };
 

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,
 };

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,
 };
 

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,
 };

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';

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,

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"

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',

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,
+    }),
+  ),
+};

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 }) => {

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,
 };