Skip to content

Commit 0932904

Browse files
0l1v3rr0l1v3rr
committed
client: replace the setCard method to the new updateCard method
1 parent a7ae4f7 commit 0932904

File tree

6 files changed

+32
-83
lines changed

6 files changed

+32
-83
lines changed

‎client/src/components/form/PageFive.tsx

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Quote from "../ui/Quote";
77
import Select from "../ui/Select";
88

99
const PageFive = () => {
10-
const { card, setCard } = useMultistepContext();
10+
const { card, updateCard } = useMultistepContext();
1111

1212
return (
1313
<FormWrapper title="Lines">
@@ -21,9 +21,7 @@ const PageFive = () => {
2121
]}
2222
label="Badges Align"
2323
selected={{ value: card.align, label: card.align }}
24-
select={(val) =>
25-
setCard((prev) => ({ ...prev, fontWeight: val.value }))
26-
}
24+
select={(val) => updateCard({ align: val.value })}
2725
/>
2826
</InputWrapper>
2927

@@ -39,12 +37,11 @@ const PageFive = () => {
3937
max={6}
4038
value={card.lines.length}
4139
onChange={(e) =>
42-
setCard((prev) => ({
43-
...prev,
40+
updateCard({
4441
lines: Array.from({ length: e.target.valueAsNumber }).map(
4542
(_, i) => ({ lineNumber: i + 1, badges: [] })
4643
),
47-
}))
44+
})
4845
}
4946
/>
5047
</InputWrapper>
@@ -62,9 +59,7 @@ const PageFive = () => {
6259
min={0}
6360
max={32}
6461
value={card.gap}
65-
onChange={(e) =>
66-
setCard((prev) => ({ ...prev, gap: e.target.valueAsNumber }))
67-
}
62+
onChange={(e) => updateCard({ gap: e.target.valueAsNumber })}
6863
/>
6964
</InputWrapper>
7065

@@ -79,12 +74,7 @@ const PageFive = () => {
7974
min={0}
8075
max={32}
8176
value={card.lineHeight}
82-
onChange={(e) =>
83-
setCard((prev) => ({
84-
...prev,
85-
lineHeight: e.target.valueAsNumber,
86-
}))
87-
}
77+
onChange={(e) => updateCard({ lineHeight: e.target.valueAsNumber })}
8878
/>
8979
</InputWrapper>
9080
</Flex>

‎client/src/components/form/PageFour.tsx

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import InputWrapper from "../ui/InputWrapper";
66
import TrueFalseInput from "../ui/TrueFalseInput";
77

88
const PageFour = () => {
9-
const { card, setCard } = useMultistepContext();
9+
const { card, updateCard } = useMultistepContext();
1010

1111
return (
1212
<FormWrapper title="Card">
@@ -20,9 +20,7 @@ const PageFour = () => {
2020
min={16}
2121
max={2048}
2222
value={card.width}
23-
onChange={(e) =>
24-
setCard((prev) => ({ ...prev, width: e.target.valueAsNumber }))
25-
}
23+
onChange={(e) => updateCard({ width: e.target.valueAsNumber })}
2624
/>
2725
</InputWrapper>
2826

@@ -37,10 +35,7 @@ const PageFour = () => {
3735
step={0.5}
3836
value={card.borderRadius}
3937
onChange={(e) =>
40-
setCard((prev) => ({
41-
...prev,
42-
borderRadius: e.target.valueAsNumber,
43-
}))
38+
updateCard({ borderRadius: e.target.valueAsNumber })
4439
}
4540
/>
4641
</InputWrapper>
@@ -52,9 +47,7 @@ const PageFour = () => {
5247
value={card.showBorder}
5348
trueLabel="Show"
5449
falseLabel="Hide"
55-
setValue={(val) =>
56-
setCard((prev) => ({ ...prev, showBorder: val }))
57-
}
50+
setValue={(val) => updateCard({ showBorder: val })}
5851
/>
5952
</InputWrapper>
6053

@@ -63,7 +56,7 @@ const PageFour = () => {
6356
value={!card.hideBg}
6457
trueLabel="Show"
6558
falseLabel="Hide"
66-
setValue={(val) => setCard((prev) => ({ ...prev, hideBg: !val }))}
59+
setValue={(val) => updateCard({ hideBg: !val })}
6760
/>
6861
</InputWrapper>
6962

@@ -72,9 +65,7 @@ const PageFour = () => {
7265
value={!card.hideTitle}
7366
trueLabel="Show"
7467
falseLabel="Hide"
75-
setValue={(val) =>
76-
setCard((prev) => ({ ...prev, hideTitle: !val }))
77-
}
68+
setValue={(val) => updateCard({ hideTitle: !val })}
7869
/>
7970
</InputWrapper>
8071
</Flex>

‎client/src/components/form/PageThree.tsx

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import InputWrapper from "../ui/InputWrapper";
66
import Select from "../ui/Select";
77

88
const PageThree = () => {
9-
const { card, setCard } = useMultistepContext();
9+
const { card, updateCard } = useMultistepContext();
1010

1111
return (
1212
<FormWrapper title="Title">
@@ -17,9 +17,7 @@ const PageThree = () => {
1717
required
1818
placeholder="Title"
1919
value={card.title}
20-
onChange={(e) =>
21-
setCard((prev) => ({ ...prev, title: e.target.value }))
22-
}
20+
onChange={(e) => updateCard({ title: e.target.value })}
2321
/>
2422
</InputWrapper>
2523

@@ -32,9 +30,7 @@ const PageThree = () => {
3230
id="family"
3331
placeholder="Font Family"
3432
value={card.fontFamily}
35-
onChange={(e) =>
36-
setCard((prev) => ({ ...prev, fontFamily: e.target.value }))
37-
}
33+
onChange={(e) => updateCard({ fontFamily: e.target.value })}
3834
/>
3935
</InputWrapper>
4036
</Flex>
@@ -50,9 +46,7 @@ const PageThree = () => {
5046
]}
5147
label="Font Weight"
5248
selected={{ value: card.fontWeight, label: card.fontWeight }}
53-
select={(val) =>
54-
setCard((prev) => ({ ...prev, fontWeight: val.value }))
55-
}
49+
select={(val) => updateCard({ fontWeight: val.value })}
5650
/>
5751
</InputWrapper>
5852

@@ -65,9 +59,7 @@ const PageThree = () => {
6559
]}
6660
label="Text Align"
6761
selected={{ value: card.titleAlign, label: card.titleAlign }}
68-
select={(val) =>
69-
setCard((prev) => ({ ...prev, titleAlign: val.value }))
70-
}
62+
select={(val) => updateCard({ titleAlign: val.value })}
7163
/>
7264
</InputWrapper>
7365

@@ -81,9 +73,7 @@ const PageThree = () => {
8173
placeholder="Font Size"
8274
value={card.fontSize}
8375
className="appearance-none"
84-
onChange={(e) =>
85-
setCard((prev) => ({ ...prev, fontSize: e.target.valueAsNumber }))
86-
}
76+
onChange={(e) => updateCard({ fontSize: e.target.valueAsNumber })}
8777
/>
8878
</InputWrapper>
8979
</Flex>

‎client/src/components/form/PageTwo.tsx

Lines changed: 10 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import ColorInput from "../ui/ColorInput";
1212

1313
const PageTwo = () => {
1414
const themes = useThemes();
15-
const { card, setCard } = useMultistepContext();
15+
const { card, updateCard } = useMultistepContext();
1616

1717
return (
1818
<FormWrapper title="Theme">
@@ -35,7 +35,7 @@ const PageTwo = () => {
3535
label: theme,
3636
value: theme,
3737
}))}
38-
select={(val) => setCard((prev) => ({ ...prev, theme: val.value }))}
38+
select={(val) => updateCard({ theme: val.value })}
3939
/>
4040

4141
<Hr />
@@ -47,61 +47,43 @@ const PageTwo = () => {
4747
<Flex>
4848
<InputWrapper label="Background color" htmlFor="bg-color">
4949
<ColorInput
50-
pattern="^[]{0}|#([a-fA-F0-9]{3}|[a-fA-F0-9]{6})$"
5150
placeholder="#0B0E14"
52-
className="w-full"
5351
id="bg-color"
5452
value={card.backgroundColor}
55-
onChange={(e) =>
56-
setCard((prev) => ({ ...prev, backgroundColor: e.target.value }))
57-
}
58-
setColor={(c) =>
59-
setCard((prev) => ({ ...prev, backgroundColor: c }))
60-
}
53+
onChange={(e) => updateCard({ backgroundColor: e.target.value })}
54+
setColor={(c) => updateCard({ backgroundColor: c })}
6155
/>
6256
</InputWrapper>
6357

6458
<InputWrapper label="Border color" htmlFor="border-color">
6559
<ColorInput
66-
pattern="^[]{0}|#([a-fA-F0-9]{3}|[a-fA-F0-9]{6})$"
6760
placeholder="#151B26"
68-
className="w-full"
6961
id="border-color"
7062
value={card.borderColor}
71-
onChange={(e) =>
72-
setCard((prev) => ({ ...prev, borderColor: e.target.value }))
73-
}
74-
setColor={(c) => setCard((prev) => ({ ...prev, borderColor: c }))}
63+
onChange={(e) => updateCard({ borderColor: e.target.value })}
64+
setColor={(c) => updateCard({ borderColor: c })}
7565
/>
7666
</InputWrapper>
7767
</Flex>
7868

7969
<Flex>
8070
<InputWrapper label="Title color" htmlFor="title-color">
8171
<ColorInput
82-
pattern="^[]{0}|#([a-fA-F0-9]{3}|[a-fA-F0-9]{6})$"
8372
placeholder="#FF4747"
84-
className="w-full"
8573
id="title-color"
8674
value={card.titleColor}
87-
onChange={(e) =>
88-
setCard((prev) => ({ ...prev, titleColor: e.target.value }))
89-
}
90-
setColor={(c) => setCard((prev) => ({ ...prev, titleColor: c }))}
75+
onChange={(e) => updateCard({ titleColor: e.target.value })}
76+
setColor={(c) => updateCard({ titleColor: c })}
9177
/>
9278
</InputWrapper>
9379

9480
<InputWrapper label="Badge color" htmlFor="badge-color">
9581
<ColorInput
96-
pattern="^[]{0}|#([a-fA-F0-9]{3}|[a-fA-F0-9]{6})$"
9782
placeholder="#10151F"
98-
className="w-full"
9983
id="badge-color"
10084
value={card.badgeColor}
101-
onChange={(e) =>
102-
setCard((prev) => ({ ...prev, badgeColor: e.target.value }))
103-
}
104-
setColor={(c) => setCard((prev) => ({ ...prev, badgeColor: c }))}
85+
onChange={(e) => updateCard({ badgeColor: e.target.value })}
86+
setColor={(c) => updateCard({ badgeColor: c })}
10587
/>
10688
</InputWrapper>
10789
</Flex>

‎client/src/context/MultistepContext.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@ export interface MultistepContextType {
1818
previousPage: () => void;
1919
nextPage: () => void;
2020
card: Card;
21-
updateCard: () => (updated: Partial<Card>) => void;
22-
setCard: React.Dispatch<React.SetStateAction<Card>>;
21+
updateCard: (updated: Partial<Card>) => void;
2322
addBadge: (lineNumber: number, badge: Omit<Badge, "position">) => void;
2423
removeBadge: (lineNumber: number, position: number) => void;
2524
grabbedBadge: BadgeDataTransfer | undefined;
@@ -65,9 +64,7 @@ export const MultistepProvider: FC<MultistepProviderProps> = ({ children }) => {
6564
]);
6665

6766
const updateCard = useCallback(
68-
() => (updated: Partial<Card>) => {
69-
setCard((prev) => ({ ...prev, updated }));
70-
},
67+
(updated: Partial<Card>) => setCard((prev) => ({ ...prev, ...updated })),
7168
[]
7269
);
7370

@@ -159,7 +156,6 @@ export const MultistepProvider: FC<MultistepProviderProps> = ({ children }) => {
159156
totalPages,
160157
card,
161158
updateCard,
162-
setCard,
163159
addBadge,
164160
removeBadge,
165161
grabbedBadge,

‎client/src/hooks/useOuterClick.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ export const useOuterClick = <T extends HTMLElement>(
1313
});
1414

1515
useEffect(() => {
16-
const handleClick = (e: any) => {
17-
if (ref.current && !ref.current?.contains(e.target)) {
16+
const handleClick = (e: MouseEvent) => {
17+
if (ref.current && !ref.current?.contains(e.target as Node)) {
1818
callbackRef.current();
1919
}
2020
};

0 commit comments

Comments
 (0)