fix: apply review comments

apps/frontend/src/axios-override.ts

@@ -71,9 +71,9 @@ axios.defaults.adapter = async (config) => {
   interface Params {
     query?: string;
     variables?: {
-      login: string;
-      repo: string;
-      gistName: string;
+      login?: string;
+      repo?: string;
+      gistName?: string;
     };
   }
   const params = (

apps/frontend/src/components/Card/SvgInline.tsx

@@ -21,9 +21,6 @@ interface SvgInlineProps {
   forceLoading?: boolean;
 }
 
-/**
- *
- */
 export function SvgInline(props: SvgInlineProps): JSX.Element {
   const {
     url,

apps/frontend/src/components/Home/LanguagesLayoutSection.tsx

@@ -46,7 +46,7 @@ const options: Array<SelectOption> = [
 ];
 
 interface LanguagesLayoutSectionProps {
-  selectedLanguageLayoutOption: SelectOption | undefined;
+  selectedLanguageLayoutOption: SelectOption;
   onLanguageLayoutOptionChange: (option: SelectOption) => void;
 }
 
@@ -59,7 +59,7 @@ export function LanguagesLayoutSection({
       <p>Select a card layout.</p>
       <Select
         options={options}
-        selectedOption={selectedLanguageLayoutOption || DEFAULT_OPTION}
+        selectedOption={selectedLanguageLayoutOption}
         onOptionChange={onLanguageLayoutOptionChange}
       />
     </Section>

apps/frontend/src/components/Home/StatsRankSection.tsx

@@ -20,7 +20,7 @@ const options: Array<SelectOption> = [
 ];
 
 interface StatsRankSectionProps {
-  selectedOption: SelectOption | undefined;
+  selectedOption: SelectOption;
   onOptionChange: (option: SelectOption) => void;
 }
 
@@ -33,7 +33,7 @@ export function StatsRankSection({
       <p>Select a progress style.</p>
       <Select
         options={options}
-        selectedOption={selectedOption || DEFAULT_OPTION}
+        selectedOption={selectedOption}
         onOptionChange={onOptionChange}
       />
     </Section>

apps/frontend/src/components/Home/WakatimeLayoutSection.tsx

@@ -28,7 +28,7 @@ const options: Array<SelectOption> = [
 ];
 
 interface WakatimeLayoutSectionProps {
-  selectedOption: SelectOption | undefined;
+  selectedOption: SelectOption;
   onOptionChange: (option: SelectOption) => void;
 }
 
@@ -41,7 +41,7 @@ export function WakatimeLayoutSection({
       <p>Select a card layout.</p>
       <Select
         options={options}
-        selectedOption={selectedOption || DEFAULT_OPTION}
+        selectedOption={selectedOption}
         onOptionChange={onOptionChange}
       />
     </Section>

apps/frontend/src/pages/App/AppTrends.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useDispatch } from "react-redux";
 import { toast, ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
@@ -27,8 +27,8 @@ const toMessage = (
   }
   type MaybeErrorReason = { message: string } | null;
   const reason = ("reason" in input ? input.reason : null) as MaybeErrorReason;
-  if (reason?.message === "string") {
-    return reason.message as string;
+  if (typeof reason?.message === "string" && !!reason.message.trim()) {
+    return reason.message;
   }
 
   if ("message" in input && input.message) {
@@ -80,11 +80,24 @@ export function AppTrends() {
     clearAxiosCache();
   }, [userToken]);
 
-  useEffect(() => {
-    if (isAuthenticated && stage === 0) {
-      setStage(1);
-    }
-  }, [isAuthenticated, stage]);
+  {
+    /**
+     * This effect mus be executed only on page load,
+     * otherwise logged in user are unable to go back on first step
+     */
+    const hasCheckedUserAuthStatusOnLoad = useRef(false);
+    useEffect(() => {
+      if (hasCheckedUserAuthStatusOnLoad.current) {
+        return;
+      }
+
+      hasCheckedUserAuthStatusOnLoad.current = true;
+
+      if (isAuthenticated && stage === 0) {
+        setStage(1);
+      }
+    }, [isAuthenticated, stage]);
+  }
 
   useEffect(() => {
     async function getPrivateAccess() {

apps/frontend/src/pages/Home/stages/Login.tsx

@@ -57,30 +57,30 @@ export function LoginStage({
   onContinueAsGuestClick,
 }: LoginStageProps): JSX.Element {
   const userId = useUserId();
-  const userKey = useUserKey() as string;
+  const userKey = useUserKey();
   const privateAccess = usePrivateAccess();
   const isAuthenticated = useIsAuthenticated();
 
   const dispatch = useDispatch();
-  const [deleteModal, setDeleteModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
 
   const handleLogout = useCallback(() => {
     dispatch(logout({ userKey: null }));
   }, [dispatch]);
 
   const openDeleteModal = () => {
-    setDeleteModal(true);
+    setShowDeleteModal(true);
   };
 
   const closeDeleteModal = () => {
-    setDeleteModal(false);
+    setShowDeleteModal(false);
   };
 
   const wrapperRef = useRef(null);
   useOutsideAlerter(wrapperRef, closeDeleteModal);
 
   const handleAccountDelete = async () => {
-    const success = await deleteAccount(userId as string, userKey);
+    const success = await deleteAccount(userId as string, userKey as string);
     if (success) {
       handleLogout();
       window.location.href = `https://github.com/settings/connections/applications/${CLIENT_ID}`;
@@ -108,7 +108,7 @@ export function LoginStage({
 
   return (
     <div className="h-full flex flex-wrap">
-      <div className={clsx("md:flex", { "opacity-25": deleteModal })}>
+      <div className={clsx("md:flex", { "opacity-25": showDeleteModal })}>
         <div className="lg:block lg:w-3/5 lg:p-8">
           <div className="bg-gray-200 rounded-sm w-full h-full m-auto p-8 shadow lg:h-auto">
             {isAuthenticated ? (
@@ -118,7 +118,7 @@ export function LoginStage({
                   {privateAccess ? (
                     <div className="flex items-center gap-4">
                       <a
-                        href={`https://${HOST}/api/downgrade?user_key=${userKey}`}
+                        href={`https://${HOST}/api/downgrade?user_key=${userKey as string}`}
                       >
                         <Button className="h-12 flex justify-center items-center w-[320px] text-black border border-black bg-white hover:bg-gray-100">
                           <GithubIcon className="w-6 h-6" />
@@ -244,8 +244,7 @@ export function LoginStage({
 
               return (
                 <div
-                  // eslint-disable-next-line react/no-array-index-key
-                  key={index}
+                  key={card.demoImageSrc}
                   style={{
                     left: `${x}%`,
                     position: "relative",
@@ -264,7 +263,7 @@ export function LoginStage({
           </div>
         </div>
       </div>
-      {deleteModal && (
+      {showDeleteModal && (
         <div>
           <div className="fixed left-0 top-0 w-full h-full">
             <div className="w-full h-full flex justify-center items-center">
@@ -284,7 +283,7 @@ export function LoginStage({
                   <Button
                     className="bg-blue-500 hover:bg-blue-600 text-white rounded-[0.25rem]"
                     onClick={() => {
-                      setDeleteModal(false);
+                      setShowDeleteModal(false);
                     }}
                   >
                     Cancel

apps/frontend/src/pages/Home/stages/Theme.tsx

@@ -4,6 +4,18 @@ import { Card } from "../../../components/Card/Card";
 // @ts-expect-error this will be provided by the npm package
 import { themes } from "../../../backend/themes/index";
 
+// to be removed once npm package has been created
+type ThemeData = Record<
+  string,
+  {
+    title_color: string;
+    icon_color: string;
+    text_color: string;
+    bg_color: string;
+    border_color: string;
+  }
+>;
+
 interface ThemeStageProps {
   fullSuffix: string;
   theme: string;
@@ -18,8 +30,8 @@ export function ThemeStage({
   return (
     <>
       <div className="flex flex-wrap">
-        {/* Needed until themes is proper types */}
-        {Object.keys(themes as Record<string, string>)
+        {/* Needed until themes is typed correctly and retrieved from npm package */}
+        {Object.keys(themes as ThemeData)
           .filter(
             (myTheme) =>
               ![