Solved mistake for updating of a style. And.. anything else.. don't remember, and I'm tired, so something like that XD

frontend/src/main.ts

@@ -4,12 +4,22 @@ import { DarkStyle, LightStyle, SupportedStyles } from "./styles";
 import { ControllerAPI } from "./api/RESTful";
 import { NewsFeed } from "./pages/feed/news";
 import { AuthenticationPage } from "./pages/auth/auth";
+import { DefaultElement } from "./pages/default-element";
+
+/*declare global {
+    interface Window {
+        selectedStyle: SupportedStyles;
+    }
+}*/
+const styleLinker : {
+    selectedStyle: SupportedStyles
+} = {
+    selectedStyle: new LightStyle()
+};
 
 // I'll add a dark mode toggle later, but for now let's just use the light style by default
-const defaultStyle = new LightStyle();
-const styleMemLink = {
-    currentStyle: () : SupportedStyles => defaultStyle
-};
+//window.selectedStyle = new LightStyle();
+const currentStyle: () => SupportedStyles = () => styleLinker.selectedStyle;
 
 { // I hate trash in global scope, so I wrap it in a block
     const appElement = document.getElementById("app");
@@ -22,51 +32,58 @@ const api : ControllerAPI = new ControllerAPI();
 
 async function authInit() {
     console.log("User is authenticated");
-    const newsFeed = await api.getNews(true) as NewsFeed;
-    newsFeed.style = styleMemLink.currentStyle;
-    const appElement = document.getElementById("app");
-    if (appElement)
-        appElement.innerHTML = newsFeed.build();
+    return await api.getNews(true) as NewsFeed;
 }
 
 async function logInInit () {
-    console.log("User is not authenticated");
-    const authPage = await api.getAuthRules(true) as AuthenticationPage;
-    authPage.style = styleMemLink.currentStyle;
-    const appElement = document.getElementById("app");
-    if (appElement)
-        appElement.innerHTML = authPage.build();
+    console.log("User isn't authenticated");
+    return await api.getAuthRules(true) as AuthenticationPage;
 }
 
-async function changeStyleLogic () {
+async function changeStyleLogic (activeElement: DefaultElement, navbar: DefaultElement) {
     const themes : SupportedStyles[] = [
-        defaultStyle,
+        new LightStyle(),
         new DarkStyle()
     ];
     let choosed = 0;
 
     themeToggle.onClick = () => {
         choosed++;
-        if (choosed >= themes.length)
+        let choosedTheme: SupportedStyles | undefined = themes[choosed];
+        if (choosedTheme === undefined) {
+            choosedTheme = themes[0] as SupportedStyles;
             choosed = 0;
+        }
+        console.log('choosedTheme', choosedTheme);
 
-        styleMemLink.currentStyle = () => themes[choosed] as SupportedStyles;
-        GefestEngine.render();
+        styleLinker.selectedStyle = choosedTheme;
+        GefestEngine.render([activeElement.gefestId, navbar.gefestId]);
     };
 }
 
 async function main() {
-    await changeStyleLogic();
     // init navbar
     const navbar = new Navbar();
-    navbar.style = styleMemLink.currentStyle;
-    document.body.innerHTML = "<div id='app'></div>" + navbar.build();
+    navbar.style = currentStyle;
 
+    let activeElement: DefaultElement;
     if (await api.isAuthenticated()) {
-        await authInit();
+        activeElement = await authInit();
     } else {
-        await logInInit();
+        activeElement = await logInInit();
     }
+
+    const appElement : DefaultElement = new (class extends DefaultElement {
+        constructor() {
+            super([ activeElement ]);
+            this.id = "app";
+        }
+    });
+    appElement.style = currentStyle;
+
+    //document.body.innerHTML = appElement.build() + navbar.build();
+    document.body.innerHTML = appElement.build();
+    await changeStyleLogic(appElement, navbar);
 }
 
 GefestEngine.main(main).catch(error => {

frontend/src/modules/Gefest/element.ts

@@ -221,9 +221,23 @@ export abstract class GefestElement {
      * @returns The attributes string.
      */
     protected attributesToString (): string {
-        return Object.entries(this.attributes)
-            .map(([key, value]) => `${key}="${value}"`)
-            .join(' ');
+        let style : GefestStyle | null = null;
+        if (typeof this.style === 'function') {
+            style = this.style();
+        } else {
+            style = this.style;
+        }
+
+        let attributes = Object.assign({}, this.attributes);
+        if (style instanceof GefestStyle)
+            attributes.class = [
+                attributes.class,
+                style.getClasses(this).join(" ")
+            ].join(" ");
+
+        return Object.entries(
+            attributes
+        ).map(([key, value]) => `${key}="${value}"`).join(' ');
     }
 
     /**

frontend/src/modules/Gefest/style.ts

@@ -1,7 +1,6 @@
 import { GefestElement } from "./element";
 
 export abstract class GefestStyle {
-    applyStyle (html: string, element ?: GefestElement): string {
-        throw new Error('You need to implement the applyStyle method in the child class');
-    }
+    abstract getClasses(element : GefestElement): string[];
+    abstract applyStyle (html: string, element ?: GefestElement): string;
 }

frontend/src/styles.ts

@@ -4,63 +4,68 @@ import { Navbar } from "./pages/navbar";
 import { isNewsUI, NewsUserInterface } from "./pages/feed/news";
 
 abstract class SkeletonStyle extends GefestStyle {
-    protected abstract navbar(element: GefestElement): void;
-    protected abstract newsui(element: GefestElement): void;
-    protected abstract styleHandle(element: GefestElement): void;
+    protected abstract navbar(styleClasses: Set<string>, element : GefestElement): void;
+    protected abstract newsui(styleClasses: Set<string>, element : GefestElement): void;
+    protected abstract styleHandle(styleClasses: Set<string>, element : GefestElement): void;
     applyStyle(html: string, element?: GefestElement): string {
         if (!element)
             element = GefestElement.fromHTML(html);
-        //element.addClass("light-mode");
-        this.styleHandle(element);
-        this.navbar(element);
-        this.newsui(element);
         return element.build(true);
     }
+    getClasses(element: GefestElement): string[] {
+        const styleClasses : Set<string> = new Set<string>();
+        this.styleHandle(styleClasses, element);
+
+        this.navbar(styleClasses, element);
+        this.newsui(styleClasses, element);
+        return Array.from(styleClasses);
+    }
 }
 
 export class DarkStyle extends SkeletonStyle {
-    newsui(element: GefestElement): void {
+    newsui(styleClasses: Set<string>, element : GefestElement): void {
         if (isNewsUI(element)) {
-            element.removeClass("bg-dark");
-            element.addClass("dark-news-ui");
+            styleClasses.delete("bg-dark");
+            styleClasses.add("dark-news-ui");
         }
 
         if (element instanceof NewsUserInterface) {
-            element.removeClass("bg-dark");
+            styleClasses.delete("bg-dark");
         }
     }
 
-    navbar(element: GefestElement): void {
+    navbar(styleClasses: Set<string>, element : GefestElement): void {
         if (element instanceof Navbar) {
-            element.addClass("dark-navbar");
+            styleClasses.add("dark-navbar");
         }
     }
 
-    protected styleHandle(element: GefestElement): void {
-        element.addClass("bg-dark");
-        element.addClass("text-light");
+    protected styleHandle(styleClasses: Set<string>): void {
+        styleClasses.add("bg-dark");
+        styleClasses.add("text-light");
     }
 }
 
 export class LightStyle extends SkeletonStyle {
-    newsui(element: GefestElement): void {
+    newsui(styleClasses: Set<string>, element : GefestElement): void {
         if (isNewsUI(element)) {
-            element.removeClass("bg-light");
-            element.addClass("light-news-ui");
+            styleClasses.delete("bg-light");
+            styleClasses.add("light-news-ui");
         }
 
         if (element instanceof NewsUserInterface) {
-            element.removeClass("bg-light");
+            styleClasses.delete("bg-light");
         }
     }
 
-    navbar(element: GefestElement): void {
+    navbar(styleClasses: Set<string>, element : GefestElement): void {
         //element.addClass("light-navbar");
     }
 
-    protected styleHandle(element: GefestElement): void {
-        element.addClass("bg-light");
-        element.addClass("text-dark");
+    protected styleHandle(styleClasses: Set<string>, element : GefestElement): void {
+        styleClasses.add("bg-light");
+        styleClasses.add("bg-light");
+        styleClasses.add("text-dark");
     }
 }