✨ add edit profile route with internal state management

src/App.js

@@ -7,6 +7,7 @@ import SignupContainer from "./containers/SignupContainer";
 import LoginContainer from "./containers/LoginContainer";
 import PrivateRoute from "./containers/PrivateRoute";
 import Dashboard from "./containers/Dashboard";
+import EditProfile from "./containers/EditProfile";
 import store from "./redux/store";
 
 function App() {
@@ -19,6 +20,7 @@ function App() {
 						<Route exact path="/signup" component={SignupContainer} />
 						<Route exact path="/login" component={LoginContainer} />
 						<Route exact path="/dash" component={Dashboard} />
+						<Route exact path="/edit-profile" component={EditProfile} />
 					</Switch>
 				</Router>
 			</React.Fragment>

src/components/Profile/Back.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+
+const Container = styled.div`
+	grid-row: 2 / 3;
+	grid-column: 3 / 4;
+	margin-top: 1rem;
+
+	line-height: 25px;
+	color: #2d9cdb;
+	cursor: pointer;
+
+	.back-icon {
+		font-size: 15px;
+		margin-right: 2.5px;
+	}
+
+	.back-text {
+		text-decoration: none;
+		color: #2d9cdb;
+		font-size: 15px;
+	}
+`;
+
+const StyledLink = styled(Link)`
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+`;
+
+const Back = () => (
+	<Container>
+		<StyledLink className="back-text" to="/dash">
+			<span className="material-icons back-icon">arrow_back_ios</span>
+			Back
+		</StyledLink>
+	</Container>
+);
+
+export default Back;

src/components/Profile/EditInfo.jsx

@@ -0,0 +1,127 @@
+import React from "react";
+import styled from "styled-components";
+import Button from "./Button";
+
+import { InputFieldImage, InputField } from "./FormElements";
+
+const Container = styled.div`
+	grid-row: 3 / 4;
+	grid-column: 2 / 5;
+
+	margin: 0 auto;
+	border: 1px solid #e0e0e0;
+	box-sizing: border-box;
+	border-radius: 12px;
+	margin-top: 3rem;
+	min-width: 50rem;
+	padding: 2rem 4rem;
+
+	.title {
+		h1 {
+			font-size: 25px;
+			line-height: 33px;
+			color: #000;
+			font-weight: 400;
+		}
+
+		h2 {
+			font-size: 15px;
+			line-height: 18px;
+			font-weight: 300;
+			color: #828282;
+		}
+	}
+`;
+
+const FormContainer = styled.form`
+	margin: 1rem 0;
+`;
+
+class EditInfo extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			profile: {
+				name: "",
+				image: "",
+				bio: "",
+				phone: "",
+				email: "",
+				password: "",
+			},
+		};
+	}
+
+	inputChangeHandler = (e) => {
+		const { name, value } = e.target;
+
+		this.setState((state) => ({
+			...state,
+			profile: {
+				...state.profile,
+				[name]: value,
+			},
+		}));
+	};
+
+	submitHandler = (e) => {
+		e.preventDefault();
+	};
+
+	render() {
+		return (
+			<Container>
+				<div className="title">
+					<h1>Change Info</h1>
+					<h2>Changes will be reflected to every services</h2>
+				</div>
+				<FormContainer onSubmit={this.submitHandler}>
+					<InputFieldImage title="Change Photo" />
+					<InputField
+						title="Name"
+						name="name"
+						type="text"
+						placeholder="Enter your name..."
+						onChange={this.inputChangeHandler}
+					/>
+					<InputField
+						title="Bio"
+						name="bio"
+						type="text"
+						placeholder="Enter your bio..."
+						onChange={this.inputChangeHandler}
+					/>
+					<InputField
+						title="Phone"
+						name="phone"
+						type="tel"
+						pattern="((\+|00)?[0-9]{2}|0)[1-9]([0-9]){8}"
+						placeholder="Enter your phone..."
+						onChange={this.inputChangeHandler}
+					/>
+					<InputField
+						title="Email"
+						name="email"
+						type="email"
+						placeholder="Enter your email..."
+						onChange={this.inputChangeHandler}
+						required
+					/>
+					<InputField
+						title="Password"
+						name="password"
+						type="password"
+						placeholder="Enter your new password..."
+						onChange={this.inputChangeHandler}
+						required
+					/>
+					<div style={{ marginTop: "23px" }}>
+						<Button variant="secondary">Save</Button>
+					</div>
+				</FormContainer>
+			</Container>
+		);
+	}
+}
+
+export default EditInfo;

