[TODO][Enhance] Separate main.js

[gbowne1]

We should now start to think about making main.js into set of 2 or 3 main app files like main.js, app.js and index.js and including a large separation of concerns by making the rest into imported modules. One of these being a place to have a main application that houses DOMContentLoaded. The DOMContentLoaded would then pass in imported modules that get init inside the DOMContentLoaded. All the index.html would have to do is script module tag at least the one with DOMContentLoaded and not have to worry about a single file

This should probably be done along with the previous issue #77

If you need an example of this look at

https://github.com/gbowne1/RadioLogger/blob/f5389f37aa8047ef4f745be97cd60a7d488e60fd/src/client/public/app.js#L9

Fron there it gets imported here

https://github.com/gbowne1/RadioLogger/blob/f5389f37aa8047ef4f745be97cd60a7d488e60fd/src/client/public/index.html#L19

This is how that project was done. Then you would not have to import lots of scripts via script tag to the html. The app.js, index.js, main.js would do all the heavy lifting by import modules from there.

Again reserve this for during #77 cycle/ process and after all of the remaining PRs up to #68 get merged

I believe this will help avoid merge conflict. It's also less hacky and easier to read

We will house seach related items in a search module, login in login module, and so forth.

Oh and use ES7+ JavaScript (import, etc)

[gbowne1]

@Ved178 @EdoAbarca @shishir-21 @Haseebx162006 @glenjaysondmello

I propose we take the functions out of main.js and make it into

/src/js/
  main.js                ← only bootstraps the app
  streams/
    fetchStreams.js
    renderStreams.js
    filters.js
    tagFilter.js
    modal.js
  ui/
    drawer.js
    theme.js             ← we already have this
    search.js

Then main.js became

import { fetchStreams } from './streams/fetchStreams.js';
import { renderStreams } from './streams/renderStreams.js';
import { getFilteredStreams } from './streams/filters.js';
import { filterByTag } from './streams/tagFilter.js';
import { openStreamDetail } from './streams/modal.js';
import { initDrawer } from './ui/drawer.js';
import { initSearch } from './ui/search.js';

document.addEventListener('DOMContentLoaded', async () => {
  const preview = document.getElementById('streamGrid');
  const searchInput = document.getElementById('searchInput');
  const clearSearch = document.getElementById('clearSearch');

  let allStreams = [];

  try {
    allStreams = await fetchStreams();
    renderStreams(allStreams, preview);
  } catch (err) {
    preview.innerHTML = '<p class="text-danger">Failed to load streams.</p>';
  }

  initSearch(searchInput, clearSearch, allStreams, s => renderStreams(s, preview));
});

Its essentially a DOMContentLoaded event listeners in a app that the html calls via a script tag, then individual js files don't need DOMContentLoaded. They can just init.

This is how I did https://github.com/gbowne1/RadioLogger

[shishir-21]

@gbowne1
I agree keeping main.js as the entry point makes the structure much cleaner and easier to maintain.