[ACPD React Conversion]: Setup vite local and add base template with …

…react (#294)

* Setup vite local and template with react content

* Update Makefile

a2cps_cms/src/taccsite_custom/a2cps_cms/templates/fullwidth.html

@@ -5,4 +5,4 @@
   {{ block.super }}
 
   {% include "./assets_custom.html" %}
-{% endblock assets_custom %}
+{% endblock assets_custom %}

apcd-cms/Dockerfile

@@ -13,4 +13,5 @@ RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
 RUN apt-get install -y nodejs
 
 RUN chmod u+x /code/client/build_client.sh && /code/client/build_client.sh
-RUN cp /code/client/dist/apcd-components.es.js /code/taccsite_custom/apcd_cms/static/
+RUN cp -R /code/client/dist/static/assets/. /code/taccsite_custom/apcd_cms/static/assets/
+RUN cp -R /code/client/dist/react-assets.html /code/taccsite_custom/apcd_cms/templates/react-asset.html

apcd-cms/docker-compose.dev.yml

@@ -15,7 +15,6 @@ services:
       - ./src/taccsite_cms/settings_custom.py:/code/taccsite_cms/settings_custom.py
       - ./src/taccsite_cms/settings_local.py:/code/taccsite_cms/settings_local.py
       - ./src/taccsite_cms/secrets.py:/code/taccsite_cms/secrets.py
-      - ${PWD}/src/client/dist/:/code/taccsite_custom/apcd_cms/static/
     networks:
       - core_cms_net
 

apcd-cms/src/apps/admin_regis_table/templates/list_registrations.html

@@ -1,19 +1,11 @@
-{% extends "standard.html" %}
+{% extends "apcd_cms/templates/standard.html" %}
+
 {% load static %}
 {% block content %}
-
 <link rel="stylesheet" href="{% static 'apcd-cms/css/table.css' %}">
 <link rel="stylesheet" href="{% static 'apcd-cms/css/modal.css' %}">
 <link rel="stylesheet" href="{% static 'admin_regis_table/css/table.css' %}">
 
-
-{% block extra_js %}
-<script type="module">
-import { setupAdminRegistrations } from "{% static 'apcd-components.es.js' %}";
-setupAdminRegistrations();
-</script>
-{% endblock %}
-
 <div class="container">
   {% include "nav_cms_breadcrumbs.html" %}
 
@@ -40,7 +32,7 @@ <h1>List Registrations</h1>
       {% endif %}
     </div>
   </div>
-  <div id="react-root"></div>
+  <div id="list-registrations-root"></div>
   {% include 'paginator.html' %}
 </div>
 <script>
@@ -49,9 +41,9 @@ <h1>List Registrations</h1>
     dropdown = document.getElementById("statusFilter");
     statusFilter =  dropdown.value;
     url_params = `?status=${statusFilter}`;
-    {% if selected_org %}
-      url_params += `&org={{selected_org}}`;
-    {% endif %}
+    // {% if selected_org %}
+    //   url_params += `&org={{selected_org}}`;
+    // {% endif %}
     url = `/administration/list-registration-requests/${url_params}`;
     xhr = new XMLHttpRequest();
     xhr.open('GET', url);
@@ -64,9 +56,9 @@ <h1>List Registrations</h1>
     input = document.getElementById("organizationFilter");
     orgFilter = input.value.replace("&", encodeURIComponent('&'));
     url_params = `?org=${orgFilter}`;
-    {% if selected_status %}
-      url_params = `?status={{selected_status}}&org=${orgFilter}`;
-    {% endif %}
+    // {% if selected_status %}
+    //   url_params = `?status={{selected_status}}&org=${orgFilter}`;
+    // {% endif %}
     url = `/administration/list-registration-requests/${url_params}`;
     xhr = new XMLHttpRequest();
     xhr.open('GET', url);

apcd-cms/src/apps/admin_submissions/templates/list_admin_submissions.html

@@ -1,4 +1,4 @@
-{% extends "standard.html" %}
+{% extends "apcd_cms/templates/standard.html" %}
 {% load static %}
 
 {% block content %}
@@ -10,21 +10,14 @@
 <link rel="stylesheet" href="{% static 'admin_submissions/css/admin_table.css' %}">
 <link rel="stylesheet" href="{% static 'admin_regis_table/css/table.css' %}">
 
-{% block extra_js %}
-  <script type="module">
-    import { setupAdminSubmissions } from "{% static 'apcd-components.es.js' %}";
-    setupAdminSubmissions();
-  </script>
-{% endblock %}
-
 <div class="container">
   {% include "nav_cms_breadcrumbs.html" %}
 
   <h1>View Submissions</h1>
   <hr />
   <p style="margin-bottom: 30px">All completed submissions by organizations</p>
   <hr />
-  <div id="react-root"></div>
+  <div id="list-admin-submissions"></div>
   {% include 'paginator.html' %}
 </div>
 {% endblock %}

apcd-cms/src/apps/view_users/templates/view_users.html

@@ -1,4 +1,4 @@
-{% extends "standard.html" %}
+{% extends "apcd_cms/templates/standard.html" %}
 {% load static %}
 
 {% block content %}
@@ -9,9 +9,7 @@
 
 <div class="container">
   {% include "nav_cms_breadcrumbs.html" %}
-  <div id="react-root"></div>
+  <div id="view-users-root"></div>
 </div>
 
-<script src="{% static 'apcd-components.es.js' %}"></script> 
-
 {% endblock %}

apcd-cms/src/client/react-assets.html

@@ -0,0 +1 @@
+<script type="module" src="/src/main.tsx"></script>

apcd-cms/src/client/src/main.tsx

@@ -0,0 +1,43 @@
+// library.tsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
+import { AdminRegistrations } from './components/Admin/Registrations';
+import { ViewUsers } from './components/Admin/ViewUsers';
+import { AdminSubmissions } from './components/Admin/Submissions';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+const queryClient = new QueryClient();
+
+function setupComponent(rootId: string, Component: React.ComponentType): void {
+  const root = document.getElementById(rootId);
+  if (root) {
+    ReactDOM.render(
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <Component />
+        </BrowserRouter>
+      </QueryClientProvider>,
+      root
+    );
+  }
+}
+
+// Mapping of element IDs to components
+const componentMap: { [key: string]: React.ComponentType } = {
+  'list-registrations-root': AdminRegistrations,
+  'view-users-root': ViewUsers,
+  'list-admin-submissions': AdminSubmissions,
+  // Add new components with html id in the list above.
+};
+
+function setupApp(): void {
+  Object.keys(componentMap).forEach(id => {
+    const elem = document.getElementById(id);
+    if (elem) {
+      setupComponent(id, componentMap[id]);
+    }
+  });
+}
+
+document.addEventListener('DOMContentLoaded', setupApp);

apcd-cms/src/client/tsconfig.json

@@ -37,5 +37,5 @@
     "src/**/*.spec.jsx",
     "src/**/*.test.jsx"
   ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx", "main.tsx"]
 }

