aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-16 04:44:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: add leave page prompt when there is unsaved changes

Browse Source
This commit is contained in:
MTG2000
2022-08-18 14:30:07 +03:00
parent bbc0716371
commit 3f752b2d4a
3 changed files with 29 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
View File

@@ -89,6 +89,7 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
});
usePrompt('You may have some unsaved changes. You still want to leave?', methods.formState.isDirty)
const onSubmit: SubmitHandler<IListProjectForm> = data => console.log(data);

70
src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
View File

@@ -1,6 +1,4 @@
import { Navigate, NavLink, Route, Routes, useLocation, useParams } from "react-router-dom";
import Slider from "src/Components/Slider/Slider";
import { useAppSelector, useCarousel, useMediaQuery, usePrompt } from "src/utils/hooks";
import { useCarousel, useMediaQuery, } from "src/utils/hooks";
import { Helmet } from 'react-helmet'
import { MEDIA_QUERIES } from "src/utils/theme";
import Card from "src/Components/Card/Card";
@@ -8,7 +6,7 @@ import ProjectDetailsTab from "./Components/ProjectDetailsTab/ProjectDetailsTab"
import TeamTab from "./Components/TeamTab/TeamTab";
import ExtrasTab from "./Components/ExtrasTab/ExtrasTab";
import FormContainer from "./Components/FormContainer/FormContainer";
import { useMemo } from "react";
import { useState } from "react";
import SaveChangesCard from "./Components/SaveChangesCard/SaveChangesCard";
@@ -31,21 +29,11 @@ const links = [tabs['project-details'], tabs['team'], tabs['extras']];
type TabsKeys = keyof typeof tabs;
const getCurrentTab = (locattion: string) => {
for (const key in tabs) {
const tab = tabs[key as TabsKeys];
if (locattion.includes(tab.path))
return key as TabsKeys;
}
return null;
}
export default function ListProjectPage() {
const isMediumScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
const location = useLocation();
const currentTab = useMemo(() => getCurrentTab(location.pathname), [location.pathname])
const [curTab, setCurTab] = useState<TabsKeys>(tabs['project-details'].path)
const { viewportRef, } = useCarousel({
align: 'start', slidesToScroll: 2,
containScroll: "trimSnaps",
@@ -67,16 +55,19 @@ export default function ListProjectPage() {
<ul className=' flex flex-col gap-8'>
{links.map((link, idx) =>
<li key={idx}>
<NavLink
replace
to={link.path}
className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
active:scale-95 transition-transform
${isActive ? 'bg-gray-100' : 'hover:bg-gray-50'}
`}
<button
// className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
// active:scale-95 transition-transform
// ${isActive ? 'bg-gray-100' : 'hover:bg-gray-50'}
// `}
className={`flex w-full items-start rounded-8 cursor-pointer font-bold p-12
active:scale-95 transition-transform
${link.path === curTab ? 'bg-gray-100' : 'hover:bg-gray-50'}
`}
onClick={() => setCurTab(link.path)}
>
{link.text}
</NavLink>
</button>
</li>)}
</ul>
</Card>
@@ -89,25 +80,21 @@ export default function ListProjectPage() {
<div className="border-b-2 border-gray-200" ref={viewportRef}>
<div className="select-none w-full flex gap-16">
{links.map((link, idx) =>
<NavLink
replace
to={link.path}
<button
key={idx}
className={`flex min-w-max items-start cursor-pointer font-bold py-12 px-8
active:scale-95 transition-transform`}
style={({ isActive }) => {
console.log(isActive);
return {
...(isActive && {
borderBottom: '2px solid var(--primary)',
marginBottom: -2
}),
}
style={{
...(link.path === curTab && {
borderBottom: '2px solid var(--primary)',
marginBottom: -2
}),
}
}
}}
>
{link.text}
</NavLink>
</button>
)}
</div>
</div>
@@ -118,15 +105,12 @@ export default function ListProjectPage() {
<FormContainer>
<div className="grid grid-cols-1 md:grid-cols-3 gap-24">
<div className="md:col-span-2">
<Routes>
<Route index element={<Navigate to={tabs['project-details'].path} />} />
<Route path={tabs['project-details'].path} element={<ProjectDetailsTab />} />
<Route path={tabs['team'].path} element={<TeamTab />} />
<Route path={tabs['extras'].path} element={<ExtrasTab />} />
</Routes>
{curTab === tabs["project-details"].path && <ProjectDetailsTab />}
{curTab === tabs["team"].path && <TeamTab />}
{curTab === tabs["extras"].path && <ExtrasTab />}
</div>
<div className="self-start sticky-side-element">
{currentTab && <SaveChangesCard currentTab={currentTab} />}
<SaveChangesCard currentTab={curTab} />
</div>
</div>
</FormContainer>

2
src/utils/routing/routes.ts
View File

@@ -80,7 +80,7 @@ export const PAGES_ROUTES = {
default: "/projects",
hottest: "/projects/hottest",
byCategoryId: "/projects/category/:id",
listProject: "/projects/list-project/*"
listProject: "/projects/list-project"
},
blog: {
feed: "/blog",