Skip to content

Commit a924477

Browse files
jesusmpcjesusmpc
authored
Improve stores connectivity (#98)
* feat: improved connectivity * feat: update dependencies & image crop button trigger * chore: update dependencies * chore: update dependencies * chore: update dependencies
1 parent cdc2cde commit a924477

16 files changed

+625
-275
lines changed

‎code/components/error/error.tsx‎

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import {
1717
import { Logo } from "@/components/utils/logo";
1818
import { useSearchParams } from "next/navigation";
1919
import { getError } from "./errors";
20-
import Dither from "../ui/reactbits/Backgrounds/Dither/Dither";
2120
import { motion } from "framer-motion";
2221

2322
export const Error = () => {
@@ -29,45 +28,32 @@ export const Error = () => {
2928

3029
return (
3130
<div className="flex min-h-screen flex-col items-center justify-center bg-background relative gap-5">
32-
<div className="absolute top-0 left-0 right-0 bottom-0">
33-
<Dither
34-
waveColor={[0.5, 0.5, 0.5]}
35-
disableAnimation={false}
36-
enableMouseInteraction={false}
37-
mouseRadius={0.3}
38-
colorNum={6}
39-
pixelSize={1}
40-
waveAmplitude={0.1}
41-
waveFrequency={6}
42-
waveSpeed={0.05}
43-
/>
44-
</div>
4531
<motion.section
4632
initial={{ opacity: 0, x: -20 }}
4733
animate={{ opacity: 1, x: 0 }}
4834
transition={{ duration: 0.5 }}
4935
className="relative flex h-full w-full flex-col items-center justify-center"
5036
>
51-
<div className="max-w-[520px] w-full flex flex-col items-center justify-between gap-0">
37+
<div className="max-w-[520px] w-full flex flex-col items-center justify-between gap-0 border border-[#c9c9c9]">
5238
<div className="w-full flex justify-between items-center gap-2 md:left-8 md:top-8 bg-background p-8 py-6 rounded-xl">
53-
<Logo />
39+
<Logo kind="small" />
5440
<motion.div
5541
initial={{ opacity: 0, y: -20 }}
5642
animate={{ opacity: 1, y: 0 }}
5743
transition={{ duration: 0.5, delay: 0.2 }}
5844
className="flex flex-col items-end justify-center"
5945
>
60-
<h1 className="text-3xl font-inter text-foreground uppercase">
46+
<h1 className="text-3xl font-inter font-bold text-foreground uppercase">
6147
WHITEBOARD
6248
</h1>
63-
<h2 className="text-2xl font-inter font-extralight text-muted-foreground uppercase">
49+
<h2 className="text-2xl font-inter font-light text-muted-foreground uppercase">
6450
SHOWCASE
6551
</h2>
6652
</motion.div>
6753
</div>
6854
</div>
6955
</motion.section>
70-
<div className="max-w-[520px] w-full flex flex-col items-center justify-between gap-0">
56+
<div className="max-w-[520px] w-full flex flex-col items-center justify-between gap-0 border border-[#c9c9c9]">
7157
<div className="w-full z-1 flex flex-col gap-2 items-center justify-center bg-transparent">
7258
<Card className="w-full shadow-none border-0 py-8 gap-0">
7359
<CardHeader className="flex flex-col items-center text-center gap-0">
@@ -86,7 +72,10 @@ export const Error = () => {
8672
</CardContent>
8773

8874
<CardFooter className="flex flex-col">
89-
<Button asChild className="font-inter uppercase">
75+
<Button
76+
asChild
77+
className="uppercase cursor-pointer font-inter rounded-none"
78+
>
9079
<Link href={href}>{action}</Link>
9180
</Button>
9281
</CardFooter>

‎code/components/home/home.tsx‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { Toaster } from "@/components/ui/sonner";
99
import { motion } from "motion/react";
1010
import { Logo } from "@/components/utils/logo";
1111
import LoginForm from "../home-components/login-form";
12-
// import Dither from "../ui/reactbits/Backgrounds/Dither/Dither";
1312
import { Button } from "../ui/button";
1413
import { Github, Book } from "lucide-react";
1514
import { DOCUMENTATION_URL, GITHUB_URL } from "@/lib/constants";
@@ -21,19 +20,6 @@ export const Home = () => {
2120
return (
2221
<>
2322
<main className="w-full h-full flex justify-center items-center relative p-[40px]">
24-
{/* <div className="absolute top-0 left-0 right-0 bottom-0">
25-
<Dither
26-
waveColor={[0.5, 0.5, 0.5]}
27-
disableAnimation={false}
28-
enableMouseInteraction={false}
29-
mouseRadius={0.3}
30-
colorNum={6}
31-
pixelSize={1}
32-
waveAmplitude={0.1}
33-
waveFrequency={6}
34-
waveSpeed={0.05}
35-
/>
36-
</div> */}
3723
<motion.section
3824
initial={{ opacity: 0, y: -100 }}
3925
animate={{ opacity: 1, y: 0 }}
@@ -77,7 +63,7 @@ export const Home = () => {
7763
window.open(
7864
DOCUMENTATION_URL,
7965
"_blank",
80-
"noopener,noreferrer",
66+
"noopener,noreferrer"
8167
);
8268
}}
8369
className="cursor-pointer font-inter font-light"

‎code/components/room-components/connection-status.tsx‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,8 @@
55
"use client";
66

77
import React from "react";
8-
import {
9-
Cloud,
10-
//CloudCog,
11-
CloudOff,
12-
} from "lucide-react";
13-
import { WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS } from "@inditextech/weave-store-azure-web-pubsub/client";
8+
import { Cloud, CloudCog, CloudOff } from "lucide-react";
9+
import { WEAVE_STORE_CONNECTION_STATUS } from "@inditextech/weave-types";
1410
import { cn } from "@/lib/utils";
1511

1612
type ConnectionStatusProps = {
@@ -27,30 +23,39 @@ export const ConnectionStatus = ({
2723
"bg-light-background-1 h-[20px] px-1 flex justify-center items-center",
2824
{
2925
["bg-[#C2F0E8] text-black"]:
26+
weaveConnectionStatus === WEAVE_STORE_CONNECTION_STATUS.CONNECTED,
27+
["bg-[#FDD9B4] text-black"]:
3028
weaveConnectionStatus ===
31-
WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS.CONNECTED,
32-
// ["bg-sky-300 text-white"]:
33-
// weaveConnectionStatus ===
34-
// WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS.CONNECTING,
29+
WEAVE_STORE_CONNECTION_STATUS.CONNECTING,
3530
["bg-[#FDB4BB] text-white"]:
3631
weaveConnectionStatus ===
37-
WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS.DISCONNECTED,
38-
},
32+
WEAVE_STORE_CONNECTION_STATUS.DISCONNECTED ||
33+
weaveConnectionStatus === WEAVE_STORE_CONNECTION_STATUS.ERROR,
34+
}
3935
)}
4036
>
41-
{weaveConnectionStatus ===
42-
WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS.CONNECTED && (
37+
{weaveConnectionStatus === WEAVE_STORE_CONNECTION_STATUS.CONNECTED && (
4338
<>
4439
<Cloud size={18} strokeWidth={1} />
4540
<span className="ml-1 font-inter text-xs uppercase">connected</span>
4641
</>
4742
)}
48-
{/* {weaveConnectionStatus ===
49-
WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS.CONNECTING && (
50-
<CloudCog size={20} />
51-
)} */}
43+
{weaveConnectionStatus === WEAVE_STORE_CONNECTION_STATUS.CONNECTING && (
44+
<>
45+
<CloudCog size={18} strokeWidth={1} />
46+
<span className="ml-1 font-inter text-xs uppercase">
47+
connecting
48+
</span>
49+
</>
50+
)}
51+
{weaveConnectionStatus === WEAVE_STORE_CONNECTION_STATUS.ERROR && (
52+
<>
53+
<CloudOff size={18} strokeWidth={1} />
54+
<span className="ml-1 font-inter text-xs uppercase">error</span>
55+
</>
56+
)}
5257
{weaveConnectionStatus ===
53-
WEAVE_STORE_AZURE_WEB_PUBSUB_CONNECTION_STATUS.DISCONNECTED && (
58+
WEAVE_STORE_CONNECTION_STATUS.DISCONNECTED && (
5459
<>
5560
<CloudOff size={18} strokeWidth={1} />
5661
<span className="ml-1 font-inter text-xs uppercase">

‎code/components/room-components/hooks/use-get-azure-web-pubsub-provider.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
2+
//
3+
// SPDX-License-Identifier: Apache-2.0
4+
5+
import { useCollaborationRoom } from "@/store/store";
6+
import { WeaveUser } from "@inditextech/weave-types";
7+
import { WeaveStoreAzureWebPubsub } from "@inditextech/weave-store-azure-web-pubsub/client";
8+
import React from "react";
9+
10+
function useGetAzureWebPubsubProvider({
11+
loadedParams,
12+
getUser,
13+
}: {
14+
loadedParams: boolean;
15+
getUser: () => WeaveUser;
16+
}) {
17+
const room = useCollaborationRoom((state) => state.room);
18+
const user = useCollaborationRoom((state) => state.user);
19+
20+
const wsProvider = React.useMemo(() => {
21+
if (loadedParams && room && user) {
22+
const store = new WeaveStoreAzureWebPubsub(
23+
{
24+
getUser,
25+
undoManagerOptions: {
26+
captureTimeout: 500,
27+
},
28+
},
29+
{
30+
roomId: room,
31+
url: `${process.env.NEXT_PUBLIC_API_ENDPOINT}/${process.env.NEXT_PUBLIC_API_ENDPOINT_HUB_NAME}/rooms/${room}/connect`,
32+
}
33+
);
34+
35+
return store;
36+
}
37+
38+
return null;
39+
}, [getUser, loadedParams, room, user]);
40+
41+
return wsProvider;
42+
}
43+
44+
export default useGetAzureWebPubsubProvider;

‎code/components/room-components/hooks/use-get-websockets-provider.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
2+
//
3+
// SPDX-License-Identifier: Apache-2.0
4+
5+
import { useCollaborationRoom } from "@/store/store";
6+
import { WeaveUser } from "@inditextech/weave-types";
7+
import { WeaveStoreWebsockets } from "@inditextech/weave-store-websockets/client";
8+
import React from "react";
9+
10+
function useGetWebsocketsProvider({
11+
loadedParams,
12+
getUser,
13+
}: {
14+
loadedParams: boolean;
15+
getUser: () => WeaveUser;
16+
}) {
17+
const room = useCollaborationRoom((state) => state.room);
18+
const user = useCollaborationRoom((state) => state.user);
19+
20+
const store = React.useMemo(() => {
21+
if (loadedParams && room && user) {
22+
return new WeaveStoreWebsockets(
23+
{
24+
getUser,
25+
undoManagerOptions: {
26+
captureTimeout: 500,
27+
},
28+
},
29+
{
30+
roomId: room,
31+
wsOptions: {
32+
serverUrl: `${process.env.NEXT_PUBLIC_API_ENDPOINT}/sync/rooms`,
33+
},
34+
}
35+
);
36+
}
37+
38+
return null;
39+
}, [getUser, loadedParams, room, user]);
40+
41+
return store;
42+
}
43+
44+
export default useGetWebsocketsProvider;

‎code/components/room-components/hooks/use-get-ws-provider.ts‎

Lines changed: 0 additions & 84 deletions
This file was deleted.

‎code/components/room-components/hooks/use-key-down.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
//
33
// SPDX-License-Identifier: Apache-2.0
44

5+
import { useWeave } from "@inditextech/weave-react";
6+
import { WEAVE_STORE_CONNECTION_STATUS } from "@inditextech/weave-types";
57
import React from "react";
68

79
const canDetectKeyboard = () => {
@@ -14,8 +16,10 @@ export const useKeyDown = (
1416
callback: () => void,
1517
keys: string[],
1618
// eslint-disable-next-line @typescript-eslint/no-explicit-any
17-
modifiers: (event: any) => boolean = () => true,
19+
modifiers: (event: any) => boolean = () => true
1820
) => {
21+
const weaveConnectionStatus = useWeave((state) => state.connection.status);
22+
1923
const onKeyDown = React.useCallback(
2024
// eslint-disable-next-line @typescript-eslint/no-explicit-any
2125
(event: any) => {
@@ -24,13 +28,14 @@ export const useKeyDown = (
2428
wasAnyKeyPressed &&
2529
!window.weaveOnFieldFocus &&
2630
canDetectKeyboard() &&
27-
modifiers(event)
31+
modifiers(event) &&
32+
weaveConnectionStatus === WEAVE_STORE_CONNECTION_STATUS.CONNECTED
2833
) {
2934
event.preventDefault();
3035
callback();
3136
}
3237
},
33-
[callback, keys, modifiers],
38+
[callback, keys, weaveConnectionStatus, modifiers]
3439
);
3540

3641
React.useEffect(() => {

0 commit comments

Comments
 (0)