Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Load resources main #149

Merged
merged 9 commits into from
Sep 4, 2024
+1,313 −1,641
Merged

Load resources main #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6c4bb89
Merge pull request #146 from datagrove/next-release
r-southworth Aug 30, 2024
428ce49
convert to sever
r-southworth Aug 30, 2024
893ef1f
fix various accessibility issues, internationalization, etc.
r-southworth Aug 31, 2024
bbee1fc
rewrite Home to render on server
r-southworth Aug 31, 2024
02f58db
faster loading for first 5 images on viewCard
r-southworth Sep 1, 2024
093298e
get extra code out of mobile view Card
r-southworth Sep 1, 2024
58666fb
tiny changes to mobile view card
r-southworth Sep 1, 2024
a113c89
lazy load images on mobileCard below the fold
r-southworth Sep 1, 2024
84f2476
fixed image sizes and massive bug overhaul
r-southworth Sep 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions src/components/common/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ const lang = getLangFromUrl(new URL(window.location.href));
const t = useTranslations(lang);

export const Header: Component = () => {

const screenSize = useStore(windowSize);

return (
Expand All @@ -27,7 +26,11 @@ export const Header: Component = () => {
</div>
<div class="navLines flex items-center" id="navLines">
<div class="all-logo">
<a id="logo" href={`/${lang}`} aria-label={t("ariaLabels.todo")}>
<a
id="logo"
href={`/${lang}`}
aria-label={t("ariaLabels.todo")}
>
<svg
width="180"
height="180"
Expand Down Expand Up @@ -70,13 +73,13 @@ export const Header: Component = () => {
</div>

<div>
<h1 class="pl-2 text-3xl text-ptext1 dark:text-ptext1-DM md:text-5xl">
<h1 class="min-h-[44px] min-w-[44px] pl-2 pt-1 text-3xl text-ptext1 dark:text-ptext1-DM md:text-5xl">
<a href={`/${lang}`}>{SITE.title}</a>
</h1>
</div>
</div>
<Show when={screenSize() !== "sm"}>
<SearchBar />
<SearchBar />
</Show>

<div class="flex items-center md:w-[50%] md:justify-end lg:w-[40%] xl:w-[35%]">
Expand All @@ -95,7 +98,7 @@ export const Header: Component = () => {
</div>
<Show when={screenSize() === "sm"}>
<div class="flex w-full px-4 pb-1">
<SearchBar />
<SearchBar />
</div>
</Show>
</header>
Expand Down
5 changes: 2 additions & 3 deletions src/components/common/HeaderSearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export const SearchBar: Component = () => {
searchString() !== "null"
) {
localStorage.setItem("searchString", searchString());
console.log("Set Search to Local Storage", searchString());
}

// console.log(window.location.href)
Expand Down Expand Up @@ -67,13 +68,11 @@ export const SearchBar: Component = () => {
return (
<div class="search-form mx-4 mt-2 flex h-full w-full items-center justify-center">
<div class="form flex h-full w-full items-center justify-between rounded-full border border-border1 px-1 text-ptext1 focus:border-2 focus:border-highlight1 focus:outline-none dark:border-border1-DM dark:focus:border-highlight1-DM">
<label class="sr-only" for="headerSearch">
{t("formLabels.search")}
</label>
<input
type="text"
name="query"
id="headerSearch"
aria-label={t("formLabels.search")}
class="ml-2 h-full w-full rounded-full bg-background1 py-3 dark:bg-background1-DM"
value={searchString() ? searchString() : ""}
oninput={(e) => setSearchString(e.target.value)}
Expand Down
1 change: 1 addition & 0 deletions src/components/common/MobileProfileBtn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const lang = getLangFromUrl(new URL(window.location.href));
const t = useTranslations(lang);

const { data: User, error: UserError } = await supabase.auth.getSession();

export const MobileProfileBtn = () => {
const [isUser, setIsUser] = createSignal<boolean | null>(false);

Expand Down
6 changes: 3 additions & 3 deletions src/components/common/ProfileBtn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ import { CreatorRegistrationRouting } from "../members/CreatorRegistrationRoutin
import { LanguagePicker } from "./LanguagePicker";
import { getLangFromUrl, useTranslations } from "../../i18n/utils";


const lang = getLangFromUrl(new URL(window.location.href));
const t = useTranslations(lang);

const { data: User, error: UserError } = await supabase.auth.getSession();

export const ProfileBtn = () => {
const [isUser, setIsUser] = createSignal<boolean | null>(false);

Expand Down Expand Up @@ -74,11 +74,11 @@ export const ProfileBtn = () => {
<div class="">
<button
onclick={clickHandler}
class="mr-4 flex rounded-lg md:border border-border1 px-3 py-2 dark:border-border1-DM md:mr-0"
class="mr-4 flex rounded-lg border-border1 px-3 py-2 dark:border-border1-DM md:mr-0 md:border"
aria-label={t("ariaLabels.navigation")}
>
<svg
class="mr-2 h-4 w-4 fill-icon1 dark:fill-icon1-DM hidden md:block"
class="mr-2 hidden h-4 w-4 fill-icon1 dark:fill-icon1-DM md:block"
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
>
Expand Down
68 changes: 36 additions & 32 deletions src/components/common/cart/CartCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,44 +25,46 @@ export const CartCard: Component<Props> = (props) => {
const [newItems, setNewItems] = createSignal<Array<Post>>([]);
const [quantity, setQuantity] = createSignal<number>(0);

console.log(items);

createEffect(async () => {
if (props.items) {
const updatedItems = await Promise.all(
props.items.map(async (item: Post) => {
const newItem = { ...item };
newItem.image_urls
? (newItem.image_url = await downloadPostImage(
newItem.image_urls.split(",")[0]
))
: (newItem.image_url = undefined);
// const updatedItems = await Promise.all(
// props.items.map(async (item: Post) => {
// const newItem = { ...item };
// newItem.image_urls
// ? (newItem.image_url = await downloadPostImage(
// newItem.image_urls.split(",")[0]
// ))
// : (newItem.image_url = undefined);

const { data: sellerImg, error: sellerImgError } =
await supabase
.from("sellerview")
.select("*")
.eq("seller_id", newItem.seller_id);
// const { data: sellerImg, error: sellerImgError } =
// await supabase
// .from("sellerview")
// .select("*")
// .eq("seller_id", newItem.seller_id);

if (sellerImgError) {
console.log(sellerImgError);
}
// if (sellerImgError) {
// console.log(sellerImgError);
// }

if (sellerImg) {
if (sellerImg[0].image_url) {
newItem.seller_img = await downloadUserImage(
sellerImg[0].image_url
);
}
}
return newItem;
})
);
// if (sellerImg) {
// if (sellerImg[0].image_url) {
// newItem.seller_img = await downloadUserImage(
// sellerImg[0].image_url
// );
// }
// }
// return newItem;
// })
// );

setNewItems(updatedItems);
setNewItems(props.items);
}
});

const updateQuantity = async (quantity: number, product_id?: string) => {
console.log("Card Card Update Quantity");
console.log("Cart Card Update Quantity");
setQuantity(quantity);
if (product_id) {
const updatedItems: Array<Post> = await Promise.all(
Expand Down Expand Up @@ -133,7 +135,7 @@ export const CartCard: Component<Props> = (props) => {
? "User Image"
: "No image"
}
class="h-full w-full rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
class="h-48 w-48 rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
loading="lazy"
onload={(e) => {
lazyLoadImage(
Expand Down Expand Up @@ -260,9 +262,11 @@ export const CartCard: Component<Props> = (props) => {
{/* Remove All from Cart */}
<button
class="rounded font-bold text-alert1 dark:text-alert1-DM"
onclick={() =>
removeItem(item.product_id)
}
onclick={(e) => {
e.stopPropagation();
e.preventDefault();
removeItem(item.product_id);
}}
aria-label={t(
"ariaLabels.removeFromCart"
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/common/cart/CartCardDonate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const CartCardDonate: Component<Props> = (props) => {
src={LearnGroveCommunity.src}
// TODO Internationalize
alt="Build Your LearnGrove"
class="h-full w-full rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
class="h-44 w-44 rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
/>
</div>

Expand Down
2 changes: 1 addition & 1 deletion src/components/common/cart/CartCardDonateMobile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const CartCardDonateMobile: Component<Props> = (props) => {
src={LearnGroveCommunity.src}
// TODO Internationalize
alt="Build Your LearnGrove"
class="h-full w-full rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
class="h-22 w-22 rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
/>
</div>

Expand Down
56 changes: 28 additions & 28 deletions src/components/common/cart/CartCardMobile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,38 +27,38 @@ export const CartCardMobile: Component<Props> = (props) => {

createEffect(async () => {
if (props.items) {
const updatedItems = await Promise.all(
props.items.map(async (item: Post) => {
const newItem = { ...item };
newItem.image_urls
? (newItem.image_url = await downloadPostImage(
newItem.image_urls.split(",")[0]
))
: (newItem.image_url = undefined);
// const updatedItems = await Promise.all(
// props.items.map(async (item: Post) => {
// const newItem = { ...item };
// newItem.image_urls
// ? (newItem.image_url = await downloadPostImage(
// newItem.image_urls.split(",")[0]
// ))
// : (newItem.image_url = undefined);

const { data: sellerImg, error: sellerImgError } =
await supabase
.from("sellerview")
.select("*")
.eq("seller_id", newItem.seller_id);
// const { data: sellerImg, error: sellerImgError } =
// await supabase
// .from("sellerview")
// .select("*")
// .eq("seller_id", newItem.seller_id);

if (sellerImgError) {
console.log(sellerImgError);
}
// if (sellerImgError) {
// console.log(sellerImgError);
// }

if (sellerImg) {
if (sellerImg[0].image_url) {
newItem.seller_img = await downloadUserImage(
sellerImg[0].image_url
);
}
}
// if (sellerImg) {
// if (sellerImg[0].image_url) {
// newItem.seller_img = await downloadUserImage(
// sellerImg[0].image_url
// );
// }
// }

return newItem;
})
);
// return newItem;
// })
// );

setNewItems(updatedItems);
setNewItems(props.items);
}
});

Expand Down Expand Up @@ -127,7 +127,7 @@ export const CartCardMobile: Component<Props> = (props) => {
? "User Image"
: "No image"
}
class="h-full w-full rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
class="h-22 w-22 rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
loading="lazy"
onload={(e) => {
lazyLoadImage(
Expand Down
2 changes: 0 additions & 2 deletions src/components/common/cart/ViewCart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ const t = useTranslations(lang);

export const CartView = () => {
const [totalItems, setTotalItems] = createSignal(0);
const [itemsDetails, setItemsDetails] = createSignal<Post[]>([]);
const [cartTotal, setCartTotal] = createSignal(0);
const [donation, setDonation] = createSignal(0);
const screenSize = useStore(windowSize);
Expand Down Expand Up @@ -75,7 +74,6 @@ export const CartView = () => {
let total = 0;
{
console.log("items in cart: " + items.length);
console.log("Item Details: " + itemsDetails());
}
items.forEach((item: Post) => {
if (item.price) {
Expand Down
Loading
Loading