up frontend list

when add new media reload all media

build.ts

@@ -1,7 +1,4 @@
 
-
-
-
 async function build() {
   const minify = {
     whitespace: true,
@@ -16,9 +13,6 @@ async function build() {
   })
 
   console.log(sa);
-
-  const { stdout } = Bun.spawnSync({ cmd: ["bun", "build", "./app.ts", "--outfile=bundle.js", "--target=bun", "--minify"] });
-  console.log(stdout.toString());
 }
 
 build();

frontend/list/list.tsx

@@ -3,9 +3,6 @@ import { splitByTitle, splitByYear } from "./functions";
 
 import * as elements from "../elementcreate";
 
-
-
-
 var sortType = 0;
 var listType = 0;
 
@@ -36,6 +33,16 @@ function getLink(): string {
   return "/api/media/movies";
 }
 
+async function reload() {
+  try {
+    const response = await fetch(getLink());
+    const movies = await response.json();
+    renderMedias(movies);
+  } catch (err) {
+    console.log(err);
+  }
+}
+
 function submitMedia(event: SubmitEvent) {
   event.preventDefault();
 
@@ -62,21 +69,7 @@ function submitMedia(event: SubmitEvent) {
         return;
       }
 
-      const movie: Movie = await response.json();
-      var letter = movie.title[0].toUpperCase();
-      if (!isNaN(parseInt(letter))) letter = "#";
-
-      const mediaElement = <MediaElement webImg={movie.webImg} title={movie.title} released={movie.released} id={movie.code} fun={removeMedia} imageError={onImgError} />;
-
-      const container = document.getElementById(letter);
-      if (!container) {
-        root?.appendChild(<MyHeader title={letter} />);
-        root?.appendChild(<MediaContainer id={letter}>{mediaElement}</MediaContainer>);
-        return
-      };
-      container.appendChild(mediaElement);
-
-      movieElements.push(mediaElement);
+      await reload();
     })
     .catch(err => {
       console.log(err);
@@ -122,9 +115,6 @@ function loadState() {
   }
 }
 
-/** 
- * @param {number} type 
- */
 function changeType(type: number) {
   listType = type;
   loadPage();
@@ -143,9 +133,6 @@ function changeType(type: number) {
   history.replaceState({}, '', window.location.pathname + '?' + searchParams.toString());
 }
 
-/**
- * @param {number} type 
- */
 function changeSort(type: number) {
   sortType = type;
   loadPage();
@@ -216,13 +203,7 @@ async function loadPage() {
   listButtons.forEach(button => button?.classList.remove("active"));
   listButtons[listType]?.classList.add("active");
 
-  try {
-    const response = await fetch(getLink());
-    const movies = await response.json();
-    renderMedias(movies);
-  } catch (err) {
-    console.log(err);
-  }
+  await reload();
 }
 
 
@@ -270,6 +251,7 @@ function renderMedias(unsorted_movies: Array<Movie>) {
   if (!root) return;
 
   root.innerHTML = "";
+  movieElements = [];
 
   const splitMovies = splitBySort(unsorted_movies);