apcd-cms/src/client/vite.config.ts

@@ -1,18 +1,23 @@
 import eslint from '@rollup/plugin-eslint';
 import { defineConfig, type PluginOption } from 'vite';
 import react from '@vitejs/plugin-react';
-import {resolve} from 'path';
+import path, {resolve} from 'path';
 
 
 export default defineConfig({
     css: { preprocessorOptions: { scss: { charset: false } } },
     build: {
       outDir: 'dist',
-      lib: {
-        entry: resolve(__dirname, 'src/components/library.tsx'),
-        name: 'APCDComponents',
-        fileName: 'apcd-components'
-    }
+      rollupOptions: {
+        input: {
+          imports: path.resolve(__dirname, 'react-assets.html'),
+        },
+        output: {
+          entryFileNames: 'static/assets/[name].[hash].js',
+          chunkFileNames: 'static/assets/[name].[hash].js',
+          assetFileNames: 'static/assets/[name].[hash].[ext]'
+        }
+      },
   },
     resolve: {
       alias: {

apcd-cms/src/taccsite_cms/custom_app_settings.py

@@ -1,4 +1,4 @@
 CUSTOM_APPS = ['apps.admin_regis_table', 'apps.apcd_login', 'apps.registrations', 'apps.submissions', 'apps.exception', 'apps.admin_submissions', 'apps.admin_extension', 'apps.admin_exception', 'apps.extension', 'apps.submitter_renewals_listing', 'apps.view_users', 'apps.components.paginator', 'apps.utils']
 CUSTOM_MIDDLEWARE = []
-STATICFILES_DIRS = ('taccsite_custom/apcd-cms', 'apps/admin_regis_table', 'apps/submissions', 'apps/exception', 'apps/extension', 'apps/submitter_renewals_listing', 'apps/view_users', 'apps/components/paginator', 'apps/utils', 'client/dist')
+STATICFILES_DIRS = ('taccsite_custom/apcd_cms', 'apps/admin_regis_table', 'apps/submissions', 'apps/exception', 'apps/extension', 'apps/submitter_renewals_listing', 'apps/view_users', 'apps/components/paginator', 'apps/utils', 'client/dist')
 

apcd-cms/src/taccsite_custom/apcd_cms/templates/standard.html

@@ -0,0 +1,23 @@
+
+{% extends "standard.html" %}
+{% load cms_tags %}
+
+{% block assets_custom %}
+  {{ block.super }}
+
+  {% include "./assets_custom.html" %}
+
+  {% if settings.DEBUG %}
+    <script type="module">
+        import RefreshRuntime from 'http://localhost:3000/@react-refresh';
+        RefreshRuntime.injectIntoGlobalHook(window);
+        window.$RefreshReg$ = () => {};
+        window.$RefreshSig$ = () => (type) => type;
+        window.__vite_plugin_react_preamble_installed__ = true;
+    </script>
+    <script type="module" src="http://localhost:3000/@vite/client"></script>
+    <script type="module" src="http://localhost:3000/src/main.tsx"></script>
+  {% else %}
+      {% include "./react-assets.html" %}
+  {% endif %}
+{% endblock assets_custom %}