Skip to content

Commit

Permalink
Merge pull request #137 from Lulalaby/main
Browse files Browse the repository at this point in the history 
fix: replace deprecated clipboard method and fix react error
  • Loading branch information
@peterhanania
peterhanania committed Sep 14, 2023
2 parents 2fcc84f + 95680eb commit fa308c3
Show file tree
Hide file tree
Showing 3 changed files with 335 additions and 294 deletions.
105 changes: 71 additions & 34 deletions components/Data.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Image from "next/image";
import Badges from "./json/badges/index.json";
import Tippy from "@tippyjs/react";
import moment from "moment";
import chalk from "chalk";
import emojis from "./json/demo/emojis.json";
import Utils from "./utils";
import Highcharts from "highcharts";
Expand Down Expand Up @@ -1091,13 +1092,28 @@ const statIcons = {
),
};

function copyToClipboard(value: string) {
const el: HTMLTextAreaElement = document.createElement("textarea");
el.value = value;
document.body.appendChild(el);
el.select();
document.execCommand("copy");
document.body?.removeChild(el);
async function copyToClipboard(value: string) : Promise<boolean> {
const isDebug = localStorage.getItem("debug") === "true";
try {
await navigator.clipboard.writeText(value);
if (isDebug) {
console.log(
chalk.bold.blue(`[DEBUG] `) +
chalk.bold.cyan(`[${moment(Date.now()).format("h:mm:ss a")}]`) +
` ${chalk.yellow(`Content copied to clipboard`)}`
);
}
return true;
} catch (err) {
if (isDebug) {
console.error(
chalk.bold.blue(`[DEBUG] `) +
chalk.bold.cyan(`[${moment(Date.now()).format("h:mm:ss a")}]`) +
` ${chalk.yellow(`Failed to copy: ${err}`)}`
);
}
return false;
}
}

export default function Data({ data, demo }: any): ReactElement {
Expand Down Expand Up @@ -2767,11 +2783,14 @@ export default function Data({ data, demo }: any): ReactElement {
>
<div
className="cursor-pointer text-4xl opacity-90 hover:opacity-100"
onClick={() => {
copyToClipboard(
onClick={async () => {
if (await copyToClipboard(
m.name + ": " + m.count + " times"
);
noti("Copied emoji to Clipboard");
)) {
noti("Copied emoji to Clipboard");
} else {
noti("Could not copy emoji to Clipboard");
}
}}
>
<Image
Expand Down Expand Up @@ -2802,11 +2821,14 @@ export default function Data({ data, demo }: any): ReactElement {
className="shadow-xl"
>
<div
onClick={() => {
copyToClipboard(
onClick={async () => {
if (await copyToClipboard(
":" + m.name + ": - " + m.count + " times"
);
noti("Copied emoji to Clipboard");
)) {
noti("Copied emoji to Clipboard");
} else {
noti("Could not copy emoji to Clipboard");
}
}}
className="cursor-pointer opacity-90 hover:opacity-100 w-14 h-14"
>
Expand Down Expand Up @@ -2852,11 +2874,14 @@ export default function Data({ data, demo }: any): ReactElement {
className="shadow-xl"
>
<div
onClick={() => {
copyToClipboard(
onClick={async () => {
if (await copyToClipboard(
m.emoji + ": " + m.count + " times"
);
noti("Copied emoji to Clipboard");
)) {
noti("Copied emoji to Clipboard");
} else {
noti("Could not copy emoji to Clipboard");
}
}}
className="cursor-pointer opacity-90 hover:opacity-100 w-14 h-14"
>
Expand Down Expand Up @@ -2932,11 +2957,14 @@ export default function Data({ data, demo }: any): ReactElement {
className="shadow-xl"
>
<div
onClick={() => {
copyToClipboard(
onClick={async () => {
if (await copyToClipboard(
m.emoji + ": " + m.count + " times"
);
noti("Copied emoji to Clipboard");
)) {
noti("Copied emoji to Clipboard");
} else {
noti("Could not copy emoji to Clipboard");
}
}}
className="cursor-pointer lg:text-5xl text-4xl opacity-90 hover:opacity-100"
>
Expand Down Expand Up @@ -2980,11 +3008,14 @@ export default function Data({ data, demo }: any): ReactElement {
>
<div
className="cursor-pointer text-4xl opacity-90 hover:opacity-100"
onClick={() => {
copyToClipboard(
onClick={async () => {
if (await copyToClipboard(
m.emoji + ": " + m.count + " times"
);
noti("Copied emoji to Clipboard");
)) {
noti("Copied emoji to Clipboard");
} else {
noti("Could not copy emoji to Clipboard");
}
}}
>
<Image
Expand Down Expand Up @@ -3014,14 +3045,17 @@ export default function Data({ data, demo }: any): ReactElement {
>
<div
className="cursor-pointer text-4xl opacity-90 hover:opacity-100 m-2"
onClick={() => {
copyToClipboard(
onClick={async () => {
if (await copyToClipboard(
m.emoji +
": " +
m.count +
" times"
);
noti("Copied emoji to Clipboard");
)) {
noti("Copied emoji to Clipboard");
} else {
noti("Could not copy emoji to Clipboard");
}
}}
>
<Image
Expand Down Expand Up @@ -11455,9 +11489,12 @@ export default function Data({ data, demo }: any): ReactElement {
className="cursor-pointer xl:m-1 m-2"
key={i}
id={"bot_" + i}
onClick={() => {
copyToClipboard(b.id);
noti("Copied ID to Clipboard");
onClick={async () => {
if (await copyToClipboard(b.id)) {
noti("Copied ID to Clipboard");
} else {
noti("Failed to copy ID to Clipboard");
}
}}
>
<Tippy
Expand Down
4 changes: 2 additions & 2 deletions components/Loading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -383,10 +383,10 @@ export default function Loading({ skeleton }: any): ReactElement {
<div className="ssc-square ico-lg rounded-lg"> </div>
</li>
</ul>
<p className="items-center ssc lg:flex md:lg:flex hidden">
<div className="items-center ssc lg:flex md:lg:flex hidden">
<div className="ssc-square rounded-lg w-sentence"> </div>
<div className="ml-2 ssc-circle w-[25.66px] h-[25.66px] rounded-full"></div>
</p>
</div>
</span>
<div className="row-span-3 ssc">
<div className="mx-2">
Expand Down

0 comments on commit fa308c3

Please sign in to comment.