Merge pull request #16 from RedHeadphone/issue-12

Issue 12

Author: RedHeadphone

src/hooks/option.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import qs from "fast-querystring";
 import Error from "@/images/error.svg";
 
@@ -7,7 +7,7 @@ const defaultOption = {
   theme: "default",
   disable_animations: false,
   show_icons: true,
-  force_username: false,
+  force_username: true,
 };
 
 const useOption = () => {
@@ -19,22 +19,18 @@ const useOption = () => {
     return error ? Error.src : `/api/card?${query}`;
   };
 
-  const updateQuerystring = () => {
+  const updateQuerystring = (newOptions) => {
     setError(false);
-    setQuerystring(qs.stringify(options));
-  };
-
-  const checkSame = (values) => {
-    return qs.stringify(values) === querystring;
+    setQuerystring(qs.stringify(newOptions));
   };
 
   return {
     options,
     setOptions,
     getImgUrl,
+    error,
     setError,
     updateQuerystring,
-    checkSame,
   };
 };
 

src/pages/api/card.js

@@ -98,6 +98,7 @@ export default async function handler(req, res) {
               maxRank,
               breakBetweenRank: check_overflow(rank, maxRank),
               height: 290 + (check_overflow(rank, maxRank) ? 25 : 0),
+              width: Math.max(380, 100 + name.length * 14),
               contestsCount,
               problemsSolved,
               friendOfCount,

src/pages/index.js

@@ -1,6 +1,4 @@
-import { useState } from "react";
 import Image from "next/image";
-
 import { GithubFilled, BookFilled, ExportOutlined } from "@ant-design/icons";
 import {
   Space,
@@ -13,55 +11,66 @@ import {
   Button,
   Divider,
   Row,
+  notification,
 } from "antd";
 
 import themes from "@/themes.js";
 import Logo from "@/images/logo.png";
 import useOption from "@/hooks/option.js";
 
 export default function Home() {
-  const {
-    options,
-    setOptions,
-    getImgUrl,
-    setError,
-    updateQuerystring,
-    checkSame,
-  } = useOption();
-  const [openInNewTabDisabled, setOpenInNewTabDisabled] = useState(true);
+  const { options, setOptions, getImgUrl, error, setError, updateQuerystring } =
+    useOption();
+  const [api, contextHolder] = notification.useNotification();
 
-  const onOpenInNewTab = () => {
-    window.open(getImgUrl(), "_blank");
+  const openNotification = (placement) => {
+    api.info({
+      message: "Success",
+      description: `Copied to clipboard!`,
+      placement,
+    });
   };
 
-  const onPreview = () => {
-    updateQuerystring();
+  const onOpenInNewTab = () => {
+    window.open(getImgUrl(), "_blank");
   };
 
   const onError = () => {
     setError(true);
-    setOpenInNewTabDisabled(true);
-  };
-
-  const onLoad = (src) => {
-    if (!src.currentTarget.src.includes("error")) {
-      setOpenInNewTabDisabled(false);
-    }
   };
 
-  const onFieldsChange = (changed_value, values) => {
+  const onFieldsChange = async (changed_value, values) => {
     setOptions((prev) => {
-      const newValues = {
+      const newOptions = {
         ...prev,
         [changed_value[0].name]: changed_value[0].value,
       };
-      setOpenInNewTabDisabled(!checkSame(newValues));
-      return newValues;
+      if (changed_value[0].name[0] !== "username") {
+        updateQuerystring(newOptions);
+      }
+      return newOptions;
     });
   };
 
+  const onCopyMarkdown = () => {
+    navigator.clipboard.writeText(
+      `[![Codeforces Stats](${
+        window.location.href.substring(
+          0,
+          window.location.href.lastIndexOf("/")
+        ) + getImgUrl()
+      })](https://codeforces.com/profile/${options.username})`
+    );
+    openNotification("topRight");
+  };
+
+  const onUsernameEnter = () => {
+    updateQuerystring(options);
+  };
+
   return (
     <>
+      {contextHolder}
       <Space className="main-body">
         <Card className="card">
           <Col className="card-col">
@@ -82,7 +91,6 @@ export default function Home() {
                   name="Card Input"
                   layout="horizontal"
                   labelCol={{ span: 9 }}
-                  colon={false}
                   initialValues={options}
                   onFieldsChange={onFieldsChange}
                 >
@@ -97,7 +105,7 @@ export default function Home() {
                       },
                     ]}
                   >
-                    <Input autoComplete="off" />
+                    <Input autoComplete="off" onPressEnter={onUsernameEnter} />
                   </Form.Item>
                   <Form.Item className="form-item" label="Theme" name="theme">
                     <Select
@@ -142,15 +150,19 @@ export default function Home() {
                   </Form.Item>
                   <Form.Item className="form-item">
                     <Space className="submit-wrapper">
-                      <Button type="primary" onClick={onPreview}>
-                        Preview
+                      <Button
+                        type="primary"
+                        onClick={onCopyMarkdown}
+                        disabled={error}
+                      >
+                        Copy Markdown
                       </Button>
                       <Button
                         type="default"
                         onClick={onOpenInNewTab}
-                        disabled={openInNewTabDisabled}
+                        disabled={error}
                       >
-                        Open in new tab
+                        Open Image in new tab
                         <ExportOutlined />
                       </Button>
                     </Space>
@@ -164,7 +176,6 @@ export default function Home() {
                   alt="Codeforces-Stats"
                   fill="width"
                   onError={onError}
-                  onLoad={onLoad}
                 />
               </Col>
             </Row>