MALUserFunctions.go

@@ -71,6 +71,7 @@ func (v *CodeVerifier) CodeChallengeS256() string {
 }
 
 func (a *App) CheckIfMyAnimeListLoggedIn() bool {
+	fmt.Println("check function reached")
 	if (MyAnimeListJWT{} == myAnimeListJwt) {
 		tokenType, tokenErr := myAnimeListRing.Get("MyAnimeListTokenType")
 		expiresIn, expiresInErr := myAnimeListRing.Get("MyAnimeListExpiresIn")
@@ -95,6 +96,7 @@ func (a *App) CheckIfMyAnimeListLoggedIn() bool {
 }
 
 func (a *App) MyAnimeListLogin() {
+	fmt.Println("login function reached")
 	if !a.CheckIfMyAnimeListLoggedIn() {
 		fmt.Println("check logged in function failed")
 		tokenType, tokenErr := myAnimeListRing.Get("MyAnimeListTokenType")

frontend/src/helperComponents/Anime.svelte

@@ -11,10 +11,7 @@
     import { Button } from "flowbite-svelte";
     import type { AniListGetSingleAnime } from "../anilist/types/AniListCurrentUserWatchListType";
     import Rating from "./Rating.svelte";
-    import {
+    import convertAniListDateToString from "../helperFunctions/convertAniListDateToString";
-        convertAniListDateToString,
-        convertAniListDateToDate,
-    } from "../helperFunctions/convertAniListDateIn";
     import AnimeTable from "./AnimeTable.svelte";
     import type {
         MALAnime,
@@ -28,10 +25,7 @@
         StatusOptions,
     } from "../helperTypes/StatusTypes";
     import type { AniListUpdateVariables } from "../anilist/types/AniListTypes";
-    import {
+    import convertDateStringToAniList from "../helperFunctions/convertDateStringToAniList";
-        convertDateStringToAniList,
-        convertDateToAniList,
-    } from "../helperFunctions/convertDateToAniList";
     import {
         AniListDeleteEntry,
         AniListUpdateEntry,
@@ -45,7 +39,6 @@
     import { AddAnimeServiceToTable } from "../helperModules/AddAnimeServiceToTable.svelte";
     import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
     import Datepicker from "./Datepicker.svelte";
-    const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/;
 
     let isAniListLoggedIn: boolean;
     let isMalLoggedIn: boolean;
@@ -86,10 +79,10 @@
         (option) =>
             currentAniListAnime.data.MediaList.status === option.aniList,
     )[0];
-    let startedAtDate: Date | null = convertAniListDateToDate(
+    const startedAtDate = convertAniListDateToString(
         currentAniListAnime.data.MediaList.startedAt,
     );
-    let completedAtDate: Date | null = convertAniListDateToDate(
+    const completedAtDate = convertAniListDateToString(
         currentAniListAnime.data.MediaList.completedAt,
     );
 
@@ -111,34 +104,19 @@
             notes: currentAniListAnime.data.MediaList.notes,
         });
 
-    if (isMalLoggedIn) {
+    if (isMalLoggedIn)
-        let startDate = "";
-        let finishDate = "";
-        if (currentMalAnime.my_list_status.start_date !== "") {
-            const startArray = re.exec(
-                currentMalAnime.my_list_status.start_date,
-            );
-            startDate = `${startArray[2]}-${startArray[3]}-${startArray[1]}`;
-        }
-        if (currentMalAnime.my_list_status.finish_date !== "") {
-            const finishArray = re.exec(
-                currentMalAnime.my_list_status.finish_date,
-            );
-            finishDate = `${finishArray[2]}-${finishArray[3]}-${finishArray[1]}`;
-        }
         AddAnimeServiceToTable({
             id: `m-${currentMalAnime.id}`,
             title: currentMalAnime.title,
             service: "MyAnimeList",
             progress: currentMalAnime.my_list_status.num_episodes_watched,
             status: currentMalAnime.my_list_status.status,
-            startedAt: startDate,
+            startedAt: currentMalAnime.my_list_status.start_date,
-            completedAt: finishDate,
+            completedAt: currentMalAnime.my_list_status.finish_date,
             score: currentMalAnime.my_list_status.score,
             repeat: currentMalAnime.my_list_status.num_times_rewatched,
             notes: currentMalAnime.my_list_status.comments,
         });
-    }
 
     if (isSimklLoggedIn && Object.keys(currentSimklAnime).length > 0)
         AddAnimeServiceToTable({
@@ -160,8 +138,8 @@
             rating: number;
             episodes: number;
             status: StatusOption;
-            startedAt: Date | null;
+            startedAt: string;
-            completedAt: Date | null;
+            completedAt: string;
             repeat: number;
             notes: string;
         } = {
@@ -173,8 +151,8 @@
                 mal: "",
                 simkl: "",
             },
-            startedAt: null,
+            startedAt: "",
-            completedAt: null,
+            completedAt: "",
             repeat: 0,
             notes: "",
         };
@@ -211,8 +189,8 @@
                 score: submitData.rating,
                 repeat: submitData.repeat,
                 notes: submitData.notes,
-                startedAt: convertDateToAniList(startedAtDate),
+                startedAt: convertDateStringToAniList(submitData.startedAt),
-                completedAt: convertDateToAniList(completedAtDate),
+                completedAt: convertDateStringToAniList(submitData.completedAt),
             };
             await AniListUpdateEntry(body).then(
                 (value: AniListGetSingleAnime) => {
@@ -267,20 +245,6 @@
                         value.my_list_status.comments = malAnimeReturn.comments;
                         return value;
                     });
-                    let startDate = "";
-                    let finishDate = "";
-                    if (currentMalAnime.my_list_status.start_date !== "") {
-                        const startArray = re.exec(
-                            currentMalAnime.my_list_status.start_date,
-                        );
-                        startDate = `${startArray[2]}-${startArray[3]}-${startArray[1]}`;
-                    }
-                    if (currentMalAnime.my_list_status.finish_date !== "") {
-                        const finishArray = re.exec(
-                            currentMalAnime.my_list_status.finish_date,
-                        );
-                        finishDate = `${finishArray[2]}-${finishArray[3]}-${finishArray[1]}`;
-                    }
                     AddAnimeServiceToTable({
                         id: `m-${currentMalAnime.id}`,
                         title: currentMalAnime.title,
@@ -288,8 +252,8 @@
                         progress:
                             currentMalAnime.my_list_status.num_episodes_watched,
                         status: currentMalAnime.my_list_status.status,
-                        startedAt: startDate,
+                        startedAt: currentMalAnime.my_list_status.start_date,
-                        completedAt: finishDate,
+                        completedAt: currentMalAnime.my_list_status.finish_date,
                         score: currentMalAnime.my_list_status.score,
                         repeat: currentMalAnime.my_list_status
                             .num_times_rewatched,
@@ -450,6 +414,7 @@
     }
 </script>
 
+/B
 <form on:submit|preventDefault={handleSubmit} class="container pt-3 pb-10">
     <h1 class="text-white font-bold text-left text-xl pb-3">
         {title}
@@ -594,16 +559,34 @@
                         class="text-left block mb-2 text-sm font-medium text-white"
                         >Date Started</label
                     >
-                    <Datepicker
+                    <div class="relative max-w-sm">
-                        bind:value={startedAtDate}
+                        <div
-                        color="slate"
+                            class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none"
-                        dateFormat={{
+                        >
-                            year: "numeric",
+                            <svg
-                            month: "2-digit",
+                                class="w-4 h-4 text-gray-400"
-                            day: "2-digit",
+                                aria-hidden="true"
-                        }}
+                                xmlns="http://www.w3.org/2000/svg"
-                        showActionButtons
+                                fill="currentColor"
+                                viewBox="0 0 20 20"
+                            >
+                                <path
+                                    d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"
                                 />
+                            </svg>
+                        </div>
+                        <input
+                            id="startedAt"
+                            type="date"
+                            name="startedAt"
+                            class="border text-sm rounded-lg
+                                    focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 bg-gray-700 border-gray-600
+                                    placeholder-gray-400 text-white"
+                            value={startedAtDate}
+                            placeholder="Date Started"
+                        />
+                        <Datepicker showActionButtons />
+                    </div>
                 </div>
                 <div>
                     <label
@@ -611,16 +594,33 @@
                         class="text-left block mb-2 text-sm font-medium text-white"
                         >Date Completed</label
                     >
-                    <Datepicker
+                    <div class="relative max-w-sm">
-                        bind:value={completedAtDate}
+                        <div
-                        color="slate"
+                            class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none"
-                        dateFormat={{
+                        >
-                            year: "numeric",
+                            <svg
-                            month: "2-digit",
+                                class="w-4 h-4 text-gray-400"
-                            day: "2-digit",
+                                aria-hidden="true"
-                        }}
+                                xmlns="http://www.w3.org/2000/svg"
-                        showActionButtons
+                                fill="currentColor"
+                                viewBox="0 0 20 20"
+                            >
+                                <path
+                                    d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"
                                 />
+                            </svg>
+                        </div>
+                        <input
+                            id="completedAt"
+                            type="date"
+                            name="completedAt"
+                            class="border text-sm rounded-lg
+                                    block w-full ps-10 p-2.5 bg-gray-700 border-gray-600
+                                    placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
+                            value={completedAtDate}
+                            placeholder="Date Completed"
+                        />
+                    </div>
                 </div>
                 <div>
                     <label

frontend/src/helperComponents/Datepicker.svelte

@@ -61,8 +61,6 @@
                 return "focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-400";
             case "purple":
                 return "focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400";
-            case "slate":
-                return "focus:ring-2 focus:ring-slate-500 dark:focus:ring-slate-400";
             default:
                 return "";
         }
@@ -82,8 +80,6 @@
                 return "bg-yellow-100 dark:bg-yellow-900";
             case "purple":
                 return "bg-purple-100 dark:bg-purple-900";
-            case "slate":
-                return "bg-slate-100 dark:bg-slate-900";
             default:
                 return "";
         }
@@ -297,7 +293,7 @@
             <input
                 bind:this={inputElement}
                 type="text"
-                class="w-full px-4 py-3 text-sm border rounded-md focus:outline-none dark:bg-gray-700 dark:text-white dark:border-gray-600 {getFocusRingClass(
+                class="w-full px-4 py-2 text-sm border rounded-md focus:outline-none dark:bg-gray-700 dark:text-white dark:border-gray-600 {getFocusRingClass(
                     color,
                 )} {inputClass}"
                 {placeholder}

