Skip to content

Commit fc50cef

Browse files
ameer2468ameer2468
committed
cleanup
1 parent bdb18ad commit fc50cef

File tree

2 files changed

+79
-126
lines changed

2 files changed

+79
-126
lines changed

‎apps/web/app/(org)/dashboard/caps/components/NewFolderDialog.tsx‎

Lines changed: 39 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
import type { Folder } from "@cap/web-domain";
1111
import { faFolderPlus } from "@fortawesome/free-solid-svg-icons";
1212
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
13-
import { RiveFile, useRiveFile } from "@rive-app/react-canvas";
13+
import { type RiveFile, useRiveFile } from "@rive-app/react-canvas";
1414
import clsx from "clsx";
1515
import { Option } from "effect";
1616
import { useRouter } from "next/navigation";
@@ -20,7 +20,7 @@ import { useEffectMutation } from "@/lib/EffectRuntime";
2020
import { withRpc } from "@/lib/Rpcs";
2121
import {
2222
BlueFolder,
23-
FolderHandle,
23+
type FolderHandle,
2424
NormalFolder,
2525
RedFolder,
2626
YellowFolder,
@@ -94,14 +94,6 @@ export const NewFolderDialog: React.FC<Props> = ({
9494
normal: React.createRef<FolderHandle>(),
9595
});
9696

97-
useEffect(() => {
98-
FolderOptions.forEach((option) => {
99-
if (!folderRefs.current[option.value]) {
100-
folderRefs.current[option.value] = React.createRef();
101-
}
102-
});
103-
}, []);
104-
10597
const createFolder = useEffectMutation({
10698
mutationFn: (data: { name: string; color: Folder.FolderColor }) =>
10799
withRpc((r) =>
@@ -140,59 +132,43 @@ export const NewFolderDialog: React.FC<Props> = ({
140132
placeholder="Folder name"
141133
/>
142134
<div className="flex flex-wrap gap-2 mt-3">
143-
{FolderOptions.map(
144-
(
145-
option: {
146-
value: "blue" | "red" | "yellow" | "normal";
147-
label: string;
148-
component: (
149-
rivefile: RiveFile | undefined,
150-
) => React.JSX.Element;
151-
},
152-
idx: number,
153-
) => {
154-
return (
155-
<div
156-
className={clsx(
157-
"flex flex-col flex-1 gap-1 items-center p-2 rounded-xl border transition-colors duration-200 cursor-pointer",
158-
selectedColor === option.value
159-
? "border-gray-12 bg-gray-3 hover:bg-gray-3 hover:border-gray-12"
160-
: "border-gray-4 hover:bg-gray-3 hover:border-gray-5 bg-transparent",
161-
)}
162-
key={`rive-instance-${idx.toString()}`}
163-
onClick={() => {
164-
if (selectedColor === option.value) {
165-
setSelectedColor(null);
166-
return;
167-
}
168-
setSelectedColor(option.value);
169-
}}
170-
onMouseEnter={() => {
171-
const folderRef =
172-
folderRefs.current[option.value]?.current;
173-
if (!folderRef) return;
174-
folderRef.stop();
175-
folderRef.play("folder-open");
176-
}}
177-
onMouseLeave={() => {
178-
const folderRef =
179-
folderRefs.current[option.value]?.current;
180-
if (!folderRef) return;
181-
folderRef.stop();
182-
folderRef.play("folder-close");
183-
}}
184-
>
185-
{React.cloneElement(
186-
option.component(riveFile as RiveFile),
187-
{
188-
ref: folderRefs.current[option.value],
189-
},
190-
)}
191-
<p className="text-xs text-gray-10">{option.label}</p>
192-
</div>
193-
);
194-
},
195-
)}
135+
{FolderOptions.map((option) => {
136+
return (
137+
<div
138+
className={clsx(
139+
"flex flex-col flex-1 gap-1 items-center p-2 rounded-xl border transition-colors duration-200 cursor-pointer",
140+
selectedColor === option.value
141+
? "border-gray-12 bg-gray-3 hover:bg-gray-3 hover:border-gray-12"
142+
: "border-gray-4 hover:bg-gray-3 hover:border-gray-5 bg-transparent",
143+
)}
144+
key={`rive-${option.value}`}
145+
onClick={() => {
146+
if (selectedColor === option.value) {
147+
setSelectedColor(null);
148+
return;
149+
}
150+
setSelectedColor(option.value);
151+
}}
152+
onMouseEnter={() => {
153+
const folderRef = folderRefs.current[option.value]?.current;
154+
if (!folderRef) return;
155+
folderRef.stop();
156+
folderRef.play("folder-open");
157+
}}
158+
onMouseLeave={() => {
159+
const folderRef = folderRefs.current[option.value]?.current;
160+
if (!folderRef) return;
161+
folderRef.stop();
162+
folderRef.play("folder-close");
163+
}}
164+
>
165+
{React.cloneElement(option.component(riveFile as RiveFile), {
166+
ref: folderRefs.current[option.value],
167+
})}
168+
<p className="text-xs text-gray-10">{option.label}</p>
169+
</div>
170+
);
171+
})}
196172
</div>
197173
</div>
198174
<DialogFooter>

‎apps/web/app/(org)/dashboard/folder/[id]/components/SubfolderDialog.tsx‎

Lines changed: 40 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import {
1212
import type { Folder } from "@cap/web-domain";
1313
import { faFolderPlus } from "@fortawesome/free-solid-svg-icons";
1414
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
15-
import { RiveFile, useRiveFile } from "@rive-app/react-canvas";
15+
import type { RiveFile } from "@rive-app/react-canvas";
16+
import { useRiveFile } from "@rive-app/react-canvas";
1617
import clsx from "clsx";
1718
import { Option } from "effect";
1819
import { useRouter } from "next/navigation";
@@ -23,7 +24,7 @@ import { withRpc } from "@/lib/Rpcs";
2324
import { useDashboardContext } from "../../../Contexts";
2425
import {
2526
BlueFolder,
26-
FolderHandle,
27+
type FolderHandle,
2728
NormalFolder,
2829
RedFolder,
2930
YellowFolder,
@@ -101,14 +102,6 @@ export const SubfolderDialog: React.FC<Props> = ({
101102
normal: React.createRef<FolderHandle>(),
102103
});
103104

104-
useEffect(() => {
105-
FolderOptions.forEach((option) => {
106-
if (!folderRefs.current[option.value]) {
107-
folderRefs.current[option.value] = React.createRef();
108-
}
109-
});
110-
}, []);
111-
112105
const createSubfolder = useEffectMutation({
113106
mutationFn: (data: { name: string; color: Folder.FolderColor }) =>
114107
withRpc((r) =>
@@ -147,59 +140,43 @@ export const SubfolderDialog: React.FC<Props> = ({
147140
placeholder="Subfolder name"
148141
/>
149142
<div className="flex flex-wrap gap-2 mt-3">
150-
{FolderOptions.map(
151-
(
152-
option: {
153-
value: "blue" | "red" | "yellow" | "normal";
154-
label: string;
155-
component: (
156-
rivefile: RiveFile | undefined,
157-
) => React.JSX.Element;
158-
},
159-
idx: number,
160-
) => {
161-
return (
162-
<div
163-
className={clsx(
164-
"flex flex-col flex-1 gap-1 items-center p-2 rounded-xl border transition-colors duration-200 cursor-pointer",
165-
selectedColor === option.value
166-
? "border-gray-12 bg-gray-3 hover:bg-gray-3 hover:border-gray-12"
167-
: "border-gray-4 hover:bg-gray-3 hover:border-gray-5 bg-transparent",
168-
)}
169-
key={`rive-instance-${idx.toString()}`}
170-
onClick={() => {
171-
if (selectedColor === option.value) {
172-
setSelectedColor(null);
173-
return;
174-
}
175-
setSelectedColor(option.value);
176-
}}
177-
onMouseEnter={() => {
178-
const folderRef =
179-
folderRefs.current[option.value]?.current;
180-
if (!folderRef) return;
181-
folderRef.stop();
182-
folderRef.play("folder-open");
183-
}}
184-
onMouseLeave={() => {
185-
const folderRef =
186-
folderRefs.current[option.value]?.current;
187-
if (!folderRef) return;
188-
folderRef.stop();
189-
folderRef.play("folder-close");
190-
}}
191-
>
192-
{React.cloneElement(
193-
option.component(riveFile as RiveFile),
194-
{
195-
ref: folderRefs.current[option.value],
196-
},
197-
)}
198-
<p className="text-xs text-gray-10">{option.label}</p>
199-
</div>
200-
);
201-
},
202-
)}
143+
{FolderOptions.map((option) => {
144+
return (
145+
<div
146+
className={clsx(
147+
"flex flex-col flex-1 gap-1 items-center p-2 rounded-xl border transition-colors duration-200 cursor-pointer",
148+
selectedColor === option.value
149+
? "border-gray-12 bg-gray-3 hover:bg-gray-3 hover:border-gray-12"
150+
: "border-gray-4 hover:bg-gray-3 hover:border-gray-5 bg-transparent",
151+
)}
152+
key={`rive-${option.value}`}
153+
onClick={() => {
154+
if (selectedColor === option.value) {
155+
setSelectedColor(null);
156+
return;
157+
}
158+
setSelectedColor(option.value);
159+
}}
160+
onMouseEnter={() => {
161+
const folderRef = folderRefs.current[option.value]?.current;
162+
if (!folderRef) return;
163+
folderRef.stop();
164+
folderRef.play("folder-open");
165+
}}
166+
onMouseLeave={() => {
167+
const folderRef = folderRefs.current[option.value]?.current;
168+
if (!folderRef) return;
169+
folderRef.stop();
170+
folderRef.play("folder-close");
171+
}}
172+
>
173+
{React.cloneElement(option.component(riveFile as RiveFile), {
174+
ref: folderRefs.current[option.value],
175+
})}
176+
<p className="text-xs text-gray-10">{option.label}</p>
177+
</div>
178+
);
179+
})}
203180
</div>
204181
</div>
205182
<DialogFooter>

0 commit comments

Comments
 (0)