add typescript interfaces to prevent bug

retr00exe · retr00exe · commit 5c0421fe399e · 2021-02-08T00:48:31.000+07:00
diff --git a/components/About.jsx b/components/About.jsx
@@ -31,7 +31,7 @@ class AboutContent extends Component {
 							education: this.education,
 							skills: this.skills,
 						}}
-						msg="Welcome to about page - Type 'help' to list all supported commands"
+						msg="Hi! Welcome to about page - Type 'help' to list all supported commands"
 						closedTitle=""
 						closedMessage="Click on the icon to reopen"
 					/>
diff --git a/components/Cards.tsx b/components/Cards.tsx
@@ -5,7 +5,19 @@ import readingTime from 'reading-time';
 import { sliceText } from '../utils/card';
 import { formatDate } from '../utils/date';
 
-const Cards = ({ post }) => {
+interface Props {
+	post: {
+		content: string;
+		cover: {
+			url: string;
+		};
+		id: string;
+		title: string;
+		date?: Date;
+	};
+}
+
+const Cards: React.FC<Props> = ({ post }) => {
 	const stats = readingTime(post.content);
 	return (
 		<CardWrapper>
diff --git a/components/CodeBlock.tsx b/components/CodeBlock.tsx
@@ -2,7 +2,12 @@ import React from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { tomorrow } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
-const CodeBlock = ({ language, value }) => {
+interface Props {
+	language: any;
+	value: any;
+}
+
+const CodeBlock: React.FC<Props> = ({ language, value }) => {
 	return (
 		<SyntaxHighlighter language={language} style={tomorrow}>
 			{value}
diff --git a/components/Contact.tsx b/components/Contact.tsx
@@ -8,7 +8,7 @@ import {
 } from 'react-icons/fa';
 import { fadeInUp, stagger } from '../utils/animate';
 
-const Contact = () => {
+const Contact: React.FC = () => {
 	return (
 		<motion.div
 			exit={{ opacity: 0 }}
@@ -22,8 +22,7 @@ const Contact = () => {
 					<motion.p variants={fadeInUp}>
 						Hi there, you can reach me by follow my social media or email me at
 						mekelilyasa@live.com. I am quite active at Facebook and Instagram,
-						feel free to leave me a message or ask me some question about
-						science or tech :)
+						feel free to leave me a message :)
 					</motion.p>
 				</div>
 				<motion.div variants={fadeInUp} className="icons">
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { motion } from 'framer-motion';
 import { fadeInUp } from '../utils/animate';
 
-const Footer = () => {
+const Footer: React.FC = () => {
 	return (
 		<FooterWrapper>
 			<motion.p
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -6,12 +6,12 @@ import { motion } from 'framer-motion';
 import { FiSun, FiMoon } from 'react-icons/fi';
 import { fadeInDown } from '../utils/animate';
 
-interface Navbar {
+interface Props {
 	active?: boolean;
 	title?: string;
 }
 
-const Navbar = (props: Navbar) => {
+const Navbar: React.FC<Props> = (props) => {
 	const router = useRouter();
 	const { theme, setTheme } = useTheme();
 	return (
@@ -119,7 +119,7 @@ const NavbarItems = styled.nav`
 			font-size: 1rem;
 			text-transform: uppercase;
 			font-weight: 500;
-			background-color: #101012;
+			background-color: #202020;
 			border-radius: 4px;
 			color: white;
 			padding: 0 8px;
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -48,13 +48,13 @@ const GlobalStyle = createGlobalStyle`
 }
 
   [data-theme='dark'] {
-    --background: #050505;
-    --backgroundPost: #050505;
+    --background: #181818;
+    --backgroundPost: #181818;
     --colorPrimary:rgba(229, 231, 235, 1);
     --colorSecondary:rgba(229, 231, 235, 1);
     --colorTertiary: rgba(209, 213, 219, 1);
     --colorQuarternary: rgba(243, 244, 246, 1);
-    --navColor: #101012;
+    --navColor: #202020;
     --navHoverColor: #e200e2;
     --linkColor:#e200e2;
 
diff --git a/pages/about.tsx b/pages/about.tsx
@@ -3,7 +3,7 @@ import Footer from '../components/Footer';
 import AboutContent from '../components/About';
 import Navbar from '../components/Navbar';
 
-const About = () => {
+const About: React.FC = () => {
 	return (
 		<>
 			<Head>
diff --git a/pages/contact.tsx b/pages/contact.tsx
@@ -3,7 +3,7 @@ import Navbar from '../components/Navbar';
 import ContactContent from '../components/Contact';
 import Footer from '../components/Footer';
 
-const Contact = () => {
+const Contact: React.FC = () => {
 	return (
 		<>
 			<Head>
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import Head from 'next/head';
 import Image from 'next/image';
-import { useRouter } from 'next/router';
+import { NextRouter, useRouter } from 'next/router';
 import styled from 'styled-components';
 import { motion } from 'framer-motion';
 import ReactMarkdown from 'react-markdown';
@@ -10,44 +10,34 @@ import Navbar from '../../components/Navbar';
 import Footer from '../../components/Footer';
 import CodeBlock from '../../components/CodeBlock';
 import { formatDate } from '../../utils/date';
+import { fadeInUp, stagger } from '../../utils/animate';
 
-export default function Post({ post }) {
-	const router = useRouter();
+interface Post {
+	post: {
+		title: string;
+		content: string;
+		cover: {
+			name?: string;
+			url: string;
+			ext?: string;
+		};
+		date: Date;
+		createdAt?: Date;
+		updatedAt?: Date;
+	};
+}
+
+export default function Post({ post }: Post): JSX.Element {
+	const router: NextRouter = useRouter();
 	if (router.isFallback) {
 		return <div>Loading...</div>;
 	}
-	const [navbar, setNavbar] = useState(true);
+	const [navbar, setNavbar] = useState<boolean>(true);
 	const stats = readingTime(post.content);
-	const fadeInUp = {
-		initial: {
-			y: 60,
-			opacity: 0,
-		},
-		animate: {
-			y: 0,
-			opacity: 1,
-			transition: {
-				duration: 0.6,
-				ease: [0.6, -0.05, 0.01, 0.99],
-			},
-		},
-	};
-	const stagger = {
-		animate: {
-			transition: {
-				staggerChildren: 0.15,
-			},
-		},
-	};
-	const LinkRenderer = (props) => {
+	const LinkRenderer = ({ href, children }) => {
 		return (
-			<a
-				style={{ color: 'blue' }}
-				href={props.href}
-				target="_blank"
-				rel="noopener"
-			>
-				{props.children}
+			<a style={{ color: 'blue' }} href={href} target="_blank" rel="noopener">
+				{children}
 			</a>
 		);
 	};
diff --git a/utils/animate.ts b/utils/animate.ts
@@ -1,4 +1,6 @@
-export const fadeInUp = {
+import { Variants } from 'framer-motion';
+
+export const fadeInUp: Variants = {
 	initial: {
 		y: 60,
 		opacity: 0,
@@ -13,7 +15,7 @@ export const fadeInUp = {
 	},
 };
 
-export const fadeInDown = {
+export const fadeInDown: Variants = {
 	initial: {
 		y: -60,
 		opacity: 0,
@@ -28,7 +30,7 @@ export const fadeInDown = {
 	},
 };
 
-export const stagger = {
+export const stagger: Variants = {
 	animate: {
 		transition: {
 			staggerChildren: 0.15,
diff --git a/utils/card.ts b/utils/card.ts
@@ -1,4 +1,4 @@
-export const sliceText = (text: String, end: number) => {
+export const sliceText = (text: String, end: number): string => {
 	if (!text) {
 		return '';
 	} else {
diff --git a/utils/date.ts b/utils/date.ts
@@ -1,5 +1,5 @@
 import { format } from 'date-fns';
 
-export const formatDate = (date) => {
+export const formatDate = (date: Date): string => {
 	return format(new Date(date), 'dd MMMM yyy');
 };
