Adding option types 2

package.json

@@ -52,11 +52,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
+    "@babel/plugin-proposal-decorators": "^7.18.2",
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/plugin-transform-typescript": "^7.16.1",
     "@babel/preset-env": "7.16.11",
     "@babel/preset-typescript": "^7.16.0",
     "@babel/runtime": "^7.17.9",
+    "@sniptt/monads": "^0.5.10",
     "@types/autosize": "^4.0.0",
     "@types/express": "^4.17.13",
     "@types/node": "^17.0.29",
@@ -67,21 +69,23 @@
     "babel-plugin-inferno": "^6.4.0",
     "bootstrap": "^5.1.3",
     "bootswatch": "^5.1.3",
+    "class-transformer": "^0.5.1",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^10.2.4",
     "css-loader": "^6.7.1",
     "eslint": "^8.14.0",
     "eslint-plugin-prettier": "^4.0.0",
     "husky": "^7.0.4",
     "import-sort-style-module": "^6.0.0",
-    "lemmy-js-client": "0.16.4",
+    "lemmy-js-client": "0.17.0-rc.30",
     "lint-staged": "^12.4.1",
     "mini-css-extract-plugin": "^2.6.0",
     "node-fetch": "^2.6.1",
     "prettier": "^2.6.2",
     "prettier-plugin-import-sort": "^0.0.7",
     "prettier-plugin-organize-imports": "^2.3.4",
     "prettier-plugin-packagejson": "^2.2.17",
+    "reflect-metadata": "^0.1.13",
     "rimraf": "^3.0.2",
     "run-node-webpack-plugin": "^1.3.0",
     "sass-loader": "^12.6.0",

src/client/index.tsx

@@ -1,14 +1,15 @@
 import { hydrate } from "inferno-hydrate";
 import { BrowserRouter } from "inferno-router";
+import { GetSiteResponse } from "lemmy-js-client";
 import { App } from "../shared/components/app/app";
-import { initializeSite } from "../shared/utils";
+import { convertWindowJson, initializeSite } from "../shared/utils";
 
-const site = window.isoData.site_res;
+const site = convertWindowJson(GetSiteResponse, window.isoData.site_res);
 initializeSite(site);
 
 const wrapper = (
   <BrowserRouter>
-    <App siteRes={window.isoData.site_res} />
+    <App />
   </BrowserRouter>
 );
 

src/server/index.tsx

@@ -1,11 +1,13 @@
+import { None, Option } from "@sniptt/monads";
+import { serialize as serializeO } from "class-transformer";
 import express from "express";
 import fs from "fs";
 import { IncomingHttpHeaders } from "http";
 import { Helmet } from "inferno-helmet";
 import { matchPath, StaticRouter } from "inferno-router";
 import { renderToString } from "inferno-server";
 import IsomorphicCookie from "isomorphic-cookie";
-import { GetSite, GetSiteResponse, LemmyHttp } from "lemmy-js-client";
+import { GetSite, GetSiteResponse, LemmyHttp, toOption } from "lemmy-js-client";
 import path from "path";
 import process from "process";
 import serialize from "serialize-javascript";
@@ -18,7 +20,7 @@ import {
   IsoData,
 } from "../shared/interfaces";
 import { routes } from "../shared/routes";
-import { initializeSite, setOptionalAuth } from "../shared/utils";
+import { initializeSite } from "../shared/utils";
 
 const server = express();
 const [hostname, port] = process.env["LEMMY_UI_HOST"]
