add following and ui updates

client/main.js

@@ -6,7 +6,7 @@ let db = await initDb();
 
 let main = new Route([auth], async function (req, res, input) {
     let { username } = input;
-    let videos = await db.all('SELECT * FROM video ORDER BY date DESC', [
+    let videos = await db.all('SELECT * FROM video ORDER BY date DESC LIMIT 10', [
     ]);
     return res.render('main', {
         username,

client/user.js

@@ -9,10 +9,21 @@ let main = new Route([comment], async function (req, res, input) {
     let videos = await db.all('SELECT * FROM video WHERE username = ? ORDER BY date DESC', [
         req.query.id
     ]);
+
+    let followers = await db.all('SELECT * FROM follow WHERE target = ?', [
+        req.query.id
+    ]);
+
+    let following = await db.all('SELECT * FROM follow WHERE username = ?', [
+        req.query.id
+    ]);
+
     return res.render('user', {
         ...input,
         id,
-        videos
+        videos,
+        followers,
+        following
     });
 });
 

db.js

@@ -17,6 +17,8 @@ async function initDb() {
     await db.run(`CREATE TABLE IF NOT EXISTS video (id TEXT, title TEXT, desc TEXT, username TEXT, date REAL);`);
     await db.run('CREATE TABLE IF NOT EXISTS comment (username TEXT, targetType TEXT, targetId TEXT, date REAL, content TEXT, id TEXT);');
 
+    await db.run('CREATE TABLE IF NOT EXISTS follow (username TEXT, target TEXT);');
+
     return db;
 }
 

form/comment.js

@@ -1,12 +1,8 @@
 import Route from "../route.js";
 import initDb from "../db.js";
 import { randomUUID } from 'node:crypto';
-import { exec } from 'node:child_process';
-import { promisify } from "node:util";
 import auth from "../form/auth.js";
 
-const execP = promisify(exec);
-
 let db = await initDb();
 
 // TODO: rewrite

form/follow.js

@@ -0,0 +1,40 @@
+import Route from "../route.js";
+import initDb from "../db.js";
+import { randomUUID } from 'node:crypto';
+import auth from "../form/auth.js";
+
+let db = await initDb();
+function isValid(user) {
+    return user.search(/[^A-Za-z0-9\-\_]/g) == -1;
+}
+// TODO: rewrite
+let main = new Route([auth], async function (req, res, input) {
+    let { username } = input;
+    let id = randomUUID();
+
+    let { target } = req.body;
+    if (!isValid(target) || username == '!nobody')
+        return { 'success': false, 'message': 'Some fields are missing' }; // probably should not re-use these strings
+
+    let isFollowing = await db.all('SELECT * FROM follow WHERE username = ? AND target = ?', [
+        username,
+        target
+    ]);
+
+    if (isFollowing.length > 0) {
+        await db.run('DELETE FROM follow WHERE username = ? AND target = ?', [
+            username,
+            target
+        ]);
+    } else {
+        await db.run('INSERT INTO follow (username,target) VALUES (?,?)', [
+            username,
+            target
+        ]);
+    }
+
+
+    res.send({ redir: `?` });
+});
+
+export default main;

routes.js

@@ -10,6 +10,7 @@ import registerB from "./form/register.js";
 import uploadB from "./form/upload.js";
 import auth from "./form/auth.js";
 import commentB from "./form/comment.js";
+import follow from './form/follow.js';
 
 const routes = {
     get: {},
@@ -32,7 +33,8 @@ routes.form = {
     register: registerB,
     upload: uploadB,
     auth,
-    comment: commentB
+    comment: commentB,
+    follow
 };
 
 async function iterate(req, res, index) {

views/main.ejs

@@ -1,24 +1,18 @@
 <%- include('header.ejs') -%>
     <div class='area'>
         <h1>BiglyChat</h1>
-        <p><i>Collab on videos... make creative animations... and more!</i></p>
-        <details>
-            <summary><b>About</b></summary>
-            <p><i>I am <a href='https://zenoverse.net/'>Onez</a>, a self-taught developer from a young age. Following
-                    the
-                    unexpected growth
-                    of <i>Video Bot Thing</i>, I made this as a home for the video editing community. View the <a
-                        href='https://codeberg.org/onezDerv/bigly-chat'>source</a> if you want to contribute or make a
-                    fork.</i></p>
-        </details>
+        <p>Express your niche...</p>
+        <p>Build a video community...</p>
+        <p>And more!</p>
         <details>
             <summary><b>Guidelines</b></summary>
             <%- include ('guidelines.ejs') -%>
         </details>
+        <h2>Signing up to upload content</h2>
         <%if (username=='!nobody' ) { %>
-            <div class="button"><a href="/client/register">Join</a></div>
+            <div class="button"><a href="/client/register">Create</a></div>
             <% } %>
-            <div class="button"><a href="https://discord.gg/7JJBYySY">Chat</a></div>
+                <div class="button"><a href="https://discord.gg/7JJBYySY">Discord Chat</a></div>
     </div>
     <div class='area'>
         <h1>Recent Videos</h1>

views/user.ejs

@@ -1,12 +1,19 @@
 <%- include('header.ejs') -%>
     <div class='area'>
         <h1>User</h1>
-        <div class='user'>
-
+        <form class='user' enctype='multipart/form-data' method='POST' action='/api/form/follow'>
             <p>
                 <b>@<%= id %></b>
             </p>
-        </div>
+            <p>
+                <%= following.length %> following
+            </p>
+            <p>
+                <%= followers.length %> followers
+            </p>
+            <input name='target' hidden value="<%= id %>">
+            <input type='submit' value="Follow">
+        </form>
     </div>
     <div class='area'>
         <h1>Uploaded Videos</h1>
@@ -15,4 +22,4 @@
         </div>
     </div>
     <%- include('comments.ejs') -%>
-    <%- include('footer.ejs') -%>
+        <%- include('footer.ejs') -%>