Merge branch 'next-release' into AddAllFavorites

.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-    "prettier.printWidth": 250
-}
+    "prettier.printWidth": 250,
+    "deno.enable": true,
+    "deno.lint": true,
+}

package.json

@@ -19,6 +19,7 @@
     "@lexical/react": "^0.12.2",
     "@nanostores/persistent": "^0.9.1",
     "@nanostores/solid": "^0.4.2",
+    "@neodrag/solid": "^2.0.4",
     "@playwright/test": "^1.41.2",
     "@stripe/stripe-js": "^3.0.6",
     "@supabase/supabase-js": "^2.39.6",

src/components/common/Dropdown.tsx

@@ -27,21 +27,21 @@ const Dropdown: Component<Props> = (Props: Props) => {
         <div class="relative inline-block w-full">
             {/* Dropdown button */}
             <button
-                class="flex w-full justify-between rounded border border-inputBorder1 bg-background1 text-ptext1 focus:border-2 focus:border-highlight1 focus:outline-none dark:border-inputBorder1-DM dark:bg-background2-DM dark:text-ptext2-DM dark:focus:border-highlight1-DM"
+                class="flex w-full items-center justify-between rounded border border-inputBorder1 bg-background1 text-ptext1 focus:border-2 focus:border-highlight1 focus:outline-none dark:border-inputBorder1-DM dark:bg-background2-DM dark:text-ptext2-DM dark:focus:border-highlight1-DM"
                 onClick={(e) => {
                     e.preventDefault();
                     setIsOpen(!isOpen());
                 }}
             >
-                <div class="ml-1 inline-block">
+                <div class="ml-1 flex min-h-[44px] items-center overflow-hidden text-lg">
                     {/* TODO: This should take a prop to define whether it is required or not and what label to use */}
-                    <span class="text-alert1">* </span>
+                    <div class="text-alert1">* </div>
                     {Props.selectedOption ||
                         t("formLabels.chooseTaxCode") ||
                         t("formLabels.dropdownDefault")}
                 </div>
                 {/* Dropdown icon */}
-                <div class="inline-block">
+                <div class="">
                     <svg
                         class={`inline-block h-5 w-5 transform transition-transform dark:fill-white 
                         ${isOpen() ? "rotate-180" : ""}`}

src/components/common/notices/modal.tsx

@@ -10,6 +10,7 @@ type ModalProps = {
     buttonContent: JSX.Element;
     heading: HeadingProps["heading"];
     headingLevel?: HeadingProps["headingLevel"];
+    classList?: string;
 };
 
 const Modal: Component<ModalProps> = (props) => {
@@ -70,6 +71,7 @@ const Modal: Component<ModalProps> = (props) => {
         e.stopPropagation();
         setIsOpen(false);
     }
+
     return (
         <>
             <button

src/components/home/Home.tsx

@@ -6,6 +6,7 @@ import { windowSize } from "@components/common/WindowSizeStore";
 import { HomeCard } from "@components/home/HomeCard";
 import { HomeGradeCarousel } from "./HomeGradeCarousel";
 import { useTranslations } from "../../i18n/utils";
+import { debounce } from "@lib/utils/debounce";
 
 // const lang = getLangFromUrl(new URL(window.location.href));
 
@@ -15,7 +16,7 @@ interface Props {
     subjectCarousel: JSXElement;
 }
 
-async function fetchPosts({
+async function postRequest({
     lang,
     draft_status,
     listing_status,
@@ -40,6 +41,8 @@ async function fetchPosts({
     return data;
 }
 
+const fetchPosts = debounce(postRequest, 500);
+
 export const Home: Component<Props> = (props) => {
     const [lang, setLang] = createSignal<"en" | "es" | "fr">(props.lang);
     const [popularPosts, setPopularPosts] = createSignal<Array<Post>>([]);

src/components/home/HomeCard.tsx

@@ -5,6 +5,7 @@ import { useTranslations } from "../../i18n/utils";
 import { lazyLoadImage } from "@lib/imageHelper";
 import postPlaceHolder from "@src/assets/postPlaceHolder.svg";
 import person from "@src/assets/person.svg";
+import { AverageRatingStars } from "@components/posts/AverageRatingStars";
 
 interface Props {
     // Define the type for the filterPosts prop
@@ -164,28 +165,11 @@ export const HomeCard: Component<Props> = (props) => {
                                 id="homeCard-ratings-price"
                                 class="row-span-1 text-end"
                             >
-                                {/* <div class="flex w-2/3 items-end"> */}
-                                {/*     <div class="flex items-end justify-start"> */}
-                                {/*         <svg */}
-                                {/*             xmlns="http://www.w3.org/2000/svg" */}
-                                {/*             width="15px" */}
-                                {/*             height="15px" */}
-                                {/*             viewBox="0 0 32 32" */}
-                                {/*             class="fill-icon1 dark:fill-icon1-DM" */}
-                                {/*         > */}
-                                {/*             <path d="M 30.335938 12.546875 L 20.164063 11.472656 L 16 2.132813 L 11.835938 11.472656 L 1.664063 12.546875 L 9.261719 19.394531 L 7.140625 29.398438 L 16 24.289063 L 24.859375 29.398438 L 22.738281 19.394531 Z" /> */}
-                                {/*         </svg> */}
-                                {/**/}
-                                {/*         <p class="ml-1 mr-0.5 text-xs font-bold"> */}
-                                {/*             4.9 */}
-                                {/*         </p> */}
-                                {/*         <p class="text-xs font-light"> */}
-                                {/*             (30.3K) */}
-                                {/*         </p> */}
-                                {/*     </div> */}
-                                {/* </div> */}
-
-                                <div class=" text-end">
+                                <div class="my-1 flex justify-between text-end">
+                                    <AverageRatingStars
+                                        resourceId={post.id}
+                                        page={"home"}
+                                    />
                                     <Show when={post.price > 0}>
                                         <p class="text-xs font-bold">
                                             ${post.price.toFixed(2)}

src/components/home/HomeSubjectCarousel.tsx

@@ -100,12 +100,13 @@ export const HomeSubjectCarousel: Component<Props> = (props) => {
             allCategoryInfo.push({
                 ...categoriesData[i],
                 ...categories.find(
-                    (itmInner) =>
-                        itmInner.id.toString() === categoriesData[i].id
+                    (itmInner) => itmInner.id === categoriesData[i].id
                 ),
             });
         }
 
+        allCategoryInfo.sort((a, b) => a.name.localeCompare(b.name));
+
         setSubjectData(allCategoryInfo);
         console.log(allCategoryInfo);
     });

src/components/members/UserProfileView.tsx

@@ -215,6 +215,7 @@ export const UserProfileView: Component = () => {
                         <Show when={screenSize() === "sm"}>
                             <UserProfileViewMobile
                                 user={user() ? user()! : null}
+                                session={session()}
                                 editMode={editMode()}
                                 enableEditMode={enableEditMode}
                                 userImage={userImage()}
@@ -487,7 +488,9 @@ export const UserProfileView: Component = () => {
                                     {/* <Show when={ purchasedItems() }> */}
                                     <div>
                                         {/* <ViewCard posts={purchasedItems()} /> */}
-                                        <ViewUserPurchases />
+                                        <ViewUserPurchases
+                                            session={session()}
+                                        />
                                     </div>
                                     {/* </Show>
 

src/components/members/UserProfileViewMobile.tsx

@@ -14,12 +14,14 @@ import type { User } from "@lib/types";
 import type { Post } from "@lib/types";
 import { ViewUserPurchases } from "@components/posts/ViewUserPurchases";
 import { ViewUserFavorites } from "@components/posts/ViewUserFavorites";
+import type { AuthSession } from "@supabase/supabase-js";
 
 const lang = getLangFromUrl(new URL(window.location.href));
 const t = useTranslations(lang);
 
 interface Props {
     user: User | null;
+    session: AuthSession | null;
     userImage: string | undefined;
     editMode: boolean;
     enableEditMode: () => void;
@@ -357,7 +359,7 @@ export const UserProfileViewMobile: Component<Props> = (props: Props) => {
 
                 <Show when={tabSelected() === "purchases"}>
                     <div>
-                        <ViewUserPurchases />
+                        <ViewUserPurchases session={props.session} />
                     </div>
                 </Show>