Skip to content
This repository was archived by the owner on Sep 29, 2021. It is now read-only.

Feature/ch106/create listing for jobs #26

Open
mVabo wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Feature/ch106/create listing for jobs #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e4dde89
tsconfig updated
mVabo Jan 11, 2021
ee59fa0
Merge remote-tracking branch 'origin/master'
mVabo Mar 4, 2021
2b90626
Merge remote-tracking branch 'origin/master'
mVabo Mar 13, 2021
375a6d8
[CH-17]: Create secured and unsecured routing
mVabo Mar 13, 2021
86bc52f
[CH-17]: Added necessary design and layouting for secure and unsecure…
mVabo Mar 13, 2021
9dd8629
[CH-106]: Added job listings with dummy data
mVabo Mar 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,17 @@
"@material-ui/core": "4.11.3",
"@material-ui/icons": "4.11.2",
"@reduxjs/toolkit": "1.5.0",
"@types/lodash": "^4.14.168",
"@types/react-helmet": "^6.1.0",
"axios": "0.21.1",
"clsx": "1.1.1",
"graphql": "15.5.0",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"query-string": "^6.14.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-helmet": "^6.1.0",
"react-hook-form": "6.15.4",
"react-redux": "7.2.2",
"react-router-dom": "5.2.0",
Expand Down
47 changes: 16 additions & 31 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,23 @@
import { Container } from "@material-ui/core";
import { BrowserRouter as Router, Redirect, Route, Switch } from "react-router-dom";
import { Footer } from "./Footer";
import SignIn from "./Login";
import { useStyles } from "./styles";
import Dashboard from "./views/dashboard/Dashboard";
import { useSelector } from "react-redux";
import { RootState } from "./rootReducer";
import UserSettings from "./views/settings/UserSettings";
import { createBrowserHistory } from "history";
import { ThemeProvider } from "@material-ui/core";
import { createTheme } from "./theme/index";
import routes, { renderRoutes } from "./routes";
import { Router } from "react-router-dom";
import { THEMES } from "./constants";

const history = createBrowserHistory();

function App() {
const classes = useStyles();
const auth = useSelector((state: RootState) => state.auth);
//const auth = useSelector((state: RootState) => state.auth);

const theme = createTheme({
theme: THEMES.LIGHT,
});

return (
<Router>
<div className={classes.root}>
<Switch>
<Route path="/login">
<Container component="main" className={classes.main} maxWidth="sm">
<SignIn />
</Container>
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
<Route path="/settings">
<UserSettings />
</Route>
<Redirect from="/" to={auth.authenticated ? "/dashboard" : "/login"} />
</Switch>
<Footer />
</div>
<div className={classes.dashboard} />
</Router>
<ThemeProvider theme={theme}>
<Router history={history}>{renderRoutes(routes)}</Router>
</ThemeProvider>
);
}

Expand Down
12 changes: 12 additions & 0 deletions src/components/AuthGuard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { PropsWithChildren } from "react";
import { Redirect } from "react-router-dom";

export default function AuthGuard({ children }: PropsWithChildren<any>) {
const isAuthenticated = true;

if (!isAuthenticated) {
return <Redirect to="/login" />;
}

return <>{children}</>;
}
21 changes: 21 additions & 0 deletions src/components/GuestGuard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { Redirect } from "react-router-dom";
import { PropsWithChildren } from "react";
import { parse } from "query-string";

export default function GuestGuard({ children }: PropsWithChildren<any>) {
const isAuthenticated = true; //useAuth(); - Add this when auth hook is up and running

const {
location: { search },
} = children.props.children.props;
const parsed = parse(search);

if (isAuthenticated) {
if (parsed.backurl) {
return <Redirect to="/dashboard" />;
}
return <Redirect to="/account" />;
}

return <>{children}</>;
}
81 changes: 81 additions & 0 deletions src/components/Label.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import type { FC, ReactNode } from "react";
import PropTypes from "prop-types";
import clsx from "clsx";
import { fade, makeStyles } from "@material-ui/core";
import type { Theme } from "../theme";

interface LabelProps {
className?: string;
color?: "primary" | "secondary" | "error" | "warning" | "success";
children?: ReactNode;
style?: {};
}

const useStyles = makeStyles((theme: Theme) => ({
root: {
fontFamily: theme.typography.fontFamily,
alignItems: "center",
borderRadius: 2,
display: "inline-flex",
flexGrow: 0,
whiteSpace: "nowrap",
cursor: "default",
flexShrink: 0,
fontSize: theme.typography.pxToRem(12),
fontWeight: theme.typography.fontWeightMedium,
height: 20,
justifyContent: "center",
letterSpacing: 0.5,
minWidth: 20,
padding: theme.spacing(0.5, 1),
textTransform: "uppercase",
},
primary: {
color: theme.palette.primary.main,
backgroundColor: fade(theme.palette.primary.main, 0.08),
},
secondary: {
color: theme.palette.secondary.main,
backgroundColor: fade(theme.palette.secondary.main, 0.08),
},
error: {
color: theme.palette.error.main,
backgroundColor: fade(theme.palette.error.main, 0.08),
},
success: {
color: theme.palette.success.main,
backgroundColor: fade(theme.palette.success.main, 0.08),
},
warning: {
color: theme.palette.warning.main,
backgroundColor: fade(theme.palette.warning.main, 0.08),
},
}));

const Label: FC<LabelProps> = ({ className = "", color = "secondary", children, style, ...rest }) => {
const classes = useStyles();

return (
<span
className={clsx(
classes.root,
{
[classes[color]]: color,
},
className,
)}
{...rest}
>
{children}
</span>
);
};

Label.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
style: PropTypes.object,
color: PropTypes.oneOf(["primary", "secondary", "error", "warning", "success"]),
};

export default Label;
27 changes: 27 additions & 0 deletions src/components/Page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { forwardRef } from "react";
import type { HTMLProps, ReactNode } from "react";
import { Helmet } from "react-helmet";
import PropTypes from "prop-types";

interface PageProps extends HTMLProps<HTMLDivElement> {
children?: ReactNode;
title?: string;
}

const Page = forwardRef<HTMLDivElement, PageProps>(({ children, title = "", ...rest }, ref) => {
return (
<div ref={ref as any} {...rest}>
<Helmet>
<title>{title}</title>
</Helmet>
{children}
</div>
);
});

Page.propTypes = {
children: PropTypes.node.isRequired,
title: PropTypes.string,
};

export default Page;
7 changes: 7 additions & 0 deletions src/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export const APP_VERSION = "1.0.0";

export const ENABLE_REDUX_DEV_TOOLS = true;

export const THEMES = {
LIGHT: "LIGHT",
};
8 changes: 2 additions & 6 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { ApolloProvider } from "@apollo/client";
import CssBaseline from "@material-ui/core/CssBaseline";
import { ThemeProvider } from "@material-ui/core/styles";
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { apolloClient } from "./Apollo";
import store from "./store";
import theme from "./theme";

const render = () => {
const App = require("./App").default;
Expand All @@ -15,10 +13,8 @@ const render = () => {
<React.StrictMode>
<Provider store={store}>
<ApolloProvider client={apolloClient}>
<ThemeProvider theme={theme}>
<CssBaseline />
<App />
</ThemeProvider>
<CssBaseline />
<App />
</ApolloProvider>
</Provider>
</React.StrictMode>,
Expand Down
Loading