Refactor Generator component with ReactGenerator

src/main/webapp/app/springboot/primary/Generator.component.ts

@@ -6,16 +6,17 @@ import { VueService } from '@/springboot/domain/client/VueService';
 import { SpringBootService } from '@/springboot/domain/SpringBootService';
 import { Logger } from '@/common/domain/Logger';
 import { AngularGeneratorVue } from '@/springboot/primary/angular-generator';
+import { ReactGeneratorVue } from '@/springboot/primary/react-generator';
 
 export default defineComponent({
   name: 'GeneratorComponent',
   components: {
     AngularGeneratorVue,
+    ReactGeneratorVue,
   },
   setup() {
     const logger = inject('logger') as Logger;
     const projectService = inject('projectService') as ProjectService;
-    const reactService = inject('reactService') as ReactService;
     const springBootService = inject('springBootService') as SpringBootService;
     const vueService = inject('vueService') as VueService;
 
@@ -24,7 +25,6 @@ export default defineComponent({
     const project = ref<ProjectToUpdate>({
       folder: '',
     });
-    const isReactWithStyle = ref<boolean>(false);
     const isVueWithStyle = ref<boolean>(false);
     const isSvelteWithStyle = ref<boolean>(false);
     const language = ref<string>();
@@ -170,18 +170,6 @@ export default defineComponent({
       }
     };
 
-    const addReact = async (): Promise<void> => {
-      if (project.value.folder !== '') {
-        if (isReactWithStyle.value) {
-          await reactService
-            .addWithStyle(toProject(project.value))
-            .catch(error => logger.error('Adding React with style to project failed', error));
-        } else {
-          await reactService.add(toProject(project.value)).catch(error => logger.error('Adding React to project failed', error));
-        }
-      }
-    };
-
     const addVue = async (): Promise<void> => {
       if (project.value.folder !== '') {
         if (isVueWithStyle.value) {
@@ -219,7 +207,6 @@ export default defineComponent({
 
     return {
       project,
-      isReactWithStyle,
       isVueWithStyle,
       isSvelteWithStyle,
       language,
@@ -246,7 +233,6 @@ export default defineComponent({
       addMySQL,
       addMariaDB,
       addMongoDB,
-      addReact,
       addVue,
       addFrontendMavenPlugin,
       download,

src/main/webapp/app/springboot/primary/Generator.vue

@@ -677,31 +677,7 @@
             </button>
           </div>
           <AngularGeneratorVue v-if="client === 'angular'" :project="project" />
-          <div v-if="client === 'react'" id="v-pills-react" class="tab-pane fade" role="tabpanel" aria-labelledby="v-pills-react-tab">
-            <div class="list-group--inline py-2">
-              <label for="react-with-style" class="list-group-item gap-3">
-                <input
-                  id="react-with-style"
-                  v-model="isReactWithStyle"
-                  name="react-with-style"
-                  class="form-check-input flex-shrink-0"
-                  type="checkbox"
-                  value=""
-                />
-                <span class="form-checked-content">
-                  <strong>Add React style</strong>
-                </span>
-              </label>
-            </div>
-            <button
-              id="react"
-              class="btn btn-outline-primary"
-              :data-selector="selectorPrefix + '.add-react-button'"
-              @click.prevent="addReact"
-            >
-              Generate React
-            </button>
-          </div>
+          <ReactGeneratorVue v-if="client === 'react'" :project="project" />
           <div v-if="client === 'vue'" id="v-pills-vue" class="tab-pane fade" role="tabpanel" aria-labelledby="v-pills-vue-tab">
             <div class="list-group--inline py-2">
               <label for="react-with-style" class="list-group-item gap-3">

src/main/webapp/app/springboot/primary/react-generator/ReactGenerator.component.ts

@@ -0,0 +1,44 @@
+import { defineComponent, inject, ref } from 'vue';
+import { ProjectToUpdate, toProject } from '@/springboot/primary/ProjectToUpdate';
+import { Logger } from '@/common/domain/Logger';
+import { ReactService } from '@/springboot/domain/client/ReactService';
+
+export default defineComponent({
+  name: 'ReactGeneratorComponent',
+
+  props: {
+    project: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const logger = inject('logger') as Logger;
+    const reactService = inject('reactService') as ReactService;
+
+    const selectorPrefix = 'react-generator';
+    const isReactWithStyle = ref<boolean>(false);
+
+    const addReact = async (): Promise<void> => {
+      if (props.project.folder !== '') {
+        if (isReactWithStyle.value) {
+          await reactService
+            .addWithStyle(toProject(props.project as ProjectToUpdate))
+            .catch(error => logger.error('Adding React with style to project failed', error));
+        } else {
+          await reactService
+            .add(toProject(props.project as ProjectToUpdate))
+            .catch(error => logger.error('Adding React to project failed', error));
+        }
+      }
+    };
+
+    return {
+      selectorPrefix,
+      isReactWithStyle,
+      addReact,
+      props,
+    };
+  },
+});

src/main/webapp/app/springboot/primary/react-generator/ReactGenerator.vue

@@ -0,0 +1,24 @@
+<template>
+  <div id="v-pills-react" class="tab-pane fade" role="tabpanel" aria-labelledby="v-pills-react-tab">
+    <div class="list-group--inline py-2">
+      <label for="react-with-style" class="list-group-item gap-3">
+        <input
+          id="react-with-style"
+          v-model="isReactWithStyle"
+          name="react-with-style"
+          class="form-check-input flex-shrink-0"
+          type="checkbox"
+          value=""
+        />
+        <span class="form-checked-content">
+          <strong>Add React style</strong>
+        </span>
+      </label>
+    </div>
+    <button id="react" class="btn btn-outline-primary" :data-selector="selectorPrefix + '.add-react-button'" @click.prevent="addReact">
+      Generate React
+    </button>
+  </div>
+</template>
+
+<script lang="ts" src="./ReactGenerator.component.ts"></script>

src/main/webapp/app/springboot/primary/react-generator/index.ts

@@ -0,0 +1,4 @@
+import ReactGeneratorComponent from './ReactGenerator.component';
+import ReactGeneratorVue from './ReactGenerator.vue';
+
+export { ReactGeneratorComponent, ReactGeneratorVue };

src/test/javascript/spec/springboot/primary/Generator.spec.ts

@@ -4,8 +4,6 @@ import { shallowMount, VueWrapper } from '@vue/test-utils';
 import { stubProjectService } from '../domain/ProjectService.fixture';
 import { ProjectToUpdate } from '@/springboot/primary/ProjectToUpdate';
 import { createProjectToUpdate } from './ProjectToUpdate.fixture';
-import { stubReactService } from '../domain/client/ReactService.fixture';
-import { ReactService } from '@/springboot/domain/client/ReactService';
 import { stubSpringBootService } from '../domain/SpringBootService.fixture';
 import { SpringBootService } from '@/springboot/domain/SpringBootService';
 import { stubVueService } from '../domain/client/VueService.fixture';
@@ -18,16 +16,14 @@ let wrapper: VueWrapper;
 interface WrapperOptions {
   logger: Logger;
   projectService: ProjectService;
-  reactService: ReactService;
   springBootService: SpringBootService;
   vueService: VueService;
 }
 
 const wrap = (wrapperOptions?: Partial<WrapperOptions>) => {
-  const { logger, projectService, reactService, springBootService, vueService }: WrapperOptions = {
+  const { logger, projectService, springBootService, vueService }: WrapperOptions = {
     logger: stubLogger(),
     projectService: stubProjectService(),
-    reactService: stubReactService(),
     springBootService: stubSpringBootService(),
     vueService: stubVueService(),
     ...wrapperOptions,
@@ -37,7 +33,6 @@ const wrap = (wrapperOptions?: Partial<WrapperOptions>) => {
       provide: {
         logger,
         projectService,
-        reactService,
         springBootService,
         vueService,
       },
@@ -1054,108 +1049,6 @@ describe('Generator', () => {
     });
   });
 
-  it('should not add React when project path is not filled', async () => {
-    const reactService = stubReactService();
-    reactService.add.resolves({});
-    await wrap({ reactService });
-    await selectSection('react');
-
-    const button = wrapper.find('#react');
-    await button.trigger('click');
-
-    expect(reactService.add.called).toBe(false);
-  });
-
-  it('should add React when project path is filled', async () => {
-    const reactService = stubReactService();
-    reactService.add.resolves({});
-    await wrap({ reactService });
-    const projectToUpdate: ProjectToUpdate = createProjectToUpdate({
-      folder: 'project/path',
-      baseName: 'beer',
-      projectName: 'Beer Project',
-      packageName: 'tech.jhipster.beer',
-      serverPort: '8080',
-    });
-    await fillFullForm(projectToUpdate);
-    await selectSection('react');
-
-    const button = wrapper.find('#react');
-    await button.trigger('click');
-
-    const args = reactService.add.getCall(0).args[0];
-    expect(args).toEqual({
-      baseName: 'beer',
-      folder: 'project/path',
-      projectName: 'Beer Project',
-      packageName: 'tech.jhipster.beer',
-      serverPort: 8080,
-    });
-  });
-
-  it('should add React with Style when checkbox is checked', async () => {
-    const reactService = stubReactService();
-    reactService.addWithStyle.resolves({});
-    await wrap({ reactService });
-    const projectToUpdate: ProjectToUpdate = createProjectToUpdate({
-      folder: 'project/path',
-      baseName: 'beer',
-      projectName: 'Beer Project',
-      packageName: 'tech.jhipster.beer',
-      serverPort: '8080',
-    });
-    await fillFullForm(projectToUpdate);
-    await selectSection('react');
-
-    const checkbox = wrapper.find('#react-with-style');
-    await checkbox.setValue(true);
-    const button = wrapper.find('#react');
-    await button.trigger('click');
-
-    const args = reactService.addWithStyle.getCall(0).args[0];
-    expect(args).toEqual({
-      baseName: 'beer',
-      folder: 'project/path',
-      projectName: 'Beer Project',
-      packageName: 'tech.jhipster.beer',
-      serverPort: 8080,
-    });
-  });
-
-  it('should handle error on adding React failure', async () => {
-    const logger = stubLogger();
-    const reactService = stubReactService();
-    reactService.add.rejects({});
-    await wrap({ reactService, logger });
-    const projectToUpdate: ProjectToUpdate = createProjectToUpdate();
-    await fillFullForm(projectToUpdate);
-    await selectSection('react');
-
-    const initButton = wrapper.find('#react');
-    await initButton.trigger('click');
-
-    const [message] = logger.error.getCall(0).args;
-    expect(message).toBe('Adding React to project failed');
-  });
-
-  it('should handle error on adding React with style failure', async () => {
-    const logger = stubLogger();
-    const reactService = stubReactService();
-    reactService.addWithStyle.rejects({});
-    await wrap({ reactService, logger });
-    const projectToUpdate: ProjectToUpdate = createProjectToUpdate();
-    await fillFullForm(projectToUpdate);
-    await selectSection('react');
-
-    const checkbox = wrapper.find('#react-with-style');
-    await checkbox.setValue(true);
-    const initButton = wrapper.find('#react');
-    await initButton.trigger('click');
-
-    const [message] = logger.error.getCall(0).args;
-    expect(message).toBe('Adding React with style to project failed');
-  });
-
   it('should not add Vue when project path is not filled', async () => {
     const vueService = stubVueService();
     vueService.add.resolves({});