Skip to content

Commit

Permalink
fix: subjectColors undefined bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@diogogmatos
diogogmatos committed Nov 13, 2024
1 parent 830bd4a commit 995f070
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 94 deletions.
159 changes: 82 additions & 77 deletions components/Themes/Themes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,93 +168,98 @@ const Themes = ({
</select>
</div>

{theme === "Custom" && checkedThings.length > 0 ? (
<div id="bySubject" className="space-y-4">
<div className="space-y-2">
<div className="grid h-full w-full grid-flow-row grid-cols-3 gap-1">
{checkedThings.map((filterId, index) => (
{theme === "Custom" && (
<>
{checkedThings.length > 0 ? (
<div id="bySubject" className="space-y-4">
<div className="space-y-2">
<div className="grid h-full w-full grid-flow-row grid-cols-3 gap-1">
{checkedThings.map((filterId, index) => (
<button
key={index}
className="h-7 w-full place-content-center items-center rounded-lg text-sm font-medium hover:font-bold hover:opacity-70"
style={{
backgroundColor: getBgSubjectColor(index),
color: getTextSubjectColor(index),
fontWeight: openColor === index && 900,
}}
onClick={() => setOpenColor(index)}
>
{filters
.filter((f) => f.id === filterId)
.map((f) => f.name)}
</button>
))}
</div>
<div>
<HexColorPicker
color={getSubjectColor(openColor)}
onChange={(newColor) => updateSubjectColors(newColor)}
/>
</div>
<div className="flex flex-row items-center space-x-2">
<div
title="A Hex color code, for example: #ed7950"
className="cursor-default text-sm font-medium "
>
Hex
</div>
<HexColorInput
className="text-md h-8 w-full rounded-lg border-neutral-300 text-center focus:border-cesium-900 focus:ring-0 dark:border-neutral-400/20 dark:bg-neutral-800"
color={getSubjectColor(openColor)}
onChange={(newColor) => updateSubjectColors(newColor)}
/>
</div>
</div>
<div className="flex flex-row place-content-between">
<Switch.Group as="div" className="flex items-center">
<Switch
checked={opacity}
onChange={updateOpacity}
className={`${
opacity ? "bg-cesium-900" : "bg-neutral-200"
} ${"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-cesium-900 focus:ring-offset-2"}`}
>
<span className="sr-only">Use setting</span>
<span
aria-hidden="true"
className={`${
opacity ? "translate-x-5" : "translate-x-0"
} ${"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"}`}
/>
</Switch>
<Switch.Label as="span" className="ml-3 text-sm font-medium ">
Opacity
</Switch.Label>
</Switch.Group>
<button
key={index}
className="h-7 w-full place-content-center items-center rounded-lg text-sm font-medium hover:font-bold hover:opacity-70"
style={{
backgroundColor: getBgSubjectColor(index),
color: getTextSubjectColor(index),
fontWeight: openColor === index && 900,
}}
onClick={() => setOpenColor(index)}
type="button"
className="rounded-md border bg-white px-2.5 py-1 text-xs font-semibold shadow-sm hover:bg-neutral-50 dark:border-neutral-400/20 dark:bg-neutral-800 dark:hover:bg-neutral-700"
onClick={backToSubjectDefault}
>
{filters.filter((f) => f.id === filterId).map((f) => f.name)}
Back to Default
</button>
))}
</div>
</div>
) : (
<div>
<HexColorPicker
color={getSubjectColor(openColor)}
onChange={(newColor) => updateSubjectColors(newColor)}
/>
</div>
<div className="flex flex-row items-center space-x-2">
<div
title="A Hex color code, for example: #ed7950"
className="cursor-default text-sm font-medium "
>
Hex
</div>
<HexColorInput
className="text-md h-8 w-full rounded-lg border-neutral-300 text-center focus:border-cesium-900 focus:ring-0 dark:border-neutral-400/20 dark:bg-neutral-800"
color={getSubjectColor(openColor)}
onChange={(newColor) => updateSubjectColors(newColor)}
/>
<i className="bi bi-exclamation-circle-fill text-warning" />{" "}
Select at least one subject.
</div>
</div>
<div className="flex flex-row place-content-between">
<Switch.Group as="div" className="flex items-center">
<Switch
checked={opacity}
onChange={updateOpacity}
className={`${
opacity ? "bg-cesium-900" : "bg-neutral-200"
} ${"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-cesium-900 focus:ring-offset-2"}`}
>
<span className="sr-only">Use setting</span>
<span
aria-hidden="true"
className={`${
opacity ? "translate-x-5" : "translate-x-0"
} ${"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"}`}
/>
</Switch>
<Switch.Label as="span" className="ml-3 text-sm font-medium ">
Opacity
</Switch.Label>
</Switch.Group>
)}
{checkedThings.length > 0 && (
<button
type="button"
className="rounded-md border bg-white px-2.5 py-1 text-xs font-semibold shadow-sm hover:bg-neutral-50 dark:border-neutral-400/20 dark:bg-neutral-800 dark:hover:bg-neutral-700"
onClick={backToSubjectDefault}
className="w-full rounded-md bg-cesium-100 px-2 py-1 text-sm font-semibold text-cesium-900 shadow-sm transition-colors hover:bg-cesium-200 dark:bg-cesium-700/20 dark:hover:bg-cesium-700/30"
onClick={() => {
saveTheme();
isOpen && setIsOpen(false);
}}
>
Back to Default
Save
</button>
</div>
</div>
) : (
<div className="">
<i className="bi bi-exclamation-circle-fill text-warning" /> Select at
least one subject.
</div>
)}

{checkedThings.length > 0 && (
<button
type="button"
className="w-full rounded-md bg-cesium-100 px-2 py-1 text-sm font-semibold text-cesium-900 shadow-sm transition-colors hover:bg-cesium-200 dark:bg-cesium-700/20 dark:hover:bg-cesium-700/30"
onClick={() => {
saveTheme();
isOpen && setIsOpen(false);
}}
>
Save
</button>
)}
</>
)}
</>
);
Expand Down
2 changes: 1 addition & 1 deletion data/filters.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -704,7 +704,7 @@
},
{
"id": 501,
"name": "D",
"name": "Dissertação",
"groupId": 5,
"semester": 0,
"shifts": []
Expand Down
18 changes: 2 additions & 16 deletions hooks/useColorTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,10 +80,8 @@ const fetchTheme = (
}

setTheme(themeLS);
if (themeLS === "Custom") {
opacityLS ? setOpacity(opacityLS === "true") : setOpacity(true);
subjectColorsLS && setSubjectColors(subjectColorsLS);
}
opacityLS ? setOpacity(opacityLS === "true") : setOpacity(true);
subjectColorsLS && setSubjectColors(subjectColorsLS);
};

function getDefaultColor(event: IFormatedShift | IEventDTO): string {
Expand All @@ -95,18 +93,6 @@ function getDefaultColor(event: IFormatedShift | IEventDTO): string {
}
}

function getYearColor(event: IFormatedShift | IEventDTO, colors: string[]) {
if ((event as IFormatedShift).id !== undefined) {
return (
colors[String((event as IFormatedShift).filterId)[0]] ??
getDefaultColor(event)
);
}
if ((event as IEventDTO).groupId !== undefined) {
return colors[(event as IEventDTO).groupId] ?? getDefaultColor(event);
}
}

// note: returns the default color if it was not found in the subjectColors array
function getSubjectColor(
event: IFormatedShift | IEventDTO,
Expand Down

0 comments on commit 995f070

Please sign in to comment.