Refactoring some components & adding typescript best practices

.gitignore

@@ -1,2 +1,5 @@
 node_modules/
 .env
+
+# Jetbrains files
+.idea/

client/components/instant/instant.tsx

@@ -9,7 +9,7 @@ import axios from "axios";
 import { useRouter } from "next/router";
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAdd, faArrowCircleRight, faArrowLeft, faArrowRight, faCaretDown, faCaretLeft, faCaretRight, faCaretUp, faCheck, faCross, faDownload, faFaceFrown, faFaceSadCry, faFaceSmile, faPlusCircle, faTrashCan, faPlayCircle } from "@fortawesome/free-solid-svg-icons";
+import { faCaretDown, faCaretLeft, faCaretRight, faCaretUp, faCheck, faCross, faDownload, faFaceFrown, faFaceSmile, faTrashCan, faPlayCircle } from "@fortawesome/free-solid-svg-icons";
 
 import Carousel from 'react-multi-carousel';
 import 'react-multi-carousel/lib/styles.css';
@@ -33,9 +33,9 @@ export default function Instant({ instance, mymojis }: _Instant) {
         setCommentLoading(true);
 
         let token = localStorage.getItem("token");
-        let body = JSON.stringify({ 
-            "token": token, 
-            "instance_id": instance.instanceid, 
+        let body = JSON.stringify({
+            "token": token,
+            "instance_id": instance.instanceid,
             "poster_user_id": instance.user.uid,
             "comment": comment
         });
@@ -113,7 +113,7 @@ export default function Instant({ instance, mymojis }: _Instant) {
             setLocation("No location data");
         }
     }
-    
+
     let [reactionSuccess, setReactionSuccess] = useState<boolean>(false);
     let [reactionFailure, setReactionFailure] = useState<boolean>(false);
     let [addingmoji, setAddingmoji] = useState<boolean>(false);
@@ -142,10 +142,10 @@ export default function Instant({ instance, mymojis }: _Instant) {
                 setReactionSuccess(true);
                 setTimeout(() => { setReactionSuccess(false); router.reload() }, 2000);
             }
-        ).catch((error) => { 
-            console.log(error); 
-            setReactionLoading(false); 
-            setReactionFailure(true); 
+        ).catch((error) => {
+            console.log(error);
+            setReactionLoading(false);
+            setReactionFailure(true);
             setTimeout(() => { setReactionFailure(false) }, 2000);
         })
     }
@@ -177,7 +177,7 @@ export default function Instant({ instance, mymojis }: _Instant) {
 
         link.click();
         link2.click();
-        
+
         document.body.removeChild(link);
         document.body.removeChild(link2);
     }
@@ -215,7 +215,7 @@ export default function Instant({ instance, mymojis }: _Instant) {
                         </div>
                 }
                 {
-                    instance.btsMedia != undefined ? 
+                    instance.btsMedia != undefined ?
                     <div className={s.btsView} onClick={viewBts} title="Click to view the BTS">
                         <FontAwesomeIcon icon={faPlayCircle} />
                     </div>
@@ -337,7 +337,7 @@ export default function Instant({ instance, mymojis }: _Instant) {
                         <div className={s.expand} >
                             <span className={s.click} onClick={() => setExpanded(!expanded)}>
                                 {
-                                    !expanded ? 
+                                    !expanded ?
                                     <> <FontAwesomeIcon icon={faCaretDown} />  expand comments</>
                                     : <> <FontAwesomeIcon icon={faCaretUp} />  collapse comments</>}
                             </span>
@@ -368,4 +368,4 @@ export default function Instant({ instance, mymojis }: _Instant) {
 
         </div>
     )
-}
+}

client/components/memoire/memoire.tsx

@@ -1,7 +1,7 @@
 import Memory from "@/models/memory"
 import s from "./memoire.module.scss"
 import Draggable from "react-draggable"
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import axios from "axios";
 
 
@@ -64,4 +64,4 @@ export default function Memoire({ memory }: { memory: Memory }) {
             </div>
         </div>
     )
-}
+}

client/components/realmoji/realmoji.tsx

@@ -1,8 +1,6 @@
-
 import s from "./realmoji.module.scss"
 import l from "@/styles/loader.module.scss";
