fix: route not found for nextjs api routes

src/lib/middleware/withZipline.ts

@@ -184,6 +184,7 @@ export const withZipline =
         if (!user) return null;
         return user;
       } catch (e) {
+        Logger.get('withZipline').debug(e.message);
         if (e.code && e.code === 'ERR_CRYPTO_TIMING_SAFE_EQUAL_LENGTH') {
           req.cleanCookie('user');
           return null;

src/lib/recoil/settings.ts

@@ -0,0 +1,32 @@
+import { atom, selector } from 'recoil';
+
+const localStorageEffect =
+  (key) =>
+  ({ setSelf, onSet }) => {
+    const savedValue = localStorage.getItem(key);
+    if (savedValue != null) {
+      setSelf(JSON.parse(savedValue));
+    }
+
+    onSet((newValue, _, isReset) => {
+      isReset ? localStorage.removeItem(key) : localStorage.setItem(key, JSON.stringify(newValue));
+    });
+  };
+
+export type Settings = {
+  showNonMedia: boolean;
+};
+
+export const settingsState = atom<Settings>({
+  key: 'settingsState',
+  default: {
+    showNonMedia: false,
+  },
+  effects: [localStorageEffect('zipline_settings')],
+});
+
+export const showNonMediaSelector = selector<boolean>({
+  key: 'settingsState',
+  get: ({ get }) => get(settingsState).showNonMedia,
+  set: ({ set }, newValue) => set(settingsState, { showNonMedia: newValue }),
+});

src/server/index.ts

@@ -4,7 +4,7 @@ import datasource from '../lib/datasource';
 import Logger from '../lib/logger';
 import { getStats } from './util';
 
-import fastify, { FastifyInstance, FastifyServerOptions } from 'fastify';
+import fastify, { FastifyInstance, FastifyRequest, FastifyServerOptions } from 'fastify';
 import { createReadStream, existsSync, readFileSync } from 'fs';
 import dbFileDecorator from './decorators/dbFile';
 import notFound from './decorators/notFound';
@@ -20,6 +20,7 @@ import prismaPlugin from './plugins/prisma';
 import rawRoute from './routes/raw';
 import uploadsRoute, { uploadsRouteOnResponse } from './routes/uploads';
 import urlsRoute, { urlsRouteOnResponse } from './routes/urls';
+import { IncomingMessage } from 'http';
 
 const dev = process.env.NODE_ENV === 'development';
 const logger = Logger.get('server');
@@ -69,23 +70,23 @@ async function start() {
     done();
   });
 
-  server.addHook('onResponse', (req, reply, done) => {
-    if (config.core.logger || dev || process.env.DEBUG) {
-      if (req.url.startsWith('/_next')) return done();
+  // server.addHook('onResponse', (req, reply, done) => {
+  //   if (config.core.logger || dev || process.env.DEBUG) {
+  //     if (req.url.startsWith('/_next')) return done();
 
-      server.logger.child('response').info(`${req.method} ${req.url} -> ${reply.statusCode}`);
-      server.logger.child('response').debug(
-        JSON.stringify({
-          method: req.method,
-          url: req.url,
-          headers: req.headers,
-          body: req.headers['content-type']?.startsWith('application/json') ? req.body : undefined,
-        })
-      );
-    }
+  //     server.logger.child('response').info(`${req.method} ${req.url} -> ${reply.statusCode}`);
+  //     server.logger.child('response').debug(
+  //       JSON.stringify({
+  //         method: req.method,
+  //         url: req.url,
+  //         headers: req.headers,
+  //         body: req.headers['content-type']?.startsWith('application/json') ? req.body : undefined,
+  //       })
+  //     );
+  //   }
 
-    done();
-  });
+  //   done();
+  // });
 
   server.get('/favicon.ico', async (_, reply) => {
     if (!existsSync('./public/favicon.ico')) return reply.notFound();
@@ -150,6 +151,25 @@ async function start() {
   server.get('/r/:id', rawRoute.bind(server));
   server.get('/', (_, reply) => reply.redirect('/dashboard'));
 
+  server.after(() => {
+    // overrides fastify's default parser so that next.js can handle the request
+    // in the future Zipline's api will probably be entirely handled by fastify
+    async function parser(_: FastifyRequest, payload: IncomingMessage) {
+      return payload;
+    }
+
+    server.addContentTypeParser('text/plain', parser);
+    server.addContentTypeParser('application/json', parser);
+    server.addContentTypeParser('multipart/form-data', parser);
+
+    server.next('/*', { method: 'ALL' });
+    server.next('/api/*', { method: 'ALL' });
+  });
+
+  // server.setDefaultRoute((req, res) => {
+  //   server.nextHandle(req, res);
+  // });
+
   await server.listen({
     port: config.core.port,
     host: config.core.host ?? '0.0.0.0',

src/server/plugins/next.ts

@@ -15,10 +15,11 @@ async function nextPlugin(fastify: FastifyInstance, options: NextServerOptions)
     .decorate('nextHandle', handle)
     .decorate('next', route.bind(fastify));
 
-  fastify.next('/*');
-
-  function route(path, opts: any = { method: 'get' }) {
-    this[opts.method.toLowerCase()](path, opts, handler);
+  function route(path, opts: any = { method: 'GET' }) {
+    if (typeof opts.method === 'string') this[opts.method.toLowerCase()](path, opts, handler);
+    else if (Array.isArray(opts.method)) {
+      for (const method of opts.method) this[method.toLowerCase()](path, opts, handler);
+    }
 
     async function handler(req: FastifyRequest, reply: FastifyReply) {
       for (const [key, value] of Object.entries(reply.getHeaders())) {
@@ -42,7 +43,7 @@ export default fastifyPlugin(nextPlugin, {
 declare module 'fastify' {
   interface FastifyInstance {
     nextServer: ReturnType<typeof next>;
-    next: (path: string, opts?: { method: string }) => void;
+    next: (path: string, opts?: { method: string | string[] }) => void;
     nextHandle: (req: IncomingMessage, res: OutgoingMessage | ServerResponse) => Promise<void>;
   }
 }