12 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/src/pages/dashboard/ExcalidrawPreview.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { match, transition, useStateEffect } from "react-states";
3 | import {
4 | ExcalidrawMetadata,
5 | StorageEvent,
6 | } from "../../environment-interface/storage";
7 | import formatDistanceToNow from "date-fns/formatDistanceToNow";
8 |
9 | import { Link } from "react-router-dom";
10 | import { User } from "../../environment-interface/authentication";
11 | import { useEnvironment } from "../../environment-interface";
12 |
13 | type State =
14 | | {
15 | state: "LOADING_PREVIEW";
16 | id: string;
17 | }
18 | | {
19 | state: "PREVIEW_LOADED";
20 | src: string;
21 | }
22 | | {
23 | state: "LOADING_ERROR";
24 | error: string;
25 | };
26 |
27 | const reducer = (state: State, action: StorageEvent) =>
28 | transition(state, action, {
29 | LOADING_PREVIEW: {
30 | "STORAGE:IMAGE_SRC_SUCCESS": (state, { id, src }): State =>
31 | id === state.id
32 | ? {
33 | state: "PREVIEW_LOADED",
34 | src,
35 | }
36 | : state,
37 | "STORAGE:IMAGE_SRC_ERROR": (state, { id, error }): State =>
38 | state.id === id
39 | ? {
40 | state: "LOADING_ERROR",
41 | error,
42 | }
43 | : state,
44 | },
45 | PREVIEW_LOADED: {},
46 | LOADING_ERROR: {},
47 | });
48 |
49 | export const ExcalidrawPreview = ({
50 | user,
51 | metadata,
52 | }: {
53 | user: User;
54 | metadata: ExcalidrawMetadata;
55 | }) => {
56 | const { storage } = useEnvironment();
57 | const [preview, dispatch] = React.useReducer(reducer, {
58 | state: "LOADING_PREVIEW",
59 | id: metadata.id,
60 | });
61 |
62 | React.useEffect(() => storage.subscribe(dispatch), []);
63 |
64 | useStateEffect(preview, "LOADING_PREVIEW", () => {
65 | storage.getImageSrc(user.uid, metadata.id);
66 | });
67 |
68 | const renderPreview = (background: string) => (
69 |
70 | );
71 |
72 | return (
73 |
74 | -
13 | {excalidraws.map((excalidraw) => (
14 |
75 |
102 |
103 | );
104 | };
105 |
--------------------------------------------------------------------------------
/src/pages/dashboard/Navigation.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useNavigate } from "react-router-dom";
3 | import { match } from "react-states";
4 |
5 | import { useNavigation } from "./useNavigation";
6 |
7 | export const Navigation: React.FC = () => {
8 | const navigate = useNavigate();
9 | const [state, dispatch] = useNavigation({
10 | navigate: (path) => {
11 | navigate(path);
12 | },
13 | });
14 |
15 | return (
16 |
76 | {user.avatarUrl ? (
77 | 
82 | ) : null}
83 |
88 | 84 | 85 | {metadata.title || ""} 86 |
87 |
89 | {match(preview, {
90 | LOADING_PREVIEW: () => ,
91 | PREVIEW_LOADED: ({ src }) =>
92 | renderPreview(`center / contain no-repeat url(${src})`),
93 | LOADING_ERROR: () => renderPreview("#FFF"),
94 | })}
95 |
96 |
97 |
98 | {formatDistanceToNow(metadata.last_updated)} ago
99 |
100 |
101 |
17 |
93 | );
94 | };
95 |
--------------------------------------------------------------------------------
/src/pages/dashboard/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Dashboard } from "./Dashboard";
3 | import { match, PickState } from "react-states";
4 |
5 | import { Navigation } from "./Navigation";
6 | import { useMatch } from "react-router-dom";
7 |
8 | import { useDashboard } from "./useDashboard";
9 | import { useUserDashboard } from "./useUserDashboard";
10 |
11 | const SharedDashboard = () => {
12 | const state = useDashboard();
13 |
14 | return match(state, {
15 | LOADING_PREVIEWS: () => ,
16 | PREVIEWS_ERROR: ({ error }) => (
17 |
18 |
19 |
42 |
43 |
47 | 44 | CodeSandbox Excalidraw 45 |
46 |
48 |
92 |
49 |
64 |
79 |
80 |
81 |
90 |
91 | There was an error: {error}
18 | ), 19 | PREVIEWS_LOADED: ({ excalidraws }) => ( 20 |There was an error: {error}
32 | ), 33 | PREVIEWS_LOADED: ({ excalidraws }) => ( 34 |
44 |
51 | );
52 | };
53 |
--------------------------------------------------------------------------------
/src/pages/dashboard/useDashboard.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { act } from "@testing-library/react";
3 |
4 | import { createStorage } from "../../environments/storage/test";
5 | import { createAuthentication } from "../../environments/authentication/test";
6 | import { createTestEnvironment } from "../../environments/test";
7 | import { DashboardState, useDashboard } from "./useDashboard";
8 | import { EnvironmentProvider } from "../../environment-interface";
9 | import { renderReducer } from "react-states/test";
10 |
11 | describe("Dashboard", () => {
12 | test("Should go to PREVIEWS_LOADED when mounting and successfully downloading previews", () => {
13 | const environment = createTestEnvironment();
14 |
15 | const [state] = renderReducer(
16 | () => [useDashboard(), () => {}],
17 | (UseDashboard) => (
18 |
88 | {
93 | dispatch({ type: "INITIALIZE_CANVAS_SUCCESS" });
94 | }}
95 | />
96 |
138 | );
139 | };
140 |
141 | export const Excalidraw: React.FC<{ id: string; userId: string }> = ({
142 | id,
143 | userId,
144 | }) => {
145 | const [state, dispatch] = useExcalidraw({
146 | id,
147 | userId,
148 | });
149 |
150 | const renderExcalidraw = (state: EditExcalidrawState) => (
151 |
97 |
137 |
98 | {
103 | setTitle(event.target.value);
104 | }}
105 | onKeyDown={(event) => {
106 | if (event.key === "Enter") {
107 | dispatch({
108 | type: "SAVE_TITLE",
109 | title,
110 | });
111 | }
112 | }}
113 | className="focus:ring-blue-500 focus:border-blue-500 block w-full pl-3 sm:text-sm border-gray-300 rounded-md h-10"
114 | placeholder="Title..."
115 | />
116 | {!title || title === state.metadata.title ? null : (
117 |
130 |
136 | {
120 | dispatch({
121 | type: "SAVE_TITLE",
122 | title,
123 | });
124 | }}
125 | >
126 |
128 | )}
129 |
157 |
158 |
159 | ),
160 | ERROR: ({ error }) => (
161 |
162 |
164 | ),
165 | LOADED: renderExcalidraw,
166 | EDIT: renderExcalidraw,
167 | SYNCING: renderExcalidraw,
168 | DIRTY: renderExcalidraw,
169 | SYNCING_DIRTY: renderExcalidraw,
170 | });
171 | };
172 |
--------------------------------------------------------------------------------
/src/pages/excalidraw/ExcalidrawCanvas.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState } from "react";
2 | import { getSceneVersion } from "@excalidraw/excalidraw";
3 |
4 | import { getChangedData } from "../../utils";
5 | import {
6 | ExcalidrawData,
7 | ExcalidrawElement,
8 | } from "../../environment-interface/storage";
9 | import { useEnvironment } from "../../environment-interface";
10 |
11 | export type ResolvablePromiseOMG, error, {error}
163 |
83 | {Comp ? (
84 |
92 | );
93 | },
94 | );
95 |
--------------------------------------------------------------------------------
/src/pages/excalidraw/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { Excalidraw } from "./Excalidraw";
4 |
5 | import { useParams } from "react-router-dom";
6 |
7 | export const ExcalidrawPage = () => {
8 | const { id, userId } = useParams<{ id: string; userId: string }>();
9 |
10 | return
28 | {match(auth, {
29 | UNAUTHENTICATED: () => (
30 |
46 |
48 | ),
49 | SIGNING_IN: () => (
50 |
62 | );
63 | };
64 |
--------------------------------------------------------------------------------
/src/pages/useAuth.test.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { renderReducer } from "react-states/test";
3 | import { act } from "@testing-library/react";
4 | import { useAuth, AuthState } from "./useAuth";
5 | import { createTestEnvironment } from "../environments/test";
6 | import { EnvironmentProvider } from "../environment-interface";
7 |
8 | describe("Auth", () => {
9 | test("Should go to AUTHENTICATED when mounted and is logged in", () => {
10 | const environment = createTestEnvironment();
11 | const [state] = renderReducer(
12 | () => useAuth(),
13 | (UseAuth) => (
14 |
31 |
37 |
38 | ),
39 | CHECKING_AUTHENTICATION: () => (
40 |
41 |
42 |
43 | ),
44 | AUTHENTICATED: (authenticatedAuth) => (
45 |
51 |
52 |
53 | ),
54 | ERROR: ({ error }) => (
55 |
56 |
59 | ),
60 | })}
61 |