Refactor and format automatically

Author: djhi

packages/create-react-admin/src/ProjectState.ts

@@ -12,6 +12,7 @@ export type ProjectConfiguration = {
     dataProvider: string;
     authProvider: string;
     resources: string[];
+    messages: string[];
     installer: string;
 };
 
@@ -21,5 +22,6 @@ export const InitialProjectConfiguration: ProjectConfiguration = {
     dataProvider: '',
     authProvider: '',
     resources: [],
+    messages: [],
     installer: '',
 };

packages/create-react-admin/src/SelectInputChoice.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Text } from 'ink';
-import { Stack } from './Stack.js';
+import { Stack } from './Stack';
 
 export type ChoiceType = {
     label: string;

packages/create-react-admin/src/StepAuthProvider.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Text } from 'ink';
 import SelectInput from 'ink-select-input';
-import { ChoiceType, SelectInputChoice } from './SelectInputChoice.js';
-import { Stack } from './Stack.js';
+import { ChoiceType, SelectInputChoice } from './SelectInputChoice';
+import { Stack } from './Stack';
 
 const SupportedAuthProviders: ChoiceType[] = [
     {

packages/create-react-admin/src/StepDataProvider.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Text } from 'ink';
 import SelectInput from 'ink-select-input';
-import { ChoiceType, SelectInputChoice } from './SelectInputChoice.js';
-import { Stack } from './Stack.js';
+import { ChoiceType, SelectInputChoice } from './SelectInputChoice';
+import { Stack } from './Stack';
 
 const SupportedDataProviders: ChoiceType[] = [
     {

packages/create-react-admin/src/StepGenerate.tsx

@@ -0,0 +1,20 @@
+import React, { useEffect } from 'react';
+import { Text } from 'ink';
+import { generateProject } from './generateProject';
+import { ProjectConfiguration } from './ProjectState';
+
+export const StepGenerate = ({
+    config,
+    onCompleted,
+}: {
+    config: ProjectConfiguration;
+    onCompleted: (value: any) => void;
+}) => {
+    useEffect(() => {
+        generateProject(config).then(messages => onCompleted({ messages }));
+        // Disabled as we want to run this only once
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return <Text>Generating your application...</Text>;
+};

packages/create-react-admin/src/StepInstall.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import SelectInput from 'ink-select-input';
-import { ChoiceType, SelectInputChoice } from './SelectInputChoice.js';
 import { Text } from 'ink';
-import { Stack } from './Stack.js';
+import SelectInput from 'ink-select-input';
+import { ChoiceType, SelectInputChoice } from './SelectInputChoice';
+import { Stack } from './Stack';
 
 const choices: ChoiceType[] = [
     {

packages/create-react-admin/src/StepName.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useState } from 'react';
 import TextInput from 'ink-text-input';
 import { Text } from 'ink';
-import { Stack } from './Stack.js';
+import { Stack } from './Stack';
 
 export const StepName = ({
     onSubmit,

packages/create-react-admin/src/StepResources.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useState } from 'react';
 import TextInput from 'ink-text-input';
 import { Text } from 'ink';
-import { Stack } from './Stack.js';
+import { Stack } from './Stack';
 
 export const StepResources = ({
     onSubmit,

packages/create-react-admin/src/StepRunInstall.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+import { Text } from 'ink';
+import { ProjectConfiguration } from './ProjectState';
+import { useInstallDeps } from './useInstallDeps';
+import { useRunFormatter } from './useRunFormatter';
+
+export const StepRunInstall = ({
+    config,
+    onCompleted,
+}: {
+    config: ProjectConfiguration;
+    onCompleted: (value: any) => void;
+}) => {
+    const installDeps = useInstallDeps();
+    const runFormatter = useRunFormatter();
+
+    useEffect(() => {
+        installDeps(config).then(() => {
+            runFormatter(config).then(() => {
+                onCompleted({});
+            });
+        });
+        // Disabled as we want to run this only once
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return <Text>Generating your application...</Text>;
+};

packages/create-react-admin/src/app.tsx

@@ -1,16 +1,16 @@
-import React, { useReducer, useRef } from 'react';
+import React, { useReducer } from 'react';
 import { Box, Text, Newline } from 'ink';
 import {
     InitialProjectConfiguration,
     ProjectConfiguration,
 } from './ProjectState.js';
-import { generateProject } from './generateProject.js';
 import { StepDataProvider } from './StepDataProvider.js';
 import { StepAuthProvider } from './StepAuthProvider.js';
 import { StepResources } from './StepResources.js';
 import { StepInstall } from './StepInstall.js';
-import { useInstallDeps } from './useInstallDeps.js';
 import { StepName } from './StepName.js';
+import { StepGenerate } from './StepGenerate';
+import { StepRunInstall } from './StepRunInstall';
 
 type Props = {
     name: string | undefined;
@@ -61,6 +61,7 @@ const stepReducer = (
         case 'generate':
             return {
                 ...state,
+                messages: action.value.messages,
                 step: state.installer ? 'run-install' : 'finish',
             };
         case 'run-install':
@@ -80,8 +81,7 @@ export default function App({ name = 'my-admin' }: Props) {
         name: sanitizedName,
         step: sanitizedName === name ? 'data-provider' : 'name',
     });
-    const helpMessages = useRef([]);
-    const installDeps = useInstallDeps();
+
     const handleSubmit = (value: any) => {
         dispatch({ value });
     };
@@ -102,17 +102,10 @@ export default function App({ name = 'my-admin' }: Props) {
         return <StepInstall onSubmit={handleSubmit} />;
     }
     if (state.step === 'generate') {
-        generateProject(state).then(messages => {
-            helpMessages.current = messages;
-            dispatch({});
-        });
-        return <Text>Generating your application...</Text>;
+        return <StepGenerate config={state} onCompleted={handleSubmit} />;
     }
     if (state.step === 'run-install') {
-        installDeps(state).then(() => {
-            dispatch({});
-        });
-        return <Text>Installing dependencies...</Text>;
+        return <StepRunInstall config={state} onCompleted={handleSubmit} />;
     }
     return (
         <>
@@ -144,7 +137,7 @@ export default function App({ name = 'my-admin' }: Props) {
                 </Box>
             )}
             <Box marginBottom={1}>
-                {helpMessages.current.map((line, index) => (
+                {state.messages.map((line, index) => (
                     <Text key={index}>{line}</Text>
                 ))}
             </Box>