feat: add picture to posts

Barresi · Jul 7, 2024 · 0cba7ff · 0cba7ff
1 parent 327e8d7
commit 0cba7ff
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 36 deletions.
diff --git a/src/features/input-create-post/ui/input-create-post.tsx b/src/features/input-create-post/ui/input-create-post.tsx
@@ -12,9 +12,8 @@ interface IInputCreatePostProps {
 const InputCreatePost: FC<IInputCreatePostProps> = ({ className }) => {
   const user = useAppSelector(selectUser)
   const dispatch = useAppDispatch()
-  const handleCreatePost = async (text: string): Promise<void> => {
-    console.log(text)
-    await createPost({ text })
+  const handleCreatePost = async (text: string, pictures?: FileList): Promise<void> => {
+    await createPost({ text, pictures })
     dispatch(getAllPostsThunk())
   }
   return (
@@ -23,10 +22,7 @@ const InputCreatePost: FC<IInputCreatePostProps> = ({ className }) => {
       sendMessage={handleCreatePost}
       placeholder='Что у вас нового?'
       className={cn(className, 'border-none')}
-      pictures={[
-        'https://img.freepik.com/free-photo/the-adorable-illustration-of-kittens-playing-in-the-forest-generative-ai_260559-483.jpg?w=826&t=st=1720272228~exp=1720272828~hmac=fa260c3456e9ef3af4a7057d54d95d78657979f2829a19f2833ccb75f823864e',
-        'https://img.freepik.com/free-photo/the-adorable-illustration-of-kittens-playing-in-the-forest-generative-ai_260559-483.jpg?w=826&t=st=1720272228~exp=1720272828~hmac=fa260c3456e9ef3af4a7057d54d95d78657979f2829a19f2833ccb75f823864e'
-      ]}
+      withPicture
     />
   )
 }

diff --git a/src/shared/lib/types/forms.ts b/src/shared/lib/types/forms.ts
@@ -24,5 +24,5 @@ export interface IEditUserSecurityInfoForm {
 }
 export interface ICreatePostForm {
   text: string
-  pictures?: string
+  pictures?: FileList
 }
diff --git a/src/shared/ui/input-send-message.tsx b/src/shared/ui/input-send-message.tsx
@@ -1,23 +1,24 @@
+import { handleFilesChange } from '@shared/lib/handle-file-change'
+import { toast } from '@widgets/toaster/lib/use-toast'
 import { useState, type ChangeEvent, type FC } from 'react'
 import { cn } from '../lib/merge-classes'
 import { Input, type IInputProps } from './input'
 import { UserAvatar } from './user-avatar'
 
+import clear from '@assets/ui/Clear.svg'
 import clip from '@assets/ui/clip.svg'
 import send from '@assets/ui/send.svg'
-import { handleFilesChange } from '@shared/lib/handle-file-change'
-import { toast } from '@widgets/toaster/lib/use-toast'
 
 interface IInputSendMessageProps extends IInputProps {
   avatar?: string | null
-  pictures?: string[]
-  sendMessage: (message: string) => void
+  withPicture: boolean
+  sendMessage: (message: string, pictures?: FileList) => void
 }
 
 // Todo Переписать в textarea
 
 const InputSendMessage: FC<IInputSendMessageProps> = ({
-  pictures,
+  withPicture = false,
   avatar,
   className,
   sendMessage,
@@ -40,20 +41,36 @@ const InputSendMessage: FC<IInputSendMessageProps> = ({
     }
   }
 
+  const deletePictureFromInput = (ind: number): void => {
+    setPreviewUrls(previewUrls.filter((_, i) => ind !== i))
+  }
+
   return (
     <form
+      className='flex flex-col gap-2'
       onSubmit={(e) => {
+        const files = (document.getElementById('clipRef') as HTMLInputElement)?.files
         e.preventDefault()
         if (message) {
-          sendMessage(message)
+          sendMessage(message, files || undefined)
           setMessage('')
+          setPreviewUrls([])
         }
       }}
     >
-      <div className='flex gap-1'>
+      <div className='flex gap-1 pl-5'>
         {previewUrls.map((item, ind) => (
-          <div key={ind} className='w-[50px] h-[50px]'>
-            <img src={item} />
+          <div key={ind} className=' relative'>
+            <img src={item} className='object-cover w-[70px] h-[70px] rounded-[10px]' />
+            <button
+              onClick={() => {
+                deletePictureFromInput(ind)
+              }}
+              type='button'
+              className='rounded-full bg-white w-4 h-4 p-[2px] absolute right-0 top-0'
+            >
+              <img src={clear} className='w-full h-full' />
+            </button>
           </div>
         ))}
       </div>
@@ -77,25 +94,33 @@ const InputSendMessage: FC<IInputSendMessageProps> = ({
           {...props}
         />
         <div className='absolute top-[50%] right-[20px] translate-y-[-50%] flex gap-1'>
-          <button
-            className='p-1'
-            type='button'
-            onClick={() =>
-              (document.getElementById('clipRef') as HTMLInputElement | null)?.click()
-            }
-          >
-            <img className='cursor-pointer  active:scale-[.95]' src={clip} alt='clip' />
-          </button>
+          {withPicture && (
+            <div>
+              <button
+                className='p-1 w-full h-full'
+                type='button'
+                onClick={() =>
+                  (document.getElementById('clipRef') as HTMLInputElement | null)?.click()
+                }
+              >
+                <img
+                  className='cursor-pointer  active:scale-[.95]'
+                  src={clip}
+                  alt='clip'
+                />
+              </button>
 
-          <div className='hidden'>
-            <Input
-              type='file'
-              id='clipRef'
-              accept='image/*'
-              multiple
-              onChange={handleInputFiles}
-            />
-          </div>
+              <div className='hidden'>
+                <Input
+                  type='file'
+                  id='clipRef'
+                  accept='image/*'
+                  multiple
+                  onChange={handleInputFiles}
+                />
+              </div>
+            </div>
+          )}
 
           <button type='submit' className='p-1'>
             <img className='cursor-pointer  active:scale-[.95]' src={send} alt='send' />

diff --git a/src/widgets/edit-account/ui/edit-account.tsx b/src/widgets/edit-account/ui/edit-account.tsx
@@ -103,7 +103,6 @@ const EditAccount: FC = () => {
   }
 
   const onSubmit = (form: IFormInputs): void => {
-    console.log(form)
     const payloadWithoutNullProperties = removeNullProperties(form)
     dispatch(editUserInfoThunk(payloadWithoutNullProperties)).then((data) => {
       if (data.meta.requestStatus === 'fulfilled') {