Merge branch 'develop' into RetrivingCvs#95

package.json

@@ -25,11 +25,12 @@
     "code:format": "prettier \"./src/**/**.{js,jsx,ts,tsx}\"",
     "code:check:rules": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
     "knex": "knex --cwd ./src/server",
-    "heroku-postbuild": "npm run db:setup" 
+    "heroku-postbuild": "npm run db:setup"
   },
   "author": "Shanawaz Islam",
   "license": "MIT",
   "dependencies": {
+    "@babel/polyfill": "^7.12.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-brands-svg-icons": "^5.12.0",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
@@ -44,6 +45,7 @@
     "circular-json": "^0.5.9",
     "clean-webpack-plugin": "^3.0.0",
     "cookie-parser": "^1.4.4",
+    "core-js": "^3.8.3",
     "cors": "^2.8.5",
     "cross-fetch": "^3.0.4",
     "debug": "^4.1.1",
@@ -72,6 +74,7 @@
     "react-router-dom": "^5.0.1",
     "react-scripts": "^3.3.0",
     "react-social-login-buttons": "^3.0.0",
+    "regenerator-runtime": "^0.13.7",
     "sass-loader": "^7.1.0",
     "serve-favicon": "^2.5.0",
     "sqlite3": "^4.1.1",
@@ -89,7 +92,7 @@
     "express-form-data": "^2.0.10",
     "husky": "^2.4.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^24.9.0",
+    "jest": "^27.0.0-next.2",
     "mock-knex": "^0.4.7",
     "nodemon": "^1.12.1",
     "poetic": "^1.2.6",
@@ -100,7 +103,11 @@
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
       "\\.(css|less)$": "identity-obj-proxy"
-    }
+    },
+    "testEnvironment": "jsdom",
+    "setupFiles": [
+      "<rootDir>/setupTests.js"
+    ]
   },
   "browserslist": [
     ">0.2%",

setupTests.js

@@ -0,0 +1 @@
+import 'regenerator-runtime/runtime';

src/client/App.js

@@ -17,7 +17,10 @@ function App() {
   if (isLoading) return <Loader />;
   return (
     <Router>
-      <Header isAuthenticated={isAuthenticated} />
+      {location.pathname === '/sign-in' ||
+      location.pathname === '/sign-up' ? null : (
+        <Header isAuthenticated={isAuthenticated} username="William Henry Gates" />
+      )}
       <Switch>
         <Route exact path="/">
           <Home />
@@ -34,7 +37,10 @@ function App() {
         </AuthenticatedRoute>
         <Route path="*" component={NotFoundPage} />
       </Switch>
-      <Footer />
+      {location.pathname === '/sign-in' ||
+      location.pathname === '/sign-up' ? null : (
+        <Footer />
+      )}
     </Router>
   );
 }

src/client/components/AddResume/AddResume.js

@@ -46,4 +46,3 @@ const[uploadFile,setUploadaFile] =useState('');
     )
 }
 
-

src/client/components/CardCvViewSearchComponent/CardCvViewSearchComponent.js

