Add clicks to links

components/Admin/LinksTable/index.js

@@ -53,6 +53,12 @@ const columns = [
       return <a href={url}>{url}</a>;
     }
   },
+  {
+    title: 'Clicks',
+    dataIndex: 'clicks',
+    align: 'center',
+    className: styles.visible
+  },
   {
     title: 'Action',
     fixed: 'right',

models/Link.js

@@ -1,11 +1,14 @@
 import mongoose, { Schema } from 'mongoose';
+import { nanoid } from 'nanoid';
 
 const Link = new Schema({
   title: { type: String, required: true },
   url: { type: String, required: true },
   emoji: { type: String, required: false },
   attention: { type: Boolean, default: false },
   index: { type: Number, required: true, index: true },
+  slug: { type: String, unique: true, index: true, required: true, default: () => nanoid(10) },
+  clicks: { type: Number, default: 0 },
   created: { type: Date, default: Date.now }
 });
 

package.json

@@ -25,6 +25,7 @@
     "antd": "^4.12.2",
     "luxon": "^1.26.0",
     "mongoose": "^5.11.15",
+    "nanoid": "^3.1.20",
     "next": "^10.0.7",
     "next-plugin-yaml": "^1.0.1",
     "react": "^17.0.1",

pages/[redirect]/[key].js

@@ -35,6 +35,32 @@ export async function getServerSideProps({ params }) {
     };
   }
 
+  if (redirect === 'r') {
+    const response = await API.get(`/links/${key}/url`)
+      .then((response) => {
+        return response;
+      })
+      .catch((error) => {
+        return error;
+      });
+
+    if (!response.data.success) {
+      return {
+        props: {
+          code: response.status,
+          message: response.data.error.message || response.statusText
+        }
+      };
+    }
+
+    return {
+      redirect: {
+        destination: response.data.data,
+        permanent: false
+      }
+    };
+  }
+
   if (redirect === 'f') {
     const response = await API.get(`/forms/${key}/url`)
       .then((response) => {

pages/api/links/[id].js → pages/api/links/[id]/index.js

@@ -1,6 +1,6 @@
 import { withApiAuthRequired } from '@auth0/nextjs-auth0';
-import dbConnect from '../../../utils/database';
-import Link from '../../../models/Link';
+import dbConnect from '../../../../utils/database';
+import Link from '../../../../models/Link';
 
 export default withApiAuthRequired(async (req, res) => {
   const {

pages/api/links/[id]/url.js

@@ -0,0 +1,33 @@
+import dbConnect from '../../../../utils/database';
+import Link from '../../../../models/Link';
+
+export default async (req, res) => {
+  const {
+    query: { id: slug },
+    method
+  } = req;
+
+  await dbConnect();
+
+  switch (method) {
+    case 'GET':
+      try {
+        const link = await Link.findOneAndUpdate({ slug }, { $inc: { clicks: 1 } }, { new: true });
+
+        if (!link) {
+          return res.status(404).json({ success: false, error: { message: 'Link not found' } });
+        }
+        res.status(200).json({ success: true, data: link.url });
+      } catch (error) {
+        res.status(400).json({ success: false, error: { message: error.message } });
+      }
+      break;
+    default:
+      res.setHeader('Allow', ['GET']);
+      res.status(405).json({
+        success: false,
+        error: { message: `Method ${method} Not Allowed` }
+      });
+      break;
+  }
+};

pages/index.js

@@ -15,6 +15,7 @@ export async function getServerSideProps() {
     const link = doc.toObject();
     link._id = link._id.toString();
     link.created = link.created.toString();
+    link.url = `${process.env.NEXT_PUBLIC_APP_URL}/r/${link.slug}`;
     return link;
   });