index.html, то и конфигурацию поправьте.
@types/express поставили?
export const useVerifyAuth = () => {
const { setIsAuth, setUser, setIsLoading } = useUserStore();
const pathname = usePathname();
const { data, error, isLoading, isFetching, refetch } = useQuery({
queryKey: ["verify-auth"],
queryFn: () => authService.getNewTokens()
});
useLayoutEffect(() => {
if (error !== null) {
setIsAuth(false);
setUser(null);
}
if (data !== null) {
setIsAuth(true);
setUser(data.data.user);
}
}, [data, error])
useEffect(() => {
// Тут бы проверить, что прошлый pathname не равен текущему
refetch();
}, [pathname, refetch]);
useEffect(() => {
setIsLoading(isLoading || isFetching)
}, [isLoading, isFetching]);
};position: relative, а ссылке добавляетеa::after {
position: absolute;
inset: 0;
content: '';
}
const routes: RouteObject[] = [
{
path: "*",
element: <Outlet />,
children: [
{
id: "page-a",
path: "page-a",
element: <PageA />,
},
{
id: "page-b",
path: "page-b",
element: <PageB />,
},
],
},
];
export const Router: FC = () => {
const router = createBrowserRouter(routes);
return <RouterProvider router={router} />;
};export const SuperWrapper: FC = () => {
return (
<ThemeProvider theme={theme}>
<Notifications />
<Outlet />
</ThemeProvider>
);
};someComponent(), то Вас ждёт удивительный мир потери состояний и прочего.
.element + .element {
margin-left: 20px;
}flex + gap для схожего поведения с grid'ами;:first-child + :last-child для удаления лишних margin'ов;:nth-child для удаления лишних margin'ов;
function assertNotPartial<T>(entry: Partial<T>): asserts entry is Required<T> {
if (Object.values(entry).every((value) => value !== undefined)) {
return;
}
throw Error('YOUR ERROR MESSAGE');
}assertNotPartial(videoInfo);
console.log(videoInfo); // Тут не будет в типе undefined'овconst groupBy = (collection, extractKey) =>
collection.reduce((acc, item) => {
const key = extractKey(item);
acc[key] ??= [];
acc[key].push(item);
return acc;
}, {});
const data = groupBy(array, (person) => person.role);Object.groupBy(array, (person) => person.role);
<div class="scroll-blocker">
<YOUR_MAP />
</div>const mouse = { x: -1, y: -1 };
const elements = document.getElementsByClassName('scroll-blocker');
window.addEventListener('mousemove', (event) => {
mouse.x = event.clientX;
mouse.y = event.clientY;
});
window.addEventListener('wheel', (event) => {
const target = document.elementFromPoint(mouse.x, mouse.y);
for (const element of elements) {
if (element.contains(target)) {
event.preventDefault();
return;
}
}
}, { passive: false, capture: true });