refactor: base component name and folder structure (#958)

src/base-component/index.jsx

@@ -1,2 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-export { default as BaseComponent } from './BaseComponent';

src/base-container/components/default-layout/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'start.learning': {
+    id: 'start.learning',
+    defaultMessage: 'Start learning',
+    description: 'Header text for logistration MFE pages',
+  },
+  'with.site.name': {
+    id: 'with.site.name',
+    defaultMessage: 'with {siteName}',
+    description: 'Header text with site name for logistration MFE pages',
+  },
+});
+
+export default messages;

src/base-container/components/welcome-page-layout/messages.js

@@ -1,17 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
-  'start.learning': {
-    id: 'start.learning',
-    defaultMessage: 'Start learning',
-    description: 'Header text for logistration MFE pages',
+  'welcome.to.platform': {
+    id: 'welcome.to.platform',
+    defaultMessage: 'Welcome to {siteName}, {username}!',
+    description: 'Welcome message that appears on progressive profile page',
   },
-  'with.site.name': {
-    id: 'with.site.name',
-    defaultMessage: 'with {siteName}',
-    description: 'Header text with site name for logistration MFE pages',
-  },
-  // authenticated user base component text
   'complete.your.profile.1': {
     id: 'complete.your.profile.1',
     defaultMessage: 'Complete',
@@ -22,11 +16,6 @@ const messages = defineMessages({
     defaultMessage: 'your profile',
     description: 'part of text "complete your profile"',
   },
-  'welcome.to.platform': {
-    id: 'welcome.to.platform',
-    defaultMessage: 'Welcome to {siteName}, {username}!',
-    description: 'Welcome message that appears on progressive profile page',
-  },
 });
 
 export default messages;

src/base-container/index.jsx

@@ -6,14 +6,14 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
 
-import AuthLargeLayout from './AuthLargeLayout';
-import AuthMediumLayout from './AuthMediumLayout';
-import AuthSmallLayout from './AuthSmallLayout';
-import LargeLayout from './LargeLayout';
-import MediumLayout from './MediumLayout';
-import SmallLayout from './SmallLayout';
+import LargeLayout from './components/default-layout/LargeLayout';
+import MediumLayout from './components/default-layout/MediumLayout';
+import SmallLayout from './components/default-layout/SmallLayout';
+import AuthLargeLayout from './components/welcome-page-layout/AuthLargeLayout';
+import AuthMediumLayout from './components/welcome-page-layout/AuthMediumLayout';
+import AuthSmallLayout from './components/welcome-page-layout/AuthSmallLayout';
 
-const BaseComponent = ({ children, showWelcomeBanner }) => {
+const BaseContainer = ({ children, showWelcomeBanner }) => {
   const authenticatedUser = showWelcomeBanner ? getAuthenticatedUser() : null;
   const username = authenticatedUser ? authenticatedUser.username : null;
 
@@ -39,13 +39,13 @@ const BaseComponent = ({ children, showWelcomeBanner }) => {
   );
 };
 
-BaseComponent.defaultProps = {
+BaseContainer.defaultProps = {
   showWelcomeBanner: false,
 };
 
-BaseComponent.propTypes = {
+BaseContainer.propTypes = {
   children: PropTypes.node.isRequired,
   showWelcomeBanner: PropTypes.bool,
 };
 
-export default BaseComponent;
+export default BaseContainer;

src/base-container/tests/BaseContainer.test.jsx

@@ -3,9 +3,9 @@ import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { mount } from 'enzyme';
 
-import LargeLayout from '../LargeLayout';
-import MediumLayout from '../MediumLayout';
-import SmallLayout from '../SmallLayout';
+import LargeLayout from '../components/default-layout/LargeLayout';
+import MediumLayout from '../components/default-layout/MediumLayout';
+import SmallLayout from '../components/default-layout/SmallLayout';
 
 describe('ScreenLayout', () => {
   it('should display the form, pass as a child in SmallScreenLayout', () => {

src/forgot-password/ForgotPasswordPage.jsx

@@ -21,7 +21,7 @@ import { forgotPassword, setForgotPasswordFormData } from './data/actions';
 import { forgotPasswordResultSelector } from './data/selectors';
 import ForgotPasswordAlert from './ForgotPasswordAlert';
 import messages from './messages';
-import { BaseComponent } from '../base-component';
+import BaseContainer from '../base-container';
 import { FormGroup } from '../common-components';
 import { DEFAULT_STATE, LOGIN_PAGE, VALID_EMAIL_REGEX } from '../data/constants';
 import { updatePathWithQueryParams, windowScrollTo } from '../data/utils';
@@ -95,7 +95,7 @@ const ForgotPasswordPage = (props) => {
   );
 
   return (
-    <BaseComponent>
+    <BaseContainer>
       <Helmet>
         <title>{formatMessage(messages['forgot.password.page.title'],
           { siteName: getConfig().SITE_NAME })}
@@ -163,7 +163,7 @@ const ForgotPasswordPage = (props) => {
           </Form>
         </div>
       </div>
-    </BaseComponent>
+    </BaseContainer>
   );
 };
 

src/logistration/Logistration.jsx

@@ -14,7 +14,7 @@ import { ChevronLeft } from '@edx/paragon/icons';
 import PropTypes from 'prop-types';
 import { Redirect } from 'react-router-dom';
 
-import { BaseComponent } from '../base-component';
+import BaseContainer from '../base-container';
 import { clearThirdPartyAuthContextErrorMessage } from '../common-components/data/actions';
 import {
   tpaProvidersSelector,
@@ -83,7 +83,7 @@ const Logistration = (props) => {
   };
 
   return (
-    <BaseComponent>
+    <BaseContainer>
       <div>
         {disablePublicAccountCreation
           ? (
@@ -132,7 +132,7 @@ const Logistration = (props) => {
             </div>
           )}
       </div>
-    </BaseComponent>
+    </BaseContainer>
   );
 };
 

src/progressive-profiling/ProgressiveProfiling.jsx

@@ -25,7 +25,7 @@ import { Helmet } from 'react-helmet';
 import { saveUserProfile } from './data/actions';
 import messages from './messages';
 import ProgressiveProfilingPageModal from './ProgressiveProfilingPageModal';
-import { BaseComponent } from '../base-component';
+import BaseContainer from '../base-container';
 import { RedirectLogistration } from '../common-components';
 import { getThirdPartyAuthContext } from '../common-components/data/actions';
 import { optionalFieldsSelector } from '../common-components/data/selectors';
@@ -203,7 +203,7 @@ const ProgressiveProfiling = (props) => {
   });
 
   return (
-    <BaseComponent showWelcomeBanner>
+    <BaseContainer showWelcomeBanner>
       <Helmet>
         <title>{formatMessage(messages['progressive.profiling.page.title'],
           { siteName: getConfig().SITE_NAME })}
@@ -272,7 +272,7 @@ const ProgressiveProfiling = (props) => {
           </div>
         </Form>
       </div>
-    </BaseComponent>
+    </BaseContainer>
   );
 };
 

src/reset-password/ResetPasswordPage.jsx

@@ -24,7 +24,7 @@ import { resetPasswordResultSelector } from './data/selectors';
 import { validatePassword } from './data/service';
 import messages from './messages';
 import ResetPasswordFailure from './ResetPasswordFailure';
-import { BaseComponent } from '../base-component';
+import BaseContainer from '../base-container';
 import { PasswordField } from '../common-components';
 import {
   LETTER_REGEX, LOGIN_PAGE, NUMBER_REGEX, RESET_PAGE,
@@ -156,7 +156,7 @@ const ResetPasswordPage = (props) => {
     return <Redirect to={updatePathWithQueryParams(LOGIN_PAGE)} />;
   } else {
     return (
-      <BaseComponent>
+      <BaseContainer>
         <div>
           <Helmet>
             <title>
@@ -211,7 +211,7 @@ const ResetPasswordPage = (props) => {
             </div>
           </div>
         </div>
-      </BaseComponent>
+      </BaseContainer>
     );
   }
   return null;