Skip to content

Commit 007eb19

Browse files
clement4444clement4444
authored
Merge pull request #46 from WildCodeSchool/TD22-fix-modals
Td22 fix modals
2 parents ef3c915 + 8396d67 commit 007eb19

File tree

8 files changed

+273
-80
lines changed

8 files changed

+273
-80
lines changed

‎.husky/pre-commit‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
npm run husky-lint
2-
3-
# si le paramètre bypass-bin est pas actif
4-
if [ "$bypass_bin" != "1" ]; then
5-
# Bloquer toute modification du dossier bin/
6-
if git diff --cached --name-only | grep -q "^bin/"; then
7-
echo ""
8-
echo "🚫 Vous n'avez pas le droit de modifier le contenu du dossier \"bin/\""
9-
echo "Ce fichier est sensible donc vous devez étre sûr de ce que vous faites."
10-
echo ""
11-
exit 1
12-
fi
1+
npm run husky-lint
2+
3+
# si le paramètre bypass-bin est pas actif
4+
if [ "$bypass_bin" != "1" ]; then
5+
# Bloquer toute modification du dossier bin/
6+
if git diff --cached --name-only | grep -q "^bin/"; then
7+
echo ""
8+
echo "🚫 Vous n'avez pas le droit de modifier le contenu du dossier \"bin/\""
9+
echo "Ce fichier est sensible donc vous devez étre sûr de ce que vous faites."
10+
echo ""
11+
exit 1
12+
fi
1313
fi

‎frontend/src/components/Wishlist.tsx‎

Lines changed: 49 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
MY_WISHLIST_ITEMS,
88
UPDATE_GIFT,
99
} from "../graphql/operations/wishlistOperations";
10+
import { useToggle } from "../hooks/useToggle";
1011
import type { Gift } from "../types/Gift";
1112
import { useMyProfileStore } from "../zustand/myProfileStore";
1213
import Button from "./utils/Button";
@@ -29,18 +30,35 @@ export default function Wishlist() {
2930
const [deleteGift] = useMutation(DELETE_GIFT);
3031

3132
const [updateGift, { loading: updating }] = useMutation(UPDATE_GIFT);
32-
const [editingGift, setEditingGift] = useState<Gift | null>(null);
33-
const [isEditModalOpen, setEditModalOpen] = useState(false);
3433

34+
// hooks
35+
const addModal = useToggle(false);
36+
const editModal = useToggle(false);
37+
38+
// state
3539
const [editFormData, setEditFormData] = useState({
3640
name: "",
3741
description: "",
3842
imageUrl: "",
3943
url: "",
4044
});
41-
42-
const [isModalOpen, setIsModalOpen] = useState(false);
4345
const [formData, setFormData] = useState({ name: "", description: "", imageUrl: "", url: "" });
46+
const [editingGift, setEditingGift] = useState<Gift | null>(null);
47+
48+
// helpers
49+
const closeAddModal = () => {
50+
addModal.close();
51+
setFormData({
52+
name: "",
53+
description: "",
54+
imageUrl: "",
55+
url: "",
56+
});
57+
};
58+
const closeEditModal = () => {
59+
editModal.close();
60+
setEditingGift(null);
61+
};
4462

4563
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
4664
setFormData({ ...formData, [e.target.name]: e.target.value });
@@ -66,7 +84,8 @@ export default function Wishlist() {
6684
});
6785

6886
setFormData({ name: "", description: "", imageUrl: "", url: "" });
69-
setIsModalOpen(false);
87+
// setIsModalOpen(false);
88+
addModal.close();
7089
};
7190

7291
const handleDeleteGift = async (gift: Gift) => {
@@ -101,7 +120,7 @@ export default function Wishlist() {
101120
refetchQueries: [{ query: MY_WISHLIST_ITEMS }],
102121
awaitRefetchQueries: true,
103122
});
104-
setEditModalOpen(false);
123+
editModal.close();
105124
setEditingGift(null);
106125
};
107126

