Merge pull request #25 from IIM-Creative-Technology/feature/22-socket-integration

Socket integration

Author: ColinEspinas

apps/api/package.json

@@ -34,6 +34,7 @@
     "argon2": "^0.28.5",
     "express-validator": "^6.14.0",
     "jsonwebtoken": "^8.5.1",
-    "milliparsec": "^2.2.1"
+    "milliparsec": "^2.2.1",
+    "socket.io": "^4.5.1"
   }
 }

apps/api/src/auth/auth-routes.ts

@@ -1,10 +1,11 @@
 import type { App } from '@tinyhttp/app';
 import type { PrismaClient } from '@prisma/client';
+import type { Server } from 'socket.io';
 import { body } from 'express-validator';
 import { getHandler } from './auth-handler';
 // import { requireAuth } from '../util/middleware.js';
 
-const authRoutes = (app: App, prisma: PrismaClient) => {
+const authRoutes = (app: App, io: Server, prisma: PrismaClient) => {
   const handler = getHandler(prisma);
 
   app.post(

apps/api/src/column/column-routes.ts

@@ -1,10 +1,10 @@
 import type { App } from '@tinyhttp/app';
 import type { PrismaClient } from '@prisma/client';
 import { body } from 'express-validator';
+import type { Server } from 'socket.io';
 import { getHandler } from './column-handler';
-// import { requireAuth } from '../util/middleware.js';
 
-const projectRoutes = (app: App, prisma: PrismaClient) => {
+const projectRoutes = (app: App, io: Server, prisma: PrismaClient) => {
   const handler = getHandler(prisma);
 
   app.get('/projects', handler.getColumns);

apps/api/src/create-api.ts

@@ -1,3 +1,5 @@
+import { Server } from 'socket.io';
+import http from 'http';
 import { App } from '@tinyhttp/app';
 import { cors } from '@tinyhttp/cors';
 import { jwt } from '@tinyhttp/jwt';
@@ -9,22 +11,24 @@ import { projectRoutes } from './project/project-routes';
 import { authRoutes } from './auth/auth-routes';
 import { taskRoutes } from './task/task-routes';
 
-
 const createApi = (prisma: PrismaClient) => {
   const app = new App();
+  const server = http.createServer();
+  server.on('request', app.attach);
+  const io = new Server(server);
 
   app
     .use(jwt({ secret: process.env.JWT_SECRET ?? 'secret', algorithm: 'HS256' }))
     .use(cors())
     .use((req, res, next) => (req.headers['content-type'] === 'application/json' ? json()(req, res, next) : next()))
     .use(logger());
 
-  authRoutes(app, prisma);
-  userRoutes(app, prisma);
-  projectRoutes(app, prisma);
-  taskRoutes(app, prisma);
+  authRoutes(app, io, prisma);
+  userRoutes(app, io, prisma);
+  projectRoutes(app, io, prisma);
+  taskRoutes(app, io, prisma);
 
-  return app;
+  return server;
 };
 
 export { createApi };

apps/api/src/project/project-handler.ts

@@ -31,6 +31,19 @@ const getHandler = (prisma: PrismaClient) => {
       const newProject = await prisma.project.create({
         data: {
           name: req.body.name,
+          columns: {
+            create: [
+              {
+                name: 'To do',
+              },
+              {
+                name: 'In progress',
+              },
+              {
+                name: 'Done',
+              },
+            ],
+          },
         },
       });
       res.json(newProject);

apps/api/src/project/project-routes.ts

@@ -1,10 +1,10 @@
 import type { App } from '@tinyhttp/app';
 import type { PrismaClient } from '@prisma/client';
 import { body } from 'express-validator';
+import type { Server } from 'socket.io';
 import { getHandler } from './project-handler';
-// import { requireAuth } from '../util/middleware.js';
 
-const projectRoutes = (app: App, prisma: PrismaClient) => {
+const projectRoutes = (app: App, io: Server, prisma: PrismaClient) => {
   const handler = getHandler(prisma);
 
   app.get('/projects', handler.getProjects);

apps/api/src/task/task-routes.ts

@@ -1,11 +1,13 @@
 import type { App } from '@tinyhttp/app';
 import type { PrismaClient } from '@prisma/client';
 import { body } from 'express-validator';
+import type { Server, Socket } from 'socket.io';
 import { getHandler } from './task-handler';
-// import { requireAuth } from '../util/middleware.js';
+import { getSocketHandler } from './task-sockets';
 
-const taskRoutes = (app: App, prisma: PrismaClient) => {
+const taskRoutes = (app: App, io: Server, prisma: PrismaClient) => {
   const handler = getHandler(prisma);
+  const socketHandler = getSocketHandler(io, prisma);
 
   app.get('/tasks', handler.getTasks);
   app.get('/tasks/:id', handler.getTask);
@@ -24,6 +26,11 @@ const taskRoutes = (app: App, prisma: PrismaClient) => {
     handler.updateTask,
   );
   app.delete('/tasks/:id', handler.deleteTask);
+
+  io.on('connection', (socket: Socket) => {
+    socket.on('tasks:move', socketHandler.moveTask);
+    socket.on('task:edit', socketHandler.editTask);
+  });
 };
 
 export { taskRoutes };

apps/api/src/task/task-sockets.ts

@@ -0,0 +1,48 @@
+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { PrismaClient } from '@prisma/client';
+import type { Server } from 'socket.io';
+
+const getSocketHandler = (io: Server, prisma: PrismaClient) => {
+  const moveTask = async (payload?: any) => {
+    try {
+      await prisma.task.update({
+        where: {
+          id: payload?.task?.id,
+        },
+        data: {
+          column: {
+            connect: { id: payload?.columnId },
+          },
+        },
+      });
+      io.emit('tasks:move', payload);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const editTask = async (payload?: any) => {
+    try {
+      await prisma.task.update({
+        where: {
+          id: payload?.task?.id,
+        },
+        data: {
+          name: payload?.task?.name,
+          content: payload?.task?.content,
+        },
+      });
+      io.emit('tasks:edit', payload);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return {
+    moveTask,
+    editTask,
+  };
+};
+
+export { getSocketHandler };

apps/api/src/user/user-routes.ts

@@ -1,10 +1,11 @@
 import type { App } from '@tinyhttp/app';
 import type { PrismaClient } from '@prisma/client';
 import { body } from 'express-validator';
+import { Server } from 'socket.io';
 import { getHandler } from './user-handler';
 import { requireAuth } from '../utils/middlewares/auth';
 
-const userRoutes = (app: App, prisma: PrismaClient) => {
+const userRoutes = (app: App, io: Server, prisma: PrismaClient) => {
   const handler = getHandler(prisma);
 
   app.get('/users', requireAuth, handler.getUsers);

apps/web/components/AppColumn.vue

@@ -2,8 +2,8 @@
 import Draggable from 'vuedraggable';
 
 const props = defineProps({
-  title: {
-    type: String,
+  data: {
+    type: Object,
     required: true,
   },
 });
@@ -19,7 +19,7 @@ const tasks = ref([
   <div class="flex">
     <div class="card bg-secondary-content mx-5 min-h-screen w-72">
       <h2 class="m-2">
-        {{ props.title }}
+        {{ props.data.name }}
       </h2>
       <Draggable
         v-model="tasks"
@@ -28,7 +28,7 @@ const tasks = ref([
         group="tasks"
       >
         <template #item="{element}">
-          <AppTask :title="element.title" />
+          <AppTask :data="element" />
         </template>
       </Draggable>
     </div>