frontend + other small changes

Author: RedHeadphone

docs/themes.md

@@ -12,10 +12,10 @@ Use `&theme=THEME_NAME` parameter like so :
 Codeforces readme stats comes with several built-in themes (e.g. `dark`, `radical`, `merko`, `gruvbox`, `tokyonight`, `onedark`, `cobalt`, `synthwave`, `highcontrast`, `dracula`).
 
 <p>
-<img style="width:340px" src="https://codeforces-readme-stats.vercel.app/api/card?username=redheadphone&theme=dark">
-<img style="width:340px" src="https://codeforces-readme-stats.vercel.app/api/card?username=redheadphone&theme=radical">
-<img style="width:340px" src="https://codeforces-readme-stats.vercel.app/api/card?username=redheadphone&theme=gruvbox">
-<img style="width:340px" src="https://codeforces-readme-stats.vercel.app/api/card?username=redheadphone&theme=tokyonight">
+<img style="width:340px" src="https://codeforces-readme-stats.vercel.app/api/card?username=redheadphone&theme=dark&border_color=63656e">
+<img style="width:340px" src="https://codeforces-readme-stats.vercel.app/api/card?username=redheadphone&theme=radical&border_color=63656e">
+<img style="width:340px" src="https://codeforces-readme-stats.vercel.app/api/card?username=redheadphone&theme=gruvbox&border_color=63656e">
+<img style="width:340px" src="https://codeforces-readme-stats.vercel.app/api/card?username=redheadphone&theme=tokyonight&border_color=63656e">
 </p>
 
 You can look at all available themes from the [theme config file](https://github.com/RedHeadphone/codeforces-readme-stats/blob/master/src/themes.js) & **you can also contribute new themes** if you like :D

src/fetcher.js

@@ -10,7 +10,7 @@ function fetch_error_handler(fetch, username, last_cache) {
         resolve(res);
       }
       else reject({ status: 500, error: "Codeforces Server Error" });
-    }, 2000);
+    }, 4000);
     fetch()
       .then((result) => {
         clearTimeout(timeoutID);

src/hooks/option.js

@@ -1,6 +1,5 @@
 import useLocalStorageState from "use-local-storage-state";
 import qs from "fast-querystring";
-import Error from "@/images/error.svg";
 
 const defaultOption = {
   username: "redheadphone",
@@ -14,29 +13,45 @@ const useOption = () => {
   const [options, setOptions] = useLocalStorageState("options", {
     defaultValue: defaultOption,
   });
-  const [querystring, setQuerystring] = useLocalStorageState("querystring", {
+  const [imageUrl, setImageUrl] = useLocalStorageState("imageUrl", {
     defaultValue: qs.stringify(options),
   });
   const [error, setError] = useLocalStorageState("error", {
     defaultValue: false,
   });
+  const [loading, setLoading] = useLocalStorageState("loading", {
+    defaultValue: true,
+  });
 
-  const getImgUrl = (query = querystring) => {
-    return error ? Error.src : `/api/card?${query}`;
+  const updateImage = (newOptions) => {
+    const newImageUrl = `/api/card?${qs.stringify(newOptions)}`;
+    if (newImageUrl != imageUrl || error) setLoading(true);
+    setError(false);
+    setImageUrl(newImageUrl);
   };
 
-  const updateQuerystring = (newOptions) => {
-    setError(false);
-    setQuerystring(qs.stringify(newOptions));
+  const checkHandleNotFound = () => {
+    return new Promise((resolve) => {
+      fetch(
+        `https://codeforces.com/api/user.info?handles=${options.username}`
+      ).then((res) => {
+        if (res.status === 400) {
+          resolve();
+        }
+      });
+    });
   };
 
   return {
     options,
     setOptions,
-    getImgUrl,
+    imageUrl,
+    updateImage,
     error,
     setError,
-    updateQuerystring,
+    loading,
+    setLoading,
+    checkHandleNotFound,
   };
 };