show user stories on their page

css/index.scss

@@ -202,7 +202,7 @@ h3 {
     div {
         display: flex;
         flex-direction: row;
-        align-items: start;
+        align-items: center;
         margin-left: 0.5em;
         div {
             flex-direction: column;

routes/user.tsx

@@ -1,6 +1,6 @@
 import { h } from "../jsx.ts";
-import watt, { watt as originalWatt } from "../wattpad.ts";
-import { User } from "../wattpad.ts";
+import watt, { Story, watt as originalWatt } from "../wattpad.ts";
+import wattpad, { User } from "../wattpad.ts";
 import { Context } from "../oak.ts";
 
 import Base from "../templates/Base.tsx";
@@ -9,6 +9,7 @@ import FourOhFour from "./404.tsx";
 
 export default async (params: URLSearchParams, ctx: Context) => {
     const name = params.get("name");
+    const chapterNumber = Number(params.get("page")) ?? 0;
     if (!name) {
         throw "deez";
     }
@@ -16,10 +17,26 @@ export default async (params: URLSearchParams, ctx: Context) => {
     const user = new User(originalWatt.session, name);
     try {
         await user.init();
+        await user.updateStories(chapterNumber);
     } catch {
         return FourOhFour(undefined, ctx);
     }
 
+    const res: Story[] = [];
+
+    for (let i = 0; i < user.stories.length; i++) {
+        const rizz = await watt.getStory(user.stories[i].id, false);
+        res.push(
+            <a href={"/story?id=" + rizz.id} class="story">
+                <img src={rizz.storyJSON.cover} />
+                <div>
+                    <h3>{rizz.name}</h3>
+                    <p>{rizz.storyJSON.description}</p>
+                </div>
+            </a>
+        );
+    }
+
     return (
         <Base
             title={user.displayName as string}
@@ -39,6 +56,22 @@ export default async (params: URLSearchParams, ctx: Context) => {
                             {user.displayName === ""
                                 ? undefined
                                 : user.username}
+                            <div style="margin-top: 1em;" />
+                            Followers: {user.userJSON.numFollowers ?? 0}
+                            <br />
+                            Following: {user.userJSON.numFollowing ?? 0}
+                            <form
+                                action={`https://wattpad.com/user/${user.username}`}
+                            >
+                                <button
+                                    type="submit"
+                                    id="wattpad-view"
+                                    class="favorite-story-button"
+                                    style="margin-left: 0.75em;"
+                                >
+                                    View on Wattpad
+                                </button>
+                            </form>
                         </div>
                     </div>
                     <p>
@@ -48,6 +81,53 @@ export default async (params: URLSearchParams, ctx: Context) => {
                     </p>
                 </div>
             </div>
+
+            <div id="stories" class="stories">
+                {res.join("")}
+                <div class="pagenav">
+                    {Number(params.get("page") ?? 0) === 0 ? undefined : (
+                        <a
+                            href={(() => {
+                                // total and utter jank
+                                params.set(
+                                    "page",
+                                    (Number(params.get("page")) - 1).toString()
+                                );
+                                const strParams = params.toString();
+                                params.set(
+                                    "page",
+                                    (Number(params.get("page")) + 1).toString()
+                                );
+                                return (
+                                    `/user?name=${user.username}&` +
+                                    strParams.toString()
+                                );
+                            })()}
+                        >
+                            &lt;
+                        </a>
+                    )}
+                    <div>&nbsp;|&nbsp;</div>
+                    {res.length !== 20 &&
+                    (res.length as number) !== 19 ? undefined : (
+                        <a
+                            href={(() => {
+                                const tmpParams = params;
+                                tmpParams.set(
+                                    "page",
+                                    (Number(params.get("page")) + 1).toString()
+                                );
+                                return (
+                                    `/user?name=${user.username}&` +
+                                    tmpParams.toString()
+                                );
+                            })()}
+                        >
+                            &gt;
+                        </a>
+                    )}
+                </div>
+            </div>
         </Base>
     );
 };