Create photo input and display it

romaleks · Oct 16, 2022 · ce64995 · ce64995
1 parent 98a07c0
commit ce64995
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 39 deletions.
diff --git a/src/assets/add.svg b/src/assets/add.svg
diff --git a/src/components/CvBuilder/CvBuilder.js b/src/components/CvBuilder/CvBuilder.js
@@ -5,12 +5,18 @@ import Practice from './Practice'
 
 export class CvBuilder extends Component {
   render() {
-    const { educationItems, practiceItems, addItem, deleteItem, handleTextEdit } =
-      this.props
+    const {
+      educationItems,
+      practiceItems,
+      addItem,
+      deleteItem,
+      handleTextEdit,
+      handlePhotoEdit,
+    } = this.props
 
     return (
       <div className='cv-builder'>
-        <GeneralInfo onChange={handleTextEdit} />
+        <GeneralInfo onChange={handleTextEdit} onPhotoChange={handlePhotoEdit} />
         <Education
           items={educationItems}
           addItem={addItem}

diff --git a/src/components/CvBuilder/GeneralInfo.js b/src/components/CvBuilder/GeneralInfo.js
@@ -5,44 +5,51 @@ import TextArea from '../Utils/TextArea'
 
 export class GeneralInfo extends Component {
   render() {
-    const { onChange } = this.props
+    const { onChange, onPhotoChange } = this.props
     const section = 'profile'
 
     return (
       <div className='section'>
-        <h2 className='title'>General Information</h2>
-        <div className='container'>
-          <div className='name'>
-            <Input
-              title='First Name'
-              onChange={onChange}
+        <div className='item'>
+          <h2 className='title'>General Information</h2>
+          <div className='container'>
+            <div className='name item'>
+              <Input
+                title='First Name'
+                onChange={onChange}
+                section={section}
+                id='firstName'
+              />
+              <Input
+                title='Last Name'
+                onChange={onChange}
+                section={section}
+                id='lastName'
+              />
+            </div>
+            <PhotoInput
+              title='Photo'
+              onChange={onPhotoChange}
               section={section}
-              id='firstName'
-            />
-            <Input
-              title='Last Name'
-              onChange={onChange}
-              section={section}
-              id='lastName'
+              id='photo'
             />
           </div>
-          <PhotoInput title='Photo' onChange={onChange} section={section} id='photo' />
+          <Input
+            title='Professional Title'
+            onChange={onChange}
+            section={section}
+            id='title'
+          />
+          <TextArea
+            title='Desctiption'
+            onChange={onChange}
+            section={section}
+            id='description'
+          />
+          <Input title='Phone Number' onChange={onChange} section={section} id='phone' />
+          <Input title='Email' onChange={onChange} section={section} id='email' />
+          <Input title='Address' onChange={onChange} section={section} id='address' />
         </div>
-        <Input
-          title='Professional Title'
-          onChange={onChange}
-          section={section}
-          id='title'
-        />
-        <TextArea
-          title='Desctiption'
-          onChange={onChange}
-          section={section}
-          id='description'
-        />
-        <Input title='Phone Number' onChange={onChange} section={section} id='phone' />
-        <Input title='Email' onChange={onChange} section={section} id='email' />
-        <Input title='Address' onChange={onChange} section={section} id='address' />
       </div>
     )
   }

diff --git a/src/components/CvPreview/Header.js b/src/components/CvPreview/Header.js
@@ -6,7 +6,11 @@ export class Header extends Component {
 
     return (
       <div className='cv-header'>
-        <div className='photo'>{profile[0].photo}</div>
+        {profile[0].photo ? (
+          <img src={profile[0].photo} alt='Avatar' className='photo'></img>
+        ) : (
+          <div className='photo'></div>
+        )}
         <div className='names'>
           <div className='name'>
             {profile[0].firstName} {profile[0].lastName}

diff --git a/src/components/Main.js b/src/components/Main.js
@@ -13,7 +13,7 @@ class Main extends Component {
           firstName: '',
           lastName: '',
           title: '',
-          photo: '',
+          photo: null,
           description: '',
           phone: '',
           email: '',
@@ -46,6 +46,7 @@ class Main extends Component {
     this.addItem = this.addItem.bind(this)
     this.deleteItem = this.deleteItem.bind(this)
     this.handleTextEdit = this.handleTextEdit.bind(this)
+    this.handlePhotoEdit = this.handlePhotoEdit.bind(this)
   }
 
   addItem(section) {
@@ -93,6 +94,19 @@ class Main extends Component {
     })
   }
 
+  handlePhotoEdit(e) {
+    const file = e.target.files[0]
+    const reader = new FileReader()
+    const items = [...this.state.profile]
+    reader.onload = () => {
+      items[0].photo = reader.result
+      this.setState({
+        profile: items,
+      })
+    }
+    reader.readAsDataURL(file)
+  }
+
   render() {
     return (
       <div className='main'>
@@ -102,6 +116,7 @@ class Main extends Component {
           addItem={this.addItem}
           deleteItem={this.deleteItem}
           handleTextEdit={this.handleTextEdit}
+          handlePhotoEdit={this.handlePhotoEdit}
         />
         <CvPreview
           profile={this.state.profile}

diff --git a/src/components/Utils/Input.js b/src/components/Utils/Input.js
@@ -8,7 +8,6 @@ export class Input extends Component {
       <input
         type='text'
         placeholder={title}
-        className='title'
         onChange={e => onChange(e, section, index, id)}
       ></input>
     )

diff --git a/src/components/Utils/PhotoInput.js b/src/components/Utils/PhotoInput.js
@@ -1,8 +1,22 @@
 import React, { Component } from 'react'
+import { ReactComponent as AddIcon } from '../../assets/add.svg'
 
 export class PhotoInput extends Component {
   render() {
-    return <div></div>
+    const { onChange } = this.props
+
+    return (
+      <label>
+        Choose Photo
+        <AddIcon />
+        <input
+          type='file'
+          accept='image/*'
+          id='photo'
+          onChange={e => onChange(e)}
+        ></input>
+      </label>
+    )
   }
 }
 

diff --git a/src/components/Utils/TextArea.js b/src/components/Utils/TextArea.js
@@ -8,7 +8,6 @@ export class TextArea extends Component {
       <textarea
         type='text'
         placeholder={title}
-        className='title'
         onChange={e => onChange(e, section, index, id)}
       ></textarea>
     )

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -40,11 +40,33 @@ textarea {
   border: 1px solid #373639;
   border-radius: 10px;
   width: 600px;
+  .item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
   .title {
     margin: 0 0 0.5rem 0;
   }
   .container {
     display: flex;
+    gap: 1rem;
+    .name {
+      flex: 1;
+    }
+    label {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      border: 1px solid hsl(260, 3%, 80%);
+      border-radius: 5px;
+      padding: 0.5rem 1rem;
+      text-align: center;
+      font-size: 1.2rem;
+      svg {
+        height: 45px;
+      }
+    }
   }
   input,
   textarea {
@@ -53,11 +75,13 @@ textarea {
     font-size: 1.2rem;
     border: 1px solid hsl(260, 3%, 80%);
     border-radius: 5px;
-    margin: 0 0 0.5rem 0;
     resize: none;
     &:focus {
       box-shadow: 0 0 3px #0006 inset;
     }
+    &#photo {
+      display: none;
+    }
   }
   .buttons {
     display: flex;
@@ -113,6 +137,7 @@ textarea {
       width: 120px;
       height: 120px;
       background: #fff;
+      border: 3px solid hsl(260, 3%, 72%);
       border-radius: 100px;
       transform: translateY(-2rem);
     }