Migrate to typescript

.nvmrc

@@ -1 +1 @@
-15.7.0
+15.11.0

components/Admin/FormsTable/index.js

@@ -59,10 +59,8 @@ function FormsTable() {
       title: 'Link',
       editable: false,
       width: 300,
-      dataIndex: 'slug',
-      render: function UrlLink(slug) {
-        const link = `${process.env.NEXT_PUBLIC_APP_URL}/f/${slug}`;
-
+      dataIndex: 'link',
+      render: function UrlLink(link) {
         return (
           <Typography.Link href={link} copyable>
             {link}

components/Admin/LinksTable/NewLink.js

@@ -33,7 +33,13 @@ function NewLink() {
                   <QuestionCircleOutlined />
                 </Tooltip>
               </span>
-            }>
+            }
+            rules={[
+              {
+                required: true,
+                message: 'Please select an emoji.'
+              }
+            ]}>
             <Input defaultValue="" placeholder=":emoji:" />
           </Item>
           <Item

components/Admin/LinksTable/index.js

@@ -59,10 +59,8 @@ const columns = [
     title: 'Link',
     editable: false,
     width: 300,
-    dataIndex: 'slug',
-    render: function UrlLink(slug) {
-      const link = `${process.env.NEXT_PUBLIC_APP_URL}/u/${slug}`;
-
+    dataIndex: 'link',
+    render: function UrlLink(link) {
       return (
         <Typography.Link href={link} copyable>
           {link}

components/Admin/RedirectsTable/index.js

@@ -59,10 +59,8 @@ function RedirectsTable() {
       title: 'Link',
       editable: false,
       width: 300,
-      dataIndex: 'slug',
-      render: function UrlLink(slug) {
-        const link = `${process.env.NEXT_PUBLIC_APP_URL}/r/${slug}`;
-
+      dataIndex: 'link',
+      render: function UrlLink(link) {
         return (
           <Typography.Link href={link} copyable>
             {link}

components/Card/index.js → components/Card/index.tsx

@@ -1,10 +1,11 @@
 import { Twemoji } from 'react-emoji-render';
+import { ILink } from '~/models/Link';
 
 import 'animate.css';
 import styles from './style.module.css';
 
-const Card = ({ title, emoji, url, attention }) => (
-  <a href={url} className={styles.card}>
+const Card = ({ title, emoji, link, attention }: ILink) => (
+  <a href={link} className={styles.card}>
     <h3 className={attention ? 'animate__animated animate__shakeX animate__delay-2s' : undefined}>
       <Twemoji svg text={`${emoji} ${title}`} />
     </h3>

components/Footer/index.js → components/Footer/index.tsx

@@ -7,7 +7,8 @@ import {
   IoHeart
 } from 'react-icons/io5';
 
-import social from '~/data/social.yml';
+import { domain } from '~/data/settings.json';
+import social from '~/data/social.json';
 
 import styles from './style.module.css';
 import logo from '../../public/cesium.svg';
@@ -19,7 +20,14 @@ const logos = {
   github: IoLogoGithub
 };
 
-const SocialIcon = ({ name, url, username, tag }) => {
+interface SocialIconProps {
+  name: string;
+  url: string;
+  username: string;
+  tag: string;
+}
+
+const SocialIcon = ({ name, url, username, tag }: SocialIconProps) => {
   const Icon = logos[tag];
 
   return (
@@ -37,7 +45,7 @@ const Footer = () => (
       ))}
     </div>
     <div className={styles.copyright}>
-      <a href="https://cesium.di.uminho.pt" target="_blank" rel="noopener noreferrer">
+      <a href={domain} target="_blank" rel="noopener noreferrer">
         hacked with <IoHeart className={styles.heart} size="1.2em" /> by
         <Image width={84} height={24} src={logo} alt="CeSIUM's Logo" />
       </a>

data/settings.json

@@ -0,0 +1,11 @@
+{
+  "domain": "https://cesium.di.uminho.pt",
+  "github": {
+    "base_url": "https://github.com",
+    "username": "cesium"
+  },
+  "gitlab": {
+    "base_url": "https://gitlab.com",
+    "username": "cesiuminho"
+  }
+}

data/social.json

@@ -0,0 +1,29 @@
+[
+  {
+    "name": "Facebook",
+    "tag": "facebook",
+    "url": "https://facebook.com",
+    "username": "cesiuminho"
+  },
+
+  {
+    "name": "Instagram",
+    "tag": "instagram",
+    "url": "https://instagram.com",
+    "username": "cesiuminho"
+  },
+
+  {
+    "name": "Twitter",
+    "tag": "twitter",
+    "url": "https://twitter.com",
+    "username": "cesiuminho"
+  },
+
+  {
+    "name": "GitHub",
+    "tag": "github",
+    "url": "https://github.com",
+    "username": "cesium"
+  }
+]

hooks/useAsyncReducer.js → hooks/useAsyncReducer.ts

@@ -1,6 +1,9 @@
 import { useState } from 'react';
 
-export default function useAsyncReducer(reducer, initState) {
+export default function useAsyncReducer(
+  reducer: (state: unknown, action: string) => Promise<unknown>,
+  initState: unknown
+) {
   const [state, setState] = useState(initState);
   const dispatchState = async (action) => setState(await reducer(state, action));
   return [state, dispatchState];

models/Form.ts

@@ -0,0 +1,33 @@
+import mongoose, { Schema } from 'mongoose';
+
+export interface IForm {
+  _id: string;
+  name: string;
+  slug: string;
+  url: string;
+  link: string;
+  visits: number;
+  created: Date;
+  updated: Date;
+}
+
+const Form = new Schema<IForm>(
+  {
+    name: { type: String, required: true },
+    slug: { type: String, unique: true, index: true, required: true },
+    url: { type: String, required: true },
+    visits: { type: Number, default: 0 },
+    created: { type: Date, default: Date.now },
+    updated: { type: Date, default: Date.now }
+  },
+  {
+    toJSON: { virtuals: true },
+    toObject: { virtuals: true }
+  }
+);
+
+Form.virtual('link').get(function () {
+  return `${process.env.NEXT_PUBLIC_APP_URL}/f/${this.slug}`;
+});
+
+export default mongoose.models.Form || mongoose.model('Form', Form);

models/Link.ts

@@ -0,0 +1,38 @@
+import mongoose, { Schema } from 'mongoose';
+import { nanoid } from 'nanoid';
+
+export interface ILink {
+  _id: string;
+  title: string;
+  url: string;
+  emoji: string;
+  attention: boolean;
+  index: number;
+  slug: string;
+  link: string;
+  clicks: number;
+  created: Date;
+}
+
+const Link = new Schema<ILink>(
+  {
+    title: { type: String, required: true },
+    url: { type: String, required: true },
+    emoji: { type: String, required: true },
+    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 }
+  },
+  {
+    toJSON: { virtuals: true },
+    toObject: { virtuals: true }
+  }
+);
+
+Link.virtual('link').get(function () {
+  return `${process.env.NEXT_PUBLIC_APP_URL}/u/${this.slug}`;
+});
+
+export default mongoose.models.Link || mongoose.model('Link', Link);

models/Redirect.ts

@@ -0,0 +1,34 @@
+import mongoose, { Schema } from 'mongoose';
+import { nanoid } from 'nanoid';
+
+export interface IRedirect {
+  _id: string;
+  name: string;
+  slug: string;
+  url: string;
+  link: string;
+  visits: number;
+  created: Date;
+  updated: Date;
+}
+
+const Redirect = new Schema<IRedirect>(
+  {
+    name: { type: String, required: true },
+    slug: { type: String, unique: true, index: true, required: true, default: () => nanoid(5) },
+    url: { type: String, required: true },
+    visits: { type: Number, default: 0 },
+    created: { type: Date, default: Date.now },
+    updated: { type: Date, default: Date.now }
+  },
+  {
+    toJSON: { virtuals: true },
+    toObject: { virtuals: true }
+  }
+);
+
+Redirect.virtual('link').get(function () {
+  return `${process.env.NEXT_PUBLIC_APP_URL}/r/${this.slug}`;
+});
+
+export default mongoose.models.Redirect || mongoose.model('Redirect', Redirect);

next-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />