Merge branch 'master' of github.com:scrum-gang/jobhub

scrum-gang · Feb 24, 2019 · 84ceecc · 84ceecc
2 parents c83995b + 3149b40
commit 84ceecc
Show file tree

Hide file tree

Showing 7 changed files with 331 additions and 106 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "react-router-dom": "^4.3.1",
     "react-scripts": "^2.1.5",
     "react-toastify": "^4.5.2",
+    "timeago.js": "^4.0.0-beta.2",
     "tslint": "^5.12.1",
     "typescript": "3.2.4",
     "yup": "^0.26.10"

diff --git a/src/App.tsx b/src/App.tsx
@@ -13,6 +13,8 @@ import Login from "./Features/Authentication/Login";
 import Register from "./Features/Authentication/Register";
 
 import Dashboard from "./Features/Dashboard/Dashboard";
+import Postings from "./Features/Postings/Postings";
+import ViewPosting from "./Features/Postings/ViewPosting";
 import ResumeUpload from "./Features/ResumeUpload/Upload";
 
 import { AuthConsumer, AuthProvider } from "./Shared/Authorization";
@@ -25,9 +27,10 @@ class App extends Component {
       <Route path="/login" component={Login} />
       <Route path="/register" component={Register} />
       <Route path="/resume" component={ResumeUpload} />
-      <Route path="/applications" component={Applications} exact/>
+      <Route path="/applications" component={Applications} exact />
       <Route path="/applications/:appid" component={EditApplication} />
-      <Route />
+      <Route path="/postings" component={Postings} exact />
+      <Route path="/postings/:postingid" component={ViewPosting} />
     </Switch>
   );
 

diff --git a/src/Features/Postings/Postings.tsx b/src/Features/Postings/Postings.tsx
@@ -0,0 +1,81 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+
+import {
+  Card,
+  CardActionArea,
+  CardContent,
+  createStyles,
+  Grid,
+  Theme,
+  Typography,
+  withStyles,
+  WithStyles
+} from "@material-ui/core";
+import { format } from "timeago.js";
+
+import { AuthRedirect, Protection } from "../../Shared/Authorization";
+
+const mockData = new Array(9).fill({
+  company: "JobHub",
+  deadline: new Date(),
+  description:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+  location: "Montreal, Quebec",
+  position: "Software Developer",
+  posted: new Date(),
+  salary: 60000
+});
+
+const styles = (theme: Theme) =>
+  createStyles({
+    container: {
+      margin: "auto",
+      marginTop: 80,
+      maxWidth: 600
+    }
+  });
+
+const Postings: React.FunctionComponent<WithStyles> = ({ classes }) => {
+  return (
+    <React.Fragment>
+      <AuthRedirect protection={Protection.LOGGED_IN} />
+      <Grid
+        container
+        wrap="wrap"
+        spacing={8}
+        className={classes.container}
+        alignItems="center"
+      >
+        {mockData.map((posting, i) => (
+          <Grid item key={i} xs={12} sm={6} md={4}>
+            <article>
+              <Link to={`/postings/${i}`}>
+                <Card>
+                  <CardActionArea>
+                    <CardContent>
+                      <Typography variant="h6" component="h1">
+                        {posting.position}
+                      </Typography>
+                      <Typography variant="body1" component="h2">
+                        {posting.company}
+                      </Typography>
+                      <Typography variant="caption">
+                        {posting.location}
+                      </Typography>
+                      <Typography variant="caption">
+                        {format(posting.posted)}
+                      </Typography>
+                    </CardContent>
+                  </CardActionArea>
+                </Card>
+              </Link>
+            </article>
+          </Grid>
+        ))}
+      </Grid>
+    </React.Fragment>
+  );
+};
+
+export default withStyles(styles)(Postings);
diff --git a/src/Features/Postings/ViewPosting.tsx b/src/Features/Postings/ViewPosting.tsx
@@ -0,0 +1,76 @@
+import * as React from "react";
+import { RouteComponentProps } from "react-router-dom";
+
+import {
+  Button,
+  createStyles,
+  Divider,
+  Grid,
+  Paper,
+  Theme,
+  Typography,
+  withStyles,
+  WithStyles
+} from "@material-ui/core";
+import { format } from "timeago.js";
+
+import { AuthRedirect, Protection } from "../../Shared/Authorization";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    container: {
+      margin: "auto",
+      marginTop: 80,
+      maxWidth: 600,
+      padding: theme.spacing.unit * 4
+    }
+  });
+
+const data = {
+  company: "JobHub",
+  deadline: new Date(),
+  description:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+  location: "Montreal, Quebec",
+  position: "Software Developer",
+  posted: new Date(),
+  salary: 60000
+};
+
+const ViewPosting: React.FunctionComponent<
+  WithStyles & RouteComponentProps
+> = ({ classes }) => {
+  return (
+    <React.Fragment>
+      <AuthRedirect protection={Protection.LOGGED_IN} />
+      <Paper className={classes.container}>
+        <Typography variant="h3" component="h1">
+          {data.position}
+        </Typography>
+        <Typography variant="h4" component="h2" gutterBottom>
+          {data.company}
+        </Typography>
+        <Divider />
+        <Typography variant="h6" gutterBottom>
+          ${data.salary} - {data.location}
+        </Typography>
+        <Typography variant="body1" component="p" gutterBottom>
+          {data.description}
+        </Typography>
+        <Grid container justify="space-between">
+          <Typography component="span">Posted {format(data.posted)}</Typography>
+          <Typography component="span">
+            Deadline {format(data.deadline)}
+          </Typography>
+        </Grid>
+        <Grid container justify="center">
+          <Button color="primary" variant="contained">
+            Apply
+          </Button>
+        </Grid>
+      </Paper>
+    </React.Fragment>
+  );
+};
+
+export default withStyles(styles)(ViewPosting);
diff --git a/src/Shared/Navigation/Navigation.tsx b/src/Shared/Navigation/Navigation.tsx
@@ -29,7 +29,14 @@ import {
   Search as SearchIcon,
   Work as WorkIcon
 } from "@material-ui/icons";
-import { Link as RouterLink } from "react-router-dom";
+import {
+  Link as RouterLink,
+  RouteComponentProps,
+  withRouter
+} from "react-router-dom";
+
+import userAPI from "../../api/userAPI";
+import { AuthConsumer } from "../../Shared/Authorization/";
 
 const drawerWidth = 240;
 
@@ -86,9 +93,11 @@ const styles = (theme: Theme) =>
     }
   });
 
-interface IProps extends WithStyles<typeof styles> {}
-
-const Navigation: React.FunctionComponent<IProps> = ({ classes, children }) => {
+const Navigation: React.FunctionComponent<WithStyles & RouteComponentProps> = ({
+  classes,
+  children,
+  history
+}) => {
   const drawerItems = [
     {
       icon: <HomeIcon />,
@@ -102,7 +111,7 @@ const Navigation: React.FunctionComponent<IProps> = ({ classes, children }) => {
     },
     {
       icon: <SearchIcon />,
-      route: "/",
+      route: "/postings",
       text: "JobHub Postings"
     },
     {
@@ -211,13 +220,18 @@ const Navigation: React.FunctionComponent<IProps> = ({ classes, children }) => {
               >
                 My account
               </MenuItem>
-              <MenuItem
-                onClick={() => {
-                  /**/
-                }}
-              >
-                Log Out
-              </MenuItem>
+              <AuthConsumer>
+                {({ clearStateAndCache }) => (
+                  <MenuItem
+                    onClick={() => {
+                      clearStateAndCache();
+                      userAPI.logout().then(() => history.push("/login"));
+                    }}
+                  >
+                    Log Out
+                  </MenuItem>
+                )}
+              </AuthConsumer>
             </Menu>
           </div>
         </Toolbar>
@@ -254,4 +268,4 @@ const Navigation: React.FunctionComponent<IProps> = ({ classes, children }) => {
   );
 };
 
-export default withStyles(styles)(Navigation);
+export default withStyles(styles)(withRouter(Navigation));
diff --git a/src/api/userAPI.ts b/src/api/userAPI.ts
@@ -9,6 +9,7 @@ enum UserEndpoints {
   USERS = "/users",
   SELF = "/users/self",
   LOGIN = "/login",
+  LOGOUT = "/logout",
   REGISTER = "/signup",
   RESEND_EMAIL = "/resend"
 }
@@ -22,11 +23,11 @@ class UserAPI {
 
   public setJWT = (token: string) => {
     this.api.setJWT(token);
-  }
+  };
 
   public clearJWT = () => {
     this.api.clearJWT();
-  }
+  };
 
   public login = (payload: { email: string; password: string }) => {
     return this.api.endpoints[UserEndpoints.LOGIN]
@@ -37,6 +38,10 @@ class UserAPI {
       });
   };
 
+  public logout = () => {
+    return this.api.endpoints[UserEndpoints.LOGOUT].create({});
+  };
+
   public register = (payload: {
     email: string;
     password: string;
@@ -46,7 +51,9 @@ class UserAPI {
   };
 
   public getSelf = () => {
-    return this.api.endpoints[UserEndpoints.SELF].getAll() as AxiosPromise<IUser>;
+    return this.api.endpoints[UserEndpoints.SELF].getAll() as AxiosPromise<
+      IUser
+    >;
   };
 
   public resendVerification = (payload: { email: string }) => {