@@ -115,10 +117,9 @@ server.get("/*", async (req, res) => {
   try {
     const activeRoute = routes.find(route => matchPath(req.path, route)) || {};
     const context = {} as any;
-    let auth: string = IsomorphicCookie.load("jwt", req);
+    let auth: Option<string> = toOption(IsomorphicCookie.load("jwt", req));
 
-    let getSiteForm: GetSite = {};
-    setOptionalAuth(getSiteForm, auth);
+    let getSiteForm = new GetSite({ auth });
 
     let promises: Promise<any>[] = [];
 
@@ -138,8 +139,8 @@ server.get("/*", async (req, res) => {
       console.error(
         "Incorrect JWT token, skipping auth so frontend can remove jwt cookie"
       );
-      delete getSiteForm.auth;
-      delete initialFetchReq.auth;
+      getSiteForm.auth = None;
+      initialFetchReq.auth = None;
       try_site = await initialFetchReq.client.getSite(getSiteForm);
     }
     let site: GetSiteResponse = try_site;
@@ -170,7 +171,7 @@ server.get("/*", async (req, res) => {
 
     const wrapper = (
       <StaticRouter location={req.url} context={isoData}>
-        <App siteRes={isoData.site_res} />
+        <App />
       </StaticRouter>
     );
     if (context.url) {
@@ -194,7 +195,7 @@ server.get("/*", async (req, res) => {
            <!DOCTYPE html>
            <html ${helmet.htmlAttributes.toString()} lang="en">
            <head>
-           <script>window.isoData = ${serialize(isoData)}</script>
+           <script>window.isoData = ${serializeO(isoData)}</script>
            <script>window.lemmyConfig = ${serialize(config)}</script>
 
            <!-- A remote debugging utility for mobile -->

src/shared/components/app/app.tsx

@@ -2,53 +2,46 @@ import { Component } from "inferno";
 import { Helmet } from "inferno-helmet";
 import { Provider } from "inferno-i18next-dess";
 import { Route, Switch } from "inferno-router";
-import { GetSiteResponse } from "lemmy-js-client";
 import { i18n } from "../../i18next";
 import { routes } from "../../routes";
-import { favIconPngUrl, favIconUrl } from "../../utils";
+import { favIconPngUrl, favIconUrl, setIsoData } from "../../utils";
 import { Footer } from "./footer";
 import { Navbar } from "./navbar";
 import { NoMatch } from "./no-match";
 import "./styles.scss";
 import { Theme } from "./theme";
 
-export interface AppProps {
-  siteRes: GetSiteResponse;
-}
-
-export class App extends Component<AppProps, any> {
+export class App extends Component<any, any> {
+  private isoData = setIsoData(this.context);
   constructor(props: any, context: any) {
     super(props, context);
   }
   render() {
-    let siteRes = this.props.siteRes;
+    let siteRes = this.isoData.site_res;
+    let siteView = siteRes.site_view;
+
     return (
       <>
         <Provider i18next={i18n}>
           <div>
-            <Theme
-              myUserInfo={siteRes.my_user}
-              defaultTheme={siteRes?.site_view?.site?.default_theme}
-            />
-            {siteRes &&
-              siteRes.site_view &&
-              this.props.siteRes.site_view.site.icon && (
-                <Helmet>
-                  <link
-                    id="favicon"
-                    rel="shortcut icon"
-                    type="image/x-icon"
-                    href={this.props.siteRes.site_view.site.icon || favIconUrl}
-                  />
-                  <link
-                    rel="apple-touch-icon"
-                    href={
-                      this.props.siteRes.site_view.site.icon || favIconPngUrl
-                    }
-                  />
-                </Helmet>
-              )}
-            <Navbar site_res={this.props.siteRes} />
+            <Theme defaultTheme={siteView.map(s => s.site.default_theme)} />
+            {siteView
+              .andThen(s => s.site.icon)
+              .match({
+                some: icon => (
+                  <Helmet>
+                    <link
+                      id="favicon"
+                      rel="shortcut icon"
+                      type="image/x-icon"
+                      href={icon || favIconUrl}
+                    />
+                    <link rel="apple-touch-icon" href={icon || favIconPngUrl} />
+                  </Helmet>
+                ),
+                none: <></>,
+              })}
+            <Navbar siteRes={siteRes} />
             <div class="mt-4 p-0 fl-1">
               <Switch>
                 {routes.map(({ path, exact, component: C, ...rest }) => (
@@ -62,7 +55,7 @@ export class App extends Component<AppProps, any> {
                 <Route render={props => <NoMatch {...props} />} />
               </Switch>
             </div>
-            <Footer site={this.props.siteRes} />
+            <Footer site={siteRes} />
           </div>
         </Provider>
       </>

src/shared/components/app/footer.tsx

@@ -32,7 +32,9 @@ export class Footer extends Component<FooterProps, any> {
                 {i18n.t("modlog")}
               </NavLink>
             </li>
-            {this.props.site.site_view?.site.legal_information && (
+            {this.props.site.site_view
+              .andThen(s => s.site.legal_information)
+              .isSome() && (
               <li className="nav-item">
                 <NavLink className="nav-link" to="/legal">
                   {i18n.t("legal_information")}