refactors structure of project

web/assets/js/modals/playground-mode.js → web/assets/js/components/modals/playground-mode.js

@@ -1,8 +1,9 @@
 import {
   renderExamplesInSelectInstance,
   renderTabs,
-} from "../utils/render-functions.js";
-import { AceEditor } from "../editor.js";
+} from "../../utils/render-functions.js";
+import { AceEditor } from "../../editor.js";
+import { ModesService } from "../../services/modes.js";
 
 const celEditor = new AceEditor("cel-input");
 const dataEditor = new AceEditor("data-input");
@@ -51,7 +52,7 @@ function handleModeClick(event, mode, element) {
 function renderModeOptions() {
   const el = document.querySelector(".playground-modes__options");
 
-  getModes()
+  ModesService.getModes()
     .then((modes) => {
       modes.forEach((mode, i) => {
         const divOption = createParentElement(mode);
@@ -102,12 +103,6 @@ function createInputElement(mode) {
   return input;
 }
 
-async function getModes() {
-  const response = await fetch("../../assets/modes.json");
-  const modes = await response.json();
-  return modes;
-}
-
 function closeModal() {
   playgroundModesModalEl.style.display = "none";
 }

web/assets/js/services/examples.js

@@ -0,0 +1,11 @@
+async function getExampleContentById(mode, exampleID) {
+  const response = await fetch(
+    `../../assets/examples/${mode.id}/${exampleID}.json`
+  );
+  const data = await response.json();
+  return data;
+}
+
+export const ExampleService = {
+  getExampleContentById,
+};

web/assets/js/services/modes.js

@@ -0,0 +1,9 @@
+async function getModes() {
+  const response = await fetch("../../assets/modes.json");
+  const modes = await response.json();
+  return modes;
+}
+
+export const ModesService = {
+  getModes,
+};

web/assets/js/utils/render-functions.js

@@ -1,4 +1,5 @@
 import { AceEditor } from "../editor.js";
+import { ExampleService } from "../services/examples.js";
 
 const celEditor = new AceEditor("cel-input");
 const dataEditor = new AceEditor("data-input");
@@ -119,12 +120,12 @@ export function renderTabs(mode) {
 }
 
 function fetchTabData(mode, exampleID, tabButton) {
-  fetch(`../../assets/examples/${mode.id}/${exampleID}.json`)
-    .then((response) => response.json())
-    .then(({ code, inputs }) => {
+  ExampleService.getExampleContentById(mode, exampleID).then(
+    ({ code, inputs }) => {
       celEditor.setValue(code, -1);
       if (tabButton) {
         dataEditor.setValue(inputs[tabButton.id], -1);
       }
-    });
+    }
+  );
 }

web/index.html

@@ -407,11 +407,18 @@ <h1>Playground modes</h1>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js"></script>
     <script src="dist/nice-select2.js"></script>
+    <script type="module" src="assets/js/services/modes.js"></script>
     <script type="module" src="assets/js/utils/render-functions.js"></script>
     <script src="assets/js/constants.js"></script>
     <script type="module" src="assets/js/main.js"></script>
-    <script type="module" src="assets/js/modals/playground-mode.js"></script>
-    <script type="module" src="assets/js/tooltips/index.js"></script>
-    <script type="module" src="assets/js/accordions/result.js"></script>
+    <script
+      type="module"
+      src="assets/js/components/modals/playground-mode.js"
+    ></script>
+    <script type="module" src="assets/js/components/tooltips/index.js"></script>
+    <script
+      type="module"
+      src="assets/js/components/accordions/result.js"
+    ></script>
   </body>
 </html>