├── .gitignore
├── Diagram.png
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── index.html
    └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── layouts
        ├── Dashboard.jsx
        ├── Footer.jsx
        ├── Navi.jsx
        ├── SignedIn.jsx
        └── SignedOut.jsx
    ├── logo.svg
    ├── pages
        ├── ChoosingSignInMethod.jsx
        ├── ChoosingSignUpMethod.jsx
        ├── Employers
        │   ├── EmployerDetailPage.jsx
        │   ├── EmployerList.jsx
        │   ├── EmployerSignUpPage.jsx
        │   └── JobAddPage.jsx
        ├── JobPositionList.jsx
        ├── JobSeekers
        │   ├── JobSeekerDetail.jsx
        │   ├── JobSeekerList.jsx
        │   └── JobSeekerSignUpPage.jsx
        ├── Jobs
        │   ├── JobDetailPage.jsx
        │   └── JobList.jsx
        ├── MainPage.jsx
        ├── SignInPage.jsx
        └── SystemUsers
        │   ├── JobConfirmationPanel.jsx
        │   └── SystemUserSignUpPage.jsx
    ├── reportWebVitals.js
    ├── services
        ├── ActivationPanelService.js
        ├── CityService.js
        ├── EmployerService.js
        ├── JobPositionService.js
        ├── JobSeekerService.js
        ├── JobService.js
        ├── WorkPlaceService.js
        └── WorkTimeService.js
    ├── setupTests.js
    └── store
        ├── configureStore.js
        └── rootReducer.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | node_modules
25 | 