src/components/Profile/FormElements.jsx

@@ -0,0 +1,108 @@
+import React from "react";
+import styled from "styled-components";
+
+import Person from "./../../assets/person.jpg";
+
+const FieldContainer = styled.div`
+	padding-top: 1rem;
+`;
+
+const FieldTitle = styled.h2`
+	font-size: 13px;
+	line-height: 18px;
+	color: #4f4f4f;
+	margin-bottom: 5px;
+`;
+
+const FieldInput = styled.input`
+	min-width: 60%;
+	border: 1px solid #828282;
+	border-radius: 12px;
+	padding: 15px 20px;
+	outline: none;
+`;
+
+const FieldLabel = styled.label``;
+
+const ImageFieldContainer = styled.div`
+	display: flex;
+	max-width: 13rem;
+	position: relative;
+	justify-content: space-between;
+	align-items: center;
+
+	input {
+		opacity: 0;
+		position: absolute;
+		cursor: pointer;
+	}
+
+	label {
+		text-transform: uppercase;
+		font-size: 13px;
+		line-height: 18px;
+		color: #828282;
+		cursor: pointer;
+	}
+
+	img.upload-image {
+		height: 72px;
+		border-radius: 8px;
+		position: relative;
+		z-index: -1;
+		cursor: pointer;
+
+		&:hover + span.input-icon {
+			opacity: 1;
+		}
+	}
+
+	span.input-icon {
+		opacity: 0;
+		position: absolute;
+		cursor: pointer;
+		top: 50%;
+		left: 12.5%;
+		transform: translate(-50%, -50%);
+		color: #000;
+		/* mix-blend-mode: difference; */
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+`;
+
+export const InputField = ({ title, children, ...rest }) => {
+	return (
+		<FieldContainer>
+			{children || (
+				<FieldLabel>
+					<FieldTitle>{title}</FieldTitle>
+					<FieldInput {...rest} />
+				</FieldLabel>
+			)}
+		</FieldContainer>
+	);
+};
+
+export const InputFieldImage = ({ title }) => {
+	return (
+		<InputField>
+			<ImageFieldContainer>
+				<img
+					className="upload-image"
+					src={Person}
+					alt="Person staring at wall"
+				/>
+				<span className="material-icons input-icon">camera_alt</span>
+				<input
+					id="upload-photo"
+					type="file"
+					accept="image/png, image/jpeg"
+				></input>
+				<label htmlFor="upload-photo">{title}</label>
+			</ImageFieldContainer>
+		</InputField>
+	);
+};

src/components/Profile/Layout.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+	display: grid;
+	grid-template-columns: 0.5fr 2fr minmax(400px, 5fr) 2fr 0.5fr;
+`;
+
+const Layout = ({ children }) => <Container>{children}</Container>;
+
+export default Layout;

src/containers/Dashboard.jsx

@@ -1,13 +1,20 @@
 import React from "react";
 
-import Profile from "./../components/Profile";
+import Layout from "./../components/Profile/Layout";
+import Navbar from "./../components/Profile/Navbar";
+import Titlebar from "./../components/Profile/Titlebar";
+import Infobox from "./../components/Profile/Infobox";
 
-const Dashboard = () => {
-	return (
-		<div>
-			<Profile />
-		</div>
-	);
-};
+class Dashboard extends React.Component {
+	render() {
+		return (
+			<Layout>
+				<Navbar />
+				<Titlebar />
+				<Infobox />
+			</Layout>
+		);
+	}
+}
 
 export default Dashboard;

src/containers/EditProfile.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+import Layout from "./../components/Profile/Layout";
+import Navbar from "./../components/Profile/Navbar";
+import Back from "./../components/Profile/Back";
+import EditInfo from "./../components/Profile/EditInfo";
+
+class EditProfile extends React.Component {
+	render() {
+		return (
+			<Layout>
+				<Navbar />
+				<Back />
+				<EditInfo />
+			</Layout>
+		);
+	}
+}
+
+export default EditProfile;