@@ -30,7 +30,7 @@ export const CardCvViewSearchComponent = ({
       </div>
       <div className="card-cv-middle">
         <div className="cv-title">{cvTitle}</div>
-        <div className="created-date">{createdDate}</div>
+        <div className="created-date">{createdDate.toLocaleString()}</div>
       </div>
       <div className="card-cv-bottom">
         <a

src/client/components/CvPdfRender.js

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+
+
+export function CvPdfRender() {
+    const [cvPdfFile, setCvPdfFile] = useState()
+    const { id } = useParams();
+    useEffect(() => {
+        (async () => {
+            const response = await fetch('/api/cv');
+            const data = await response.json();
+            const specificCv = data.find((cv) => cv.fk_user_id === id)
+            const src = `https://docs.google.com/viewer?url=${specificCv.file_url}&embedded=true`;
+            setCvPdfFile(src)
+        })()
+    }, [id])
+
+    return (
+        <div>
+            <iframe title="CV" frameBorder="0" style={{ width: "500px", height: "800px" }} src={cvPdfFile} />
+        </div>
+    )
+}

src/client/components/CvPdfRender.stories.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CvPdfRender } from './CvPdfRender';
+
+export default { title: 'Pdf Render' };
+
+export const Resume = () => <div><CvPdfRender /></div>

src/client/components/Footer/Footer.js

@@ -1,23 +1,24 @@
 import React from 'react';
-import './Footer.css';  
+import './Footer.css';
 import iconLinkedin from '../../assets/images/icons/linkedin.svg';
 import iconGithub from '../../assets/images/icons/github.svg';
-import iconWebsite from '../../assets/images/icons/facebook.svg';   
-
+import iconWebsite from '../../assets/images/icons/facebook.svg';
 
-
-
-export default function Footer() {                     
-
-  return (  
+export default function Footer() {
+  return (
     <div className="footer">
-        <p>©  HYF Copenhagen</p>
-    <ul>
-        <a href="https://www.linkedin.com/"> <img src={iconLinkedin} alt="Social media icon linkedin"/></a>
-        <a href="https://github.com/hackyourfuture-cph"><img  src={iconGithub} alt="Social media icon github"/></a>  
-        <a href="https://www.facebook.com/hackyourfuturecopenhagen/"><img src={iconWebsite} alt="Social media icon facebook"/></a>      
-    </ul>
-
+      <p>© HYF Copenhagen</p>
+      <ul>
+        <a href="https://www.linkedin.com/school/hackyourfuture-copenhagen/">
+          <img src={iconLinkedin} alt="Social media icon linkedin" />
+        </a>
+        <a href="https://github.com/hackyourfuture-cph">
+          <img src={iconGithub} alt="Social media icon github" />
+        </a>
+        <a href="https://www.facebook.com/hackyourfuturecopenhagen/">
+          <img src={iconWebsite} alt="Social media icon facebook" />
+        </a>
+      </ul>
     </div>
   );
-}  
+}

src/client/components/Forms/SignUp.js

@@ -1,57 +1,181 @@
-import React, { useState } from 'react';
+import React from 'react';
+import useForm from '../LoginForm/useForm';
+import iconGithub from '../../assets/images/icons/github.svg';
+import './Signup.style.css';
+import Button from '../Button/Button';
+import validate from '../LoginForm/Validation';
 import PropTypes from 'prop-types';
 
 export default function SignUp({ onSubmit }) {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [passwordConfirm, setPasswordConfirm] = useState('');
-  const handleEmailInput = (e) => setEmail(e.target.value);
-  const handlePasswordInput = (e) => setPassword(e.target.value);
-  const handlePasswordConfirmInput = (e) => setPasswordConfirm(e.target.value);
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    onSubmit({ email, password, passwordConfirm, fullName: 'Jane Doe' });
-  };
+  const { handleChange, handleSubmit, values, errors } = useForm(
+    validate,
+    onSubmit,
+    {
+      fullName: '',
+      position: '',
+      profileImageUrl: '',
+      linkedin: '',
+      github: '',
+      website: '',
+      email: '',
+      password: '',
+      passwordConfirm: '',
+    },
+  );
+
   return (
-    <form onSubmit={handleSubmit}>
-      <label htmlFor="email">
-        Email:{' '}
+    <form className="form" onSubmit={handleSubmit}>
+      <h2>Signup to Review Resume</h2>
+      <div className="button-forms">
+        <Button
+          buttonName="Signup With Linkedin"
+          style={{ backgroundColor: '#0676f2' }}
+        />
+        <div className="space">
+          <div className="github-container">
+            <img className="github-logo" src={iconGithub} alt="github icon" />
+          </div>
+        </div>
+      </div>
+      <br />
+      <div className="container-line">
+        <hr className="line" />
+        <h3 className="or">Or</h3> <hr className="line" />
+      </div>
+      <label className="label" htmlFor="fullName">
+        Full name:
+        <input
+          className="input"
+          type="text"
+          name="fullName"
+          value={values.fullName}
+          onChange={handleChange}
+          required
+        />
+      </label>
+      <label className="label" htmlFor="position">
+        Position:
+        <input
+          className="input"
+          type="text"
+          name="position"
+          value={values.position}
+          onChange={handleChange}
+          required
+        />
+      </label>
+      <label className="label" htmlFor="email" validate>
+        Email:
         <input
+          className="input"
           type="email"
           name="email"
           placeholder="Write your email"
-          value={email}
-          onChange={handleEmailInput}
+          value={values.email}
+          onChange={handleChange}
+          required
+        />
+        {errors.email && <p className="validation">{errors.email}</p>}
+      </label>
+      <label className="label" htmlFor="profileImageUrl">
+        Profile picture:
+        <input
+          className="input"
+          type="url"
+          name="profileImageUrl"
+          placeholder="profile image URL"
+          value={values.profileImageUrl}
+          onChange={handleChange}
           required
         />
       </label>
-      <label htmlFor="password">
-        Password:{' '}
+      <label className="label" htmlFor="linkedin">
+        LinkedIn user name:
         <input
+          className="input"
+          type="text"
+          name="linkedin"
+          placeholder="LinkedIn user name"
+          value={values.linkedin}
+          onChange={handleChange}
+          required
+        />
+      </label>
+      <label className="label" htmlFor="github">
+        Github user:
+        <input
+          className="input"
+          type="text"
+          name="github"
+          placeholder="Github user name"
+          value={values.github}
+          onChange={handleChange}
+          required
+        />
+      </label>
+      <label className="label" htmlFor="website">
+        Website:
+        <input
+          className="input"
+          type="url"
+          name="website"
+          placeholder="website URL"
+          value={values.website}
+          onChange={handleChange}
+          required
+        />
+      </label>
+      <label className="label" htmlFor="password" validate>
+        Password:
+        <span className="password-text">
+          Must contain at least 6 characters, including one number, one
+          uppercase letter and a lowercase letter
+        </span>
+        <input
+          className="input"
           type="password"
           name="password"
           placeholder="Write your password"
-          value={password}
-          onChange={handlePasswordInput}
+          value={values.password}
+          onChange={handleChange}
+          pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
           required
         />
+        {errors.password && <p className="validation">{errors.password}</p>}
       </label>
-      <label htmlFor="password">
-        Password - confirm:{' '}
+      <label className="label" htmlFor="passwordConfirm">
+        Password - confirm:
         <input
+          className="input"
           type="password"
-          name="password"
+          name="passwordConfirm"
           placeholder="Write your password again"
-          value={passwordConfirm}
-          onChange={handlePasswordConfirmInput}
+          value={values.passwordConfirm}
+          onChange={handleChange}
           required
         />
+        {errors.passwordConfirm && (
+          <p className="validation">{errors.passwordConfirm}</p>
+        )}
       </label>
-      <button type="submit">Sign up</button>
+      <br />
+      <label className="label-checkbox">
+        <input type="checkbox" id="check" required />
+        By signing up you agree to the Terms of Service, Privacy Policy and the
+        default notifications settings
+      </label>
+      <br />
+      <Button
+        buttonName="Create Account"
+        type="submit"
+        style={{ backgroundColor: '#da532c' }}
+      />
     </form>
   );
 }
-
 SignUp.propTypes = {
-  onSubmit: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func,
+};
+SignUp.defaultProps = {
+  onSubmit: () => null,
 };

src/client/components/Forms/SignUp.stories.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import SignUp from './SignUp';
+
+export default {
+  title: 'Signup',
+};
+export const Signup = () => <SignUp />;