🐛 small fixes

peterhanania · Jul 27, 2022 · cc01483 · cc01483 · vercel · Jul 27, 2022
1 parent 254de19
commit cc01483
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 58 deletions.
diff --git a/components/Data.js b/components/Data.js
@@ -1501,11 +1501,12 @@ export default function Data(props) {
                 {data?.messages?.topEmojis &&
                 data?.messages?.topEmojis?.length > 0 ? (
                   <div
-                    className="p-2 rounded-lg"
-                    style={{
-                      backgroundColor:
-                        emojiType === "topEmojis" ? "#232323" : "transparent",
-                    }}
+                    className={
+                      "p-2 rounded-lg" +
+                      (emojiType !== "topEmojis"
+                        ? ""
+                        : " bg-gray-400 dark:bg-[#232323]")
+                    }
                     onClick={() => {
                       setEmojiType("topEmojis");
                     }}
@@ -1527,13 +1528,12 @@ export default function Data(props) {
                 {data?.messages?.topCustomEmojis &&
                 data?.messages?.topCustomEmojis?.length > 0 ? (
                   <div
-                    className="p-2 rounded-lg"
-                    style={{
-                      backgroundColor:
-                        emojiType === "topCustomEmojis"
-                          ? "#232323"
-                          : "transparent",
-                    }}
+                    className={
+                      "p-2 rounded-lg" +
+                      (emojiType !== "topCustomEmojis"
+                        ? ""
+                        : " bg-gray-400 dark:bg-[#232323]")
+                    }
                     onClick={() => {
                       setEmojiType("topCustomEmojis");
                     }}
@@ -1555,13 +1555,12 @@ export default function Data(props) {
                 {data?.settings?.recentEmojis &&
                 data?.settings?.recentEmojis?.length > 0 ? (
                   <div
-                    className="p-2 rounded-lg"
-                    style={{
-                      backgroundColor:
-                        emojiType === "recentEmojis"
-                          ? "#232323"
-                          : "transparent",
-                    }}
+                    className={
+                      "p-2 rounded-lg" +
+                      (emojiType !== "recentEmojis"
+                        ? ""
+                        : " bg-gray-400 dark:bg-[#232323]")
+                    }
                     onClick={() => {
                       setEmojiType("recentEmojis");
                     }}
@@ -2487,7 +2486,7 @@ export default function Data(props) {
                 "Ginto,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,sans-serif",
             }}
           >
-            <ul className="flex items-center flex-shrink-0 space-x-6 p-2 rounded-lg bg-[#232323] mr-6">
+            <ul className="flex items-center flex-shrink-0 space-x-6 p-2 rounded-lg bg-gray-400 dark:bg-[#232323] mr-6">
               <li className="flex ">
                 <Tippy
                   content={graphType === "areaspline" ? "Bar" : "Line"}

diff --git a/components/utils/index.js b/components/utils/index.js
@@ -601,6 +601,13 @@ class Utils {
             };
           })
           .sort((a, b) => b.count - a.count),
+        oldestMessages: [
+          {
+            sentence: "This Feature is only available when uploading a package",
+            date: new Date(Date.now()),
+            author: "SYSTEM",
+          },
+        ],
       });
     }
 
@@ -657,6 +664,13 @@ class Utils {
             };
           })
           .sort((a, b) => b.count - a.count),
+        oldestMessages: [
+          {
+            sentence: "This Feature is only available when uploading a package",
+            date: new Date(Date.now()),
+            author: "SYSTEM",
+          },
+        ],
       });
     }
 
