Romain/birthday
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

prettier code

Browse Source
This commit is contained in:
Romulus21
2025-10-31 20:48:27 +01:00
parent a94932059a
commit 76e99f574a
3 changed files with 2870 additions and 2665 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
package.json
View File

@@ -11,25 +11,25 @@
"generate-pwa-assets": "pwa-assets-generator" "generate-pwa-assets": "pwa-assets-generator"
}, },
"dependencies": { "dependencies": {
"react": "^18.3.1", "react": "^19.0.0",
"react-dom": "^18.3.1" "react-dom": "^19.0.0"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.3.11", "@types/react": "^19.0.0",
"@types/react-dom": "^18.3.0", "@types/react-dom": "^19.0.0",
"@typescript-eslint/eslint-plugin": "^6.21.0", "@typescript-eslint/eslint-plugin": "^8.46.0",
"@typescript-eslint/parser": "^6.21.0", "@typescript-eslint/parser": "^8.46.0",
"@vite-pwa/assets-generator": "^0.2.6", "@vite-pwa/assets-generator": "^1.0.0",
"@vitejs/plugin-react-swc": "^3.7.1", "@vitejs/plugin-react-swc": "^4.2.0",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.21",
"eslint": "^8.57.1", "eslint": "^9.0.0",
"eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-hooks": "^7.0.0",
"eslint-plugin-react-refresh": "^0.4.12", "eslint-plugin-react-refresh": "^0.4.24",
"postcss": "^8.4.47", "postcss": "^8.5.6",
"rollup-plugin-copy": "^3.5.0", "rollup-plugin-copy": "^3.5.0",
"tailwindcss": "^3.4.13", "tailwindcss": "^3.4.18",
"typescript": "^5.6.2", "typescript": "^5.9.3",
"vite": "^5.4.8", "vite": "^7.0.0",
"vite-plugin-pwa": "^0.17.5" "vite-plugin-pwa": "^1.1.0"
} }
} }

5108
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

257
src/App.tsx
View File