frontend/src/helperFunctions/convertAniListDateIn.ts

@@ -1,37 +0,0 @@
-import moment from "moment";
-
-const convertAniListDateToString = (date: {
-  year?: number;
-  month?: number;
-  day?: number;
-}): string => {
-  if (
-    date.year === undefined ||
-    (date.year === 0 && date.month === undefined) ||
-    (date.month === 0 && date.day === undefined) ||
-    date.day === 0
-  ) {
-    return "";
-  }
-  const newISODate = new Date(date.year, date.month - 1, date.day);
-  const newMoment = moment(newISODate);
-  return newMoment.format("MM-DD-YYYY");
-};
-
-const convertAniListDateToDate = (date: {
-  year?: number;
-  month?: number;
-  day?: number;
-}): Date | null => {
-  if (
-    date.year === undefined ||
-    (date.year === 0 && date.month === undefined) ||
-    (date.month === 0 && date.day === undefined) ||
-    date.day === 0
-  ) {
-    return null;
-  }
-  return new Date(date.year, date.month - 1, date.day);
-};
-
-export { convertAniListDateToString, convertAniListDateToDate };

frontend/src/helperFunctions/convertAniListDateToString.ts

@@ -0,0 +1,17 @@
+import moment from "moment";
+
+export default (date: {
+    year?: number,
+    month?: number,
+    day?: number,
+}): string => {
+    if (date.year === undefined || date.year === 0
+        && date.month === undefined || date.month === 0
+        && date.day === undefined || date.day === 0
+    ) {
+        return ""
+    }
+    const newISODate = new Date(date.year, date.month - 1, date.day)
+    const newMoment = moment(newISODate)
+    return newMoment.format('YYYY-MM-DD')
+}