--------------------------------------------------------------------------------
/Diagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrPand-21/HRMS_Frontend/1732033d87311d30ef0ee3f81a3390a53d2688e7/Diagram.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 |   <a href="https://github.com/MrPand-21/HRMS_Frontend/graphs/contributors"><img src="https://img.shields.io/github/contributors/MrPand-21/HRMS_Frontend.svg?style=for-the-badge"></a>
  3 |   <a href="https://github.com/MrPand-21/HRMS_Frontend/network/members"><img src="https://img.shields.io/github/forks/MrPand-21/HRMS_Frontend.svg?style=for-the-badge"></a>
  4 |   <a href="https://github.com/MrPand-21/HRMS_Frontend/stargazers"><img src="https://img.shields.io/github/stars/MrPand-21/HRMS_Frontend.svg?style=for-the-badge"></a>
  5 |   <br/>
  6 |   <br/>
  7 |   <a href="https://github.com/MrPand-21/HRMS_Frontend">
  8 |     <img src="https://github.com/MrPand-21/MrPand-21/blob/main/HRMS.png" height="160" alt="HRMS">
  9 |   </a>
 10 |   <h3>HRMS_Frontend</h3>
 11 | 
 12 |   <p align="center">
 13 |     <a href="#about-the-project">About</a> •
 14 |     <a href="#usage">How To Use</a> •
 15 |     <a href="#installation">Installation</a> •
 16 |     <a href="#credits">Credits</a> •
 17 |     <a href="#learn-more">Learn More</a> •
 18 |     <a href="https://github.com/MrPand-21/HRMS_Frontend/issues">Report Bug</a> •
 19 |     <a href="https://github.com/MrPand-21/HRMS_Frontend/issues">Request Feature</a>
 20 |   </p>
 21 |   <h4 align="center">HRMS Frontend project which was bootstrapped with <a href="https://github.com/facebook/create-react-app">Create React App</a> and <a href="https://semantic-ui.com/">Semantic UI</a>.
 22 |   </h4>
 23 | </div>
 24 | 
 25 | # About the Project
 26 | 
 27 | [![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)]()
 28 | [![Node.js](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node-dot-js&logoColor=white)](https://nodejs.org/)
 29 | [![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://tr.reactjs.org/)
 30 | [![Bootstrap](https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white)](https://getbootstrap.com/)
 31 | [![Scss](https://img.shields.io/badge/Scss-CC6699?style=for-the-badge&logo=sass&logoColor=white)](https://sass-lang.com/)
 32 | [![Create React App](https://img.shields.io/badge/Create-ReactApp-AA6699?style=for-the-badge&logo=create-react-app&logoColor=white)](https://github.com/facebook/create-react-app)
 33 | [![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](http://forthebadge.com)
 34 | 
 35 | HRMS Frontend project. (You can access the backend [here](https://github.com/MrPand-21/HRMS_Backend) and use them together to work with real database and backend)
 36 | 
 37 | ### UML Component Diagram
 38 | 
 39 | ![UML Component Diagram](../Diagram.png)
 40 | 
 41 | ## Installation
 42 | 
 43 | To get this project you can run the following comments in your terminal which is opened in the folder where you want to copy to.
 44 | 
 45 | ```bash
 46 | # clones the selected repository
 47 | $ git clone https://github.com/MrPand-21/HRMS_Frontend
 48 | ```
 49 | 
 50 | After opened the project in the terminal, you can write
 51 | 
 52 | ``` bash
 53 | # installs the dependencies
 54 | $ npm i
 55 | ```
 56 | 
 57 | ## Usage
 58 | 
 59 | In the project directory, you can run:
 60 | 
 61 | ```bash 
 62 | # runs the app in the development mode.
 63 | $ npm start
 64 | ```
 65 | 
 66 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 67 | 
 68 | The page will reload if you make edits.\
 69 | You will also see any lint errors in the console.
 70 | 
 71 | ```bash 
 72 | # lunches the test runner in the interactive watch mode.
 73 | $ npm test
 74 | ```
 75 | 
 76 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 77 | 
 78 | ```bash 
 79 | # builds the app for production to the `build` folder.
 80 | $ npm run build
 81 | ```
 82 | 
 83 | It correctly bundles React in production mode and optimizes the build for the best performance.
 84 | 
 85 | The build is minified and the filenames include the hashes.\
 86 | Your app is ready to be deployed!
 87 | 
 88 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 89 | 
 90 | ```bash 
 91 | #you may want to omit "eject"
 92 | $ npm run eject
 93 | ```
 94 | 
 95 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
 96 | 
 97 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
 98 | 
 99 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
100 | 
101 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
102 | 
103 | ## Contributing
104 | 
105 | Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**. Right now there is only one branch which is master.
106 | 
107 | 1. Fork the Project
108 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
109 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
110 | 4. Push to the Branch (`git push origin feature/AmazingFeature`)
111 | 5. Open a Pull Request
112 | 
113 | ## Learn More
114 | 
115 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
116 | 
117 | To learn React, check out the [React documentation](https://reactjs.org/).
118 | 
119 | * [Code Splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
120 | * [Analyzing the Bundle Size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
121 | * [Making a Progressive Web App](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
122 | * [Advanced Configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
123 | * [Deployment](https://facebook.github.io/create-react-app/docs/deployment)
124 | * [npm run build fails to minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
125 | 
126 | ## Credits
127 | 
128 | [Carabelli](MrPanda+HRMS_Frontend@protonmail.ch)
129 | 
130 | #### Acknowledgements
131 | 
132 | - [Engin Demirog](https://www.linkedin.com/in/engindemirog)


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hrms-project",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.14.1",
 7 |     "@testing-library/react": "^11.2.7",
 8 |     "@testing-library/user-event": "^12.8.3",
 9 |     "axios": "^0.21.1",
10 |     "formik": "^2.2.9",
11 |     "react": "^17.0.2",
12 |     "react-dom": "^17.0.2",
13 |     "react-router-dom": "^5.2.0",
14 |     "react-scripts": "4.0.3",
15 |     "react-toastify": "^7.0.4",
16 |     "semantic-ui-css": "^2.4.1",
17 |     "semantic-ui-react": "^2.0.3",
18 |     "web-vitals": "^1.1.2",
19 |     "yup": "^0.32.9"
20 |   },
21 |   "scripts": {
22 |     "start": "react-scripts start",
23 |     "build": "react-scripts build",
24 |     "test": "react-scripts test",
25 |     "eject": "react-scripts eject"
26 |   },
27 |   "eslintConfig": {
28 |     "extends": [
29 |       "react-app",
30 |       "react-app/jest"
31 |     ]
32 |   },
33 |   "browserslist": {
34 |     "production": [
35 |       ">0.2%",
36 |       "not dead",
37 |       "not op_mini all"
38 |     ],
39 |     "development": [
40 |       "last 1 chrome version",
41 |       "last 1 firefox version",
42 |       "last 1 safari version"
43 |     ]
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     
 9 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
10 |     
11 |     <title>HRMS Project</title>
12 |   </head>
13 |   <body>
14 |     <noscript>You need to enable JavaScript to run this app.</noscript>
15 |     <div id="root"></div>
16 |     <!--
17 |       This HTML file is a template.
18 |       If you open it directly in the browser, you will see an empty page.
19 | 
20 |       You can add webfonts, meta tags, or analytics to this file.
21 |       The build step will place the bundled scripts into the <body> tag.
22 | 
23 |       To begin the development, run `npm start` or `yarn start`.
24 |       To create a production bundle, use `npm run build` or `yarn build`.
25 |     -->
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "HRMS Project",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | .App {
  2 |   text-align: center;
  3 | }
  4 | 
  5 | #jobSeekerDetail{
  6 |   background-color: #f09595c0;
  7 | }
  8 | 
  9 | #menu-blank{
 10 |   padding-bottom: 500px;
 11 | }
 12 | .blue{
 13 |   background: blue;
 14 | }
 15 | .marginLeft{
 16 |   margin-left: 2.7em;
 17 | }
 18 | 
 19 | .labelForJobAddFields{
 20 |   margin-right: 2em;
 21 | }
 22 | 
 23 | .paddingRightSmall{
 24 |   padding-right:1em;
 25 | }
 26 | 
 27 | .paddingRight{
 28 |   padding-right:2em;
 29 | }
 30 | 
 31 | .paddingRightMedium{
 32 |   padding-right:3em;
 33 | }
 34 | 
 35 | .paddingRightLarge{
 36 |   padding-right:5em;
 37 | }
 38 | 
 39 | #headerForJob{
 40 |   margin-bottom: 2em;
 41 | }
 42 | 
 43 | #deadlineField{
 44 |   margin-right: -54px;
 45 | }
 46 | 
 47 | .clearMargins{
 48 |   margin-top: 0px;
 49 |   margin-bottom: 0px;
 50 | }
 51 | 
 52 | .marginBottom{
 53 |   margin-bottom: 1em;
 54 | 
 55 | }
 56 | .marginTopSmall{
 57 |   margin-top: 1em;
 58 | 
 59 | }
 60 | 
 61 | .marginBottomMedium{
 62 |   margin-bottom: 2em;
 63 | }
 64 | .marginTop{
 65 |   margin-top: 5em;
 66 | }
 67 | #bg-for-menu{
 68 | 
 69 |   position: absolute;
 70 |   z-index: 0;
 71 |   height: 100%;
 72 |   width:100px;
 73 |   box-sizing: border-box;
 74 |   background: linear-gradient(180deg,#8686d5,#00d4ff);
 75 |   clip-path: polygon(0 0, 56% 0, 100% 0%, 0% 100%);
 76 | 
 77 | }
 78 | 
 79 | div [class*="left floated"] {
 80 |   float: left;
 81 |   margin-left: 0.25em;
 82 | }
 83 | 
 84 | div [class*="right floated"] {
 85 |   float: right;
 86 |    margin-right: 0.25em;
 87 | } 
 88 | 
 89 | .labelForEmployerSignUp{
 90 |   margin-right: 10px;
 91 |   font-size:22px;
 92 |   color: rgb(13, 158, 255);
 93 |   text-align: center;
 94 | }
 95 | 
 96 | .labelForSystemUserSignUp{
 97 |   margin-right: 10px;
 98 |   font-size:22px;
 99 |   color: rgb(13, 158, 255);
100 |   text-align: center;
101 | }
102 | 
103 | .employer-header{
104 |   margin-top: 3em !important;
105 |   text-align: center;
106 | }
107 | 
108 | .jobSeeker-header{
109 |   margin-top: 3em !important;
110 |   text-align: center;
111 | }
112 | 
113 | #menu{
114 | 
115 |   background-color: #1B1C1D;
116 |   display: flex;
117 | 	justify-content: center;
118 |   align-items: top;
119 | 	min-height: 100vh;
120 |   height:110%;
121 |   
122 | }
123 | 
124 | #footer{
125 |   background-color: #1B1C1D;
126 | }
127 | 
128 | #content-area{
129 |   margin-top: 3em;
130 |   margin-right: 4em;
131 | }
132 | 
133 | #white-jobseeker{
134 |   color:white;
135 | }
136 | 
137 | #white-employername{
138 |   color:white;
139 | }
140 | 
141 | * {
142 |   box-sizing: border-box;
143 |   margin: 0;
144 |   padding: 0;
145 |   text-rendering: optimizeLegibility;
146 |   -webkit-font-smoothing: antialiased;
147 |   -moz-osx-font-smoothing: grayscale;
148 |   -webkit-tap-highlight-color: transparent;
149 | }
150 | 
151 | html {
152 |   font-size: 16px;
153 |   margin: 0;
154 |   padding: 0;
155 |   text-decoration-skip-ink: "auto";
156 | }
157 | 
158 | :root {
159 |   --gray-900: #1a202c;
160 |   --gray-800: #2d3748;
161 |   --gray-700: #4a5568;
162 |   --gray-600: #718096;
163 |   --gray-500: #a0aec0;
164 |   --gray-400: #cbd5e0;
165 |   --gray-300: #e2e8f0;
166 |   --gray-200: #edf2f7;
167 |   --gray-100: #f7fafc;
168 |   --red-100: #fff5f5;
169 |   --red-200: #fed7d7;
170 |   --red-300: #feb2b2;
171 |   --red-400: #fc8181;
172 |   --red-500: #f56565;
173 |   --red-600: #e53e3e;
174 |   --red-700: #c53030;
175 |   --red-800: #9b2c2c;
176 |   --red-900: #742a2a;
177 |   --blue-100: #ebf8ff;
178 |   --blue-200: #bee3f8;
179 |   --blue-300: #90cdf4;
180 |   --blue-400: #63b3ed;
181 |   --blue-500: #4299e1;
182 |   --blue-600: #3182ce;
183 |   --blue-700: #2b6cb0;
184 |   --blue-800: #2c5282;
185 |   --blue-900: #2a4365;
186 |   --white: white;
187 |   --red: #f56565;
188 |   --text-decoration-color: var(--gray-400);
189 |   --text-color: var(--gray-800);
190 |   --focus-ring-color: var(--blue-500);
191 | }
192 | 
193 | body {
194 |   padding: 0;
195 |   margin: calc((100vh / 25) * 1.563) calc((100vw / 25) * 1.563);
196 |   background-color: white;
197 |   font-weight: 400;
198 |   line-height: 1.563;
199 |   color: var(--text-color);
200 |   caret-color: var(--text-color);
201 | }
202 | 
203 | @media (prefers-color-scheme: dark) {
204 |   body {
205 |     color: white;
206 |     background-color: var(--gray-900);
207 |     caret-color: white;
208 |   }
209 | }
210 | 
211 | /* Typography
212 | ––––––––––––––––––––––––––––––––– */
213 | 
214 | h1,
215 | h2,
216 | h3,
217 | h4,
218 | h5,
219 | h6 {
220 |   margin-bottom: 1rem;
221 |   margin-top: 1em;
222 |   font-weight: bold;
223 | }
224 | 
225 | h1 {
226 |   font-size: 3.052rem !important;
227 |   line-height: 1;
228 | }
229 | 
230 | h2 {
231 |   font-size: 2.441rem;
232 |   line-height: 1.2;
233 | }
234 | 
235 | h3 {
236 |   font-size: 1.953rem;
237 |   line-height: 1.2;
238 | }
239 | 
240 | h4 {
241 |   font-size: 1.563rem;
242 |   line-height: 1.3;
243 | }
244 | 
245 | h5 {
246 |   font-size: 1.25rem;
247 |   line-height: 1.4;
248 | }
249 | 
250 | h6 {
251 |   font-size: 1rem;
252 |   
253 |   line-height: 1.5;
254 | }
255 | 
256 | p {
257 |   margin-bottom: 1.563rem;
258 | }
259 | 
260 | p > *:last-child {
261 |   margin-bottom: 0;
262 | }
263 | 
264 | a {
265 |   color: inherit;
266 |   text-decoration: underline;
267 |   text-decoration-color: var(--text-decoration-color);
268 |   -webkit-text-decoration-color: var(--text-decoration-color);
269 |   border-radius: 5px;
270 |   text-underline-offset: 2px;
271 |   text-decoration-thickness: 2px;
272 | }
273 | 
274 | @media (hover: hover) {
275 |   a:hover {
276 |     text-decoration-color: var(--gray-800);
277 |   }
278 | }
279 | 
280 | @media (hover: hover) and (prefers-color-scheme: dark) {
281 |   a:hover {
282 |     text-decoration-color: white;
283 |   }
284 | }
285 | 
286 | @media (prefers-color-scheme: dark) {
287 |   a {
288 |     text-decoration-color: var(--gray-700);
289 |     -webkit-text-decoration-color: var(--gray-700);
290 |   }
291 | }
292 | 
293 | a:focus-visible {
294 |   box-shadow: 0 0 0 2px var(--focus-ring-color);
295 |   outline: none;
296 | }
297 | 
298 | small {
299 |   font-size: 0.888rem;
300 | }
301 | 
302 | hr {
303 |   border: 1px solid var(--gray-700);
304 |   margin: 3.052rem 0;
305 | }
306 | 
307 | /* Form
308 | ––––––––––––––––––––––––––––––––– */
309 | label {
310 |   font-weight: bold;
311 |   display: flex;
312 | }
313 | 
314 | input[type="email"],
315 | input[type="text"],
316 | input[type="number"] {
317 |   padding: 0.65rem 0.5rem;
318 |   border: 2px solid var(--gray-200);
319 |   background-color: var(--gray-100);
320 |   color: var(--gray-800);
321 |   border-radius: 10px;
322 |   -webkit-appearance: none;
323 |   -moz-appearance: none;
324 |   appearance: none;
325 | }
326 | 
327 | @media (prefers-color-scheme: dark) {
328 |   input[type="email"],
329 |   input[type="text"],
330 |   input[type="number"] {
331 |     background-color: var(--gray-800);
332 |     border-color: var(--gray-700);
333 |     color: white;
334 |   }
335 | 
336 |   input[type="email"]::placeholder,
337 |   input[type="text"]::placeholder,
338 |   input[type="number"]::placeholder,
339 |   select,
340 |   textarea {
341 |     color: var(--gray-500);
342 |   }
343 | }
344 | 
345 | input[type="email"],
346 | input[type="text"],
347 | input[type="number"],
348 | textarea,
349 | select {
350 |   width: 400px;
351 | }
352 | 
353 | select {
354 |   margin: 0;
355 |   -webkit-appearance: none;
356 |   box-sizing: border-box;
357 |   padding: 0.65rem 0.5rem;
358 |   font-size: 1rem;
359 |   border: 2px solid var(--gray-200);
360 |   border-radius: 10px;
361 |   color: var(--gray-700);
362 |   height: auto;
363 |   background-color: var(--gray-100);
364 |   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125.304 125.304"><path d="M62.652 103.895L0 21.41h125.304" fill="%23343334"/></svg>');
365 |   background-repeat: no-repeat;
366 |   background-size: 1rem;
367 |   background-position: center right 0.5rem;
368 | }
369 | 
370 | @media (prefers-color-scheme: dark) {
371 |   select {
372 |     background-color: var(--gray-800);
373 |     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125.304 125.304"><path d="M62.652 103.895L0 21.41h125.304" fill="%23ffffff"/></svg>');
374 |     border-color: var(--gray-700);
375 |     color: white;
376 |   }
377 | }
378 | 
379 | textarea {
380 |   -webkit-appearance: none;
381 |   -moz-appearance: none;
382 |   appearance: none;
383 |   border: 2px solid var(--gray-200);
384 |   color: var(--gray-700);
385 |   border-radius: 10px;
386 |   resize: vertical;
387 |   background-color: var(--gray-100);
388 |   box-sizing: border-box;
389 |   padding: 0.65rem 0.5rem;
390 | }
391 | 
392 | @media (prefers-color-scheme: dark) {
393 |   textarea {
394 |     background-color: var(--gray-800);
395 |     border-color: var(--gray-700);
396 |     color: white;
397 |   }
398 | }
399 | 
400 | input:focus,
401 | select:focus,
402 | textarea:focus {
403 |   outline: none;
404 |   border: 2px solid var(--focus-ring-color);
405 | }
406 | 
407 | input:invalid,
408 | select:invalid,
409 | textarea:invalid {
410 |   border: 2px solid #ff7d87;
411 |   box-shadow: none;
412 | }
413 | 
414 | input[type="checkbox"] {
415 |   display: inline-block;
416 |   height: 1rem;
417 |   border-radius: 5px;
418 |   -webkit-appearance: none;
419 |   -moz-appearance: none;
420 |   appearance: none;
421 |   border: 2px solid var(--gray-300);
422 |   width: 1rem;
423 |   background-color: white;
424 |   align-self: center;
425 |   margin-right: 0.5rem;
426 | }
427 | 
428 | @media (prefers-color-scheme: dark) {
429 |   input[type="checkbox"] {
430 |     background-color: var(--gray-800);
431 |     border-color: var(--gray-600);
432 |   }
433 | }
434 | 
435 | input[type="checkbox"]:hover {
436 |   cursor: pointer;
437 | }
438 | 
439 | input[type="checkbox"]:checked {
440 |   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="78.369" height="78.369" viewBox="0 0 78.369 78.369"><path fill="white" d="M78.05 19.015l-48.592 48.59c-.428.43-1.12.43-1.548 0L.32 40.016c-.427-.426-.427-1.12 0-1.547l6.704-6.704c.428-.427 1.12-.427 1.548 0l20.113 20.112 41.113-41.113c.43-.427 1.12-.427 1.548 0l6.703 6.704c.427.427.427 1.12 0 1.548z"/></svg>');
441 |   background-size: contain;
442 |   background-color: var(--gray-700);
443 |   border: 2px solid var(--gray-700);
444 | }
445 | 
446 | input[type="checkbox"]:focus-visible,
447 | input[type="checkbox"]:checked:focus-visible {
448 |   border-color: var(--focus-ring-color);
449 | }
450 | 
451 | @media (prefers-color-scheme: dark) {
452 |   input[type="checkbox"]:checked {
453 |     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="78.369" height="78.369" viewBox="0 0 78.369 78.369"><path fill="%23343434" d="M78.05 19.015l-48.592 48.59c-.428.43-1.12.43-1.548 0L.32 40.016c-.427-.426-.427-1.12 0-1.547l6.704-6.704c.428-.427 1.12-.427 1.548 0l20.113 20.112 41.113-41.113c.43-.427 1.12-.427 1.548 0l6.703 6.704c.427.427.427 1.12 0 1.548z"/></svg>');
454 |     background-color: white;
455 |     border: 2px solid white;
456 |   }
457 | }
458 | 
459 | input[type="radio"] {
460 |   -webkit-appearance: none;
461 |   -moz-appearance: none;
462 |   appearance: none;
463 |   border-radius: 50%;
464 |   border: 2px solid var(--gray-300);
465 |   height: 1rem;
466 |   width: 1rem;
467 |   margin-right: 0.5rem;
468 |   align-self: center;
469 |   justify-content: center;
470 |   position: relative;
471 |   display: flex;
472 | }
473 | 
474 | @media (prefers-color-scheme: dark) {
475 |   input[type="radio"] {
476 |     border: 2px solid white;
477 |   }
478 | }
479 | 
480 | @media (hover: hover) {
481 |   input[type="radio"]:hover {
482 |     cursor: pointer;
483 |   }
484 | }
485 | 
486 | input[type="radio"]:checked {
487 |   border: 2px solid var(--gray-700);
488 | }
489 | 
490 | input[type="radio"]:focus-visible,
491 | input[type="radio"]:checked:focus-visible {
492 |   border-color: var(--focus-ring-color);
493 | }
494 | 
495 | @media (prefers-color-scheme: dark) {
496 |   input[type="radio"]:checked {
497 |     border: 2px solid white;
498 |   }
499 | }
500 | 
501 | input[type="radio"]:checked::before {
502 |   content: "";
503 |   width: calc(100% - 4px);
504 |   height: calc(100% - 4px);
505 |   background-color: var(--gray-700);
506 |   align-self: center;
507 |   border-radius: 50%;
508 | }
509 | 
510 | @media (prefers-color-scheme: dark) {
511 |   input[type="radio"]:checked::before {
512 |     background-color: white;
513 |   }
514 | }
515 | 
516 | input[type="submit"],
517 | input[type="reset"],
518 | input[type="button"],
519 | button {
520 |   padding: 0.5rem 1.25rem;
521 |   border-radius: 10px;
522 |   background-color: var(--gray-700);
523 |   border: 2px solid var(--gray-700);
524 |   color: white;
525 |   text-decoration: none;
526 |   font-weight: bold;
527 |   margin-bottom: 1rem;
528 |   -webkit-appearance: none;
529 |   -moz-appearance: none;
530 |   appearance: none;
531 |   display: inline-block;
532 |   transition: background-color 200ms ease-in-out, border 200ms ease-in-out,
533 |     transform 200ms ease-in-out;
534 |   -webkit-touch-callout: none;
535 |   -webkit-user-select: none;
536 |   user-select: none;
537 | }
538 | 
539 | @media (prefers-color-scheme: dark) {
540 |   input[type="submit"],
541 |   input[type="reset"],
542 |   input[type="button"],
543 |   button {
544 |     background-color: white;
545 |     border: 2px solid white;
546 |     color: var(--gray-800);
547 |   }
548 | }
549 | 
550 | @media (hover: hover) {
551 |   input[type="submit"]:hover,
552 |   input[type="reset"]:hover,
553 |   input[type="button"]:hover,
554 |   button:hover {
555 |     cursor: pointer;
556 |     background-color: var(--gray-800);
557 |   }
558 | }
559 | 
560 | @media (hover: hover) and (prefers-color-scheme: dark) {
561 |   input[type="submit"]:hover,
562 |   input[type="reset"]:hover,
563 |   input[type="button"]:hover,
564 |   button:hover {
565 |     cursor: pointer;
566 |     background-color: var(--gray-300);
567 |   }
568 | }
569 | 
570 | button:focus-visible,
571 | input[type="submit"]:focus-visible,
572 | input[type="reset"]:focus-visible,
573 | input[type="button"]:focus-visible {
574 |   border-color: var(--focus-ring-color);
575 |   outline: none;
576 | }
577 | 
578 | /* Tables
579 | ––––––––––––––––––––––––––––––––– */
580 | table {
581 |   width: 100%;
582 |   border-spacing: 0;
583 |   margin-bottom: 1.563rem;
584 |   font-variant-numeric: tabular-nums;
585 | }
586 | 
587 | th,
588 | td {
589 |   padding: 0.5rem 0.5rem 0.5rem 0;
590 |   margin: 0;
591 | }
592 | 
593 | th {
594 |   font-weight: bold;
595 |   text-align: left;
596 |   border-bottom: 2px solid var(--gray-300);
597 |   color: var(--gray-300);
598 | }
599 | 
600 | @media (prefers-color-scheme: dark) {
601 |   th {
602 |     border-color: var(--gray-700);
603 |     color: var(--gray-700);
604 |   }
605 | }
606 | 
607 | td {
608 |   border-bottom: 2px solid var(--gray-300);
609 | }
610 | 
611 | @media (prefers-color-scheme: dark) {
612 |   td {
613 |     border-color: var(--gray-700);
614 |   }
615 | }
616 | 
617 | /* Code
618 | ––––––––––––––––––––––––––––––––– */
619 | code {
620 |   background: var(--gray-100);
621 |   padding: 0 0.328rem;
622 |   display: inline-block;
623 |   vertical-align: middle;
624 |   border-radius: 10px;
625 | }
626 | 
627 | @media (prefers-color-scheme: dark) {
628 |   code {
629 |     background-color: var(--gray-700);
630 |   }
631 | }
632 | 
633 | p > code {
634 |   white-space: normal;
635 | }
636 | 
637 | pre > code {
638 |   line-height: 1.563em;
639 |   display: block;
640 |   padding: 1rem;
641 |   white-space: pre;
642 |   margin-bottom: 1.563rem;
643 |   overflow: scroll;
644 | }
645 | 
646 | /* Forces a new-line at the end of a code block for layout purposes. */
647 | pre > code::after {
648 |   content: " ";
649 | }
650 | 
651 | /* Blockquote
652 | ––––––––––––––––––––––––––––––––– */
653 | blockquote {
654 |   border-left: 0.25rem solid var(--gray-100);
655 |   padding: 0 1rem;
656 |   margin-bottom: 1.563rem;
657 | }
658 | 
659 | @media (prefers-color-scheme: dark) {
660 |   blockquote {
661 |     border-left: 0.25rem solid var(--gray-700);
662 |   }
663 | }
664 | 
665 | /* List
666 | ––––––––––––––––––––––––––––––––– */
667 | ul {
668 |   margin: 0;
669 |   padding: 0 1px;
670 |   list-style: disc outside;
671 | }
672 | 
673 | ol {
674 |   list-style: decimal outside;
675 | }
676 | 
677 | ol,
678 | ul {
679 |   padding-left: 0;
680 |   margin-top: 0;
681 |   margin-bottom: 1.563rem;
682 | }
683 | 
684 | li {
685 |   list-style-position: inside;
686 | }
687 | 
688 | /* Keyboard
689 | ––––––––––––––––––––––––––––––––– */
690 | kbd {
691 |   display: inline-block;
692 |   padding: 0 0.328rem;
693 |   color: var(--gray-700);
694 |   vertical-align: middle;
695 |   background-color: var(--gray-100);
696 |   border: solid 1px var(--gray-300);
697 |   border-bottom: solid 2px var(--gray-500);
698 |   border-radius: 5px;
699 | }
700 | 
701 | /* Abbreviation
702 | ––––––––––––––––––––––––––––––––– */
703 | abbr {
704 |   text-decoration: none;
705 |   border-bottom: 2px dashed var(--gray-600);
706 | }
707 | 
708 | @media (hover: hover) {
709 |   abbr:hover {
710 |     cursor: help;
711 |   }
712 | }
713 | 
714 | .error {
715 |   font-size: 12px;
716 |   color: var(--red-600);
717 |   margin-top: 0.25rem;
718 | }
719 | 
720 | @media (prefers-color-scheme: dark) {
721 |   .error {
722 |     color: var(--red-400);
723 |   }
724 | }
725 | 
726 | button:disabled {
727 |   opacity: 0.5;
728 |   cursor: not-allowed !important;
729 | }
730 | 
731 | button + button {
732 |   margin-left: 0.5rem;
733 | }
734 | 
735 | button.secondary,
736 | button[type="reset"] {
737 |   background-color: var(--gray-300);
738 |   border: 2px solid var(--gray-300);
739 |   color: var(--gray-900);
740 | }
741 | 
742 | button.secondary:hover,
743 | button[type="reset"]:hover {
744 |   background-color: var(--gray-400);
745 | }
746 | 
747 | /* custom */
748 | input[type="email"],
749 | input[type="text"],
750 | input[type="number"],
751 | textarea,
752 | select {
753 |   width: 400px;
754 | }
755 | 
756 | label {
757 |   margin-top: 1rem;
758 | }
759 | 
760 | button[type="submit"] {
761 |   display: block;
762 |   margin-top: 1em;
763 |   text-align: center;
764 | }
765 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | import Navi from './layouts/Navi';
 3 | import Dashboard from './layouts/Dashboard';
 4 | import {Grid} from 'semantic-ui-react';
 5 | import Footer from './layouts/Footer';
 6 | 
 7 | 
 8 | 
 9 | function App() {
10 |   return (
11 |     <div className='App jobSeekerDetail'>
12 |         <Grid >
13 |           <Grid.Row computer={16} >
14 |             <Grid.Column computer={3} id="menu">
15 |               <Navi />
16 |             </Grid.Column>
17 |             <Grid.Column computer={13} >
18 |               <Dashboard />
19 |             </Grid.Column>
20 |           </Grid.Row>
21 |         </Grid>
22 |         <Footer/>
23 |     </div>
24 |   );
25 | }
26 | 
27 | export default App;
28 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | import 'semantic-ui-css/semantic.min.css';
 7 | import { BrowserRouter } from 'react-router-dom';
 8 | 
 9 | ReactDOM.render(
10 |   <BrowserRouter><App/></BrowserRouter>,
11 |   document.getElementById('root')
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/src/layouts/Dashboard.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import ChoosingSignInMethod from '../pages/ChoosingSignInMethod'
 4 | import ChoosingSignUpMethod from '../pages/ChoosingSignUpMethod'
 5 | import EmployerList from '../pages/Employers/EmployerList'
 6 | import JobList from '../pages/Jobs/JobList'
 7 | import JobPositionList from '../pages/JobPositionList'
 8 | import JobSeekerList from '../pages/JobSeekers/JobSeekerList'
 9 | import { Route } from 'react-router'
10 | import EmployerSignUpPage from '../pages/Employers/EmployerSignUpPage'
11 | import JobAddPage from '../pages/Employers/JobAddPage'
12 | import SystemUserSignUpPage from '../pages/SystemUsers/SystemUserSignUpPage'
13 | import JobConfirmationPanel from '../pages/SystemUsers/JobConfirmationPanel'
14 | import JobSeekerSignUpPage from '../pages/JobSeekers/JobSeekerSignUpPage'
15 | import MainPage from '../pages/MainPage'
16 | import JobSeekerDetail from '../pages/JobSeekers/JobSeekerDetail'
17 | import { ToastContainer } from "react-toastify";
18 | import EmployerDetailPage from '../pages/Employers/EmployerDetailPage'
19 | import JobDetailPage from '../pages/Jobs/JobDetailPage'
20 | 
21 | export default function Dashboard() {
22 |     return (
23 |         <div id="content-area">
24 |             <ToastContainer position="bottom-right"/>
25 |             <Route exact path="/" component={MainPage} />
26 |             <Route exact path="/home" component={MainPage} />
27 |             <Route exact path="/jobs" component={JobList} />
28 |             <Route exact path="/jobs/:jobId" component={JobDetailPage} />
29 |             <Route path="/signIn" component={ChoosingSignInMethod} />
30 |             <Route path="/signIn/Employer" component={JobList} />
31 |             <Route path="/signup" component={ChoosingSignUpMethod} />
32 |             <Route path="/signup/employer" component={EmployerSignUpPage} />
33 |             <Route path="/signup/systemuser" component={SystemUserSignUpPage} />
34 |             <Route path="/employer/:employerId" component={JobAddPage} />
35 |             <Route path="/systemuser/:systemUserId" component={JobConfirmationPanel} />
36 |             <Route path="/signup/jobseeker" component={JobSeekerSignUpPage} />
37 |             <Route exact path="/employers" component={EmployerList} />
38 |             <Route exact path="/employers/:employerId" component={EmployerDetailPage} />
39 |             <Route exact path="/jobseekers" component={JobSeekerList} />
40 |             <Route exact path="/jobseekers/:jobSeekerId" component={JobSeekerDetail} />
41 |             <Route exact path="/jobpositions" component={JobPositionList} />
42 |         </div>
43 |     )
44 | }
45 | 


--------------------------------------------------------------------------------
/src/layouts/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default function Footer() {
 4 |     return (
 5 |         <div id="footer">
 6 |             
 7 |         </div>
 8 |     )
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/layouts/Navi.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { Dropdown, Icon, Input, Menu } from 'semantic-ui-react'
 3 | import SignedIn from './SignedIn';
 4 | import SignedOut from './SignedOut';
 5 | import {Link} from 'react-router-dom';
 6 | 
 7 | export default function Navi() {
 8 |   
 9 | 
10 | 
11 |   const [isAuthenticated, setIsAuthanticated] = useState(false)
12 | 
13 |   function handleSignOut(params) {
14 |     setIsAuthanticated(false)
15 |   }
16 | 
17 |   function handleSignIn(params) {
18 |     setIsAuthanticated(true)
19 |   }
20 | 
21 | 
22 |   return (
23 |     <div >
24 |       
25 |       <Menu size='large' vertical inverted >
26 |         <Menu.Item >
27 |           <Input placeholder='Search...' />
28 |         </Menu.Item>
29 | 
30 |         <Menu.Item >
31 |           <Link to='/' >Home</Link>
32 |           <Menu.Menu>
33 |             <Menu.Item
34 |               name='jobs'
35 |               >
36 |               <Link to='/jobs' >Jobs</Link>
37 |             </Menu.Item>
38 |             <Menu.Item
39 |               name='jobSeekers'
40 |               >
41 |               <Link to='/jobseekers' >Job Seekers</Link>
42 |             </Menu.Item>
43 |             <Menu.Item
44 |               name='employers'
45 |               >
46 |               <Link to='/employers' >Employers</Link>
47 |             </Menu.Item>
48 |             <Menu.Item
49 |               name='jobPositions'
50 |               >
51 |               <Link to='/jobpositions' >Job Positions</Link>
52 |             </Menu.Item>
53 |           </Menu.Menu>
54 |         </Menu.Item>
55 | 
56 |         <Menu.Item
57 |           name='browse'
58 |           >
59 |           <Icon name='grid layout' />
60 |           Browse
61 |         </Menu.Item>
62 |         <Menu.Item
63 |           name='messages'
64 |           >
65 |           Messages
66 |         </Menu.Item>
67 |         <Dropdown item text='More'>
68 |           <Dropdown.Menu >
69 |             <Dropdown.Item icon='edit' text='Edit Profile' />
70 |             <Dropdown.Item icon='globe' text='Choose Language' />
71 |             <Dropdown.Item icon='settings' text='Account Settings' />
72 |           </Dropdown.Menu>
73 |         </Dropdown>
74 | 
75 |         <Menu.Item >
76 |           {isAuthenticated ? <SignedIn signedOut={handleSignOut}/> : <SignedOut signedIn={handleSignIn}/>}
77 |         </Menu.Item>
78 | 
79 | 
80 |       </Menu>
81 |     </div>
82 |   );
83 | }
84 | 


--------------------------------------------------------------------------------
/src/layouts/SignedIn.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default function SignedIn() {
 4 |     return (
 5 |         <div>
 6 |             
 7 |         </div>
 8 |     )
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/layouts/SignedOut.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | // import { useState } from 'react';
 3 | import {Button} from 'semantic-ui-react';
 4 | import { NavLink } from 'react-router-dom'
 5 | 
 6 | export default function SignedOutSignedOut(params) {
 7 | 
 8 |     // const [signUpOrIn, setSignUpOrIn] = useState()
 9 | 
10 | 
11 | 
12 |   return (
13 |     <div>
14 |       <Button.Group  >
15 |         <Button inverted color="blue" as={NavLink} to={"/signUp"}>Sign Up</Button>
16 |         <Button.Or />
17 |         <Button as={NavLink} to={"/signIn"} inverted color="teal" >Sign In</Button>
18 |       </Button.Group>
19 |     </div>
20 |   );
21 | }
22 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/src/pages/ChoosingSignInMethod.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {Button, Header} from 'semantic-ui-react';
 3 | 
 4 | export default function ChoosingSignInMethod() {
 5 |   return (
 6 |     <div>
 7 |       <Header as='h2' textAlign='center' class='ui white'>
 8 |         Sign In As a ...
 9 |       </Header>
10 |       <Button.Group widths='3' >
11 |         <Button>Job Seeker</Button>
12 |         <Button>Employer</Button>
13 |         <Button>System User</Button>
14 |       </Button.Group>
15 |     </div>
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/src/pages/ChoosingSignUpMethod.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import {Button, Header} from 'semantic-ui-react';
 3 | import { NavLink } from 'react-router-dom';
 4 | 
 5 | 
 6 | export default function ChoosingSignUpMethod() {
 7 | 
 8 |   const [colorOfTitle, setcolorOfTitle] = useState("black")
 9 | 
10 |   return (
11 |     <div>
12 |       <Header as='h2' textAlign='center' class='ui white' color={colorOfTitle}>
13 |         Sign Up As a ...
14 |       </Header>
15 |       <Button.Group widths='3'  >
16 |         <Button color="red" inverted onClick={() => setcolorOfTitle("red")} as={NavLink} to={'/signup/jobseeker' }>Job Seeker</Button>
17 |         <Button color="pink" inverted onClick={() => setcolorOfTitle("pink")}  as={NavLink} to={'/signup/employer' }>Employer</Button>
18 |         <Button color="orange" inverted onClick={() => setcolorOfTitle("orange")} as={NavLink} to={'/signup/systemuser' }>System User</Button>
19 |       </Button.Group>
20 |     </div>
21 |   );
22 | }


--------------------------------------------------------------------------------
/src/pages/Employers/EmployerDetailPage.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react';
  2 | import { useParams } from 'react-router';
  3 | import { Table, Header, Grid, Segment,Icon, Label, Divider } from 'semantic-ui-react';
  4 | import { Link } from 'react-router-dom';
  5 | import EmployerService from '../../services/EmployerService';
  6 | 
  7 | export default function EmployerDetailPage() {
  8 |     const { employerId } = useParams()
  9 |     // const history = useHistory();
 10 |     const [employer, setEmployer] = useState({})
 11 |     useEffect(() => {
 12 |         let employerService = new EmployerService();
 13 |         employerService.getEmployerById(employerId).then((result) => setEmployer(result.data.data)).catch()
 14 | 
 15 |     }, [employerId])
 16 | 
 17 |     return (
 18 |         <Grid >
 19 |             <Grid.Row>
 20 |                 <Grid.Column computer={12}>
 21 |                     {employer.webSites?.length < 1 ? null :
 22 |                         <Grid.Row className="marginBottomMedium">
 23 |                             <Grid.Column computer={16}>
 24 |                                 <Segment.Group>
 25 |                                     <Segment vertical color="pink" padded="very" secondary rounded="true" stacked>
 26 |                                         <Label attached='top' color="pink" basic><Header color="pink" as="h3">COMPANY</Header></Label>
 27 |                                         <Table basic="very" textAlign='center' striped>
 28 |                                             <Table.Header>
 29 |                                                 <Table.Row>
 30 |                                                     <Table.HeaderCell ><Icon size="large" name="building outline"/>Company</Table.HeaderCell>
 31 |                                                     <Table.HeaderCell ><Icon name="desktop"/> Website</Table.HeaderCell>
 32 |                                                 </Table.Row>
 33 |                                             </Table.Header>
 34 |                                             <Table.Body>
 35 |                                                 <Table.Row>
 36 |                                                     <Table.Cell>
 37 |                                                         <Header as='h4' image>
 38 | 
 39 |                                                             <Header.Content>
 40 |                                                                 {employer.companyName}
 41 |                                                                 <Header.Subheader>{}</Header.Subheader>
 42 |                                                             </Header.Content>
 43 |                                                         </Header>
 44 |                                                     </Table.Cell>
 45 |                                                     <Table.Cell ><Header as="h4" color="pink">{employer.webSites}</Header></Table.Cell>
 46 |                                                 </Table.Row>
 47 |                                             </Table.Body>
 48 |                                         </Table>
 49 |                                     </Segment>
 50 |                                 </Segment.Group>
 51 |                             </Grid.Column>
 52 |                         </Grid.Row>
 53 |                     }
 54 | 
 55 |                     {employer.webSites?.length < 1 ? null :
 56 |                         <Grid.Row className="marginBottomMedium">
 57 |                             <Grid.Column computer={16}>
 58 |                                 <Segment.Group>
 59 |                                     <Segment vertical color="pink" padded="very" secondary rounded="true" stacked>
 60 |                                         <Label attached='top' color="pink" basic><Header color="pink" as="h3">OFFERS</Header></Label>
 61 |                                         <Table basic="very" textAlign='center' striped>
 62 |                                             <Table.Header>
 63 |                                                 <Table.Row>
 64 |                                                     <Table.HeaderCell ><Icon size="large" name="building outline"/>BETA</Table.HeaderCell>
 65 |                                                     <Table.HeaderCell ><Icon name="desktop"/> BETA</Table.HeaderCell>
 66 |                                                 </Table.Row>
 67 |                                             </Table.Header>
 68 |                                             <Table.Body>
 69 |                                                 <Table.Row>
 70 |                                                     <Table.Cell>
 71 |                                                         <Header as='h4' image>
 72 | 
 73 |                                                             <Header.Content>
 74 |                                                                 BETA
 75 |                                                                 <Header.Subheader>BETA</Header.Subheader>
 76 |                                                             </Header.Content>
 77 |                                                         </Header>
 78 |                                                     </Table.Cell>
 79 |                                                     <Table.Cell ><Header as="h4" color="pink">BETA</Header></Table.Cell>
 80 |                                                 </Table.Row>
 81 |                                             </Table.Body>
 82 |                                         </Table>
 83 |                                     </Segment>
 84 |                                 </Segment.Group>
 85 |                             </Grid.Column>
 86 |                         </Grid.Row>
 87 |                     }
 88 | 
 89 |                 </Grid.Column>
 90 |                 <Grid.Column computer={4}>
 91 |                     <Segment.Group>
 92 |                         <Segment vertical color="pink" padded="very" secondary rounded="true" stacked>
 93 |                             <Label attached='top' color="pink" basic><Header color="pink" as="h3">CONTACT</Header></Label>
 94 |                             <Header as="h4">{employer.user?.email}</Header>
 95 |                             <Divider horizontal>
 96 |                                 <div class='ui pointing red basic label'>Email</div>
 97 |                             </Divider>
 98 |                             <Header as="h4">{employer.phone}</Header>
 99 |                             <Divider horizontal>
100 |                                 <div class='ui pointing green basic label'>Phone Number</div>
101 |                             </Divider>
102 |                             
103 |                         </Segment>
104 |                     </Segment.Group>
105 |                 </Grid.Column>
106 |             </Grid.Row>
107 |         </Grid>
108 |     )
109 | }


--------------------------------------------------------------------------------
/src/pages/Employers/EmployerList.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react'
 2 | import EmployerService from '../../services/EmployerService'
 3 | import { Table, Header, Button, Icon } from 'semantic-ui-react';
 4 | import { Link } from 'react-router-dom';
 5 | 
 6 | export default function EmployerList() {
 7 | 
 8 |   const [employers, setEmployers] = useState([])
 9 |   useEffect(() => {
10 |     let employerService = new EmployerService();
11 | 
12 |     employerService.getEmployers().then((result) => setEmployers(result.data.data)).catch();
13 |   }, [])
14 | 
15 |   return (
16 |     <div>
17 |       <Table celled padded color="black" inverted>
18 |         <Table.Header>
19 |           <Table.Row>
20 |             <Table.HeaderCell singleLine>Company Name</Table.HeaderCell>
21 |             <Table.HeaderCell>Website(-s)</Table.HeaderCell>
22 |             <Table.HeaderCell>Phone Number</Table.HeaderCell>
23 |             <Table.HeaderCell>Email</Table.HeaderCell>
24 |             <Table.HeaderCell>Joined Date</Table.HeaderCell>
25 |             <Table.HeaderCell>Other infos</Table.HeaderCell>
26 |           </Table.Row>
27 |         </Table.Header>
28 |         <Table.Body>
29 | 
30 |           {employers.map(employer => (
31 | 
32 |             <Table.Row key={employer.id} textAlign='center'>
33 |               <Table.Cell>
34 |                 <Header as='h2' textAlign='center' className="ui white" id="white-employername" >
35 |                   {employer.companyName}
36 |                 </Header>
37 |               </Table.Cell>
38 |               <Table.Cell singleLine>{employer.webSites}</Table.Cell>
39 |               <Table.Cell singleLine>{employer.phone}</Table.Cell>
40 |               <Table.Cell singleLine>{employer.user.email}</Table.Cell>
41 |               <Table.Cell singleLine>{employer.user.createdDate}</Table.Cell>
42 |               <Table.Cell>
43 |                 <Button animated as={Link} color="pink" basic inverted to={`/employers/${employer.id}`}>
44 |                   <Button.Content visible>Go to infos</Button.Content>
45 |                   <Button.Content hidden>
46 |                     <Icon name="arrow right" />
47 |                   </Button.Content>
48 |                 </Button>
49 |               </Table.Cell>
50 |             </Table.Row>
51 |           ))}
52 |         </Table.Body>
53 |       </Table>
54 |     </div>
55 |   )
56 | }
57 | 


--------------------------------------------------------------------------------
/src/pages/Employers/EmployerSignUpPage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {Header, Button} from 'semantic-ui-react';
 3 | import {Formik, Form, useField} from 'formik';
 4 | import * as Yup from 'yup';
 5 | import {useHistory} from 'react-router-dom';
 6 | 
 7 | export default function EmployerSignUpPage() {
 8 |   const history = useHistory();
 9 | 
10 |   const TextField = ({label, ...props}) => {
11 |     // useField() returns [formik.getFieldProps(), formik.getFieldMeta()]
12 |     // which we can spread on <input>. We can use field meta to show an error
13 |     // message if the field is invalid and it has been touched (i.e. visited)
14 |     const [field, meta] = useField(props);
15 |     return (
16 |       <div>
17 |         <div className='ui input'>
18 |           <label
19 |             className='labelForEmployerSignUp'
20 |             for={props.id || props.name}>
21 |             {label}{' '}
22 |           </label>
23 | 
24 |           <input type='text' {...field} {...props} />
25 |         </div>
26 |         <br />
27 |         {meta.touched && meta.error ? (
28 |           <div className='error'>
29 |             <div class='ui pointing red basic label'>{meta.error}</div>
30 |           </div>
31 |         ) : null}
32 |       </div>
33 |     );
34 |   };
35 | 
36 |   return (
37 |     <div className='employer-header'>
38 |       <Header as='h2' color='pink'>
39 |         Employer
40 |       </Header>
41 | 
42 |       <Formik
43 |         initialValues={{
44 |           id: '',
45 |         }}
46 |         validationSchema={Yup.object({
47 |           id: Yup.number().required('Required')
48 |         })}
49 |         onSubmit={(values) => {
50 | 
51 |           history.push('/employer/' + values.id);
52 |         }}>
53 |         <Form>
54 |           <TextField
55 |             label='Id'
56 |             name='id'
57 |             id="id"
58 |             type='text'
59 |             placeholder='1,2,3 etc...'
60 |           />
61 |           <br />
62 | 
63 |           <Button color='blue' inverted type='submit'>
64 |             Submit
65 |           </Button>
66 |         </Form>
67 |       </Formik>
68 |     </div>
69 |   );
70 | }
71 | 


--------------------------------------------------------------------------------
/src/pages/Employers/JobAddPage.jsx:
--------------------------------------------------------------------------------
  1 | import {Formik, Form, useField} from 'formik';
  2 | import React, {useEffect, useState} from 'react';
  3 | import {useHistory, useParams} from 'react-router';
  4 | import JobService from '../../services/JobService';
  5 | import JobPositionService from '../../services/JobPositionService';
  6 | import CityService from '../../services/CityService';
  7 | import WorkPlaceService from '../../services/WorkPlaceService';
  8 | import WorkTimeService from '../../services/WorkTimeService';
  9 | import * as Yup from 'yup';
 10 | import {
 11 |   Button,
 12 |   Dropdown,
 13 |   Grid,
 14 |   Header,
 15 |   Label,
 16 |   Checkbox,
 17 | } from 'semantic-ui-react';
 18 | 
 19 | export default function JobAddPage() {
 20 |   let {employerId} = useParams();
 21 | 
 22 |   let jobService = new JobService();
 23 |   const history = useHistory();
 24 | 
 25 |   const [workTimes, setWorkTimes] = useState([]);
 26 |   const [workPlaces, setWorkPlaces] = useState([]);
 27 |   const [cities, setCities] = useState([]);
 28 |   const [jobPositions, setJobPositions] = useState([]);
 29 | 
 30 |   useEffect(() => {
 31 |     let workPlaceService = new WorkPlaceService();
 32 |     let workTimeService = new WorkTimeService();
 33 |     let cityService = new CityService();
 34 |     let jobPositionService = new JobPositionService();
 35 | 
 36 |     workPlaceService
 37 |       .getWorkPlaces()
 38 |       .then((result) => setWorkPlaces(result.data.data));
 39 | 
 40 |     workTimeService
 41 |       .getWorkTimes()
 42 |       .then((result) => setWorkTimes(result.data.data));
 43 | 
 44 |     cityService
 45 |       .getCities()
 46 |       .then((result) => setCities(result.data.data))
 47 |       .catch();
 48 |     jobPositionService
 49 |       .getJobPositions()
 50 |       .then((result) => setJobPositions(result.data.data))
 51 |       .catch();
 52 |   }, []);
 53 | 
 54 |   const workTimeOptions = workTimes.map((workTime, index) => ({
 55 |     key: index,
 56 |     text: workTime.workTimeName,
 57 |     value: workTime.id,
 58 |   }));
 59 | 
 60 |   const WorkPlaceOptions = workPlaces.map((workPlace, index) => ({
 61 |     key: index,
 62 |     text: workPlace.workPlaceName,
 63 |     value: workPlace.id,
 64 |   }));
 65 | 
 66 |   const CityOptions = cities.map((city, index) => ({
 67 |     key: index,
 68 |     text: city.cityName,
 69 |     value: city.id,
 70 |   }));
 71 | 
 72 |   const JobPositionOptions = jobPositions.map((jobPosition, index) => ({
 73 |     key: index,
 74 |     text: jobPosition.position_name,
 75 |     value: jobPosition.id,
 76 |   }));
 77 | 
 78 |   const InputField = ({label, ...props}) => {
 79 |     // useField() returns [formik.getFieldProps(), formik.getFieldMeta()]
 80 |     // which we can spread on <input>. We can use field meta to show an error
 81 |     // message if the field is invalid and it has been touched (i.e. visited)
 82 |     const [field, meta] = useField(props);
 83 |     return (
 84 |       <div>
 85 |         <div className='ui input'>
 86 |           <label className='labelForJobAddFields' for={props.id || props.name}>
 87 |             {label}
 88 |             <br />
 89 |           </label>
 90 | 
 91 |           <input {...field} {...props} />
 92 |         </div>
 93 |         <br />
 94 |         {meta.touched && meta.error ? (
 95 |           <div className='error'>
 96 |             <div class='ui pointing red basic label'>{meta.error}</div>
 97 |           </div>
 98 |         ) : null}
 99 |       </div>
100 |     );
101 |   };
102 | 
103 |   const TrueFalse = ({children, ...props}) => {
104 |     // React treats radios and checkbox inputs differently other input types, select, and textarea.
105 |     // Formik does this too! When you specify `type` to useField(), it will
106 |     // return the correct bag of props for you -- a `checked` prop will be included
107 |     // in `field` alongside `name`, `value`, `onChange`, and `onBlur`
108 |     const [field, meta] = useField({...props, type: 'checkbox'});
109 |     return (
110 |       <div>
111 |         <Checkbox {...field} {...props} />
112 | 
113 |         {meta.touched && meta.error ? (
114 |           <Label basic color='red' pointing='left'>
115 |             <div className='error'>{meta.error}</div>
116 |           </Label>
117 |         ) : null}
118 |       </div>
119 |     );
120 |   };
121 | 
122 |   const SelectionFields = ({label, ...props}) => {
123 |     const [field, meta] = useField(props);
124 |     return (
125 |       <div>
126 |         <label for={props.id || props.name}>{label}</label>
127 |         <Dropdown fluid clearable item search selection {...field} {...props} />
128 | 
129 |         {meta.touched && meta.error ? (
130 |           <div class='ui pointing red basic label'>{meta.error}</div>
131 |         ) : null}
132 |       </div>
133 |     );
134 |   };
135 | 
136 |   const handleChangeSemantic = (prop, value, fieldName) => {
137 |     prop.setFieldValue(fieldName, value);
138 |   };
139 | 
140 |   const handleOnSubmit = (values) => {
141 |     values.employerId = employerId;
142 |     values.createdDate = new Date();
143 |     jobService.addJob(values);
144 |     alert("Job added. After system user's confirmation, it will be listed.");
145 |     history.push('/');
146 |   };
147 |   return (
148 |     <div className='marginTop '>
149 |       <Header
150 |         as='h1'
151 |         textAlign='center'
152 |         color='pink'
153 |         className='ui marginBottom'
154 |         id='headerForJob'>
155 |         Add Job
156 |       </Header>
157 |       <Formik
158 |         initialValues={{
159 |           numberOfEmptyPositions: '',
160 |           maximumSalary: '',
161 |           minimumSalary: '',
162 |           description: '',
163 |           deadline: '',
164 |           cityId: '',
165 |           jobPositionId: '',
166 |           workTimeId: '',
167 |           workPlaceId: '',
168 |           agreeCheckBox: ''
169 |         }}
170 |         validationSchema={Yup.object({
171 |           numberOfEmptyPositions: Yup.string().required(
172 |             'You have to indicate the number of empty positions!'
173 |           ),
174 |           minimumSalary: Yup.number()
175 |             .min(0, 'Salary can not be less than 0!')
176 |             .required('You have to indicate the minimum salary of job!'),
177 |           maximumSalary: Yup.number()
178 |             .min(0, 'Salary can not be less than 0!')
179 |             .required('You have to indicate the maximum salary of job!'),
180 |           description: Yup.string().required('You have to add description!'),
181 |           deadline: Yup.date()
182 |             .required('Deadline of the job is required!')
183 |             .min(new Date(), 'deadline must be in the future'),
184 |           workTimeId: Yup.string().required('Work Time must be chosen'),
185 |           cityId: Yup.string().required('City must be chosen!'),
186 |           workPlaceId: Yup.string().required('Work Time must be chosen!'),
187 |           jobPositionId: Yup.string().required('Job Position must be chosen!'),
188 |           agreeCheckBox: Yup.boolean()
189 |              .required('Required')
190 |              .oneOf([true], 'You must accept the terms and conditions.'),
191 |         })}
192 |         onSubmit={(values) => {
193 |           handleOnSubmit(values);
194 |         }}>
195 |         {(formikprops) => (
196 |           <Form onSubmit={formikprops.handleSubmit}>
197 |             <Grid stackable>
198 |               <Grid.Row computer={2}>
199 |                 <Grid.Column computer={8}>
200 |                   <InputField
201 |                     label='Empty Positions'
202 |                     name='numberOfEmptyPositions'
203 |                     type='number'
204 |                     placeholder='1,2,3 etc...'
205 |                   />
206 |                 </Grid.Column>
207 |                 <Grid.Column computer={8} >
208 |                   <div className='marginLeft'>
209 |                     <InputField
210 |                       label='Description'
211 |                       name='description'
212 |                       size='massive'
213 |                       type='text'
214 |                       placeholder='Looking for game developers, web dev. etc...'
215 |                       value={formikprops.values.description}
216 |                     />
217 |                   </div>
218 |                 </Grid.Column>
219 |               </Grid.Row>
220 |               <Grid.Row>
221 |                 <Grid.Column computer={8}>
222 |                   <InputField
223 |                     label='Salary(minimum) '
224 |                     name='minimumSalary'
225 |                     type='number'
226 |                     placeholder='3500, 5000 etc...'
227 |                   />
228 |                 </Grid.Column>
229 | 
230 |                 <Grid.Column computer={8}>
231 |                   <InputField
232 |                     label='Salary(maximum) '
233 |                     name='maximumSalary'
234 |                     type='number'
235 |                     placeholder='5000, 7500 etc...'
236 |                   />
237 |                 </Grid.Column>
238 |               </Grid.Row>
239 | 
240 |               <Grid.Row computer={1}>
241 |                 <Grid.Column computer={8}>
242 |                   <SelectionFields
243 |                     id='jobPositionId'
244 |                     name='jobPositionId'
245 |                     label='Job Position'
246 |                     options={JobPositionOptions}
247 |                     placeholder='C# dev, Java Uzmanı etc.'
248 |                     onChange={(event, data) =>
249 |                       handleChangeSemantic(
250 |                         formikprops,
251 |                         data.value,
252 |                         'jobPositionId'
253 |                       )
254 |                     }
255 |                   />
256 |                 </Grid.Column>
257 |                 <Grid.Column computer={8}>
258 |                   <SelectionFields
259 |                     id='cityId'
260 |                     name='cityId'
261 |                     label='City'
262 |                     placeholder='City'
263 |                     onChange={(event, data) =>
264 |                       handleChangeSemantic(formikprops, data.value, 'cityId')
265 |                     }
266 |                     value={formikprops.values.cityId}
267 |                     item
268 |                     options={CityOptions}
269 |                   />
270 |                 </Grid.Column>
271 |               </Grid.Row>
272 | 
273 |               <Grid.Row computer={5}>
274 |                 <Grid.Column computer={8}>
275 |                   <SelectionFields
276 |                     id='workTimeId'
277 |                     name='workTimeId'
278 |                     label='Work Time'
279 |                     options={workTimeOptions}
280 |                     placeholder='part-time / full-time'
281 |                     value={formikprops.values.workTimeid}
282 |                     onChange={(event, data) =>
283 |                       handleChangeSemantic(
284 |                         formikprops,
285 |                         data.value,
286 |                         'workTimeId'
287 |                       )
288 |                     }
289 |                   />
290 |                 </Grid.Column>
291 |                 <Grid.Column computer={8}>
292 |                   <SelectionFields
293 |                     id='workPlaceId'
294 |                     name='workPlaceId'
295 |                     label='Work Place'
296 |                     options={WorkPlaceOptions}
297 |                     placeholder='At the workplace / remote work'
298 |                     value={formikprops.values.workPlaceId}
299 |                     onChange={(event, data) =>
300 |                       handleChangeSemantic(
301 |                         formikprops,
302 |                         data.value,
303 |                         'workPlaceId'
304 |                       )
305 |                     }
306 |                   />
307 |                 </Grid.Column>
308 |               </Grid.Row>
309 | 
310 |               <Grid.Row columns={1}>
311 |                 <Grid.Column computer={16}>
312 |                   <InputField
313 |                     style={{width: '100%'}}
314 |                     label='Deadline'
315 |                     name='deadline'
316 |                     type='date'
317 |                     placeholder='2022-06-27, 2022-06-27T13:28:17.707Z etc...'
318 |                     id='deadline'
319 |                   />
320 |                 </Grid.Column>
321 |               </Grid.Row>
322 |             </Grid>
323 |             <Grid.Row columns={1}>
324 |               <Grid.Column>
325 |                 <TrueFalse
326 |                   label='I agree to the terms and conditions'
327 |                   name='agreeCheckBox'
328 |                   id='agreeCheckBox'
329 |                 />
330 |               </Grid.Column>
331 |             </Grid.Row>
332 | 
333 |             <br />
334 | 
335 |             <Button
336 |               color='pink'
337 |               icon='add'
338 |               inverted
339 |               content='Add'
340 |               labelPosition='right'
341 |               type='submit'
342 |             />
343 |           </Form>
344 |         )}
345 |       </Formik>
346 |     </div>
347 |   );
348 | }
349 | 


--------------------------------------------------------------------------------
/src/pages/JobPositionList.jsx:
--------------------------------------------------------------------------------
 1 | import React, {useEffect, useState} from 'react';
 2 | import {Table, Header} from 'semantic-ui-react';
 3 | import JobPositionService from '../services/JobPositionService';
 4 | 
 5 | export default function JobPositionList() {
 6 |   const [jobPositions, setJobPositions] = useState([]);
 7 |   useEffect(() => {
 8 |     let jobPositionService = new JobPositionService();
 9 | 
10 |     jobPositionService
11 |       .getJobPositions()
12 |       .then((result) => setJobPositions(result.data.data))
13 |       .catch();
14 |   });
15 | 
16 |   return (
17 |     <div>
18 |       <Table celled padded inverted>
19 |         <Table.Header>
20 |           <Table.Row>
21 |             <Table.HeaderCell singleLine>Position Name</Table.HeaderCell>
22 |             <Table.HeaderCell>Id of Position</Table.HeaderCell>
23 |           </Table.Row>
24 |         </Table.Header>
25 |         <Table.Body>
26 |           {jobPositions.map((jobPosition) => (
27 |             <Table.Row key={jobPosition.id}>
28 |               <Table.Cell>
29 |                 <Header as='h2' textAlign='center' className='ui white'>
30 |                   {jobPosition.position_name}
31 |                 </Header>
32 |               </Table.Cell>
33 |               <Table.Cell singleLine textAlign='center'>
34 |                 {jobPosition.id}
35 |               </Table.Cell>
36 |             </Table.Row>
37 |           ))}
38 |         </Table.Body>
39 |       </Table>
40 |     </div>
41 |   );
42 | }
43 | 


--------------------------------------------------------------------------------
/src/pages/JobSeekers/JobSeekerDetail.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react'
  2 | import { useParams } from 'react-router';
  3 | // import {  useHistory } from 'react-router';
  4 | import { Table, Header, Grid, Segment, Image, Card, Label, Divider } from 'semantic-ui-react';
  5 | import JobSeekerService from '../../services/JobSeekerService'
  6 | 
  7 | export default function JobSeekerDetail() {
  8 | 
  9 |     const { jobSeekerId } = useParams()
 10 |     // const history = useHistory();
 11 |     const [jobSeeker, setJobSeeker] = useState({})
 12 |     useEffect(() => {
 13 |         let jobSeekerService = new JobSeekerService();
 14 |         jobSeekerService.getJobSeekerById(jobSeekerId).then((result) => setJobSeeker(result.data.data)).catch()
 15 | 
 16 |     }, [jobSeekerId])
 17 | 
 18 | 
 19 |     return (
 20 |         <Grid className="jobSeekerDetail">
 21 |             <Grid.Row >
 22 |                 <Grid.Column computer={16}>
 23 |                     <Segment.Group>
 24 |                         <Segment vertical color="red" padded="very" secondary rounded="true" stacked>
 25 |                             <Grid compact="true">
 26 |                                 <Grid.Row>
 27 |                                     <Grid.Column computer={16}>
 28 |                                         <Image src="https://react.semantic-ui.com/images/wireframe/square-image.png" size="normal" floated="left" verticalAlign='bottom' circular />
 29 |                                         <Grid compact="true">
 30 |                                             <Grid.Row>
 31 |                                                 <Grid.Column computer={16}>
 32 |                                                     <Header as="h1" floated="left" content={jobSeeker.firstName + " " + jobSeeker.lastName} subheader={jobSeeker.user?.email} dividing />
 33 |                                                 </Grid.Column>
 34 |                                             </Grid.Row>
 35 |                                             <Grid.Row >
 36 |                                                 <Grid.Column computer={6} textAlign="justified">
 37 |                                                     {!!jobSeeker.info ? <p className="left floated">{jobSeeker.info}</p> : <p className="left floated">There is no informaiton about {jobSeeker.firstName + " " + jobSeeker.lastName}...</p>}
 38 |                                                 </Grid.Column>
 39 |                                             </Grid.Row>
 40 |                                         </Grid>
 41 |                                     </Grid.Column>
 42 |                                 </Grid.Row>
 43 |                             </Grid>
 44 |                         </Segment>
 45 |                     </Segment.Group>
 46 |                 </Grid.Column>
 47 |             </Grid.Row>
 48 |             <Grid.Row>
 49 |                 <Grid.Column computer={12}>
 50 |                     {jobSeeker.attendedSchools?.length === 0 ? null :
 51 |                         <Grid.Row className="marginBottomMedium">
 52 |                             <Grid.Column computer={16} >
 53 |                                 <Segment.Group>
 54 |                                     <Segment vertical color="red" padded="very" secondary rounded="true" stacked>
 55 |                                         <Label attached='top' basic color="red" ><Header color="red" as="h3">EDUCATION</Header></Label>
 56 |                                         <Card.Group centered itsPerRow={6}>
 57 |                                             {jobSeeker.attendedSchools?.map((school) =>
 58 | 
 59 |                                                 <Card key={school.id} color="pink">
 60 |                                                     <Card.Content>
 61 |                                                         <Card.Header>{school.school.schoolName}</Card.Header>
 62 |                                                         <Card.Meta>{school.dateOfStarting} - {school.dateOfGraduation}</Card.Meta>
 63 |                                                         <Card.Description>
 64 | 
 65 |                                                         </Card.Description>
 66 |                                                     </Card.Content>
 67 |                                                 </Card>
 68 |                                             )}
 69 |                                         </Card.Group>
 70 |                                     </Segment>
 71 |                                 </Segment.Group>
 72 |                             </Grid.Column>
 73 |                         </Grid.Row>
 74 |                     }
 75 |                     {jobSeeker.languages?.length === 0 ? null :
 76 |                         <Grid.Row className="marginBottomMedium">
 77 |                             <Grid.Column computer={16}>
 78 |                                 <Segment.Group>
 79 |                                     <Segment vertical color="red" padded="very" secondary rounded="true" stacked>
 80 |                                         <Label attached='top' color="red" basic><Header color="red" as="h3">FOREIGN LANGUAGE</Header></Label>
 81 |                                         <Table basic="very" textAlign='center' striped>
 82 |                                             <Table.Header>
 83 |                                                 <Table.Row>
 84 |                                                     <Table.HeaderCell >Language Name</Table.HeaderCell>
 85 |                                                     <Table.HeaderCell>Level</Table.HeaderCell>
 86 |                                                 </Table.Row>
 87 |                                             </Table.Header>
 88 |                                             <Table.Body>
 89 |                                                 {jobSeeker.languages?.map((language) =>
 90 |                                                     <Table.Row key={language.id}>
 91 |                                                         <Table.Cell>
 92 |                                                             <Header as='h4' image>
 93 | 
 94 |                                                                 <Header.Content>
 95 |                                                                     {language.languageName}
 96 |                                                                     <Header.Subheader>{language.languageLevel.levelDescription}</Header.Subheader>
 97 |                                                                 </Header.Content>
 98 |                                                             </Header>
 99 |                                                         </Table.Cell>
100 |                                                         <Table.Cell >{language.languageLevel.id}</Table.Cell>
101 |                                                     </Table.Row>
102 |                                                 )}
103 |                                             </Table.Body>
104 |                                         </Table>
105 |                                     </Segment>
106 |                                 </Segment.Group>
107 |                             </Grid.Column>
108 |                         </Grid.Row>
109 |                     }
110 |                     {jobSeeker.workExperiences?.length === 0 ? null :
111 |                         <Grid.Row className="marginBottomMedium">
112 |                             <Grid.Column computer={16} >
113 |                                 <Segment.Group>
114 |                                     <Segment vertical color="red" padded="very" secondary rounded="true" stacked>
115 |                                         <Label attached='top' color="red" basic><Header color="red" as="h3">WORK EXPERIENCE</Header></Label>
116 |                                         <Card.Group centered itsPerRow={6}>
117 |                                             {jobSeeker.workExperiences?.map((experience) =>
118 |                                                 <Card key={experience.id} color="pink">
119 |                                                     <Card.Content>
120 |                                                         <Card.Header>{experience.workplaceName}</Card.Header>
121 |                                                         <Card.Meta>{experience.startingDate} - {experience.quitDate}</Card.Meta>
122 |                                                         <Card.Description>
123 |                                                             {experience.jobPosition.position_name}
124 |                                                         </Card.Description>
125 |                                                     </Card.Content>
126 |                                                 </Card>
127 |                                             )}
128 |                                         </Card.Group>
129 |                                     </Segment>
130 |                                 </Segment.Group>
131 |                             </Grid.Column>
132 |                         </Grid.Row>
133 |                     }
134 |                 </Grid.Column>
135 |                 <Grid.Column computer={4}>
136 |                     <Segment.Group>
137 |                         <Segment vertical color="red" padded="very" secondary rounded="true" stacked>
138 |                             <Label attached='top' color="red" basic><Header color="red" as="h3">CONTACT</Header></Label>
139 |                             <Header as="h4">{jobSeeker.user?.email}</Header>
140 |                             <Divider horizontal>
141 |                                 <div class='ui pointing red basic label'>Email</div>
142 |                             </Divider>
143 |                             <Header as="h4">{jobSeeker.linkedInAccount}</Header>
144 |                             <Divider horizontal>
145 |                                 <div class='ui pointing teal basic label'>LinkedIn</div>
146 |                             </Divider>
147 |                             <Header as="h4">{jobSeeker.githubAccount}</Header>
148 |                             <Divider horizontal>
149 |                                 <div class='ui pointing black basic label'>Github</div>
150 |                             </Divider>
151 |                         </Segment>
152 |                     </Segment.Group>
153 |                 </Grid.Column>
154 |             </Grid.Row>
155 |         </Grid>
156 |     )
157 | }
158 | 


--------------------------------------------------------------------------------
/src/pages/JobSeekers/JobSeekerList.jsx:
--------------------------------------------------------------------------------
  1 | import React, {useEffect, useState} from 'react';
  2 | import {Table, Header, Button, Icon} from 'semantic-ui-react';
  3 | import JobSeekerService from '../../services/JobSeekerService';
  4 | import { Link } from 'react-router-dom';
  5 | 
  6 | export default function JobSeekerList() {
  7 |   const [jobSeekers, setJobSeekers] = useState([]);
  8 |   useEffect(() => {
  9 |     let jobSeekerService = new JobSeekerService();
 10 |     jobSeekerService
 11 |       .getJobSeekers()
 12 |       .then((result) => setJobSeekers(result.data.data))
 13 |       .catch();
 14 |   }, []);
 15 | 
 16 |   return (
 17 |     <div>
 18 |       <Table celled padded inverted textAlign="center">
 19 |         <Table.Header>
 20 |           <Table.Row>
 21 |             <Table.HeaderCell>images</Table.HeaderCell>
 22 |             <Table.HeaderCell singleLine>Name</Table.HeaderCell>
 23 |             <Table.HeaderCell>languages</Table.HeaderCell>
 24 |             <Table.HeaderCell>work experiences</Table.HeaderCell>
 25 |             <Table.HeaderCell>attended Schools</Table.HeaderCell>
 26 |             
 27 |             <Table.HeaderCell>description</Table.HeaderCell>
 28 |             <Table.HeaderCell>Other infos</Table.HeaderCell>
 29 |           </Table.Row>
 30 |         </Table.Header>
 31 | 
 32 |         <Table.Body>
 33 |           {jobSeekers.map((jobseeker) => (
 34 |             <Table.Row key={jobseeker.id} textAlign='center'>
 35 |               <Table.Cell>
 36 |                 {jobseeker.images.imagePath == null ? (
 37 |                   <i className='huge icon'>
 38 |                     <i className='user  circle icon'></i>
 39 |                   </i>
 40 |                 ) : (
 41 |                   <img src={jobseeker.images.imagePath} alt=''></img>
 42 |                 )}
 43 |               </Table.Cell>
 44 |               <Table.Cell>
 45 |                 <Header
 46 |                   as='h4'
 47 |                   textAlign='center'
 48 |                   className='ui white'
 49 |                   id='white-jobseeker'>
 50 |                   {jobseeker.firstName + ' ' + jobseeker.lastName}
 51 |                 </Header>
 52 |               </Table.Cell>
 53 |               <Table.Cell>
 54 |                 {jobseeker.languages.length === 0
 55 |                   ? 'null'
 56 |                   : jobseeker.languages.map(
 57 |                       (language) =>
 58 |                         language.languageName +
 59 |                         ' level : ' +
 60 |                         language.languageLevel.id
 61 |                     )}
 62 |               </Table.Cell>
 63 |               <Table.Cell>
 64 |                 {!(!!jobseeker.workExperiences)
 65 |                   ? 'null'
 66 |                   : jobseeker.workExperiences.map(
 67 |                       (workExperience) =>
 68 |                         'Work place : ' +
 69 |                         workExperience.workplaceName +
 70 |                         ' Position : ' +
 71 |                         workExperience.jobPosition.position_name
 72 |                     )}
 73 |               </Table.Cell>
 74 |               <Table.Cell>
 75 |                 {jobseeker.attendedSchools.length === 0
 76 |                   ? 'null'
 77 |                   : jobseeker.attendedSchools.map(
 78 |                       (school) =>
 79 |                         'School : ' +
 80 |                         school.school.schoolName +
 81 |                         ' Department : ' +
 82 |                         null
 83 |                     )}
 84 |               </Table.Cell>
 85 |              
 86 |               <Table.Cell>
 87 |                 {jobseeker.info === null
 88 |                   ? 'nothing has been written'
 89 |                   : jobseeker.info}
 90 |               </Table.Cell>
 91 |               <Table.Cell>
 92 |                 <Button animated color="red" basic inverted as={Link} to={`/jobseekers/${jobseeker.id}`}>
 93 |                   <Button.Content visible>Go to infos</Button.Content>
 94 |                   <Button.Content hidden>
 95 |                     <Icon name="arrow right" />
 96 |                   </Button.Content>
 97 |                 </Button>
 98 |               </Table.Cell>
 99 |             </Table.Row>
100 |           ))}
101 |         </Table.Body>
102 |       </Table>
103 |     </div>
104 |   );
105 | }
106 | 


--------------------------------------------------------------------------------
/src/pages/JobSeekers/JobSeekerSignUpPage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {Header, Button} from 'semantic-ui-react';
 3 | import {Formik, Form, useField} from 'formik';
 4 | import * as Yup from 'yup';
 5 | import {useHistory} from 'react-router-dom';
 6 | 
 7 | export default function EmployerSignUpPage() {
 8 |   const history = useHistory();
 9 | 
10 |   const TextField = ({label, ...props}) => {
11 |     
12 |     const [field, meta] = useField(props);
13 |     return (
14 |       <div>
15 |         <div className='ui input'>
16 |           <label
17 |             className='labelForSystemUserSignUp'
18 |             for={props.id || props.name}>
19 |             {label}{' '}
20 |           </label>
21 | 
22 |           <input type='text' {...field} {...props} />
23 |         </div>
24 |         <br />
25 |         {meta.touched && meta.error ? (
26 |           <div className='error'>
27 |             <div class='ui pointing red basic label'>{meta.error}</div>
28 |           </div>
29 |         ) : null}
30 |       </div>
31 |     );
32 |   };
33 | 
34 |   return (
35 |     <div className='jobSeeker-header'>
36 |       <Header as='h2' color='red'>
37 |         Job Seeker
38 |       </Header>
39 | 
40 |       <Formik
41 |         initialValues={{
42 |           id: '',
43 |         }}
44 |         validationSchema={Yup.object({
45 |           id: Yup.number().required('Required')
46 |         })}
47 |         onSubmit={(values) => {
48 |           history.push('/jobseeker/' + values.id);
49 |         }}>
50 |         <Form>
51 |           <TextField
52 |             label='Id'
53 |             name='id'
54 |             id="id"
55 |             type='text'
56 |             placeholder='1,2,3 etc...'
57 |           />
58 |           <br />
59 | 
60 |           <Button color='blue' inverted type='submit'>
61 |             Submit
62 |           </Button>
63 |         </Form>
64 |       </Formik>
65 |     </div>
66 |   );
67 | }
68 | 


--------------------------------------------------------------------------------
/src/pages/Jobs/JobDetailPage.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react'
  2 | import { useParams } from 'react-router';
  3 | // import {  useHistory } from 'react-router';
  4 | import { Container, Header, Grid, Segment, List, Icon, Label, Card, Button, Divider } from 'semantic-ui-react';
  5 | import JobService from '../../services/JobService'
  6 | import EmployerService from '../../services/EmployerService'
  7 | import { Link } from 'react-router-dom';
  8 | 
  9 | export default function JobDetailPage() {
 10 |     const { jobId } = useParams()
 11 |     const [job, setJob] = useState({})
 12 |     const [employer, setEmployer] = useState({})
 13 | 
 14 |     useEffect(() => {
 15 |         let jobService = new JobService();
 16 |         jobService.getJobById(jobId).then((result) => setJob(result.data.data)).catch()
 17 |     }, [jobId])
 18 | 
 19 |     useEffect(() => {
 20 |         let employerService = new EmployerService();
 21 |         employerService.getEmployerById(job.employer?.id).then((result) => setEmployer(result.data.data))
 22 |     }, [job.employer?.id])
 23 |     console.log(employer)
 24 | 
 25 | 
 26 |     return (
 27 |         <Grid >
 28 |             <Grid.Row>
 29 |                 <Grid.Column computer={11} mobile={16} tablet={16}>
 30 |                     <Segment.Group>
 31 |                         <Segment vertical color="blue" padded="very" secondary rounded="true" stacked>
 32 | 
 33 |                             <Header centered as="h1" dividing >
 34 |                                 {job.jobPosition?.position_name}
 35 |                                 <Header.Subheader >
 36 |                                     <Icon name="building" />{"Company Name : " + employer.companyName}
 37 |                                 </Header.Subheader>
 38 |                             </Header>
 39 |                             <Grid>
 40 |                                 <Grid.Column computer="5" mobile="16" tablet="4">
 41 |                                     <List>
 42 |                                         <List.Item className="marginBottom marginTopSmall">
 43 |                                             <List.Content>
 44 |                                                 <List.Header>
 45 |                                                     <List.Icon name='users' />Number of empty positions
 46 |                                                 </List.Header>
 47 |                                                 <List.Description>
 48 |                                                     {job.empty_positions}
 49 |                                                 </List.Description>
 50 |                                             </List.Content>
 51 |                                         </List.Item>
 52 | 
 53 |                                         <List.Item className="marginBottomMedium">
 54 |                                             <List.Content>
 55 |                                                 <List.Header>
 56 |                                                     <List.Icon name='money' />Min - Max salary
 57 |                                                 </List.Header>
 58 |                                                 <List.Description>
 59 |                                                     {job.minimumSalary} - {job.maximumSalary}
 60 |                                                 </List.Description>
 61 |                                             </List.Content>
 62 |                                         </List.Item>
 63 | 
 64 |                                         <List.Item className="marginBottomMedium">
 65 |                                             <List.Content>
 66 |                                                 <List.Header>
 67 |                                                     <List.Icon name='hourglass half' />Deadline
 68 |                                                 </List.Header>
 69 |                                                 <List.Description>
 70 |                                                     {job.deadline}
 71 |                                                 </List.Description>
 72 |                                             </List.Content>
 73 |                                         </List.Item>
 74 | 
 75 |                                         <List.Item className="marginBottomMedium">
 76 |                                             <List.Content>
 77 |                                                 <List.Header>
 78 |                                                     <List.Icon name='map marker alternate' />Location
 79 |                                                 </List.Header>
 80 |                                                 <List.Description>
 81 |                                                     {job.city?.cityName}
 82 |                                                 </List.Description>
 83 |                                             </List.Content>
 84 |                                         </List.Item>
 85 | 
 86 |                                         <List.Item className="marginBottomMedium">
 87 |                                             <List.Content>
 88 |                                                 <List.Header>
 89 |                                                     <List.Icon name='suitcase' />Work Place
 90 |                                                 </List.Header>
 91 |                                                 <List.Description>
 92 |                                                     {job.workPlace?.workPlaceName}
 93 |                                                 </List.Description>
 94 |                                             </List.Content>
 95 |                                         </List.Item>
 96 | 
 97 |                                         <List.Item className="marginBottomMedium">
 98 |                                             <List.Content>
 99 |                                                 <List.Header>
100 |                                                     <List.Icon name='stopwatch' />Work Time
101 |                                                 </List.Header>
102 |                                                 <List.Description>
103 |                                                     {job.workTime?.workTimeName}
104 |                                                 </List.Description>
105 |                                             </List.Content>
106 |                                         </List.Item>
107 |                                     </List>
108 |                                 </Grid.Column>
109 |                                 <Grid.Column computer="11" mobile="16" tablet="12">
110 |                                     <Container textAlign='justified' className="marginTopSmall paddingRight">
111 |                                         {job.description}
112 |                                     </Container>
113 |                                 </Grid.Column>
114 |                             </Grid>
115 | 
116 | 
117 | 
118 | 
119 | 
120 |                         </Segment>
121 |                     </Segment.Group>
122 | 
123 | 
124 |                 </Grid.Column>
125 |                 <Grid.Column computer={5} mobile={16} tablet={16}>
126 |                     <Segment.Group>
127 |                         <Segment vertical color="teal" padded="very" secondary rounded="true" stacked>
128 |                             <Label attached='top' color="teal" basic><Header color="teal" as="h3">CONTACT</Header></Label>
129 | 
130 | 
131 |                             <Header as={"h3"}>
132 |                                 <Header.Content>
133 |                                     {employer.companyName}
134 |                                 </Header.Content>
135 |                                 <Header.Subheader>
136 |                                     {employer.user?.email}
137 |                                 </Header.Subheader>
138 |                             </Header>
139 | 
140 |                             <Button animated as={Link} color="pink"  basic to={`/employers/${employer.id}`}>
141 |                                 <Button.Content visible>Go to infos</Button.Content>
142 |                                 <Button.Content hidden>
143 |                                     <Icon name="id card outline" />
144 |                                 </Button.Content>
145 |                             </Button>
146 | 
147 | 
148 |                         </Segment>
149 |                     </Segment.Group>
150 |                 </Grid.Column>
151 |             </Grid.Row>
152 |         </Grid>
153 |     )
154 | }


--------------------------------------------------------------------------------
/src/pages/Jobs/JobList.jsx:
--------------------------------------------------------------------------------
 1 | import React, {useEffect, useState} from 'react';
 2 | import {Table, Header, Button, Icon} from 'semantic-ui-react';
 3 | import JobService from '../../services/JobService';
 4 | import { Link } from 'react-router-dom';
 5 | 
 6 | export default function JobList() {
 7 |   const [jobs, setJobs] = useState([]);
 8 |   useEffect(() => {
 9 |     let jobService = new JobService();
10 | 
11 |     jobService
12 |       .getApprovedJobs()
13 |       .then((result) => setJobs(result.data.data))
14 |       .catch();
15 |   }, []);
16 | 
17 |   
18 | 
19 |   return (
20 |     <div>
21 |       <Table celled padded inverted>
22 |         <Table.Header>
23 |           <Table.Row>
24 |             <Table.HeaderCell>Postion</Table.HeaderCell>
25 |             <Table.HeaderCell>Company Name</Table.HeaderCell>
26 |             <Table.HeaderCell>Number of Empty Position</Table.HeaderCell>
27 |             <Table.HeaderCell>City</Table.HeaderCell>
28 |             <Table.HeaderCell>Created date</Table.HeaderCell>
29 |             <Table.HeaderCell>Deadline</Table.HeaderCell>
30 |             <Table.HeaderCell>Other infos</Table.HeaderCell>
31 |           </Table.Row>
32 |         </Table.Header>
33 | 
34 |         <Table.Body>
35 |           {jobs.map((job) => (
36 |             <Table.Row key={job.id} textAlign='center'>
37 |               <Table.Cell>
38 |                 <Header as='h2' inverted>
39 |                   {job.positionName}
40 |                 </Header>
41 |               </Table.Cell>
42 |               <Table.Cell singleLine>{job.companyName}</Table.Cell>
43 |               <Table.Cell>
44 |                 {job.number_of_empty_positions == null
45 |                   ? '0'
46 |                   : job.number_of_empty_positions}
47 |               </Table.Cell>
48 |               <Table.Cell singleLine>{job.cityName}</Table.Cell>
49 |               <Table.Cell>{job.createdDate}</Table.Cell>
50 |               <Table.Cell>{job.deadLine}</Table.Cell>
51 |               <Table.Cell>
52 |                 <Button animated primary  basic inverted as={Link} to={`/jobs/${job.id}`}>
53 |                   <Button.Content  visible>Go to Detail<Icon name="right arrow" /></Button.Content>
54 |                   <Button.Content hidden>
55 |                     <Icon name="file alternate" />
56 |                   </Button.Content>
57 |                 </Button>
58 |               </Table.Cell>
59 |             </Table.Row>
60 |           ))}
61 |         </Table.Body>
62 |       </Table>
63 |     </div>
64 |   );
65 | }
66 | 


--------------------------------------------------------------------------------
/src/pages/MainPage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default function MainPage() {
 4 |     return (
 5 |         <div>
 6 |             
 7 |         </div>
 8 |     )
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/pages/SignInPage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {Button, Divider, Form, Grid, Segment} from 'semantic-ui-react';
 3 | 
 4 | export default function SignInModal() {
 5 | 
 6 |     
 7 |   return (
 8 |     <div>
 9 |       <Segment placeholder>
10 |         <Grid columns={2} relaxed='very' stackable>
11 |           <Grid.Column>
12 |             <Form>
13 |               <Form.Input
14 |                 icon='user'
15 |                 iconPosition='left'
16 |                 label='Username'
17 |                 placeholder='Username'
18 |               />
19 |               <Form.Input
20 |                 icon='lock'
21 |                 iconPosition='left'
22 |                 label='Password'
23 |                 type='password'
24 |               />
25 | 
26 |               <Button content='Login' primary />
27 |             </Form>
28 |           </Grid.Column>
29 | 
30 |           <Grid.Column verticalAlign='middle'>
31 |             <Button content='Sign up' icon='signup' size='big' />
32 |           </Grid.Column>
33 |         </Grid>
34 | 
35 |         <Divider vertical>Or</Divider>
36 |       </Segment>
37 |     </div>
38 |   );
39 | }
40 | 


--------------------------------------------------------------------------------
/src/pages/SystemUsers/JobConfirmationPanel.jsx:
--------------------------------------------------------------------------------
  1 | import React, {useEffect, useState} from 'react';
  2 | import JobService from '../../services/JobService';
  3 | import ActivationPanelService from '../../services/ActivationPanelService';
  4 | import {
  5 |   Button,
  6 |   Checkbox,
  7 |   Segment,
  8 |   Table,
  9 |   Header,
 10 |   Icon,
 11 |   Input,
 12 | } from 'semantic-ui-react';
 13 | import {useParams} from 'react-router-dom';
 14 | 
 15 | export default function JobConfirmationPanel() {
 16 | 
 17 |   let jobService = new JobService();
 18 |   let activationPanelService = new ActivationPanelService();
 19 |   let {systemUserId} = useParams();
 20 | 
 21 |   const [unapprovedJobs, setUnapprovedJobs] = useState([]);
 22 |   useEffect(() => {
 23 |     let jobService = new JobService();
 24 |     jobService
 25 |       .getUnapprovedJobs()
 26 |       .then((result) => {
 27 |         setUnapprovedJobs(result.data.data);
 28 |       })
 29 |       .catch();
 30 |   }, []);
 31 | 
 32 |   const [approvedJobs, setApprovedJobs] = useState([]);
 33 |   useEffect(() => {
 34 |     let jobService = new JobService();
 35 |     jobService
 36 |       .getApprovedJobs()
 37 |       .then((result) => {
 38 |         setApprovedJobs(result.data.data);
 39 |       })
 40 |       .catch();
 41 |   }, []);
 42 | 
 43 |   function handleOnClickApprove() {
 44 |     unapprovedJobs.forEach((job) => {
 45 |       if (document.getElementById(job.id.toString() + 'checkbox').checked) {
 46 |         let panelForJob = {};
 47 |         panelForJob.jobId = job.id;
 48 |         panelForJob.detail = document.getElementById('detailInput').value;
 49 |         panelForJob.systemUserId = systemUserId;
 50 |         activationPanelService.setApproved(panelForJob);
 51 |       }
 52 |     });
 53 |     window.location.reload();
 54 |   }
 55 |   function handleOnClickApproveAll() {
 56 |     unapprovedJobs.forEach((job) => {
 57 |       let panelForJob = {};
 58 |       panelForJob.jobId = job.id;
 59 |       panelForJob.detail = document.getElementById('detailInput').value;
 60 |       panelForJob.systemUserId = systemUserId;
 61 |       activationPanelService.setApproved(panelForJob);
 62 |     });
 63 |     window.location.reload();
 64 |   }
 65 |   function handleOnClickDelete() {
 66 |     unapprovedJobs.forEach((job) => {
 67 |       if (document.getElementById(job.id.toString() + 'checkbox').checked) {
 68 |         jobService.deleteJob(job.id);
 69 |       }
 70 |     });
 71 |     window.location.reload();
 72 |   }
 73 |   function handleOnClickUnapprove() {
 74 |     approvedJobs.forEach((job) => {
 75 |       if (document.getElementById(job.id.toString() + 'checkbox').checked) {
 76 |         let panelForJob = {};
 77 |         panelForJob.jobId = job.id;
 78 |         panelForJob.detail = document.getElementById('detailInput').value;
 79 |         panelForJob.systemUserId = systemUserId;
 80 |         activationPanelService.setUnapproved(panelForJob);
 81 |       }
 82 |     });
 83 |     window.location.reload();
 84 |   }
 85 |   
 86 | 
 87 |   return (
 88 |     <div>
 89 |       <Segment.Group>
 90 |         <Segment color='orange' textAlign='center' padded='very'>
 91 |           <Header>
 92 |             Jobs Pending Approval <Icon name='history' />
 93 |           </Header>
 94 |         </Segment>
 95 |         <Segment.Group>
 96 |           <Segment textAlign='center'>
 97 |             <Table celled compact definition>
 98 |               <Table.Header fullWidth>
 99 |                 <Table.Row>
100 |                   <Table.HeaderCell />
101 |                   <Table.HeaderCell>Company Name</Table.HeaderCell>
102 |                   <Table.HeaderCell>Job Position</Table.HeaderCell>
103 |                   <Table.HeaderCell>City</Table.HeaderCell>
104 |                   <Table.HeaderCell>Salary</Table.HeaderCell>
105 |                   <Table.HeaderCell>Work Place</Table.HeaderCell>
106 |                   <Table.HeaderCell>Work Time</Table.HeaderCell>
107 |                   <Table.HeaderCell>DeadLine</Table.HeaderCell>
108 |                   <Table.HeaderCell>Description</Table.HeaderCell>
109 |                 </Table.Row>
110 |               </Table.Header>
111 | 
112 |               <Table.Body>
113 |                 {unapprovedJobs.map((job) => (
114 |                   <Table.Row key={job.id}>
115 |                     <Table.Cell collapsing>
116 |                       <Checkbox toggle id={job.id.toString() + 'checkbox'} />
117 |                     </Table.Cell>
118 | 
119 |                     <Table.Cell>
120 |                       <Header>{job.companyName}</Header>
121 |                     </Table.Cell>
122 |                     <Table.Cell>{job.positionName}</Table.Cell>
123 |                     <Table.Cell>{job.cityName}</Table.Cell>
124 |                     <Table.Cell>
125 |                       {job.minimumSalary + '-' + job.maximumSalary}
126 |                     </Table.Cell>
127 |                     <Table.Cell>{job.workPlaceName}</Table.Cell>
128 |                     <Table.Cell>{job.workTimeName}</Table.Cell>
129 |                     <Table.Cell>{job.deadLine}</Table.Cell>
130 |                     <Table.Cell>{job.description}</Table.Cell>
131 |                   </Table.Row>
132 |                 ))}
133 |               </Table.Body>
134 | 
135 |               <Table.Footer fullWidth>
136 |                 <Table.Row>
137 |                   <Table.HeaderCell />
138 |                   <Table.HeaderCell colSpan='9'>
139 |                     <Button
140 |                       floated='right'
141 |                       icon
142 |                       labelPosition='left'
143 |                       negative
144 |                       size='small'
145 |                       onClick={handleOnClickDelete}>
146 |                       <Icon name='delete' /> Decline
147 |                     </Button>
148 |                     <Button
149 |                       size='small'
150 |                       positive
151 |                       onClick={handleOnClickApprove}>
152 |                       Approve
153 |                     </Button>
154 |                     <Button
155 |                       size='small'
156 |                       color='linkedin'
157 |                       onClick={handleOnClickApproveAll}>
158 |                       Approve All
159 |                     </Button>
160 |                     <Input
161 |                       transparent
162 |                       id='detailInput'
163 |                       placeholder='Detail...'
164 |                       icon='thumbtack'
165 |                       iconPosition='left'
166 |                     />
167 |                   </Table.HeaderCell>
168 |                 </Table.Row>
169 |               </Table.Footer>
170 |             </Table>
171 |           </Segment>
172 |         </Segment.Group>
173 |       </Segment.Group>
174 | 
175 |       <Segment.Group>
176 |         <Segment color='orange' textAlign='center' padded='very'>
177 |           <Header>
178 |           Approved Jobs<Icon name='check' />
179 |           </Header>
180 |         </Segment>
181 |         <Segment.Group>
182 |           <Segment textAlign='center'>
183 |             <Table celled compact definition>
184 |               <Table.Header fullWidth>
185 |                 <Table.Row>
186 |                   <Table.HeaderCell />
187 |                   <Table.HeaderCell>Company Name</Table.HeaderCell>
188 |                   <Table.HeaderCell>Job Position</Table.HeaderCell>
189 |                   <Table.HeaderCell>City</Table.HeaderCell>
190 |                   <Table.HeaderCell>Salary</Table.HeaderCell>
191 |                   <Table.HeaderCell>Work Place</Table.HeaderCell>
192 |                   <Table.HeaderCell>Work Time</Table.HeaderCell>
193 |                   <Table.HeaderCell>DeadLine</Table.HeaderCell>
194 |                   <Table.HeaderCell>Description</Table.HeaderCell>
195 |                 </Table.Row>
196 |               </Table.Header>
197 | 
198 |               <Table.Body>
199 |                 {approvedJobs.map((job) => (
200 |                   <Table.Row key={job.id}>
201 |                     <Table.Cell collapsing>
202 |                       <Checkbox toggle id={job.id.toString() + 'checkbox'} />
203 |                     </Table.Cell>
204 | 
205 |                     <Table.Cell>
206 |                       <Header>{job.companyName}</Header>
207 |                     </Table.Cell>
208 |                     <Table.Cell>{job.positionName}</Table.Cell>
209 |                     <Table.Cell>{job.cityName}</Table.Cell>
210 |                     <Table.Cell>
211 |                       {job.minimumSalary + '-' + job.maximumSalary}
212 |                     </Table.Cell>
213 |                     <Table.Cell>{job.workPlaceName}</Table.Cell>
214 |                     <Table.Cell>{job.workTimeName}</Table.Cell>
215 |                     <Table.Cell>{job.deadLine}</Table.Cell>
216 |                     <Table.Cell>{job.description}</Table.Cell>
217 |                   </Table.Row>
218 |                 ))}
219 |               </Table.Body>
220 | 
221 |               <Table.Footer fullWidth>
222 |                 <Table.Row>
223 |                   <Table.HeaderCell />
224 |                   <Table.HeaderCell colSpan='9'>
225 |                     <Button
226 |                       floated='right'
227 |                       icon
228 |                       labelPosition='left'
229 |                       negative
230 |                       size='small'
231 |                       onClick={handleOnClickDelete}>
232 |                       <Icon name='delete' /> Delete
233 |                     </Button>
234 |                     <Button
235 |                       size='small'
236 |                       color="orange"
237 |                       inverted
238 |                       onClick={handleOnClickUnapprove}>
239 |                       Unapprove
240 |                     </Button>
241 |                     <Input
242 |                       transparent
243 |                       id='detailInput'
244 |                       placeholder='Detail...'
245 |                       icon='thumbtack'
246 |                       iconPosition='left'
247 |                     />
248 |                   </Table.HeaderCell>
249 |                 </Table.Row>
250 |               </Table.Footer>
251 |             </Table>
252 |           </Segment>
253 |         </Segment.Group>
254 |       </Segment.Group>
255 |     </div>
256 |   );
257 | }
258 | 


--------------------------------------------------------------------------------
/src/pages/SystemUsers/SystemUserSignUpPage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {Header, Button} from 'semantic-ui-react';
 3 | import {Formik, Form, useField} from 'formik';
 4 | import * as Yup from 'yup';
 5 | import {useHistory} from 'react-router-dom';
 6 | 
 7 | export default function SystemUserSignUpPage() {
 8 |     const history = useHistory();
 9 | 
10 |   const TextField = ({label, ...props}) => {
11 |     // useField() returns [formik.getFieldProps(), formik.getFieldMeta()]
12 |     // which we can spread on <input>. We can use field meta to show an error
13 |     // message if the field is invalid and it has been touched (i.e. visited)
14 |     const [field, meta] = useField(props);
15 |     return (
16 |       <div>
17 |         <div className='ui input'>
18 |           <label
19 |             className='labelForEmployerSignUp'
20 |             for={props.id || props.name}>
21 |             {label}{' '}
22 |           </label>
23 | 
24 |           <input type='text' {...field} {...props} />
25 |         </div>
26 |         <br />
27 |         {meta.touched && meta.error ? (
28 |           <div className='error'>
29 |             <div class='ui pointing red basic label'>{meta.error}</div>
30 |           </div>
31 |         ) : null}
32 |       </div>
33 |     );
34 |   };
35 | 
36 |   return (
37 |     <div className='employer-header'>
38 |       <Header as='h2' color='orange'>
39 |         System User
40 |       </Header>
41 | 
42 |       <Formik
43 |         initialValues={{
44 |           id: '',
45 |         }}
46 |         validationSchema={Yup.object({
47 |           id: Yup.number().required('Required')
48 |         })}
49 |         onSubmit={(values) => {
50 | 
51 |           history.push('/systemuser/' + values.id);
52 |         }}>
53 |         <Form>
54 |           <TextField
55 |             label='Id'
56 |             name='id'
57 |             id="id"
58 |             type='text'
59 |             placeholder='1,2,3 etc...'
60 |           />
61 |           <br />
62 | 
63 |           <Button color='blue' inverted type='submit'>
64 |             Submit
65 |           </Button>
66 |         </Form>
67 |       </Formik>
68 |     </div>
69 |   );
70 | }
71 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/services/ActivationPanelService.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | 
 3 | export default class ActivationPanelService {
 4 |   setApproved(panelForJob) {
 5 |     return axios.post("http://localhost:8080/api/activationpanel/setapproved",panelForJob);
 6 |   }
 7 |   setUnapproved(panelForJob) {
 8 |     return axios.post("http://localhost:8080/api/activationpanel/setunapproved",panelForJob);
 9 |   }
10 | }


--------------------------------------------------------------------------------
/src/services/CityService.js:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | 
3 | export default class CityService {
4 |   getCities() {
5 |     return axios.get("http://localhost:8080/api/cities/getAll");
6 |   }
7 | }


--------------------------------------------------------------------------------
/src/services/EmployerService.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | 
 3 | export default class EmployerService {
 4 |   getEmployers() {
 5 |     return axios.get("http://localhost:8080/api/employers/getall");
 6 |   }
 7 | 
 8 |   getEmployerById(id) {
 9 |     return axios.get("http://localhost:8080/api/employers/getbyid?id="+id)
10 |   }
11 | }


--------------------------------------------------------------------------------
/src/services/JobPositionService.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | 
3 | export default class JobPositionService {
4 |   getJobPositions() {
5 |     return axios.get('http://localhost:8080/api/jobpositions/getall');
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/src/services/JobSeekerService.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | 
 3 | export default class JobSeekersService {
 4 |   getJobSeekers() {
 5 |     return axios.get("http://localhost:8080/api/jobseekers/getall");
 6 |   }
 7 | 
 8 |   getJobSeekerById(id){
 9 |     
10 |     return axios.get("http://localhost:8080/api/jobseekers/getbyid?id="+id)
11 |   }
12 | }


--------------------------------------------------------------------------------
/src/services/JobService.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | 
 3 | export default class JobService {
 4 |   getJobs() {
 5 |     return axios.get("http://localhost:8080/api/jobs/getall");
 6 |   }
 7 |   addJob(job) {
 8 |     return axios.post("http://localhost:8080/api/jobs/add",job)
 9 |   }
10 | 
11 |   deleteJob(id) {
12 |     return axios.post("http://localhost:8080/api/jobs/delete?id="+id)
13 |   }
14 | 
15 |   getApprovedJobs() {
16 |     return axios.get("http://localhost:8080/api/jobs/getallapprovedjobs");
17 |   }
18 | 
19 |   getUnapprovedJobs() {
20 |     return axios.get("http://localhost:8080/api/jobs/getallunapprovedjobs");
21 |   }
22 | 
23 |   setActive(id){
24 |     return axios.post("http://localhost:8080/api/jobs/setactivetojobvisibility?id="+id)
25 |   }
26 | 
27 |   getJobById(id){
28 |     return axios.get("http://localhost:8080/api/jobs/getjobbyid?id="+id);
29 |   }
30 | }


--------------------------------------------------------------------------------
/src/services/WorkPlaceService.js:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | 
3 | export default class WorkPlaceService {
4 |   getWorkPlaces() {
5 |     return axios.get("http://localhost:8080/api/workplaces/getall");
6 |   }
7 | }


--------------------------------------------------------------------------------
/src/services/WorkTimeService.js:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | 
3 | export default class WorkTimeService {
4 |   getWorkTimes() {
5 |     return axios.get("http://localhost:8080/api/worktimes/getall");
6 |   }
7 | }


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/store/configureStore.js:
--------------------------------------------------------------------------------
1 | import { createStore } from "redux";
2 | import { devToolsEnhancer } from "redux-devtools-extension";
3 | import rootReducer from './rootReducer'
4 | 
5 | export function configureStore(){
6 |     return createStore(rootReducer,devToolsEnhancer())
7 | }


--------------------------------------------------------------------------------
/src/store/rootReducer.js:
--------------------------------------------------------------------------------
1 | 
2 | import { combineReducers } from "redux";
3 | 
4 | 
5 | const rootReducer=combineReducers({
6 |     
7 | })
8 | 
9 | export default rootReducer;


--------------------------------------------------------------------------------