@@ -669,8 +683,8 @@ class Utils {
     const characterCount =
       Math.floor(Math.random() * (300000 - 1000 + 1)) + 1000;
 
-    function createSentence() {
-      const sentences = new Array(1000).fill(0).map(() => {
+    function createSentence(s) {
+      const sentences = new Array(s ? s : 1000).fill(0).map(() => {
         const sentence = randomWords({ min: 3, max: 10 }).join(" ");
         return {
           sentence,

diff --git a/features.md b/features.md
@@ -1,109 +1,135 @@
 ## Discord Package
-##### View the Features in a well-made Guide! 
 
+##### View the Features in a well-made Guide!
 
 ### Table of Contents
-* [introduction](#introduction)
-* [How to Retrieve your Package](#1)
-* [How to Upload your Package](#2)
-* [How to share your data with others](#3)
-* [How to view your oldest Messages](#4)
-* [How to view your message & character Count](#5)
-* [How to view your discord links or normal links, bad words or favorite messages](#6)
-* [How to filter data, if you want to hide a certain option](#7)
-* [How to toggle the website theme](#8)
-* [How to view the amount of messages with each user or channel](#9)
-* [How to cancel the upload while uploading](#10)
-* [How to view a demonstration of the website](#11)
-* [Can I trust this Website?](#12)
-* [How to show or hide some statistics](#13)
 
+- [introduction](#introduction)
+- [How to Retrieve your Package](#1)
+- [How to Upload your Package](#2)
+- [How to share your data with others](#3)
+- [How to view your oldest Messages](#4)
+- [How to view your message & character Count](#5)
+- [How to view your discord links or normal links, bad words or favorite messages](#6)
+- [How to filter data, if you want to hide a certain option](#7)
+- [How to toggle the website theme](#8)
+- [How to view the amount of messages with each user or channel](#9)
+- [How to cancel the upload while uploading](#10)
+- [How to view a demonstration of the website](#11)
+- [Can I trust this Website?](#12)
+- [How to show or hide some statistics](#13)
 
 ### introduction
+
 Ever wondered what Data discord collects? Or did you ever want to view what's inside of a discord package? Discord Package is a customisable tool that allows you to view your data in a fancy way. You could also use our exporting feature to share your selected data with your friends.
 
 ##### 1
+
 ### How to Retrieve your Package
-#### 1.  Click on the User Settings icon
+
+#### 1. Click on the User Settings icon
+
 <img src="https://discordpackage.com/help/1.png" />
 
-#### 2.  Click on "Privacy & Safety"
+#### 2. Click on "Privacy & Safety"
+
 <img src="https://discordpackage.com/help/2.png" />
 
 #### 3. Scroll Down to the end then click on "Request Data " to request your Data
+
 <img src="https://discordpackage.com/help/3.png" />
 
 #### 4. Keep checking your email and download your data once reached. The data will be sent to the email associated with your discord account and usually takes up to 24 hours to reach.
+
 <img src="https://discordpackage.com/help/4.png" />
 <img src="https://discordpackage.com/help/5.png" />
 
-
 ##### 2
+
 ### How to Upload your Package
+
 To upload your package you either click on the box and select the zip file you downloaded or by drag and drop.
 <video controls>
+
 <source src="https://discordpackage.com/help/1.mp4" type="video/webm" />
 Your browser does not support embedded videos
 </video>
 
 ##### 3
+
 ### How to share your data with others
+
 If you want to show your statistics to others this is for you. (Note: You can hide options if you want to, for a tutorial [click here](#7))
 
 #### 1. Once you Upload your Data there will be an Export Data button. Click it.
+
 <img src="https://discordpackage.com/help/1/1.png" />
 
 #### 2. Name the file anything and Save it.
+
 <img src="https://discordpackage.com/help/1/2.png" />
 
 #### 3. Send the file you saved to your friends and let them know how to upload the file. They will be able to view your selected data (only the data you selected on the home page when clicking more options).
+
 <img src="https://discordpackage.com/help/1/3.png" />
 
 #### 4. Your Friends can simply go to our website and drag and drop the file they received into the box or manually upload it.
+
 <img src="https://discordpackage.com/help/1/4.png" />
 
 #### 5. Your Friends will be able to view your data!
-<img src="https://discordpackage.com/help/1/5.png" />
 
+<img src="https://discordpackage.com/help/1/5.png" />
 
 ##### 4
+
 ### How to view your oldest Messages
+
 If you want to view your oldest messages you can do so by clicking on the fire icon next to your username and tag.
 <img src="https://discordpackage.com/help/2/1.png" />
 
-
 ##### 5
+
 ### How to view your message & character Count
+
 If you want to view your message and character count you can do so by clicking on the first icon / chat icon next to your username and tag.
 <img src="https://discordpackage.com/help/3/1.png" />
 
-
-
 ##### 6
+
 ### How to view your discord links or normal links, bad words or favorite messages
+
 Similarly to the message and character count and oldest messages **(question 4-5)**, hover or press on the heart icon, text with exlamation marks, or the 2 link icons to respectively view your discord links, favorite messages, or bad words.
 
 ##### 7
+
 ### How to filter data, if you want to hide a certain option
+
 Simply click more options on the Home Page and select the option you want to hide.
 <video controls>
+
 <source src="https://discordpackage.com/help/3.mp4" type="video/webm" />
 Your browser does not support embedded videos
 </video>
 
-##### 8 
+##### 8
+
 ### How to toggle the website theme
+
 You can toggle the website theme by clicking on the gear icon and toggling between dark and light
 
 ##### 9
+
 ### How to view the amount of messages with each user or channel
+
 Each user or channel has a message count next to it which you can only hover. In addition to favorite words, curse words, discord links and normal links which you can click to view more details.
 
 <img src="https://discordpackage.com/help/4/1.png" />
 
-
 ##### 10
+
 ### How to cancel the upload while uploading
+
 If you want to cancel the upload while uploading you can do so by on the box then the confirm button.
 
 <video controls>
@@ -112,28 +138,29 @@ Your browser does not support embedded videos
 </video>
 
 ##### 11
+
 ### How to view a demonstration of the website
-If you want to view a demonstration of the website you can do so by clicking on the "Demo" link or by visiting [https://discordpackage.com?demo=true](https://discordpackage.com/?demo=true)
 
+If you want to view a demonstration of the website you can do so by clicking on the "Demo" link or by visiting [https://discordpackage.com?demo=true](https://discordpackage.com/?demo=true)
 
 ##### 12
+
 ### Can I trust this Website?
 
 We understand that most websites shared on Discord are scams. They tend to steal your credentials and information but rest assured that we are not one of them.
 
 - We do not store any form of data as we don't have any third party services.
 
 - Our code is fully open sourced and available for inspection on the Github repository.
-
 - We do not have a backend server. Everything runs on the frontend.
 
 - We run the website using Vercel ([Vercel.com](vercel.com)) directly from the main repository. You can observe that by checking the deployments on the Github repository. [https://github.com/peterhanania/Discord-Package/deployments/activity_log?environment=Production](https://github.com/peterhanania/Discord-Package/deployments/activity_log?environment=Production)
-
 - No database, no storage or any other form of data is stored.
 
 If you find a security issue or have any other questions, please contact me at [email protected]
 
 ##### 13
+
 ### How to show/hide some statistics
 
 If you would like to remove certain statistics from your data, or look at some more. Click on `more options` on the main page, scroll down to `statistics` open it and toggle what you wanna see or hide. You can press `select all` then `deselect all` to hide them all in a fast way, or `default` to set the default statistics.
diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  swcMinify: true,
   images: {
     domains: [
       "upload.wikimedia.org",
@@ -9,6 +10,6 @@ const nextConfig = {
       "better-default-discord.netlify.app",
     ],
   },
-};
+}
 
 module.exports = nextConfig
diff --git a/package.json b/package.json
@@ -9,6 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "^12.2.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "@headlessui/react": "^1.6.5",
     "@heroicons/react": "^1.0.6",
     "@tippyjs/react": "^4.2.6",
@@ -19,21 +22,17 @@
     "highcharts": "^10.2.0",
     "highcharts-react-official": "^3.1.0",
     "moment": "^2.29.4",
-    "next": "12.1.6",
-    "npm": "^8.13.2",
     "papaparse": "^5.3.2",
     "random-words": "^1.2.0",
-    "react": "18.2.0",
     "react-countup": "^6.3.0",
-    "react-dom": "18.2.0",
     "react-toastify": "^9.0.5",
     "snake-case": "^3.0.4"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.7",
-    "eslint": "8.18.0",
-    "eslint-config-next": "12.1.6",
+    "eslint": "8.20.0",
+    "eslint-config-next": "12.2.3",
     "postcss": "^8.4.14",
-    "tailwindcss": "^3.1.4"
+    "tailwindcss": "^3.1.6"
   }
 }
diff --git a/pages/index.js b/pages/index.js
@@ -1,5 +1,4 @@
 import Upload from "../components/Upload";
-
 import Head from "next/head";
 
 export default function Home() {