@@ -4,173 +4,248 @@ import {Birthday} from "./types.ts";
import { arrayRange, pad } from "./utilities.ts"; import { arrayRange, pad } from "./utilities.ts";
import BirthdayList from "./components/BirthdayList.tsx"; import BirthdayList from "./components/BirthdayList.tsx";
import { EditSVG, PlusSVG, TrashSVG } from "./components/SVG.tsx"; import { EditSVG, PlusSVG, TrashSVG } from "./components/SVG.tsx";
import cake from '../public/cake.svg' import cake from "../public/cake.svg";
function App() { function App() {
const emptyAddForm: Birthday = {
const emptyAddForm: Birthday = {id: 0, name: '', day: 1, month: 1, year: undefined, birthday: '', group: null} id: 0,
const [addModal, setAddModal] = useState(false) name: "",
const [selectedPerson, setSelectedPerson] = useState<Birthday|null>(null) day: 1,
const [addForm, setAddForm] = useState(emptyAddForm) month: 1,
const [birthdays, setBirthdays] = useState<Birthday[]>([]) year: undefined,
const [data, setData] = useLocalStorage('birthdays-app-data', {birthdays: []}) birthday: "",
group: null,
};
const [addModal, setAddModal] = useState(false);
const [selectedPerson, setSelectedPerson] = useState<Birthday | null>(null);
const [addForm, setAddForm] = useState(emptyAddForm);
const [birthdays, setBirthdays] = useState<Birthday[]>([]);
const [data, setData] = useLocalStorage("birthdays-app-data", {
birthdays: [],
});
useEffect(() => { useEffect(() => {
setBirthdays(sortPersons(data.birthdays)) setBirthdays(sortPersons(data.birthdays));
}, [data, data.birthdays]) }, [data, data.birthdays]);
const handleAddModal = () => { const handleAddModal = () => {
if (selectedPerson) { if (selectedPerson) {
setAddForm(selectedPerson) setAddForm(selectedPerson);
}
setAddModal(true)
} }
setAddModal(true);
};
const handleCloseModal = () => { const handleCloseModal = () => {
setAddModal(false) setAddModal(false);
setAddForm({...emptyAddForm, year: 0}) setAddForm({ ...emptyAddForm, year: 0 });
setSelectedPerson(null) setSelectedPerson(null);
} };
const sortPersons = (birthdays: Birthday[]) => { const sortPersons = (birthdays: Birthday[]) => {
birthdays = birthdays.reduce((result: Birthday[], item: Birthday) => { birthdays = birthdays
const birthday = `${(new Date()).getFullYear()}-${pad(item.month)}-${pad(item.day)}` .reduce((result: Birthday[], item: Birthday) => {
item.birthday = (new Date()).toISOString().split('T')[0] <= birthday ? birthday : `${(new Date()).getFullYear() + 1}-${pad(item.month)}-${pad(item.day)}` const birthday = `${new Date().getFullYear()}-${pad(item.month)}-${pad(item.day)}`;
result.push(item) item.birthday =
return result new Date().toISOString().split("T")[0] <= birthday
? birthday
: `${new Date().getFullYear() + 1}-${pad(item.month)}-${pad(item.day)}`;
result.push(item);
return result;
}, []) }, [])
.sort((a, b) => { .sort((a, b) => {
if (b.birthday < a.birthday) return 1 if (b.birthday < a.birthday) return 1;
if (b.birthday > a.birthday) return -1 if (b.birthday > a.birthday) return -1;
return 0 return 0;
}) });
return birthdays return birthdays;
} };
const handleChangeAddForm = (event: ChangeEvent<HTMLInputElement|HTMLSelectElement>) => { const handleChangeAddForm = (
const value = event.target.nodeName === 'SELECT' ? Number(event.target.value) : event.target.value event: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
setAddForm({...addForm, [event.target.name]: value}) ) => {
} const value =
event.target.nodeName === "SELECT"
? Number(event.target.value)
: event.target.value;
setAddForm({ ...addForm, [event.target.name]: value });
};
const handleSubmitBirthday = (event: FormEvent) => { const handleSubmitBirthday = (event: FormEvent) => {
event.preventDefault() event.preventDefault();
try { try {
if (!selectedPerson && birthdays.some(person => person.name === addForm.name) || (selectedPerson && selectedPerson.id !== addForm.id)) { if (
throw new Error('Une personne enregistré à déjà ce nom') (!selectedPerson &&
birthdays.some((person: Birthday) => person.name === addForm.name)) ||
(selectedPerson && selectedPerson.id !== addForm.id)
) {
throw new Error("Une personne enregistré à déjà ce nom");
} }
if (selectedPerson) { if (selectedPerson) {
const personIndex = data.birthdays.findIndex((p: Birthday) => p.id === selectedPerson.id) const personIndex = data.birthdays.findIndex(
(p: Birthday) => p.id === selectedPerson.id,
);
if (personIndex >= 0) { if (personIndex >= 0) {
const newList = data.birthdays const newList = data.birthdays;
newList[personIndex] = addForm newList[personIndex] = addForm;
setData({...data, birthdays: newList}) setData({ ...data, birthdays: newList });
} else { } else {
throw new Error('Une personne non trouvé dans la liste') throw new Error("Une personne non trouvé dans la liste");
} }
} else { } else {
const maxId = data.birthdays.reduce((result: number, item: Birthday) => { const maxId = data.birthdays.reduce(
if (item.id > result) {result = item.id} (result: number, item: Birthday) => {
return result if (item.id > result) {
}, 0) result = item.id;
setData({...data, birthdays: [...data.birthdays, {...addForm, id: maxId + 1}]})
} }
handleCloseModal() return result;
},
0,
);
setData({
...data,
birthdays: [...data.birthdays, { ...addForm, id: maxId + 1 }],
});
}
handleCloseModal();
} catch (error) { } catch (error) {
console.log(error) console.log(error);
}
} }
};
const selectPerson = (person: Birthday) => setSelectedPerson(person) const selectPerson = (person: Birthday) => setSelectedPerson(person);
const handleDelete = () => { const handleDelete = () => {
console.log(selectedPerson) console.log(selectedPerson);
if (selectedPerson) { if (selectedPerson) {
const personIndex = data.birthdays.findIndex((p: Birthday) => p.id === selectedPerson.id) const personIndex = data.birthdays.findIndex(
(p: Birthday) => p.id === selectedPerson.id,
);
if (personIndex >= 0) { if (personIndex >= 0) {
const newList = data.birthdays const newList = data.birthdays;
newList.splice(personIndex, 1) newList.splice(personIndex, 1);
setData({...data, birthdays: newList}) setData({ ...data, birthdays: newList });
setSelectedPerson(null) setSelectedPerson(null);
} else { } else {
throw new Error('Une personne non trouvé dans la liste') throw new Error("Une personne non trouvé dans la liste");
}
} }
} }
};
return ( return (
<> <>
<header className="bg-gray-300 dark:bg-neutral-900 px-5 py-2.5 flex items-center font-bold text-3xl"> <header className="bg-gray-300 dark:bg-neutral-900 px-5 py-2.5 flex items-center font-bold text-3xl">
<img src={cake} alt="birthday cake" className="w-12 inline-block"/> Birthdays <img src={cake} alt="birthday cake" className="w-12 inline-block" />{" "}
Birthdays
</header> </header>
<BirthdayList birthdays={birthdays} selectedPerson={selectedPerson} selectPerson={selectPerson} /> <BirthdayList
birthdays={birthdays}
selectedPerson={selectedPerson}
selectPerson={selectPerson}
/>
<div className="sticky bottom-0 right-0"> <div className="sticky bottom-0 right-0">
<div className="flex flex-row-reverse justify-between p-2 w-full"> <div className="flex flex-row-reverse justify-between p-2 w-full">
{selectedPerson ? <button type="button" {selectedPerson ? (
<button
type="button"
onClick={handleAddModal} onClick={handleAddModal}
className={`${addModal ? 'translate-x-[100px] h-0' : 'translate-x-0 h-20'} transition bg-blue-700 rounded-full flex justify-center items-center text-white w-20 right-0`}> className={`${addModal ? "translate-x-[100px] h-0" : "translate-x-0 h-20"} transition bg-blue-700 rounded-full flex justify-center items-center text-white w-20 right-0`}
>
<EditSVG className="w-10" /> <EditSVG className="w-10" />
</button> </button>
: <button type="button" ) : (
<button
type="button"
onClick={handleAddModal} onClick={handleAddModal}
className={`${addModal ? 'translate-x-[100px] h-0' : 'translate-x-0 h-20'} transition bg-amber-700 rounded-full flex justify-center items-center text-white w-20 right-0`}> className={`${addModal ? "translate-x-[100px] h-0" : "translate-x-0 h-20"} transition bg-amber-700 rounded-full flex justify-center items-center text-white w-20 right-0`}
>
<PlusSVG className="w-10" /> <PlusSVG className="w-10" />
</button>} </button>
{selectedPerson && <button type="button" )}
{selectedPerson && (
<button
type="button"
onClick={handleDelete} onClick={handleDelete}
className={`h-20 transition bg-red-500 rounded-full flex justify-center items-center text-white w-20 right-0`}> className={`h-20 transition bg-red-500 rounded-full flex justify-center items-center text-white w-20 right-0`}
>
<TrashSVG className="w-10" /> <TrashSVG className="w-10" />
</button>} </button>
{(selectedPerson || addModal) && <button type="button" )}
{(selectedPerson || addModal) && (
<button
type="button"
className={`h-10 -mt-5 bg-gray-700 text-white p-2 rounded-full w-10 flex justify-center items-center`} className={`h-10 -mt-5 bg-gray-700 text-white p-2 rounded-full w-10 flex justify-center items-center`}
onClick={handleCloseModal}> onClick={handleCloseModal}
>
<PlusSVG className="w-6 rotate-45" /> <PlusSVG className="w-6 rotate-45" />
</button>} </button>
)}
</div> </div>
<form className={`${addModal ? 'h-18' : 'h-0 overflow-hidden'} flex`} <form
onSubmit={handleSubmitBirthday}> className={`${addModal ? "h-18" : "h-0 overflow-hidden"} flex`}
onSubmit={handleSubmitBirthday}
>
<div className="p-2 w-full flex dark:text-neutral-800"> <div className="p-2 w-full flex dark:text-neutral-800">
<input name="name" <input
name="name"
type="text" type="text"
autoFocus autoFocus
placeholder="nom" placeholder="nom"
className="border-2 p-2 flex-1 w-40 h-16 rounded-l-lg" className="border-2 p-2 flex-1 w-40 h-16 rounded-l-lg"
value={addForm.name} value={addForm.name}
onChange={handleChangeAddForm}/> onChange={handleChangeAddForm}
<select name="day" />
<select
name="day"
className="px-1" className="px-1"
value={addForm.day} value={addForm.day}
onChange={handleChangeAddForm}> onChange={handleChangeAddForm}
{arrayRange(31, 1).map(day => <option key={'day-' + day} value={day}>{day}</option>)} >
{arrayRange(31, 1).map((day) => (
<option key={"day-" + day} value={day}>
{day}
</option>
))}
</select> </select>
<select name="month" <select
name="month"
className="px-1" className="px-1"
value={addForm.month} value={addForm.month}
onChange={handleChangeAddForm}> onChange={handleChangeAddForm}
{arrayRange(12, 1).map(month => <option key={'month-' + month} >
value={month}>{month}</option>)} {arrayRange(12, 1).map((month) => (
<option key={"month-" + month} value={month}>
{month}
</option>
))}
</select> </select>
<select name="year" <select
name="year"
className="px-1 text-center" className="px-1 text-center"
value={addForm.year} value={addForm.year}
onChange={handleChangeAddForm}> onChange={handleChangeAddForm}
>
<option>--</option> <option>--</option>
{arrayRange(2024, 1900).reverse() {arrayRange(2024, 1900)
.map(year => <option key={'year-' + year} .reverse()
value={year}> .map((year) => (
<option key={"year-" + year} value={year}>
{year} {year}
</option>)} </option>
))}
</select> </select>
<button type="submit" <button
className="bg-green-800 text-white p-2 h-16 rounded-r-lg"> type="submit"
className="bg-green-800 text-white p-2 h-16 rounded-r-lg"
>
Valider Valider
</button> </button>
</div> </div>
</form> </form>
</div> </div>
</> </>
) );
} }
export default App export default App;