Refactor with quality of life improvements

components/Admin/FormsTable/index.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Form, Typography, notification } from 'antd';
-import { DateTime } from 'luxon';
 import useAsyncReducer from '~/hooks/useAsyncReducer';
+import { formatFromNow } from '~/lib/utils/date';
 import { EditingContext, reducer as reducerEditing } from './Context';
 import EditableTable from '../../EditableTable';
 import Actions from './Actions';
@@ -81,10 +81,7 @@ function FormsTable() {
       width: 150,
       dataIndex: 'updated',
       render: function Updated(updated) {
-        const formatted = DateTime.fromISO(updated)
-          .toRelative(Date.now())
-          .toLocaleString(DateTime.DATETIME_MED);
-        return <Typography.Text>{formatted}</Typography.Text>;
+        return <Typography.Text>{formatFromNow(updated)}</Typography.Text>;
       }
     },
     {

components/Admin/Navbar/index.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useUser } from '@auth0/nextjs-auth0';
 import LinkTo from '~/components/LinkTo';
 import { Avatar, Col, Menu, Row, Space, Typography } from 'antd';
 import {
@@ -38,11 +38,7 @@ export const navbar = {
 };
 
 function Navbar({ selected }) {
-  const [user, setUser] = useState({});
-
-  useEffect(() => {
-    API.get('/api/auth/me').then((response) => setUser(response.data));
-  }, []);
+  const { user } = useUser();
 
   return (
     <Row justify="space-between">

components/Admin/RedirectsTable/index.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Form, Typography, notification } from 'antd';
-import { DateTime } from 'luxon';
 import useAsyncReducer from '~/hooks/useAsyncReducer';
+import { formatFromNow } from '~/lib/utils/date';
 import { EditingContext, reducer as reducerEditing } from './Context';
 import EditableTable from '../../EditableTable';
 import Actions from './Actions';
@@ -81,10 +81,7 @@ function RedirectsTable() {
       width: 150,
       dataIndex: 'updated',
       render: function Updated(updated) {
-        const formatted = DateTime.fromISO(updated)
-          .toRelative(Date.now())
-          .toLocaleString(DateTime.DATETIME_MED);
-        return <Typography.Text>{formatted}</Typography.Text>;
+        return <Typography.Text>{formatFromNow(updated)}</Typography.Text>;
       }
     },
     {

components/Card/index.tsx

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

components/Footer/config.ts

@@ -0,0 +1,31 @@
+import { ISocialIcon, ESocialIcon } from '~/components/SocialIcon';
+
+export const DEFAULT_SOCIAL_NETWORKS: ISocialIcon[] = [
+  {
+    name: 'Facebook',
+    tag: ESocialIcon.Facebook,
+    base_url: 'https://facebook.com',
+    username: 'cesiuminho'
+  },
+
+  {
+    name: 'Instagram',
+    tag: ESocialIcon.Instagram,
+    base_url: 'https://instagram.com',
+    username: 'cesiuminho'
+  },
+
+  {
+    name: 'Twitter',
+    tag: ESocialIcon.Twitter,
+    base_url: 'https://twitter.com',
+    username: 'cesiuminho'
+  },
+
+  {
+    name: 'GitHub',
+    tag: ESocialIcon.GitHub,
+    base_url: 'https://github.com',
+    username: 'cesium'
+  }
+];

components/Footer/index.tsx

@@ -1,51 +1,27 @@
 import Image from 'next/image';
-import {
-  IoLogoFacebook,
-  IoLogoInstagram,
-  IoLogoTwitter,
-  IoLogoGithub,
-  IoHeart
-} from 'react-icons/io5';
+import { IoHeart } from 'react-icons/io5';
 
-import settings from '~/data/settings.json';
-import social from '~/data/social.json';
+import SocialIcon, { ISocialIcon } from '~/components/SocialIcon';
 
+import { SETTINGS } from '~/data/config';
+
+import { DEFAULT_SOCIAL_NETWORKS } from './config';
 import styles from './style.module.css';
 import logo from '../../public/cesium.svg';
 
-const logos = {
-  facebook: IoLogoFacebook,
-  instagram: IoLogoInstagram,
-  twitter: IoLogoTwitter,
-  github: IoLogoGithub
-};
-
-interface SocialIconProps {
-  name: string;
-  url: string;
-  username: string;
-  tag: string;
+interface Props {
+  social?: ISocialIcon[];
 }
 
-const SocialIcon = ({ name, url, username, tag }: SocialIconProps) => {
-  const Icon = logos[tag];
-
-  return (
-    <a href={`${url}/${username}`}>
-      <Icon title={name} size="1.5em" />
-    </a>
-  );
-};
-
-const Footer = () => (
+const Footer = ({ social = DEFAULT_SOCIAL_NETWORKS }: Props) => (
   <footer className={styles.footer}>
     <div className={styles.social}>
       {social.map((entry) => (
         <SocialIcon key={entry.tag} {...entry} />
       ))}
     </div>
     <div className={styles.copyright}>
-      <a href={settings.domain} target="_blank" rel="noopener noreferrer">
+      <a href={SETTINGS.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>

components/SocialIcon/SocialIcon.tsx

@@ -0,0 +1,16 @@
+import { SOCIAL_ICONS } from './config';
+import { ISocialIcon } from './types';
+
+type Props = ISocialIcon;
+
+const SocialIcon = ({ name, base_url, username, tag }: Props) => {
+  const Icon = SOCIAL_ICONS[tag];
+
+  return (
+    <a href={`${base_url}/${username}`}>
+      <Icon title={name} size="1.5em" />
+    </a>
+  );
+};
+
+export default SocialIcon;

components/SocialIcon/config.ts

@@ -0,0 +1,11 @@
+import { IoLogoFacebook, IoLogoInstagram, IoLogoTwitter, IoLogoGithub } from 'react-icons/io5';
+import { IconType } from 'react-icons/lib';
+
+import { ESocialIcon } from './types';
+
+export const SOCIAL_ICONS: { [key in ESocialIcon]: IconType } = {
+  facebook: IoLogoFacebook,
+  instagram: IoLogoInstagram,
+  twitter: IoLogoTwitter,
+  github: IoLogoGithub
+};

components/SocialIcon/index.ts

@@ -0,0 +1,3 @@
+export { default } from './SocialIcon';
+export * from './config';
+export * from './types';

components/SocialIcon/types.ts

@@ -0,0 +1,13 @@
+export enum ESocialIcon {
+  GitHub = 'github',
+  Facebook = 'facebook',
+  Instagram = 'instagram',
+  Twitter = 'twitter'
+}
+
+export interface ISocialIcon {
+  name: string;
+  base_url: string;
+  username: string;
+  tag: ESocialIcon;
+}

data/config.ts

@@ -0,0 +1,11 @@
+export const SETTINGS = {
+  domain: 'https://cesium.di.uminho.pt',
+  github: {
+    base_url: 'https://github.com',
+    username: 'cesium'
+  },
+  gitlab: {
+    base_url: 'https://gitlab.com',
+    username: 'cesiuminho'
+  }
+};

hooks/useAsyncReducer.tsx

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

lib/utils/date.ts

@@ -0,0 +1,6 @@
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(relativeTime);
+
+export const formatFromNow = (date: dayjs.ConfigType) => dayjs(date).fromNow();

lib/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './object';
+export * from './date';

lib/utils.ts → lib/utils/object.ts

@@ -1,3 +1,3 @@
-export function pick(obj, keys) {
+export function pick(obj: Record<string, any>, keys: string[]) {
   return Object.assign({}, ...keys.map((key) => ({ [key]: obj[key] })));
 }

models/Form.ts

@@ -1,4 +1,4 @@
-import mongoose, { Schema } from 'mongoose';
+import mongoose, { Schema, Model } from 'mongoose';
 import { APP_URL } from '~/lib/api';
 
 export interface IForm {
@@ -31,4 +31,4 @@ Form.virtual('link').get(function () {
   return `${APP_URL}/f/${this.slug}`;
 });
 
-export default mongoose.models.Form || mongoose.model('Form', Form);
+export default (mongoose.models.Form as Model<IForm>) || mongoose.model('Form', Form);

models/Link.ts

@@ -1,4 +1,4 @@
-import mongoose, { Schema } from 'mongoose';
+import mongoose, { Schema, Model } from 'mongoose';
 import { nanoid } from 'nanoid';
 import { APP_URL } from '~/lib/api';
 
@@ -38,4 +38,4 @@ Link.virtual('link').get(function () {
   return `${APP_URL}/u/${this.slug}`;
 });
 
-export default mongoose.models.Link || mongoose.model('Link', Link);
+export default (mongoose.models.Link as Model<ILink>) || mongoose.model('Link', Link);

models/Redirect.ts

@@ -1,4 +1,4 @@
-import mongoose, { Schema } from 'mongoose';
+import mongoose, { Model, Schema } from 'mongoose';
 import { nanoid } from 'nanoid';
 import { APP_URL } from '~/lib/api';
 
@@ -32,4 +32,5 @@ Redirect.virtual('link').get(function () {
   return `${APP_URL}/r/${this.slug}`;
 });
 
-export default mongoose.models.Redirect || mongoose.model('Redirect', Redirect);
+export default (mongoose.models.Redirect as Model<IRedirect>) ||
+  mongoose.model('Redirect', Redirect);