-import { useEffect, useState } from "react";
-import axios from "axios";
+import { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { useRouter } from "next/router";
@@ -119,9 +117,9 @@ export default function Realmoji({ emoji, realmoji }: RealmojiProperties) {
                 (realmoji[emoji] != undefined)
                 ?
                     (
-                        isFilePicked ? 
-                        <img src={URL.createObjectURL(selectedFile)} className={s.emoji} /> 
-                        : 
+                        isFilePicked ?
+                        <img src={URL.createObjectURL(selectedFile)} className={s.emoji} />
+                        :
                         <img src={realmoji[emoji].url} className={s.emoji} />
                     )
                 :
@@ -142,10 +140,10 @@ export default function Realmoji({ emoji, realmoji }: RealmojiProperties) {
                         isFilePicked ?
                         <button className={s.send} onClick={handleSubmission}>
                             {
-                                loading ? <div className={l.loadertiny}></div> 
+                                loading ? <div className={l.loadertiny}></div>
                                 : (
-                                    success ? 
-                                    <FontAwesomeIcon icon={faCheck} className={s.success} /> 
+                                    success ?
+                                    <FontAwesomeIcon icon={faCheck} className={s.success} />
                                         :
                                     <FontAwesomeIcon icon={faUpload} />
                                 )
@@ -158,4 +156,4 @@ export default function Realmoji({ emoji, realmoji }: RealmojiProperties) {
         </div>
 
     )
-}
+}

client/pages/_document.tsx

@@ -1,6 +1,5 @@
 import { Html, Head, Main, NextScript } from 'next/document'
 import Script from 'next/script'
-import { GoogleAnalytics } from 'nextjs-google-analytics'
 
 export default function Document() {
 	return (

client/pages/api/add/post.ts

@@ -2,8 +2,6 @@ import type { NextApiRequest, NextApiResponse } from 'next'
 import axios from 'axios'
 /* import { File } from "formidable";
 import formidable, { IncomingForm } from "formidable"; */
-import Jimp from "jimp";
-import fs from "fs";
 import sharp from 'sharp';
 import moment from 'moment';
 // @ts-ignore
@@ -42,14 +40,14 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     console.log("POST REQUEST");
     try {
 
-        /* 
+        /*
         const { fields, files } = await parseFormAsync(req);
         console.log(fields, files)
 
         let caption: string = fields["caption"] as string;
         let authorization_token: string = fields["token"] as string;
         let primaryb64: string = fields["primaryb64"][0] as string;
-        let secondaryb64: string = fields["secondaryb64"][0] as string; 
+        let secondaryb64: string = fields["secondaryb64"][0] as string;
         */
 
         // using fetch
@@ -264,4 +262,4 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         console.log(error_message);
         res.status(400).json({ error: error_message });
     }
-}
+}

client/pages/api/add/realmoji.ts

@@ -2,10 +2,7 @@ import type { NextApiRequest, NextApiResponse } from 'next'
 import axios from 'axios'
 /* import { File } from "formidable";
 import formidable, { IncomingForm } from "formidable"; */
-import Jimp from "jimp";
-import fs from "fs";
 import sharp from 'sharp';
-import moment from 'moment';
 import { getAuthHeaders } from '@/utils/authHeaders';
 
 export const config = {
@@ -43,7 +40,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
         let authorization_token: string = fields["token"] as string;
         let filebase64: string = fields["fileBase64"][0] as string;
-        let emoji: string = fields["emoji"] as string; 
+        let emoji: string = fields["emoji"] as string;
         */
 
         // using fetch
@@ -73,13 +70,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         let sharp_file = await sharp(file_image_buffer).toBuffer();
         const primary_mime_type = (await sharp(sharp_file).metadata()).format;
 
-    
+
         console.log("SHARP IMAGES");
         console.log(sharp_file);
         console.log(primary_mime_type);
         console.log('---------------------')
 
-    
+
         if (primary_mime_type != 'webp') {
             sharp_file = await sharp(sharp_file).toFormat('webp').toBuffer();
         }
@@ -92,21 +89,21 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
             method: "GET",
             headers: getAuthHeaders(authorization_token),
         }
-    
+
         let upload_res = await axios.request(upload_options)
-    
+
         console.log("upload result");
         console.log(upload_res.data);
         console.log('---------------------')
 
         let primary_res = upload_res.data.data
-    
+
         let primary_headers = primary_res.headers;
         let primary_url = primary_res.url;
         let primary_path = primary_res.path;
         let primary_bucket = primary_res.bucket;
         Object.assign(primary_headers, getAuthHeaders(authorization_token))
-    
+
         // ============================================================================================
 
         let put_file_options = {
@@ -120,7 +117,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         console.log("put secondary result");
         console.log(put_file_res.status);
         console.log('---------------------')
-    
+
         // ============================================================================================
 
         let post_data: any = {
@@ -146,18 +143,18 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         console.log(post_data);
         console.log(post_headers)
         console.log('---------------------')
-    
+
         let post_response = await axios.request({
             method: 'PUT',
             url: "https://mobile.bereal.com/api" + "/person/me/realmojis",
             data: JSON.stringify(post_data),
             headers: post_headers,
         })
-    
+
         console.log("post response");
         console.log(post_response);
         console.log('---------------------')
-    
+
         res.status(200).json(upload_res.data.data);
 
 
@@ -176,4 +173,4 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         console.log(error_message);
         res.status(400).json({ error: error_message });
     }
-}
+}