Merge pull request #103 from debatecore/98-copy-motion-button

[98] "Copy motion" button

Author: jakubmanczak

package-lock.json

@@ -14,20 +14,21 @@
     "@types/jest": "^29.5.12",
     "flag-icons": "^7.2.2",
     "jest": "^29.7.0",
-    "jsdom": "24.1.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "24.1.0",
     "next": "^14.1.0",
     "react": "^18",
     "react-dom": "^18",
     "react-use": "^17.5.0",
+    "sonner": "^1.5.0",
     "ts-jest": "^29.1.4",
     "ts-node": "^10.9.2",
     "use-sound": "^4.0.1"
   },
   "devDependencies": {
+    "@playwright/test": "^1.45.1",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^16.0.0",
-    "@playwright/test": "^1.45.1",
     "@types/node": "^20",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

package.json

@@ -8,7 +8,7 @@ const MotionDisplay = ({ motion }: { motion: motion | null }) => {
   return (
     <section className="lg:w-[50vw] p-5 flex flex-col items-center self-center">
       <p className="text-xl xl:text-2xl max-w-[80vw] lg:max-w-[50vw] mb-5 text-balance">
-        &quot;{motion && motion?.motion ? motion.motion : ""}&quot;
+        {motion && motion?.motion ? motion.motion : ""}
       </p>
       {motion && motion.adinfo && (
         <section className="flex flex-col items-center mb-5 border-2 border-neutral-800 rounded-lg pt-2 p-4">
@@ -18,7 +18,9 @@ const MotionDisplay = ({ motion }: { motion: motion | null }) => {
             </span>
             {infoslideString}
           </section>
-          <p className="text-justify max-w-[80vw] xl:max-w-[50vw]">{motion.adinfo}</p>
+          <p className="text-justify max-w-[80vw] xl:max-w-[50vw]">
+            {motion.adinfo}
+          </p>
         </section>
       )}
       <p className="text-sm xl:text-base text-neutral-500 flex flex-col">

src/components/MotionDisplay.tsx

@@ -13,11 +13,15 @@ import { useLang } from "@/lib/useLang";
 import { LinkButton } from "./LinkButton";
 import { IconPlayCircle } from "./icons/PlayCircle";
 import { IconList } from "./icons/List";
+import { IconCopy } from "./icons/Copy";
+import { toast, Toaster } from "sonner";
 
 const MotionGenerator = () => {
   const [motion, setMotion] = useState<motion | null>(null);
   const debateContext = useContext(DebateContext);
   const router = useRouter();
+  const infoslideLabel = useLang("infoslide");
+  const successfulCopyMessage = useLang("motionCopiedSuccess");
 
   function generateMotion(): motion {
     const filteredMotions = motions.filter((motion) => {
@@ -29,6 +33,20 @@ const MotionGenerator = () => {
     return filteredMotions[Math.floor(Math.random() * filteredMotions.length)];
   }
 
+  function copyMotionToClipboard() {
+    if (!motion?.motion || !motion.source || !motion.type) {
+      return;
+    }
+    const infoslideLine = motion.adinfo
+      ? `${infoslideLabel}: ${motion.adinfo}\n`
+      : "";
+    const sourceLine = `~${motion.source}`;
+    navigator.clipboard.writeText(
+      `${motion.motion}\n${infoslideLine}${sourceLine}`
+    );
+    toast.success(successfulCopyMessage);
+  }
+
   function saveMotionToContext(): void {
     debateContext.setConf({
       ...debateContext.conf,
@@ -53,12 +71,18 @@ const MotionGenerator = () => {
 
   return (
     <div className="flex flex-col items-center text-center">
+      <Toaster richColors position="bottom-center" />
       <section className="hidden xl:flex flex-col space-y-2 max-w-[400px]">
         <GenericButton
           text={useLang("debateMotionGeneratorRegenerate")}
           icon={IconDice}
           onClick={() => setMotion(generateMotion())}
         />
+        <GenericButton
+          text={useLang("copyMotion")}
+          icon={IconCopy}
+          onClick={() => copyMotionToClipboard()}
+        />
         <GenericButton
           text={useLang("debateOverThisMotion")}
           icon={IconClock}
@@ -78,6 +102,11 @@ const MotionGenerator = () => {
             icon={IconDice}
             onClick={() => setMotion(generateMotion())}
           />
+          <GenericButton
+            text={useLang("copyMotion")}
+            icon={IconCopy}
+            onClick={() => copyMotionToClipboard()}
+          />
           <GenericButton
             text={useLang("debateOverThisMotion")}
             icon={IconClock}

src/components/MotionGenerator.tsx

@@ -0,0 +1,23 @@
+import { iconprops } from "@/types/iconprops";
+
+const IconCopy = (props: iconprops) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      className={`feather ${props.moreClass}`}
+    >
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </svg>
+  );
+};
+
+export { IconCopy };

src/components/icons/Copy.tsx

@@ -429,5 +429,15 @@
     "en": "Debate finished!",
     "pl": "Debata zakończona!",
     "de": "Debatte geendet!"
+  },
+  "copyMotion": {
+    "en": "Copy motion",
+    "pl": "Skopiuj tezę",
+    "de": "These kopieren"
+  },
+  "motionCopiedSuccess": {
+    "en": "Motion copied to clipboard",
+    "pl": "Teza skopiowana do schowka",
+    "de": "These kopiert"
   }
 }