@@ -118,7 +137,7 @@ export default function Wishlist() {
118137
icon="plus"
119138
text="Nouvelle idée"
120139
colour="green"
121-
onClick={() => setIsModalOpen(true)}
140+
onClick={addModal.open}
122141
className="max-md:hidden"
123142
/>
124143
</div>
@@ -132,14 +151,14 @@ export default function Wishlist() {
132151
<div className="flex flex-col items-center justify-center text-white">
133152
<Icon icon="gift" className="text-7xl opacity-80 mb-3" />
134153
<p className="text-lg mb-8">Aucune idée pour l'instant.</p>
135-
<button
154+
<Button
136155
type="button"
137-
onClick={() => setIsModalOpen(true)}
138-
className="flex items-center gap-2 bg-green text-white font-semibold px-4 py-2 rounded-xl hover:bg-[#01803b] transition"
139-
>
140-
<Icon icon="plus" />
141-
Ajouter une idée
142-
</button>
156+
icon="plus"
157+
text="Ajouter une idée"
158+
colour="green"
159+
onClick={addModal.open}
160+
className="px-4 py-2 rounded-xl"
161+
/>
143162
</div>
144163
</div>
145164
) : (
@@ -176,7 +195,7 @@ export default function Wishlist() {
176195
imageUrl: gift.imageUrl ?? "",
177196
url: gift.url ?? "",
178197
});
179-
setEditModalOpen(true);
198+
editModal.open();
180199
}}
181200
/>
182201
</li>
@@ -192,13 +211,13 @@ export default function Wishlist() {
192211
icon="plus"
193212
text="Nouvelle idée"
194213
colour="green"
195-
onClick={() => setIsModalOpen(true)}
214+
onClick={addModal.open}
196215
className="wishlist-mobile-button"
197216
/>
198217
</div>
199218

200219
{/* Modal when adding */}
201-
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
220+
<Modal isOpen={addModal.isOpen} onClose={closeAddModal}>
202221
<div className="modal-mobile-content">
203222
<h2 className="text-xl font-bold text-dark mb-4">Ajouter une nouvelle idée</h2>
204223
<form onSubmit={handleSubmit} className="space-y-3">
@@ -256,27 +275,24 @@ export default function Wishlist() {
256275
/>
257276
</div>
258277
<div className="flex justify-end gap-3 pt-3 modal-buttons">
259-
<button
278+
<Button
260279
type="submit"
280+
text={creating ? "Ajout…" : "Ajouter"}
281+
colour="green"
282+
className="rounded-[10px]"
283+
// If Button supports disabled:
261284
disabled={creating}
262-
className="px-4 py-2 rounded-[10px] bg-green text-white font-semibold hover:bg-[#01803b]"
263-
>
264-
{creating ? "Ajout…" : "Ajouter"}
265-
</button>
266-
<button
267-
type="button"
268-
onClick={() => setIsModalOpen(false)}
269-
className="px-4 py-2 rounded-[10px] bg-dark text-white font-semibold hover:bg-[#463835]"
270-
>
285+
/>
286+
<Button type="button" colour="dark" onClick={closeAddModal} className="rounded-[10px]">
271287
Annuler
272-
</button>
288+
</Button>
273289
</div>
274290
</form>
275291
</div>
276292
</Modal>
277293

278294
{/* edit modal */}
279-
<Modal isOpen={isEditModalOpen} onClose={() => setEditModalOpen(false)}>
295+
<Modal isOpen={editModal.isOpen} onClose={closeEditModal}>
280296
<div className="modal-mobile-content">
281297
<h2 className="text-xl font-bold text-dark mb-4">Modifier le cadeau</h2>
282298
<form onSubmit={handleEditSubmit} className="space-y-3">
@@ -334,20 +350,12 @@ export default function Wishlist() {
334350
/>
335351
</div>
336352
<div className="flex justify-end gap-3 pt-3 modal-buttons">
337-
<button
338-
type="submit"
339-
disabled={updating}
340-
className="px-4 py-2 rounded-[10px] bg-green text-white font-semibold hover:bg-[#01803b]"
341-
>
353+
<Button type="submit" colour="green" className="rounded-[10px]">
342354
{updating ? "Mis à jour…" : "Mettre à jour"}
343-
</button>
344-
<button
345-
type="button"
346-
onClick={() => setEditModalOpen(false)}
347-
className="px-4 py-2 rounded-[10px] bg-dark text-white font-semibold hover:bg-[#463835]"
348-
>
355+
</Button>
356+
<Button type="button" colour="dark" onClick={closeEditModal} className="rounded-[10px]">
349357
Annuler
350-
</button>
358+
</Button>
351359
</div>
352360
</form>
353361
</div>

‎frontend/src/components/forms/CreateGroupForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,7 @@ export default function CreateGroupForm({ onSuccess }: CreateGroupFormProps) {
198198
{errors.main && <p className="text-orange font-inter text-sm pt-1 text-center">{errors.main}</p>}
199199
</div>
200200

201-
<div className="w-1/2 bg-white h-full flex flex-col rounded-tr-2xl rounded-br-2xl">
201+
<div className="w-1/2 bg-white max-md:w-full flex flex-col max-md:rounded-none rounded-tr-2xl rounded-br-2xl">
202202
<div className="flex flex-col gap-4 px-20 m-auto">
203203
{/* Adding users can go here */}
204204
<div className="flex flex-row items-center w-full border border-blue">

‎frontend/src/components/groups/Groups.tsx‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { useState } from "react";
2-
import type { GetAllMyGroupsQuery } from "../../graphql/generated/graphql-types";
1+
import type { GetAllMyGroupsQuery } from "../../generated/graphql-types";
2+
import { useToggle } from "../../hooks/useToggle";
33
import { formatDate } from "../../utils/dateCalculator";
44
import CreateGroupForm from "../forms/CreateGroupForm";
55
import Button from "../utils/Button";
@@ -16,18 +16,25 @@ type GroupsProps = {
1616
};
1717

1818
export default function Groups({ groups, setActiveGroup, loading, error }: GroupsProps) {
19-
const [isOpen, setIsOpen] = useState(false);
19+
// const [isOpen, setIsOpen] = useState(false);
2020

21-
function toggleModal() {
22-
setIsOpen(!isOpen);
23-
}
21+
// function toggleModal() {
22+
// setIsOpen(!isOpen);
23+
// }
24+
25+
const createGroupModal = useToggle(false);
26+
const closeCreateGroupModal = () => {
27+
createGroupModal.close();
28+
};
2429

2530
return (
2631
<>
2732
<Container
2833
colour="blue"
2934
title="Mes Groupes"
30-
button={<Button text={"Ajouter un groupe"} icon="plus" colour="green" onClick={toggleModal} />}
35+
button={
36+
<Button text={"Ajouter un groupe"} icon="plus" colour="green" onClick={createGroupModal.open} />
37+
}
3138
>
3239
{loading && <div>Loading...</div>}
3340
{error && <div>Error: {error}</div>}
@@ -53,11 +60,16 @@ export default function Groups({ groups, setActiveGroup, loading, error }: Group
5360
);
5461
})}
5562
</Container>
56-
{isOpen && (
57-
<Modal onClose={toggleModal} isOpen={isOpen}>
58-
<CreateGroupForm onSuccess={toggleModal} />
59-
</Modal>
60-
)}
63+
64+
<Modal
65+
isOpen={createGroupModal.isOpen}
66+
onClose={closeCreateGroupModal}
67+
size="lg"
68+
withPadding={false}
69+
className="p-0 overflow-y-auto max-h-[85vh] max-md:max-h-full"
70+
>
71+
<CreateGroupForm onSuccess={closeCreateGroupModal} />
72+
</Modal>
6173
</>
6274
);
6375
}

‎frontend/src/components/groups/Messaging/messaging.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
.container-body-messaging {
2+
height: 100%;
3+
width: 100%;
4+
display: flex;
5+
flex-direction: column;
6+
padding: 0 6px 20px 16px;
7+
}
8+
9+
.container-messages {
10+
width: 100%;
11+
overflow-y: auto;
12+
min-height: auto;
13+
flex-grow: 1;
14+
flex-shrink: 1;
15+
flex-basis: 0;
16+
padding: 7px 10px 10px 0;
17+
}
18+
19+
.container-send-message {
20+
width: 100%;
21+
flex-grow: 0;
22+
flex-shrink: 0;
23+
flex-basis: auto;
24+
padding-right: 10px;
25+
}
26+
27+
.formulaire-send-message {
28+
position: relative;
29+
height: 47px;
30+
width: 100%;
31+
padding: 7px 45px 10px 15px;
32+
border: 2px solid #b7b7b7;
33+
border-radius: 22px;
34+
}
35+
36+
.formulaire-send-message:focus-within {
37+
outline: none;
38+
border-color: #292e96;
39+
}
40+
41+
#input-send-message {
42+
width: 100%;
43+
height: 100%;
44+
font-size: 18px;
45+
line-height: 26px;
46+
resize: none;
47+
box-sizing: border-box;
48+
overflow-y: visible;
49+
}
50+
51+
#input-send-message:focus {
52+
outline: none;
53+
}
54+
55+
#input-send-message::-webkit-scrollbar {
56+
display: none;
57+
}
58+
59+
#input-send-message::placeholder {
60+
color: #b7b7b7;
61+
}
62+
63+
#bnt-send-message {
64+
position: absolute;
65+
bottom: 4px;
66+
right: 6px;
67+
background-color: #292e96;
68+
border-radius: 50%;
69+
width: 35px;
70+
height: 35px;
71+
display: flex;
72+
align-items: center;
73+
justify-content: center;
74+
cursor: pointer;
75+
}
76+
77+
#bnt-send-message:hover {
78+
background-color: #1e2366;
79+
}
80+
81+
.icon-fleche-send {
82+
color: white;
83+
transform: rotate(45deg);
84+
}

0 commit comments

Comments
 (0)