Skip to content

Commit 6c5befb

Browse files
mharshitamharshita
committed
resolved conflicts
2 parents eb54434 + 1b181b5 commit 6c5befb

File tree

11 files changed

+116
-102
lines changed

11 files changed

+116
-102
lines changed

‎src/assets/scss/components/commentInput.scss‎ renamed to ‎src/assets/scss/components/commentForm.scss‎

File renamed without changes.

‎src/assets/scss/components/dragdrop.scss‎

Lines changed: 0 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -20,52 +20,3 @@
2020
.dropzone:focus {
2121
border-color: $primary;
2222
}
23-
24-
.preview {
25-
&-root {
26-
border: 1px solid #eaeaea;
27-
border-radius: 2px;
28-
box-sizing: border-box;
29-
display: inline-flex;
30-
height: 150px;
31-
margin-bottom: 8px;
32-
margin-right: 8px;
33-
padding: 4px;
34-
position: relative;
35-
width: 150px;
36-
}
37-
38-
&-inner {
39-
display: flex;
40-
min-width: 0px;
41-
overflow: hidden;
42-
}
43-
44-
&-image {
45-
display: block;
46-
height: 100%;
47-
width: auto;
48-
}
49-
50-
&-container {
51-
display: flex;
52-
flex-direction: row;
53-
flex-wrap: wrap;
54-
margin-top: 16px;
55-
}
56-
57-
&-remove-button {
58-
background: $dark-gray-transparent;
59-
border: 0;
60-
border-radius: 50%;
61-
color: $eos-white;
62-
font-weight: $font-weight-close;
63-
position: absolute;
64-
right: 4px;
65-
top: 4px;
66-
}
67-
68-
&-remove-button:hover {
69-
cursor: pointer;
70-
}
71-
}

‎src/assets/scss/components/index.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@
66
@import 'dragdrop';
77
@import 'timeline';
88
@import 'storiesList';
9-
@import 'commentInput';
9+
@import 'commentForm';
1010
@import 'comments';
1111
@import 'pagination';
1212
@import 'modal';
13+
@import 'mediaPreview';
1314
@import 'formError';
1415
@import 'dropdownOptions';
1516
@import 'vote';

‎src/assets/scss/components/mediaPreview.scss‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
.preview {
2+
&-root {
3+
border: 1px solid #eaeaea;
4+
border-radius: 2px;
5+
box-sizing: border-box;
6+
display: inline-flex;
7+
height: 150px;
8+
margin-bottom: 8px;
9+
margin-right: 8px;
10+
padding: 4px;
11+
position: relative;
12+
width: 150px;
13+
}
14+
15+
&-inner {
16+
display: flex;
17+
min-width: 0px;
18+
overflow: hidden;
19+
}
20+
21+
&-image {
22+
display: block;
23+
height: 100%;
24+
width: auto;
25+
}
26+
27+
&-container {
28+
display: flex;
29+
flex-direction: row;
30+
flex-wrap: wrap;
31+
margin-top: 16px;
32+
}
33+
34+
&-remove-button {
35+
background: $dark-gray-transparent;
36+
border: 0;
37+
border-radius: 50%;
38+
color: $eos-white;
39+
font-weight: $font-weight-close;
40+
height: 18px;
41+
padding: 0;
42+
position: absolute;
43+
right: 4px;
44+
top: 4px;
45+
width: 18px;
46+
}
47+
48+
&-remove-button:hover {
49+
cursor: pointer;
50+
}
51+
}

‎src/components/CommentInput.js‎ renamed to ‎src/components/CommentForm.js‎

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import React from 'react'
22
import { useForm } from 'react-hook-form'
33

44
import Button from './Button'
5-
import FormError from '../components/FormError'
5+
import FormError from './FormError'
6+
import MediaPreview from './MediaPreview'
67

