PenaSide/front-hub
3
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

add notistack notifications

Browse Source
This commit is contained in:
nflnkr 2022-11-30 18:18:59 +03:00
parent 83f10bcece
commit 9c1c84240e
5 changed files with 79 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -15,6 +15,7 @@
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"formik": "^2.2.9",
"notistack": "^2.0.8",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.3",

119
src/App.tsx
View File

@ -13,70 +13,73 @@ import Wallet from "./pages/Wallet";
import Payment from "./pages/Payment/Payment";
import Support from "./pages/Support/Support";
import CustomTariff from "./pages/CustomTariff/CustomTariff";
import { SnackbarProvider } from "notistack";
function App() {
const upMd = useMediaQuery(lightTheme.breakpoints.up("md"));
return (
<ThemeProvider theme={lightTheme}>
<CssBaseline />
<BrowserRouter>
<Routes>
<Route path="/" element={
<ThemeProvider theme={darkTheme}>
<CssBaseline />
<Navbar isLoggedIn={false} isCollapsed={!upMd} />
<Divider sx={{ bgcolor: "#E3E3E3", borderColor: "#00000000" }} />
<Landing />
<Footer />
</ThemeProvider>
} />
<Route path="/signin" element={
<Signin />
} />
<Route path="/signup" element={
<Signup />
} />
<Route path="/tariffs" element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Tariffs />
</>
} />
<Route path="/faq" element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Faq />
</>
} />
<Route path="/wallet" element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Wallet />
</>
} />
<Route path="/payment" element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Payment />
</>
} />
<Route path="/support" element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Support />
</>
} />
<Route path="/tariffconstructor" element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<CustomTariff />
</>
} />
</Routes>
</BrowserRouter>
</ThemeProvider>
<SnackbarProvider>
<ThemeProvider theme={lightTheme}>
<CssBaseline />
<BrowserRouter>
<Routes>
<Route path="/" element={
<ThemeProvider theme={darkTheme}>
<CssBaseline />
<Navbar isLoggedIn={false} isCollapsed={!upMd} />
<Divider sx={{ bgcolor: "#E3E3E3", borderColor: "#00000000" }} />
<Landing />
<Footer />
</ThemeProvider>
} />
<Route path="/signin" element={
<Signin />
} />
<Route path="/signup" element={
<Signup />
} />
<Route path="/tariffs" element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Tariffs />
</>
} />
<Route path="/faq" element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Faq />
</>
} />
<Route path="/wallet" element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Wallet />
</>
} />
<Route path="/payment" element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Payment />
</>
} />
<Route path="/support" element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<Support />
</>
} />
<Route path="/tariffconstructor" element={
<>
<Navbar isLoggedIn={true} isCollapsed={!upMd} />
<CustomTariff />
</>
} />
</Routes>
</BrowserRouter>
</ThemeProvider>
</SnackbarProvider>
);
}

7
src/pages/Signin.tsx
View File

@ -6,6 +6,7 @@ import CloseIcon from "@mui/icons-material/Close";
import { authHandler } from "../utils/api/authenticationHandler";
import { useNavigate } from "react-router-dom";
import { useFormik } from "formik";
import { useSnackbar } from "notistack";
interface Values {
@ -30,6 +31,7 @@ function validate(values: Values) {
}
export default function Signin() {
const { enqueueSnackbar } = useSnackbar();
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const navigate = useNavigate();
@ -45,11 +47,10 @@ export default function Signin() {
password: values.password,
});
if (result instanceof Error) {
console.log("TODO handle login error");
enqueueSnackbar(`Error: ${result.message}`);
return;
}
console.log("TODO handle login success feedback");
navigate("/");
// navigate("/"); // TODO
}
});

7
src/pages/Signup.tsx
View File

@ -6,6 +6,7 @@ import CloseIcon from "@mui/icons-material/Close";
import { authHandler } from "../utils/api/authenticationHandler";
import { useNavigate } from "react-router-dom";
import { useFormik } from "formik";
import { useSnackbar } from "notistack";
interface Values {
@ -36,6 +37,7 @@ function validate(values: Values) {
}
export default function Signup() {
const { enqueueSnackbar } = useSnackbar();
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const navigate = useNavigate();
@ -56,11 +58,10 @@ export default function Signup() {
phoneNumber: values.phoneNumber,
});
if (result instanceof Error) {
console.log("TODO handle register error");
enqueueSnackbar(`Error: ${result.message}`);
return;
}
console.log("TODO handle register success feedback");
navigate("/signin");
// navigate("/signin"); // TODO
}
});

10
yarn.lock
View File

@ -3291,7 +3291,7 @@ cliui@^7.0.2:
strip-ansi "^6.0.0"
wrap-ansi "^7.0.0"
clsx@^1.2.1:
clsx@^1.1.0, clsx@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
@ -6583,6 +6583,14 @@ normalize-url@^6.0.1:
resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
notistack@^2.0.8:
version "2.0.8"
resolved "https://registry.yarnpkg.com/notistack/-/notistack-2.0.8.tgz#78cdf34c64e311bf1d1d71c2123396bcdea5e95b"
integrity sha512-/IY14wkFp5qjPgKNvAdfL5Jp6q90+MjgKTPh4c81r/lW70KeuX6b9pE/4f8L4FG31cNudbN9siiFS5ql1aSLRw==
dependencies:
clsx "^1.1.0"
hoist-non-react-statics "^3.3.0"
npm-run-path@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"