+
{result.count !== 0 &&
}
diff --git a/src/app/pages/public/gallery/item.tsx b/src/app/pages/public/gallery/item.tsx
index 9694b5b..7b01762 100644
--- a/src/app/pages/public/gallery/item.tsx
+++ b/src/app/pages/public/gallery/item.tsx
@@ -1,50 +1,42 @@
import { Link } from '@tanstack/react-router';
-import {
- useQuery,
- type GalleryAllProductsResponse,
-} from '@customcads/react-sdk';
+import { type GalleryAllProductsResponse } from '@customcads/react-sdk';
import { Banknote, Eye } from 'lucide-react';
import { ClassName } from '@/types/react';
import { cn } from '@/lib/utils';
+import PresignedImage from '@/app/components/image';
type Props = ClassName & { product: GalleryAllProductsResponse };
-const Item = ({ product, className }: Props) => {
- const { data: image } = useQuery(
- ({ images }) =>
- images.download({ id: product.imageId, relationType: 'Product' }),
- !!product,
- );
-
- return (
-
-
-
-
-
- {product.counts.views}
-
-
- {product.name}
-
-
-
- {product.counts.purchases}
-
+const Item = ({ product, className }: Props) => (
+
+
+
+
+
+ {product.counts.views}
+
+
+ {product.name}
+
+
+
+ {product.counts.purchases}
-
- );
-};
+
+
+);
export default Item;
diff --git a/src/app/pages/public/gallery/list.tsx b/src/app/pages/public/gallery/list.tsx
index 3563f35..8cb95be 100644
--- a/src/app/pages/public/gallery/list.tsx
+++ b/src/app/pages/public/gallery/list.tsx
@@ -1,28 +1,11 @@
import { ApiResult, GalleryAllProductsResponse } from '@customcads/react-sdk';
import { cn } from '@/lib/utils';
-import { useCommonTranslations } from '@/app/hooks/locales/translations/common';
import Item from './item';
+import Empty from './empty';
-type Props = { products?: ApiResult
};
+type Props = { products: ApiResult };
const List = ({ products }: Props) => {
- const tLoading = useCommonTranslations('loading');
- const tEmpty = useCommonTranslations('empty');
-
- if (!products) {
- return (
-
- {tLoading('gallery')}
-
- );
- }
-
- if (!products.count) {
- return (
-
- {tEmpty('products')}
-
- );
- }
+ if (!products.count) return ;
return (
{
+ const throttled = useThrottle(name, 500);
+ const { data: products, isLoading } = useQuery(({ products }) =>
+ products.gallery.all({ page: 1, limit: 4, name: throttled }),
+ );
+
+ const loading = useMinimumLoadingTime(isLoading, 400);
+ if (!products || loading) return ;
+
+ return (
+
+ {products.count ? (
+ products.items.map((x) =>
+
+
+
+);
+
+const List = ({ delays }: { delays: number[] }) => (
+
+ {delays.map((x, i) => (
+
+);
+
+const Skeleton = () => (
+
+ (i + 1) * 200)} />
+
+);
+
+export default Skeleton;
diff --git a/src/app/pages/public/gallery/skeleton.tsx b/src/app/pages/public/gallery/skeleton.tsx
new file mode 100644
index 0000000..50fceca
--- /dev/null
+++ b/src/app/pages/public/gallery/skeleton.tsx
@@ -0,0 +1,49 @@
+import { Skeleton as SkeletonUI } from '@/app/components/ui';
+
+const Item = ({ delay = 0 }: { delay?: number }) => (
+
+);
+
+const List = ({ delays }: { delays: number[] }) => (
+
+ {delays.map((x, i) => (
+
+);
+
+const Bars = () => (
+
+
+
+
+
+);
+
+const Skeleton = () => (
+
+
+ (i + 1) * 100)} />
+
+);
+
+export default Skeleton;
diff --git a/src/app/pages/public/gallery/tags/index.tsx b/src/app/pages/public/gallery/tags/index.tsx
new file mode 100644
index 0000000..106383a
--- /dev/null
+++ b/src/app/pages/public/gallery/tags/index.tsx
@@ -0,0 +1,48 @@
+import { Badge } from '@/app/components/ui';
+import { cn } from '@/lib/utils';
+import { tagVariants, Tag } from './variants';
+import { useEffect, useState } from 'react';
+
+type Props = {
+ children?: string[];
+ getTags: () => string[] | undefined;
+ updateTags: (tags: string[] | undefined) => void;
+};
+const Tags = ({ children, getTags, updateTags }: Props) => {
+ const [tags, setTags] = useState(getTags() ?? []);
+
+ useEffect(() => {
+ updateTags(tags.length ? tags : undefined);
+ }, [tags]);
+
+ return (
+
+
+ {children?.map((tag) => (
+
+ setTags((prev) => {
+ if (!prev.includes(tag)) return [...prev, tag];
+ return prev.filter((x) => x !== tag);
+ })
+ }
+ >
+ {tag}
+
+ ))}
+
+
-
);
diff --git a/src/app/pages/public/product/tags.tsx b/src/app/pages/public/product/tags.tsx
deleted file mode 100644
index c511242..0000000
--- a/src/app/pages/public/product/tags.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-const Tags = ({ tags }: { tags: string[] }) => (
-
- {tags.map((x) => (
- -
- {x}
-
- ))}
-
-);
-
-export default Tags;
diff --git a/src/app/pages/public/product/tags/index.tsx b/src/app/pages/public/product/tags/index.tsx
new file mode 100644
index 0000000..ffe3992
--- /dev/null
+++ b/src/app/pages/public/product/tags/index.tsx
@@ -0,0 +1,28 @@
+import { Badge } from '@/app/components/ui';
+import { cn } from '@/lib/utils';
+import { tagVariants, Variant } from './variants';
+
+type Props = { children: string[] };
+const Tags = ({ children }: Props) => (
+
+
+ {children.map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+);
+
+export default Tags;
diff --git a/src/app/pages/public/product/tags/variants.tsx b/src/app/pages/public/product/tags/variants.tsx
new file mode 100644
index 0000000..5e671d5
--- /dev/null
+++ b/src/app/pages/public/product/tags/variants.tsx
@@ -0,0 +1,23 @@
+import { cn } from '@/lib/utils';
+import { cva } from 'class-variance-authority';
+
+const variants = {
+ default: 'bg-primary text-primary-foreground',
+ new: 'bg-rose-500 text-rose-100 border-rose-800',
+ printable: 'bg-emerald-500 text-emerald-100 border-emerald-800',
+ professional: 'bg-slate-500 text-slate-100 border-slate-800',
+ popular: 'bg-fuchsia-500 text-fuchsia-100 border-fuchsia-800',
+};
+export type Variant = keyof typeof variants;
+
+export const tagVariants = cva(
+ cn(
+ 'w-32 border-2 dark:border-3 h-6',
+ 'sm:px-6 sm:h-8 sm:text-sm',
+ 'xl:px-8 xl:h-10 xl:text-base',
+ ),
+ {
+ variants: { variant: variants },
+ defaultVariants: { variant: 'default' },
+ },
+);
diff --git a/src/app/stores/auth.ts b/src/app/stores/auth.ts
index 00a1bb0..79502d4 100644
--- a/src/app/stores/auth.ts
+++ b/src/app/stores/auth.ts
@@ -6,16 +6,16 @@ type State = {
authn: boolean;
authz: string | null;
};
-const defaultState = {
+const getDefaultState = () => ({
authn: Boolean(getRoleCookie()),
authz: getRoleCookie() ?? null,
-};
+});
export const get = getStore(() => {
- const store = new Store
(defaultState);
+ const store = new Store(getDefaultState());
return {
store,
- reset: () => store.setState(() => defaultState),
+ reset: () => store.setState(getDefaultState),
login: (role: string) => {
store.setState(() => ({ authn: true, authz: role }));
},
diff --git a/src/app/utils/money.ts b/src/app/utils/money.ts
index 0ce42a0..319cfb5 100644
--- a/src/app/utils/money.ts
+++ b/src/app/utils/money.ts
@@ -2,6 +2,7 @@ import { Currency, ExchangeRate, EXCHANGE_RATES } from '@customcads/react-sdk';
import {
getLanguageCookie,
getUserDefaultLanguage,
+ getUserNavigatorLanguage,
} from '@/lib/isomorphic/locale';
import { typescript } from '@/lib/utils';
@@ -20,7 +21,11 @@ const currencyToRate = (rates: ExchangeRate[], currency: Currency) => {
export const resolveCurrency = (currency?: Currency) =>
currency ??
- currencies[getLanguageCookie() ?? getUserDefaultLanguage()] ??
+ currencies[
+ getUserNavigatorLanguage() ??
+ getLanguageCookie() ??
+ getUserDefaultLanguage()
+ ] ??
'EUR';
export const currencyToSymbol = (currency?: Currency) =>
diff --git a/src/hooks/utils/useHub.ts b/src/hooks/utils/useHub.ts
index a364c3a..fd1eaf8 100644
--- a/src/hooks/utils/useHub.ts
+++ b/src/hooks/utils/useHub.ts
@@ -3,11 +3,12 @@ import { HubConnection } from '@/lib//hubs/signalr';
type Props = {
hub: {
- connection?: HubConnection;
- methods: Array<{
+ connection: HubConnection;
+ methods: Array;
+ methodsToAdd: {
name: string;
onReceived: (payload: never) => void | Promise;
- }>;
+ }[];
};
condition?: boolean;
deps?: DependencyList;
@@ -17,10 +18,9 @@ export const useHub = ({ hub, condition, deps }: Props) =>
// if there's a condition and it evaluates to `false`, exit
if (condition !== undefined && !condition) return;
- if (!hub.connection) return;
- const { connection } = hub;
-
- for (const method of hub.methods) {
- connection.on(method.name, method.onReceived);
+ for (const method of hub.methodsToAdd) {
+ if (hub.methods.includes(method.name)) return;
+ hub.methods.push(method.name);
+ hub.connection.on(method.name, method.onReceived);
}
}, deps);
diff --git a/src/hooks/utils/useMinimumLoadingTime.ts b/src/hooks/utils/useMinimumLoadingTime.ts
new file mode 100644
index 0000000..693d22b
--- /dev/null
+++ b/src/hooks/utils/useMinimumLoadingTime.ts
@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+export const useMinimumLoadingTime = (
+ isLoading: boolean,
+ minDelay: number = 500,
+) => {
+ const [shouldShowLoading, setShouldShowLoading] = useState(true);
+
+ useEffect(() => {
+ if (!isLoading) {
+ const timer = setTimeout(() => {
+ setShouldShowLoading(false);
+ }, minDelay);
+ return () => clearTimeout(timer);
+ }
+
+ setShouldShowLoading(true);
+ }, [isLoading, minDelay]);
+
+ return isLoading || shouldShowLoading;
+};
diff --git a/src/index.css b/src/index.css
index b8d2335..2140573 100644
--- a/src/index.css
+++ b/src/index.css
@@ -28,7 +28,7 @@ code {
--popover-foreground: oklch(0.141 0.005 285.823);
--primary: oklch(0.21 0.006 285.885);
--primary-foreground: oklch(0.985 0 0);
- --secondary: oklch(74.854% 0.00433 286.008 / 0.721);
+ --secondary: oklch(74.854% 0.00433 286.008 / 0.95);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.967 0.001 286.375);
--muted-foreground: oklch(0.552 0.016 285.938);
@@ -87,7 +87,7 @@ code {
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.985 0 0);
--primary-foreground: oklch(0.21 0.006 285.885);
- --secondary: oklch(0.274 0.006 286.033);
+ --secondary: oklch(0.274 0.006 286.033 / 0.95);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.274 0.006 286.033);
--muted-foreground: oklch(0.705 0.015 286.067);
diff --git a/src/lib/cad/loader.ts b/src/lib/cad/loader.ts
index 4fc567a..6e23800 100644
--- a/src/lib/cad/loader.ts
+++ b/src/lib/cad/loader.ts
@@ -9,48 +9,38 @@ const lock = (cad: Group) => {
cad.position.sub(center);
};
-export const gltf = (
+export const gltf = async (
scene: Scene,
url: string,
callback?: (cad: Group) => void,
progress?: (percentage: number) => void,
) => {
- new GLTFLoader().load(
- url,
- (cad) => {
- lock(cad.scene);
- if (callback) callback(cad.scene);
- scene.add(cad.scene);
- },
- (e) => {
- const percentage = e.loaded / e.total;
- if (progress) progress(percentage);
- },
- );
+ const cad = await new GLTFLoader().loadAsync(url, ({ loaded, total }) => {
+ const percentage = loaded / total;
+ if (progress) progress(percentage);
+ });
+
+ lock(cad.scene);
+ if (callback) callback(cad.scene);
+ scene.add(cad.scene);
};
-export const stl = (
+export const stl = async (
scene: Scene,
url: string,
callback?: (cad: Group) => void,
progress?: (percentage: number) => void,
) => {
- new STLLoader().load(
- url,
- (cad) => {
- const group = new Group();
- cad.center();
- group.add(
- new Mesh(cad, new MeshStandardMaterial({ color: 0xaaaaaa })),
- );
+ const cad = await new STLLoader().loadAsync(url, ({ loaded, total }) => {
+ const percentage = loaded / total;
+ if (progress) progress(percentage);
+ });
+
+ const group = new Group();
+ cad.center();
+ group.add(new Mesh(cad, new MeshStandardMaterial({ color: 0xaaaaaa })));
- lock(group);
- if (callback) callback(group);
- scene.add(group);
- },
- (e) => {
- const percentage = e.loaded / e.total;
- if (progress) progress(percentage);
- },
- );
+ lock(group);
+ if (callback) callback(group);
+ scene.add(group);
};
diff --git a/src/lib/cad/three-js.ts b/src/lib/cad/three-js.ts
index a460b11..ab9c162 100644
--- a/src/lib/cad/three-js.ts
+++ b/src/lib/cad/three-js.ts
@@ -139,6 +139,8 @@ export const initThreeJS = (
window.removeEventListener('resize', resizeHandler);
controls.dispose();
+ renderer.getContext().getExtension('WEBGL_lose_context')?.loseContext();
+
renderer.dispose();
renderer.domElement.remove();
diff --git a/src/lib/hubs/index.ts b/src/lib/hubs/index.ts
index 8ac21ef..e3e3b8b 100644
--- a/src/lib/hubs/index.ts
+++ b/src/lib/hubs/index.ts
@@ -1,11 +1,20 @@
import * as signalr from './signalr';
export type Name = 'Notifications';
-export type Hub = { name: Name; connection: signalr.HubConnection };
+export type Hub = {
+ name: Name;
+ connection: signalr.HubConnection;
+ methods: string[];
+};
+
let hubs: Hub[] = [];
const create = (name: Name) => {
- const hub: Hub = { name, connection: signalr.buildConnection(name) };
+ const hub: Hub = {
+ name,
+ connection: signalr.buildConnection(name),
+ methods: [],
+ };
hubs.push(hub);
signalr.start(hub.connection);
@@ -18,9 +27,5 @@ export const remove = (hub: Hub) => {
signalr.stop(hub.connection);
};
-export const connect = (name: Name) => {
- const hub = hubs.find((x) => x.name === name);
-
- if (!hub) return create(name).connection;
- return hub.connection;
-};
+export const connect = (name: Name) =>
+ hubs.find((x) => x.name === name) ?? create(name);
diff --git a/src/lib/isomorphic/locale.ts b/src/lib/isomorphic/locale.ts
index 32089c7..92f0423 100644
--- a/src/lib/isomorphic/locale.ts
+++ b/src/lib/isomorphic/locale.ts
@@ -4,6 +4,10 @@ import { LanguageStoreState } from '@/app/stores/locale';
import { LOCALE } from '@/app/constants/stores';
import { get } from './persistence';
+export const getUserNavigatorLanguage = createIsomorphicFn()
+ .client(() => navigator.language as AllowedLanguage)
+ .server(() => null);
+
export const getUserDefaultLanguage = createIsomorphicFn()
.client<[], AllowedLanguage>(() => {
const languages = navigator.languages || [navigator.language];
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index babc562..cdb0cb0 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -15,11 +15,13 @@ import ErrorPage from '@/app/components/error';
import { TanStackDevtools } from '@/app/integrations/tanstack-devtools';
import * as i18n from '@/app/locales/i18n';
import '@/index.css';
+import { getLanguageCookie } from '@/lib/isomorphic';
let cssUrl: string | undefined;
if (!import.meta.env.DEV) {
await import('@/index.css?url').then((i) => (cssUrl = i.default));
}
+i18n.initialize();
export const Route = createRootRouteWithContext()({
head: () => {
@@ -43,8 +45,8 @@ export const Route = createRootRouteWithContext()({
};
},
shellComponent: ({ children }) => {
- const { language } = i18n.initialize();
- const lang = language.split('-')[0] ?? 'en';
+ const lang = getLanguageCookie()?.split('-')[0] ?? 'en';
+
return (
diff --git a/src/routes/_public/gallery/$id.tsx b/src/routes/_public/gallery/$id.tsx
index 3e171ef..85be941 100644
--- a/src/routes/_public/gallery/$id.tsx
+++ b/src/routes/_public/gallery/$id.tsx
@@ -5,7 +5,10 @@ import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/_public/gallery/$id')({
loader: async ({ params, context: { queryClient } }) => {
const { data: product } = await query.fetchQuery(
- ({ products }) => products.gallery.single({ id: params.id }),
+ ({ products }) => ({
+ ...products.gallery.single({ id: params.id }),
+ staleTime: 10_000,
+ }),
queryClient,
);
diff --git a/src/routes/_public/gallery/index.tsx b/src/routes/_public/gallery/index.tsx
index 389a266..93f7f56 100644
--- a/src/routes/_public/gallery/index.tsx
+++ b/src/routes/_public/gallery/index.tsx
@@ -7,19 +7,23 @@ import {
} from '@customcads/react-sdk';
import * as limits from '@/app/constants/limits';
import Gallery from '@/app/pages/public/gallery';
+import Skeleton from '@/app/pages/public/gallery/skeleton';
export const Route = createFileRoute('/_public/gallery/')({
validateSearch: z.object({
name: z.string().optional(),
categoryName: z.string().optional(),
+ tags: z.array(z.string()).optional(),
sortingType: z.string().optional(),
sortingDirection: z.string().optional(),
page: z.number().optional(),
limit: z.number().optional(),
}),
component: Gallery,
+ pendingComponent: Skeleton,
loaderDeps: ({ search }) => ({
name: search.name,
+ tags: search.tags,
categoryName: search.categoryName,
sortingType: search.sortingType,
sortingDirection: search.sortingDirection,
@@ -48,6 +52,16 @@ export const Route = createFileRoute('/_public/gallery/')({
requestParams.categoryId = category.id;
}
+ if (deps.tags) {
+ const { data: tags } = await query.fetchQuery(
+ ({ tags }) => tags.all,
+ queryClient,
+ );
+ requestParams.tagIds = tags
+ .filter((x) => deps.tags?.includes(x.name))
+ .map((x) => x.id);
+ }
+
query.prefetchQuery(
({ products }) => products.gallery.all(requestParams),
queryClient,