7-
const CommentInput = (props) => {
8+
const CommentForm = (props) => {
89
const {
910
attachments,
1011
setAttachments,
@@ -20,24 +21,6 @@ const CommentInput = (props) => {
2021

2122
const { register: registerComment, errors: errorsComment } = useForm()
2223

23-
const removeFile = (name) => {
24-
setAttachments(attachments.filter((attachment) => attachment.name !== name))
25-
}
26-
27-
const mediaPreview = attachments.map((file) => (
28-
<div className='preview-root' key={file.name}>
29-
<button
30-
className='preview-remove-button'
31-
onClick={() => removeFile(file.name)}
32-
>
33-
x
34-
</button>
35-
<div className='preview-inner'>
36-
<img src={file.preview} className='preview-image' alt='preview' />
37-
</div>
38-
</div>
39-
))
40-
4124
const handleFileChange = async (event) => {
4225
const newFiles = event.target.files
4326
const newFilesArray = []
@@ -60,7 +43,7 @@ const CommentInput = (props) => {
6043
<textarea
6144
rows='5'
6245
cols='25'
63-
name='Comments'
46+
name='addReply'
6447
ref={registerReply({ required: true })}
6548
value={commentReply}
6649
onChange={(e) => setCommentReply(e.target.value)}
@@ -81,7 +64,10 @@ const CommentInput = (props) => {
8164
{errorsReply.Comments && (
8265
<FormError message='Reply cannot be empty' />
8366
)}
84-
<div className='preview-container'>{mediaPreview}</div>
67+
<MediaPreview
68+
attachments={attachments}
69+
setAttachments={setAttachments}
70+
/>
8571
</div>
8672
) : (
8773
''
@@ -114,7 +100,10 @@ const CommentInput = (props) => {
114100
{errorsComment.addComment && (
115101
<FormError message='Comment cannot be empty' />
116102
)}
117-
<div className='preview-container'>{mediaPreview}</div>
103+
<MediaPreview
104+
attachments={attachments}
105+
setAttachments={setAttachments}
106+
/>
118107
</div>
119108
) : (
120109
''
@@ -123,4 +112,4 @@ const CommentInput = (props) => {
123112
)
124113
}
125114

126-
export default CommentInput
115+
export default CommentForm

‎src/components/Comments.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Link } from '@reach/router'
33
import Button from './Button'
44
import { useForm } from 'react-hook-form'
55

6-
import CommentInput from './CommentInput'
6+
import CommentForm from './CommentF'
77
import Context from '../modules/Context'
88
import userStory from '../services/user_story'
99

@@ -14,7 +14,7 @@ const Comments = (props) => {
1414

1515
const { handleSubmit: handleSubmitReply } = useForm()
1616

17-
const [commentInput, setCommentInput] = useState(false)
17+
const [commentForm, setCommentForm] = useState(false)
1818

1919
const { state } = useContext(Context)
2020

@@ -207,16 +207,17 @@ const Comments = (props) => {
207207
className='comment-form'
208208
onSubmit={handleSubmitReply(addCommentReply)}
209209
>
210-
<CommentInput
210+
<CommentForm
211211
attachments={attachments}
212212
setAttachments={setAttachments}
213213
addCommentReply={addCommentReply}
214214
commentReply={commentReply}
215215
setCommentReply={setCommentReply}
216-
isCommentReply={commentInput}
216+
isCommentReply={commentForm}
217217
/>
218+
<h1>Commented</h1>
218219
<Button
219-
onClick={() => setCommentInput(true)}
220+
onClick={() => setCommentForm(true)}
220221
className='btn btn-default'
221222
>
222223
Add Reply
@@ -235,16 +236,16 @@ const Comments = (props) => {
235236
className='comment-form'
236237
onSubmit={handleSubmitComment(addComment)}
237238
>
238-
<CommentInput
239+
<CommentForm
239240
attachments={attachments}
240241
setAttachments={setAttachments}
241242
addComment={addComment}
242243
setComment={setComment}
243-
isComment={commentInput}
244+
isComment={commentForm}
244245
comment={comment}
245246
/>
246247
<Button
247-
onClick={() => setCommentInput(true)}
248+
onClick={() => setCommentForm(true)}
248249
className='btn btn-default'
249250
data-cy='btn-comment'
250251
>

‎src/components/Dragdrop.js‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1-
import React, { useEffect, useState } from 'react'
1+
import React, { useEffect } from 'react'
22
import { useDropzone } from 'react-dropzone'
3+
import MediaPreview from './MediaPreview'
34

4-
const Dragdrop = ({ setAttachments }) => {
5-
const [files, setFiles] = useState([])
6-
5+
const Dragdrop = ({ attachments, setAttachments }) => {
76
const { getRootProps, getInputProps } = useDropzone({
87
multiple: true,
98
onDrop: (acceptedFiles) => {
10-
setAttachments(acceptedFiles)
11-
setFiles((files) => [
12-
...files,
9+
setAttachments((attachments) => [
10+
...attachments,
1311
...acceptedFiles.map((file) =>
1412
Object.assign(file, {
1513
preview: URL.createObjectURL(file)
@@ -19,19 +17,13 @@ const Dragdrop = ({ setAttachments }) => {
1917
}
2018
})
2119

22-
const mediaPreview = files.map((file) => (
23-
<div className='preview-root' key={file.name}>
24-
<div className='preview-inner'>
25-
<img src={file.preview} className='preview-image' alt='preview' />
26-
</div>
27-
</div>
28-
))
29-
3020
useEffect(
3121
() => () => {
32-
files.forEach((file) => URL.revokeObjectURL(file.preview))
22+
attachments.forEach((attachment) =>
23+
URL.revokeObjectURL(attachment.preview)
24+
)
3325
},
34-
[files]
26+
[attachments]
3527
)
3628

3729
return (
@@ -40,7 +32,7 @@ const Dragdrop = ({ setAttachments }) => {
4032
<input {...getInputProps()} />
4133
<p>Drag 'n' drop some files here, or click to select files</p>
4234
</div>
43-
<aside className='preview-container'>{mediaPreview}</aside>
35+
<MediaPreview attachments={attachments} setAttachments={setAttachments} />
4436
</section>
4537
)
4638
}

‎src/components/MediaPreview.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react'
2+
3+
const MediaPreview = ({ attachments, setAttachments }) => {
4+
const removeFile = (name) => {
5+
setAttachments(attachments.filter((attachment) => attachment.name !== name))
6+
}
7+
8+
const mediaPreview = attachments.map((file) => (
9+
<div className='preview-root' key={file.name}>
10+
<button
11+
className='preview-remove-button'
12+
onClick={() => removeFile(file.name)}
13+
>
14+
&times;
15+
</button>
16+
<div className='preview-inner'>
17+
<img src={file.preview} className='preview-image' alt='preview' />
18+
</div>
19+
</div>
20+
))
21+
22+
return <div className='preview-container'>{mediaPreview}</div>
23+
}
24+
25+
export default MediaPreview

‎src/pages/NewStory.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,10 @@ const NewStory = () => {
255255
/>
256256
{descriptionError && <FormError type='emptyDescription' />}
257257
</div>
258-
<Dragdrop setAttachments={setAttachments} />
258+
<Dragdrop
259+
attachments={attachments}
260+
setAttachments={setAttachments}
261+
/>
259262
<div className='flex flex-row flex-center'>
260263
<Button
261264
type='submit'

‎src/pages/Story.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ const Story = (props) => {
237237
</div>
238238
<div>
239239
{story.Attachment?.map((obj) => (
240-
<img src={obj.url} alt='attachment' />
240+
<img key={obj.id} src={obj.url} alt='attachment' />
241241
))}
242242
</div>
243243
<Comments storyId={storyId} />

0 commit comments

Comments
 (0)