From 12fd5cdc83bc47b0d6678040311b42f58a660cbb Mon Sep 17 00:00:00 2001
From: Awais Ansari <79941147+awais-ansari@users.noreply.github.com>
Date: Tue, 1 Jun 2021 11:08:22 +0500
Subject: [PATCH] feat: Add Incomplete error state in stepper (#121)

* feat: Add Incomplete error state in stepper

* feat: Remove Incomplete stepper step 2 error when click on back button
---
 .../apps/shared/discussion-topics/TopicItem.jsx       | 11 +++++++++++
 .../discussions/app-list/AppList.jsx                  |  6 +++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx
index 3f345f43e..0d8c3c37a 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
   Collapsible, Form, Card, Button, IconButton, Icon,
@@ -7,6 +8,9 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { useFormikContext } from 'formik';
 import { ExpandLess, ExpandMore, Delete } from '@edx/paragon/icons';
 import messages from '../messages';
+import {
+  updateValidationStatus,
+} from '../../../../data/slice';
 
 const TopicItem = ({
   intl, index, name, onDelete,
@@ -19,11 +23,18 @@ const TopicItem = ({
     touched,
     errors,
   } = useFormikContext();
+  const dispatch = useDispatch();
 
   useEffect(() => {
     setTitle(name);
   }, [name]);
 
+  useEffect(() => {
+    if (Object.keys(touched).length) {
+      dispatch(updateValidationStatus({ hasError: Object.keys(errors).length > 0 }));
+    }
+  }, [errors, touched]);
+
   const isInvalidTopicNameKey = Boolean(
     (touched.discussionTopics && touched.discussionTopics[index]?.name)
     && (errors.discussionTopics && errors?.discussionTopics[index]?.name),
diff --git a/src/pages-and-resources/discussions/app-list/AppList.jsx b/src/pages-and-resources/discussions/app-list/AppList.jsx
index 58dcea7a2..39e20914e 100644
--- a/src/pages-and-resources/discussions/app-list/AppList.jsx
+++ b/src/pages-and-resources/discussions/app-list/AppList.jsx
@@ -4,7 +4,10 @@ import { CardGrid, Container, breakpoints } from '@edx/paragon';
 import { useDispatch, useSelector } from 'react-redux';
 import Responsive from 'react-responsive';
 import { useModels } from '../../../generic/model-store';
-import { selectApp, LOADED, LOADING } from '../data/slice';
+import {
+  selectApp, LOADED, LOADING,
+  updateValidationStatus,
+} from '../data/slice';
 import AppCard from './AppCard';
 import messages from './messages';
 import FeaturesTable from './FeaturesTable';
@@ -30,6 +33,7 @@ function AppList({ intl }) {
     if (!selectedAppId) {
       dispatch(selectApp({ appId: activeAppId }));
     }
+    dispatch(updateValidationStatus({ hasError: false }));
   }, [selectedAppId, activeAppId]);
 
   const handleSelectApp = useCallback((appId) => {