chore: #227: scaffolder option no redux (#268)

reapit · Feb 13, 2020 · de461f2 · de461f2
1 parent 2ef59f2
commit de461f2
Show file tree

Hide file tree

Showing 32 changed files with 278 additions and 620 deletions.
diff --git a/packages/react-app-scaffolder/generators/app/index.js b/packages/react-app-scaffolder/generators/app/index.js
@@ -154,7 +154,7 @@ module.exports = class extends Generator {
   async writeBaseFiles() {
     return new Promise((resolve, reject) => {
       const { name, repo, description, author, isFoundation, stylesSolution } = this.answers
-      const { redux, graphql } = this
+      const { redux, graphql, noRedux } = this
       const configFiles = ['jest.config.js']
 
       /**
@@ -211,18 +211,21 @@ module.exports = class extends Generator {
       this.log({
         name,
         redux,
+        noRedux,
         graphql,
         stylesSolution: stylesSolution === 'sass' ? 'Sass/CSS' : 'Styled Components',
       })
       this.fs.copyTpl(this.templatePath(this.projectTypePath), this.destinationPath('./'), {
         name,
         redux,
+        noRedux,
         graphql,
         stylesSolution,
       })
 
       this.fs.copyTpl(this.templatePath('./index.tsx'), this.destinationPath('./src/core/index.tsx'), {
         redux,
+        noRedux,
         graphql,
         stylesSolution,
       })
@@ -306,6 +309,7 @@ module.exports = class extends Generator {
 
     if (stateManagementStyle === 'No Redux') {
       this.projectTypePath = 'no-redux'
+      this.noRedux = true
     }
 
     if (stateManagementStyle === 'Apollo GraphQL') {

diff --git a/packages/react-app-scaffolder/generators/app/templates/_tsconfig.json b/packages/react-app-scaffolder/generators/app/templates/_tsconfig.json
@@ -4,15 +4,10 @@
     "baseUrl": "./",
     "paths": {
       "@/*": ["src/*"],
-      "@reapit/cognito-auth": ["../cognito-auth/src"]
+      "@reapit/cognito-auth": ["../cognito-auth/src"],
+      "@reapit/elements": ["../elements/src"]
     }
   },
   "include": ["src"],
-  "exclude": [
-    "public",
-    "dist",
-    "./webpack.config.js",
-    "node_modules",
-    "src/tests/coverage"
-  ]
+  "exclude": ["public", "dist", "./webpack.config.js", "node_modules", "src/tests/coverage"]
 }
diff --git a/packages/react-app-scaffolder/generators/app/templates/index.tsx b/packages/react-app-scaffolder/generators/app/templates/index.tsx
@@ -1,14 +1,16 @@
 import * as React from 'react'
 import { render } from 'react-dom'
 import Router from './router'
-import { Provider } from 'react-redux'
-import store from './store'
 
 <% if (redux) { %>
 import store from './store'
   import { Provider } from 'react-redux'
 <% } %>
 
+<% if (noRedux) { %>
+  import { AuthProvider } from '@/context/authContext'
+<% } %>
+
 <% if (graphql) { %>
 import { ApolloProvider } from '@apollo/react-hooks'
 <% } %>
@@ -32,25 +34,33 @@ const App = () => (
   <>
     <% if (graphql) { %>
       <ApolloProvider client={client}>
-        <% } %>
+    <% } %>
 
-      <% if (redux) { %>
-          <Provider store={store.reduxStore}>
-            <% } %>
+    <% if (redux) { %>
+      <Provider store={store.reduxStore}>
+    <% } %>
 
-      <% if (styledComponents) { %>
-              <GlobalStyle />
-              <% } %>
+    <% if (noRedux) { %>
+      <AuthProvider>
+    <% } %>
 
       <Router />
 
-            <% if (redux) { %>
-    </Provider>
-          <% } %>
+    <% if (noRedux) { %>
+      </AuthProvider>
+    <% } %>
+
+    <% if (redux) { %>
+      </Provider>
+    <% } %>
 
     <% if (graphql) { %>
       </ApolloProvider>
-      <% } %>
+    <% } %>
+
+    <% if (stylesSolution === 'styledComponents') { %>
+      <GlobalStyle />
+    <% } %>
   </>
 )
 

diff --git a/...app/templates/no-redux/src/components/hocs/__tests__/__snapshots__/route-fetcher.tsx.snap b/...app/templates/no-redux/src/components/hocs/__tests__/__snapshots__/route-fetcher.tsx.snap
diff --git a/...folder/generators/app/templates/no-redux/src/components/hocs/__tests__/error-boundary.tsx b/...folder/generators/app/templates/no-redux/src/components/hocs/__tests__/error-boundary.tsx
@@ -1,22 +1,13 @@
 import * as React from 'react'
-import { shallow, mount } from 'enzyme'
+import { shallow } from 'enzyme'
 import toJson from 'enzyme-to-json'
 import { ErrorBoundary, ErrorState } from '../error-boundary'
-import errorMessages from '../../../constants/error-messages'
-import { ErrorData } from '../../../reducers/error'
-
-jest.mock('../../../utils/route-dispatcher')
 
 const Component: React.FC = () => <div>I am a component!</div>
 Component.displayName = 'Component'
 
 const props = {
   children: Component,
-  errorThrownComponent: jest.fn(),
-  componentError: {
-    type: 'COMPONENT',
-    message: errorMessages.DEFAULT_COMPONENT_ERROR,
-  } as ErrorData,
 }
 
 describe('ErrorBoundary', () => {
@@ -32,26 +23,6 @@ describe('ErrorBoundary', () => {
     expect(toJson(component)).toMatchSnapshot()
   })
 
-  it('should call the errorThrownComponent and sets the state to hasFailed when it catches', () => {
-    ;(console.error as any) = jest.fn()
-    const DangerousChild = (props: { someProp?: false }) => {
-      if (!props.someProp) {
-        throw new Error('Catch me if you can')
-      }
-      return <div />
-    }
-    const newPops = { ...props, children: <DangerousChild /> }
-
-    const component = mount(<ErrorBoundary {...newPops} />)
-    expect(DangerousChild).toThrow()
-    expect(newPops.errorThrownComponent).toHaveBeenCalledTimes(1)
-    expect(newPops.errorThrownComponent).toHaveBeenCalledWith({
-      type: 'COMPONENT',
-      message: errorMessages.DEFAULT_COMPONENT_ERROR,
-    })
-    expect((component.state() as ErrorState).hasFailed).toBe(true)
-  })
-
   afterEach(() => {
     jest.restoreAllMocks()
   })

diff --git a/...ffolder/generators/app/templates/no-redux/src/components/hocs/__tests__/route-fetcher.tsx b/...ffolder/generators/app/templates/no-redux/src/components/hocs/__tests__/route-fetcher.tsx
diff --git a/...t-app-scaffolder/generators/app/templates/no-redux/src/components/hocs/error-boundary.tsx b/...t-app-scaffolder/generators/app/templates/no-redux/src/components/hocs/error-boundary.tsx
@@ -1,44 +1,26 @@
 import * as React from 'react'
-import { connect } from 'react-redux'
-import { errorThrownComponent } from '../../actions/error'
-import { Dispatch } from 'redux'
-import errorMessages from '../../constants/error-messages'
-import { ErrorData } from '../../reducers/error'
-import { ReduxState } from '@/types/core'
-
-interface ErrorMappedActions {
-  errorThrownComponent: (error: ErrorData) => void
-}
-
-interface ErrorMappedProps {
-  componentError: ErrorData | null
-}
 
 export interface ErrorState {
   hasFailed: boolean
 }
 
-export type ErrorProps = ErrorMappedActions & ErrorMappedProps
+export type ErrorProps = {}
 
 export class ErrorBoundary extends React.Component<ErrorProps, ErrorState> {
-  static getDerivedStateFromError() {
-    return {
-      hasFailed: true,
-    }
-  }
-
   constructor(props: ErrorProps) {
     super(props)
     this.state = {
       hasFailed: false,
     }
   }
 
+  static getDerivedStateFromError() {
+    return {
+      hasFailed: true,
+    }
+  }
+
   componentDidCatch(error: Error, info: React.ErrorInfo) {
-    this.props.errorThrownComponent({
-      type: 'COMPONENT',
-      message: errorMessages.DEFAULT_COMPONENT_ERROR,
-    })
     console.error('ERROR BOUNDARY CAUGHT', error.message, info)
   }
 
@@ -51,12 +33,4 @@ export class ErrorBoundary extends React.Component<ErrorProps, ErrorState> {
   }
 }
 
-const mapStateToProps = (state: ReduxState): ErrorMappedProps => ({
-  componentError: state.error.componentError,
-})
-
-const mapDispatchToProps = (dispatch: Dispatch): ErrorMappedActions => ({
-  errorThrownComponent: (error: ErrorData) => dispatch(errorThrownComponent(error)),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(ErrorBoundary)
+export default ErrorBoundary
diff --git a/...ct-app-scaffolder/generators/app/templates/no-redux/src/components/hocs/route-fetcher.tsx b/...ct-app-scaffolder/generators/app/templates/no-redux/src/components/hocs/route-fetcher.tsx
diff --git a/...pp/templates/no-redux/src/components/pages/__tests__/__snapshots__/authenticated.tsx.snap b/...pp/templates/no-redux/src/components/pages/__tests__/__snapshots__/authenticated.tsx.snap
@@ -1,22 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Authenticated should match a snapshot 1`] = `
-<Connect(ErrorBoundary)>
-  <FlexContainerBasic
+<ErrorBoundary>
+  <Component
     hasPadding={true}
   >
-    <FlexContainerResponsive
+    <Component
       flexColumn={true}
       hasBackground={true}
       hasPadding={true}
     >
-      <H3>
+      <Component>
         Welcome To Reapit Elements
-      </H3>
-      <SubTitleH5>
+      </Component>
+      <Component>
         You are now authenticated against our sandbox data
-      </SubTitleH5>
-    </FlexContainerResponsive>
-  </FlexContainerBasic>
-</Connect(ErrorBoundary)>
+      </Component>
+    </Component>
+  </Component>
+</ErrorBoundary>
 `;
diff --git a/...erators/app/templates/no-redux/src/components/pages/__tests__/__snapshots__/home.tsx.snap b/...erators/app/templates/no-redux/src/components/pages/__tests__/__snapshots__/home.tsx.snap
@@ -1,29 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Home should match a snapshot 1`] = `
-<Connect(ErrorBoundary)>
-  <FlexContainerBasic
+<ErrorBoundary>
+  <Component
     hasBackground={true}
     hasPadding={true}
   >
-    <FlexContainerResponsive
+    <Component
       flexColumn={true}
       hasBackground={true}
       hasPadding={true}
     >
-      <H3>
+      <Component>
         Welcome To Reapit Elements
-      </H3>
-      <SubTitleH5>
+      </Component>
+      <Component>
         Click 
         <Link
           to="/login"
         >
           here
         </Link>
          to login
-      </SubTitleH5>
-    </FlexContainerResponsive>
-  </FlexContainerBasic>
-</Connect(ErrorBoundary)>
+      </Component>
+    </Component>
+  </Component>
+</ErrorBoundary>
 `;