frontend/src/helperFunctions/convertDateStringToAniList.ts

@@ -0,0 +1,22 @@
+type Date = {
+    year: number,
+    month: number,
+    day: number,
+}
+
+export default (date: string): Date => {
+    if (date === "") {
+        return {
+            year: 0,
+            month: 0,
+            day: 0,
+        }
+    }
+    const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/
+    const newDate = re.exec(date)
+    return {
+        year: Number(newDate[1]),
+        month: Number(newDate[2]),
+        day: Number(newDate[3])
+    }
+}

frontend/src/helperFunctions/convertDateToAniList.ts

@@ -1,39 +0,0 @@
-type AnilistDate = {
-  year: number;
-  month: number;
-  day: number;
-};
-
-const convertDateStringToAniList = (date: string): AnilistDate => {
-  if (date === "") {
-    return {
-      year: 0,
-      month: 0,
-      day: 0,
-    };
-  }
-  const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/;
-  const newDate = re.exec(date);
-  return {
-    year: Number(newDate[1]),
-    month: Number(newDate[2]),
-    day: Number(newDate[3]),
-  };
-};
-
-const convertDateToAniList = (date: Date | null): AnilistDate => {
-  if (date === null) {
-    return {
-      year: 0,
-      month: 0,
-      day: 0,
-    };
-  }
-  return {
-    year: Number(date.getFullYear()),
-    month: Number(date.getMonth()) + 1,
-    day: Number(date.getDate()),
-  };
-};
-
-export { convertDateStringToAniList, convertDateToAniList };