Self-documentation of Hire +Plus: V1 (4)
Tags: webdev, react, javascript, writing
Published: 2022-05-27 10:22:24

## What I cover
- Updates to project
- Navigation component
- Sign in component
- Sign up component
- Auth page

---

## Update: I moved the routing to be in the `App.tsx` file. Now, the `index.tsx` file is just rendering the App. 

Current `App.tsx` file 

```javascript
import { Routes, Route } from 'react-router-dom';
import Launch from './components/launch/launch.component';
import Navigation from './components/navigation/navigation.component';
import AuthPage from './routes/auth/auth-page';

function App() {
	return (
		<>
			<Navigation />
			<Routes>
				<Route path="/" element={<Launch />} />
				<Route path="auth/:userSelect" element={<AuthPage />} />
			</Routes>
		</>
	);
}

export default App;
```

The `launch` page is at `"/"` route, auth page is gonna be dynamic (hence `"/*"`). In the end, it will either be `"/auth/employers"` or `"/auth/employees"` depending on what the user selects on the `launch` page. 

## Navigation
I added a navigation component that only contains the logo that redirects back to the launch page. 

```javascript
import React from 'react';
import { Link } from 'react-router-dom';

const Navigation: React.FunctionComponent = () => {
	return (
		<header className="logo h-16 sticky top-0 z-10">
			<Link to="/">
				Hire <span style={{ color: '#f7578c' }}>+Plus</span>
			</Link>
		</header>
	);
};
export default Navigation;
```
 
## Sign in Component
I removed the use of styled components and added tailwind styles. 
(**view the** [source code](https://github.com/AjeaSmith/hire-plus-v1) **for sign in component**)

I had some issues rendering the google icon in typescript. Turns out I had to configure it to typescript.
 
Added `index.d.ts` file to root dir. Then, added this 

```javascript
declare module '*.png';
declare module '*.jpg';
```

inside `tsconfig.json` I added the file to the include array

```javascript
"include": ["src", "index.d.ts"]
```

I added an assets folder for my images/icons

## Sign up Component
I created the folder and component for the sign-up page using typescript. 
(**view the** [source code](https://github.com/AjeaSmith/hire-plus-v1) **for sign up component**)

## Auth page
The `auth` page renders both `sign-in` and `sign-up` components side-by-side. Based on what the user chooses (employer or employee) I'll handle the form submission accordingly. (In this case, the `userSelect` params you see here).

```javascript
import SignIn from '../../components/sign-in/sign-in.component';
import { useParams } from 'react-router-dom';
import Signup from '../../components/sign-up/sign-up.component';

const AuthPage: React.FunctionComponent = () => {
	const { userSelect } = useParams();
	console.log(userSelect);
	return (
		<section className="text-gray-600 body-font">
			<div className="container flex flex-wrap px-5 py-10 mx-auto items-center justify-center">
				<div className="md:w-1/2 md:pr-5 md:py-8 md:border-r md:border-b-0 mb-10 md:mb-0 pb-10 border-b border-gray-200">
					<SignIn />
				</div>
				<div className="flex flex-col md:w-1/2">
					<Signup />
				</div>
			</div>
		</section>
	);
};

export default AuthPage;
```


Finally, this is what that `launch` page is looking like at the moment

![The launch page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xp1s2zm9uw4f8d7f482j.png)

This is what the `auth` page looks like

![The Auth page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iydtwnexqeuna0r3p5ir.png)

That's all for now, stay tuned for the testing portion of these components!