refactor: update per code review comments

Author: kabaros

packages/create-app/src/index.js

@@ -58,7 +58,7 @@ const commandHandler = {
     },
 }
 
-const getTemplateFile = (templateName) => {
+const getTemplateDirectory = (templateName) => {
     return templateName === 'react-router'
         ? templates.templateWithReactRouter
         : templates.templateWithList
@@ -156,7 +156,7 @@ const command = {
         }
 
         reporter.info('Copying template files')
-        const templateFiles = getTemplateFile(selectedOptions.templateName)
+        const templateFiles = getTemplateDirectory(selectedOptions.templateName)
         fs.copySync(templateFiles, cwd)
 
         const paths = {
@@ -166,6 +166,7 @@ const command = {
             pnpmLock: path.join(cwd, 'pnpm-lock.yaml'),
             pnpmWorkspace: path.join(cwd, 'pnpm-workspace.yaml'),
             appRootFile: path.join(cwd, 'src/App.tsx'),
+            appRootWrapperFile: path.join(cwd, 'src/AppWrapper.tsx'),
             initYarnLock: path.join(__dirname, '../templates/yarn.lock'),
             initNpmLock: path.join(__dirname, '../templates/package-lock.json'),
         }
@@ -179,6 +180,12 @@ const command = {
         // Default template is with PNPM with TypeScript - some modifications here for yarn/npm/JS
         const templateModifications = [
             [paths.package, true, (f) => f.replace('{{template-name}}', name)],
+            [
+                paths.appRootWrapperFile,
+                true,
+                (f) => f.replace('{{template-name}}', name),
+            ],
+
             // [
             //     path.join(paths.base, '.husky/pre-commit'),
             //     !pnpm,
@@ -249,14 +256,14 @@ const command = {
         // convert to JS
         if (!typeScript) {
             reporter.info('Preparing JavaScript template')
-            reporter.info(` running '${pkgManager} install'`)
+            reporter.info(`    Running '${pkgManager} install'`)
 
             await exec({
                 cmd: pkgManager,
                 args: ['install'],
                 cwd: paths.base,
             })
-            reporter.info(' convert template to JS with tsc')
+            reporter.info('    Converting template to JS with tsc')
             await exec({
                 cmd: 'npx',
                 args: [
@@ -274,7 +281,7 @@ const command = {
                 pipe: argv.debug,
             })
 
-            reporter.info(' Deleting TS files')
+            reporter.debug('    Deleting TS files')
             const filePathsToRemove = path.join(paths.base, '/src/**/*.ts[x]')
             const filesToRemove = await fg.glob(filePathsToRemove)
 

packages/create-app/templates/template-ts-dataelements-react-router/src/App.module.css

@@ -4,7 +4,6 @@
     font-size: 14px;
     grid-template-columns: auto;
     grid-template-rows: auto 1fr auto;
-    overflow: auto;
 }
 
 .sidebar {
@@ -20,17 +19,9 @@
     grid-area: main;
     width: 100%;
     padding-inline-start: 10px;
-    /*height: 100%;
-    display: flex;
-    flex-direction: column;
-    font-size: 1rem;
-    max-width: 1020px;
-    margin: 0px auto;
-    padding-top: 8px; */
 }
 
 .noticeContainer {
-    /* width: 768px; */
     max-width: 340px;
 
     margin: 16px 0;
@@ -45,7 +36,6 @@
         height: 100%;
         grid-template-columns: 250px 1fr;
         grid-template-rows: 1fr auto;
-        overflow: auto;
         min-height: 1000px;
     }
 
@@ -59,3 +49,22 @@
     margin: 8px;
     margin-inline-start: 0;
 }
+
+.footer {
+    display: flex;
+    flex-direction: column;
+    margin-top: 16px;
+    align-items: center;
+    gap: 6px;
+    background-color: rgb(44, 102, 147);
+    padding: 16px;
+    color: white;
+}
+
+.footer a,
+.footer a:visited,
+.footer a:active,
+.footer a:link,
+.footer a:focus {
+    color: white;
+}

packages/create-app/templates/template-ts-dataelements-react-router/src/AppWrapper.tsx

@@ -22,7 +22,19 @@ const AppWrapper = () => {
                         <Route path="/about" element={<AboutPage />} />
                     </Routes>
                 </div>
-                <div className={classes.footer}>Our App</div>
+                <div className={classes.footer}>
+                    <div>{'{{template-name}}'}</div>
+                    <div>
+                        This web application was created using{' '}
+                        <a
+                            target="_blank"
+                            rel="noreferrer"
+                            href="https://developers.dhis2.org/docs/quickstart/quickstart-web"
+                        >
+                            @dhis2/create-app
+                        </a>
+                    </div>
+                </div>
             </HashRouter>
         </div>
     )