From b7b15fd26be9e7be66dcd9765f78ffb9711820ef Mon Sep 17 00:00:00 2001 From: Pavel Torbeev Date: Sat, 9 Sep 2023 00:53:05 +0300 Subject: [PATCH] feat: add home page (text & files uploading) --- package.json | 1 + src/api/process/createProcess.ts | 32 +++ src/api/process/getProcess.ts | 29 +++ src/api/process/index.ts | 2 + src/api/process/queryKeys.ts | 1 + src/api/process/types.ts | 10 + src/api/process/urlKeys.ts | 2 + src/app/styles/colors.scss | 39 +++- .../Attachment/Attachment.module.scss | 32 +++ src/components/Attachment/Attachment.tsx | 59 ++++++ src/components/Attachment/assets/doc.svg | 7 + src/components/Attachment/assets/file.svg | 8 + src/components/Attachment/assets/pdf.svg | 7 + src/components/Attachment/assets/xls.svg | 7 + src/components/Attachment/index.ts | 1 + src/components/Button/Button.module.scss | 53 ++++- src/components/Button/Button.tsx | 9 +- src/components/Divider/Divider.module.scss | 17 +- src/components/Divider/Divider.tsx | 2 +- src/components/Textarea/Textarea.module.scss | 22 +- src/components/Textarea/Textarea.tsx | 18 +- src/components/Upload/Upload.module.scss | 15 ++ src/components/Upload/Upload.tsx | 28 +++ src/components/Upload/index.ts | 1 + .../UploadButton/UploadButton.module.scss | 17 -- src/components/UploadButton/UploadButton.tsx | 35 ---- src/components/UploadButton/index.ts | 1 - src/config.ts | 5 +- .../ChatFormMultiplePhoto.tsx | 59 +++--- .../ChatFormMultiplePhotoDescription.tsx | 113 +++++----- .../ChatFormPhotoDescription.tsx | 67 +++--- src/pages/home/HomePage.module.scss | 85 +++++++- src/pages/home/HomePage.tsx | 197 ++++++++++++++++-- src/pages/home/assets/plus.svg | 3 + yarn.lock | 21 ++ 35 files changed, 752 insertions(+), 253 deletions(-) create mode 100644 src/api/process/createProcess.ts create mode 100644 src/api/process/getProcess.ts create mode 100644 src/api/process/index.ts create mode 100644 src/api/process/queryKeys.ts create mode 100644 src/api/process/types.ts create mode 100644 src/api/process/urlKeys.ts create mode 100644 src/components/Attachment/Attachment.module.scss create mode 100644 src/components/Attachment/Attachment.tsx create mode 100644 src/components/Attachment/assets/doc.svg create mode 100644 src/components/Attachment/assets/file.svg create mode 100644 src/components/Attachment/assets/pdf.svg create mode 100644 src/components/Attachment/assets/xls.svg create mode 100644 src/components/Attachment/index.ts create mode 100644 src/components/Upload/Upload.module.scss create mode 100644 src/components/Upload/Upload.tsx create mode 100644 src/components/Upload/index.ts delete mode 100644 src/components/UploadButton/UploadButton.module.scss delete mode 100644 src/components/UploadButton/UploadButton.tsx delete mode 100644 src/components/UploadButton/index.ts create mode 100644 src/pages/home/assets/plus.svg diff --git a/package.json b/package.json index 3bcb59f..294f72f 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "prettier": "^3.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-dropzone": "^14.2.3", "react-helmet": "^6.1.0", "react-hook-form": "^7.45.4", "react-router-dom": "^6.15.0", diff --git a/src/api/process/createProcess.ts b/src/api/process/createProcess.ts new file mode 100644 index 0000000..a596795 --- /dev/null +++ b/src/api/process/createProcess.ts @@ -0,0 +1,32 @@ +import { useMutation } from '@tanstack/react-query'; +import { MutationConfig, queryClient } from '../../lib/react-query'; +import { axios } from '../../lib/axios'; +import { TextDescriptor } from './types'; +import { PROCESS_API_URL } from './urlKeys'; +import { QUERY_KEY_PROCESSES } from './queryKeys'; + +export type CreateProcessDTO = Partial> & { + files?: []; +}; + +export type CreateProcessResponse = { + id: string; +}; + +export const createProcess = (data: CreateProcessDTO): Promise => { + return axios.post(`${PROCESS_API_URL}/`, data); +}; + +type UseCreateProcessOptions = { + config?: MutationConfig; +}; + +export const useCreateProcess = ({ config }: UseCreateProcessOptions = {}) => { + return useMutation({ + onMutate: async () => { + await queryClient.cancelQueries([QUERY_KEY_PROCESSES]); + }, + ...config, + mutationFn: createProcess + }); +}; diff --git a/src/api/process/getProcess.ts b/src/api/process/getProcess.ts new file mode 100644 index 0000000..54595fe --- /dev/null +++ b/src/api/process/getProcess.ts @@ -0,0 +1,29 @@ +import { useQuery } from '@tanstack/react-query'; +import { axios } from '../../lib/axios'; +import { ExtractFnReturnType, QueryConfig } from '../../lib/react-query'; +import { ProcessDescriptor } from './types'; +import { PROCESS_API_URL } from './urlKeys'; +import { QUERY_KEY_PROCESSES } from './queryKeys'; + +export type GetProcessResponse = ProcessDescriptor; + +export const getProcess = ({ processId }: { processId: string }): Promise => { + return axios.get(`${PROCESS_API_URL}/${processId}`); +}; + +type QueryFnType = typeof getProcess; + +type UseProcessOptions = { + processId: string; + config?: QueryConfig; +}; + +export const useProcess = ({ processId, config }: UseProcessOptions) => { + return useQuery>({ + ...config, + queryKey: [QUERY_KEY_PROCESSES, processId], + queryFn: async () => { + return await getProcess({ processId }); + } + }); +}; diff --git a/src/api/process/index.ts b/src/api/process/index.ts new file mode 100644 index 0000000..0383441 --- /dev/null +++ b/src/api/process/index.ts @@ -0,0 +1,2 @@ +export * from './types'; +export * from './createProcess'; diff --git a/src/api/process/queryKeys.ts b/src/api/process/queryKeys.ts new file mode 100644 index 0000000..013feef --- /dev/null +++ b/src/api/process/queryKeys.ts @@ -0,0 +1 @@ +export const QUERY_KEY_PROCESSES = 'processes'; diff --git a/src/api/process/types.ts b/src/api/process/types.ts new file mode 100644 index 0000000..97df69d --- /dev/null +++ b/src/api/process/types.ts @@ -0,0 +1,10 @@ +export type TextDescriptor = { + score: string; + text: string; +}; + +export type ProcessDescriptor = { + texts: TextDescriptor[]; + done: number; + count: number; +}; diff --git a/src/api/process/urlKeys.ts b/src/api/process/urlKeys.ts new file mode 100644 index 0000000..a171dcc --- /dev/null +++ b/src/api/process/urlKeys.ts @@ -0,0 +1,2 @@ +export const PROCESS_API_URL = '/process'; +export const PROCESS_PARAM = 'processId'; diff --git a/src/app/styles/colors.scss b/src/app/styles/colors.scss index b927fa1..9b850ae 100644 --- a/src/app/styles/colors.scss +++ b/src/app/styles/colors.scss @@ -9,7 +9,8 @@ // синий $color-text: #010819; -$color-background: #e6edfe; +//$color-background: #e6edfe; +$color-background: #fafafa; $color-primary: #0647e0; $color-secondary: #cddcfe; $color-accent: #064ff9; @@ -30,24 +31,42 @@ $color-accent: #064ff9; $color-background-primary: $color-background; $color-background-secondary: $color-secondary; -$color-background-dark-100: darken($color-background, 1%); -$color-background-dark-200: darken($color-background, 2%); -$color-background-dark-300: darken($color-background, 3%); -$color-background-dark-400: darken($color-background, 4%); +$color-background-dark-100: darken($color-background, 3%); +$color-background-dark-200: darken($color-background, 6%); +$color-background-dark-300: darken($color-background, 12%); +$color-background-dark-400: darken($color-background, 24%); +$color-background-dark-500: darken($color-background, 48%); $color-background-accent: $color-accent; $color-text-primary: $color-text; -$color-text-secondary: color.adjust($color-background, $blackness: 100%); -$color-text-tertiary: color.adjust($color-background, $blackness: 70%); +$color-text-secondary: darken($color-background, 40%); +$color-text-tertiary: darken($color-background, 60%); $color-text-quaternary: $color-background; $color-text-brand: $color-primary; $color-text-disabled: color.adjust($color-text, $lightness: 40%); $color-brand-primary: $color-primary; -$color-brand-hover: color.adjust($color-primary, $blackness: 2%); -$color-brand-disabled: color.adjust($color-primary, $lightness: 2%); +$color-brand-hover: darken($color-brand-primary, 3%); +$color-brand-active: darken($color-brand-primary, 6%); +$color-brand-disabled: color.adjust($color-brand-primary, $lightness: 30%); -$color-border: color.invert($color-background); +$color-border-default: $color-background-dark-300; +$color-border-hover: lighten($color-brand-primary, 30%); +$color-border-active: $color-brand-primary; + +$color-divider-dark: $color-border-default; +$color-divider-darker: darken($color-border-default, 10%); + +// Button +$color-button-primary-default-fill: $color-brand-primary; +$color-button-primary-hover-fill: $color-brand-hover; +$color-button-primary-pressed-fill: $color-brand-active; +$color-button-primary-disabled-fill: $color-brand-disabled; + +$color-button-secondary-default-fill: $color-background-secondary; +$color-button-secondary-hover-fill: darken($color-secondary, 3%); +$color-button-secondary-pressed-fill: darken($color-secondary, 6%); +$color-button-secondary-disabled-fill: lighten($color-secondary, 3%); //@debug $color-border; diff --git a/src/components/Attachment/Attachment.module.scss b/src/components/Attachment/Attachment.module.scss new file mode 100644 index 0000000..966ebac --- /dev/null +++ b/src/components/Attachment/Attachment.module.scss @@ -0,0 +1,32 @@ +@import 'src/app/styles/vars'; + +.Attachment { + @include flex-col-middle; + cursor: pointer; +} + +.Attachment__text { + @include text-programming-code-regular; + position: relative; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100px; +} + +.Attachment__text_hidden { + opacity: 0; +} + +.Attachment__text_x { + top: -$line-height-16 / 2; + font-size: 16px; + line-height: 0; + overflow: visible; +} + +.Attachment__icon { + width: 64px; + height: 88px; + margin-bottom: $spacing-small-4x; +} \ No newline at end of file diff --git a/src/components/Attachment/Attachment.tsx b/src/components/Attachment/Attachment.tsx new file mode 100644 index 0000000..b34d229 --- /dev/null +++ b/src/components/Attachment/Attachment.tsx @@ -0,0 +1,59 @@ +import { ComponentType, ElementType, ReactComponentElement } from 'react'; +import clsx from 'clsx'; +import { ReactFCC } from '../../utils/ReactFCC'; +import { useHover } from '../../hooks/useHover'; +import { ReactComponent as DocIcon } from './assets/doc.svg'; +import { ReactComponent as XlsIcon } from './assets/xls.svg'; +import { ReactComponent as PdfIcon } from './assets/pdf.svg'; +import { ReactComponent as FileIcon } from './assets/file.svg'; +import s from './Attachment.module.scss'; + +export interface AttachmentProps { + /** + * Дополнительный css-класс + */ + className?: string; + /** + * Объект файла + */ + file: File; + + onClick?: () => void; +} + +const extensionIcon: { [key: string]: ElementType } = { + doc: DocIcon, + docx: DocIcon, + xls: XlsIcon, + xlsx: XlsIcon, + pdf: PdfIcon +}; + +export const Attachment: ReactFCC = (props) => { + const { className, file, onClick } = props; + + const ext = file.name.split('.')[file.name.split('.').length - 1]; + const Component = extensionIcon[ext] || FileIcon; + + const { hovered, ...hoverProps } = useHover(); + + return ( +
onClick?.()} {...hoverProps}> + + +
+ {file.name} +
+ +
+ {'×'} +
+
+ ); +}; diff --git a/src/components/Attachment/assets/doc.svg b/src/components/Attachment/assets/doc.svg new file mode 100644 index 0000000..ba0edef --- /dev/null +++ b/src/components/Attachment/assets/doc.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Attachment/assets/file.svg b/src/components/Attachment/assets/file.svg new file mode 100644 index 0000000..2814564 --- /dev/null +++ b/src/components/Attachment/assets/file.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Attachment/assets/pdf.svg b/src/components/Attachment/assets/pdf.svg new file mode 100644 index 0000000..63baa22 --- /dev/null +++ b/src/components/Attachment/assets/pdf.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Attachment/assets/xls.svg b/src/components/Attachment/assets/xls.svg new file mode 100644 index 0000000..5fbbb5d --- /dev/null +++ b/src/components/Attachment/assets/xls.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/Attachment/index.ts b/src/components/Attachment/index.ts new file mode 100644 index 0000000..cf17ddc --- /dev/null +++ b/src/components/Attachment/index.ts @@ -0,0 +1 @@ +export * from './Attachment'; diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss index 85d0aa2..9cfb556 100644 --- a/src/components/Button/Button.module.scss +++ b/src/components/Button/Button.module.scss @@ -1,11 +1,11 @@ @import 'src/app/styles/vars'; $button-border-width: 2px; +$button-box-shadow-sizes: 0 20px 80px -20px; .Button { - //@include text-body-m-medium; @include text-body-m-regular; - @include transition(box-shadow, transform, border-color); + @include transition(box-shadow, transform, border-color, background-color); position: relative; display: flex; @@ -29,10 +29,16 @@ $button-border-width: 2px; outline: none; } + &.Button_size_large:hover, + &.Button_size_large.Button_hovered, + &.Button_size_large_x:hover, + &.Button_size_large_x.Button_hovered, { + //transform: translate(0, -3px); + } + &:hover, &.Button_hovered { - transform: translate(0, -3px); - + //transform: translate(0, -3px); } } @@ -61,6 +67,10 @@ $button-border-width: 2px; text-align: center; } +.Button__loader { + color: $color-text-primary; +} + .Button__loader, .Button__contentLeft, .Button__contentRight { @@ -77,6 +87,12 @@ $button-border-width: 2px; margin-left: $spacing-small-3x; } +.Button_size_small_x { + height: 32px; + min-height: 32px; + font-size: $font-size-14; +} + .Button_size_small { height: 32px; min-height: 32px; @@ -93,29 +109,44 @@ $button-border-width: 2px; min-height: 48px; } +.Button_size_large_x { + @include text-body-l-regular; + height: 64px; + min-height: 64px; +} + .Button_variant_primary { - background-color: $color-brand-primary; + background-color: $color-button-primary-default-fill; color: $color-text-quaternary; &.Button_hovered, &:hover { - //background-color: $color-brand-hover; - box-shadow: 0 20px 80px -10px $color-brand-primary; + background-color: $color-button-primary-hover-fill; + //box-shadow: #{$button-box-shadow-sizes} $color-brand-primary; + } + + &:active { + background-color: $color-button-primary-pressed-fill; } &.Button_disabled { - color: $color-text-tertiary; + //color: $color-text-tertiary; background-color: $color-brand-disabled; } } .Button_variant_secondary { - background-color: $color-background-secondary; - color: $color-text-primary; + background-color: $color-button-secondary-default-fill; + color: $color-text-brand; &.Button_hovered, &:hover { - //background-color: $color-on-surface-dark-400; + //box-shadow: #{$button-box-shadow-sizes} $color-background-dark-400; + background-color: $color-button-secondary-hover-fill; + } + + &:active { + background-color: $color-button-secondary-pressed-fill; } &.Button_disabled { diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index b46f2ca..404acf6 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -1,12 +1,15 @@ import React, { ElementType, useMemo } from 'react'; import clsx from 'clsx'; +import { PolyExtends } from '../../utils/types'; +import { Loader } from '../Loader'; import s from './Button.module.scss'; -import {PolyExtends} from '../../utils/types'; export enum ButtonSize { + small_x = 'small_x', small = 'small', medium = 'medium', - large = 'large' + large = 'large', + large_x = 'large_x' } export enum ButtonVariant { @@ -138,7 +141,7 @@ export function Button
{children}
- {/*{isLoading && }*/} + {isLoading && } ); diff --git a/src/components/Divider/Divider.module.scss b/src/components/Divider/Divider.module.scss index 4c8a976..6d81451 100644 --- a/src/components/Divider/Divider.module.scss +++ b/src/components/Divider/Divider.module.scss @@ -3,10 +3,11 @@ .Divider { margin: 0; border: 0; - background-color: $color-on-surface-dark-300; + background-color: $color-divider-dark; } .Divider_variant_horizontal { + width: 100%; height: 1px; } @@ -15,10 +16,10 @@ height: auto; } -//.Divider_color_light { -// background-color: $color-on-surface-light-200; -//} -// -//.Divider_color_dark { -// background-color: $color-on-surface-dark-300; -//} +.Divider_color_light { + background-color: $color-background-secondary; +} + +.Divider_color_dark { + background-color: $color-divider-dark; +} diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index b623de8..117210b 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -34,7 +34,7 @@ export interface IDividerProps extends IntrinsicPropsWithoutRef<'hr'> { export function Divider({ className, - variant = DividerVariant.vertical, + variant = DividerVariant.horizontal, color = DividerColor.dark, innerRef, ...props diff --git a/src/components/Textarea/Textarea.module.scss b/src/components/Textarea/Textarea.module.scss index 2f670be..55d086f 100644 --- a/src/components/Textarea/Textarea.module.scss +++ b/src/components/Textarea/Textarea.module.scss @@ -2,29 +2,25 @@ .Input { @include text-body-m-regular; - @include transition(border-color, box-shadow); + @include transition(border-color); position: relative; display: flex; align-items: center; - min-height: 50px; - max-height: 300px; padding: 15px $spacing-small-x; color: $color-text-primary; overflow: hidden; - border: 1px solid transparent; + border: 1px solid $color-border-default; border-radius: $radius-small; - background-color: $color-on-surface-dark-400; + background-color: $color-background-primary; cursor: text; box-sizing: border-box; overflow-y: auto; word-wrap: break-word; - @include scrollbar; - - &:hover { - box-shadow: $shadow-hover; + &:hover:not(.Input_focus, .Input_error) { + border-color: $color-border-hover; } } @@ -33,7 +29,7 @@ } .Input_focus { - border-color: $color-brand-primary; + border-color: $color-border-active; } .Input_disabled { @@ -56,8 +52,8 @@ min-width: 0; height: 100%; - resize: none; - white-space: break-spaces; + //resize: none; + //white-space: break-spaces; &:placeholder-shown + .Input__clear { display: none; @@ -86,7 +82,7 @@ } .Input__input::placeholder { - color: $color-text-tertiary; + color: $color-text-secondary; opacity: 1; } diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx index c990dab..2c4cba9 100644 --- a/src/components/Textarea/Textarea.tsx +++ b/src/components/Textarea/Textarea.tsx @@ -65,10 +65,10 @@ const TextareaForwardedRef = React.forwardRef( const delegateProps = useDelegateFocus(inputRef, { onClick }); const { focused, ...focusProps } = useFocus({ ...inputProps, ...registration }); - if (inputRef.current) { - inputRef.current.style.height = '1px'; - inputRef.current.style.height = inputRef.current.scrollHeight + 'px'; - } + // if (inputRef.current) { + // inputRef.current.style.height = '1px'; + // inputRef.current.style.height = inputRef.current.scrollHeight + 'px'; + // } return (
( ref={composeRefs(inputRef, inputRefProp, registration?.ref)} {...inputProps} {...focusProps} - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - onInput={(e) => { - setTimeout(() => { - if (inputRef.current) { - inputRef.current.style.height = '1px'; - inputRef.current.style.height = inputRef.current.scrollHeight + 'px'; - } - }); - }} />
); diff --git a/src/components/Upload/Upload.module.scss b/src/components/Upload/Upload.module.scss new file mode 100644 index 0000000..0588a34 --- /dev/null +++ b/src/components/Upload/Upload.module.scss @@ -0,0 +1,15 @@ +@import 'src/app/styles/vars'; + +.Upload { + width: fit-content; +} + +.Upload__icon { + width: 24px; + height: 24px; + color: white; +} + +.Upload__input { + display: none; +} \ No newline at end of file diff --git a/src/components/Upload/Upload.tsx b/src/components/Upload/Upload.tsx new file mode 100644 index 0000000..06dc48f --- /dev/null +++ b/src/components/Upload/Upload.tsx @@ -0,0 +1,28 @@ +import { forwardRef, Ref, useId } from 'react'; +import clsx from 'clsx'; +import { ReactFCC } from '../../utils/ReactFCC'; +import { IntrinsicPropsWithoutRef } from '../../utils/types'; +import s from './Upload.module.scss'; + +export interface UploadButtonProps extends IntrinsicPropsWithoutRef<'input'> { + /** + * Дополнительный css-класс + */ + className?: string; + // onChange?: (e: any) => void; + // multiple?: boolean; +} + +export const Upload = forwardRef(function Upload(props: UploadButtonProps, ref: Ref) { + const { children, className, ...inputProps } = props; + + const id = useId(); + + return ( + + ); +}); diff --git a/src/components/Upload/index.ts b/src/components/Upload/index.ts new file mode 100644 index 0000000..70aa206 --- /dev/null +++ b/src/components/Upload/index.ts @@ -0,0 +1 @@ +export * from './Upload'; diff --git a/src/components/UploadButton/UploadButton.module.scss b/src/components/UploadButton/UploadButton.module.scss deleted file mode 100644 index 8bc57f5..0000000 --- a/src/components/UploadButton/UploadButton.module.scss +++ /dev/null @@ -1,17 +0,0 @@ -@import 'src/app/styles/vars'; - -.UploadButton { - width: 100%; - height: 80px !important; - //background-color: $color-on-surface-dark-400; -} - -.UploadButton__icon { - width: 24px; - height: 24px; - color: white; -} - -.UploadButton__input { - display: none; -} \ No newline at end of file diff --git a/src/components/UploadButton/UploadButton.tsx b/src/components/UploadButton/UploadButton.tsx deleted file mode 100644 index 425e969..0000000 --- a/src/components/UploadButton/UploadButton.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import clsx from 'clsx'; -import s from './UploadButton.module.scss'; -import {ReactFCC} from '../../utils/ReactFCC'; -import {Button, ButtonVariant} from '../Button'; -import { ReactComponent as UploadIcon } from '../../assets/icons/upload.svg'; -import {useId} from 'react'; - -export interface UploadButtonProps { - /** - * Дополнительный css-класс - */ - className?: string; - onChange?: (e: any) => void; - multiple?: boolean; -} - -export const UploadButton: ReactFCC = (props) => { - const {className, onChange, multiple} = props; - - const id = useId(); - - return ( - - ); -}; - diff --git a/src/components/UploadButton/index.ts b/src/components/UploadButton/index.ts deleted file mode 100644 index 52f301f..0000000 --- a/src/components/UploadButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './UploadButton'; \ No newline at end of file diff --git a/src/config.ts b/src/config.ts index 7816af1..39d1c17 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,6 +1,7 @@ // export const BACKEND_URL = 'http://192.168.83.181:8000'; // export const BACKEND_URL = 'http://192.168.22.4:8000'; // export const BACKEND_URL = 'https://ed68-77-234-219-9.ngrok-free.app'; -export const BACKEND_URL = 'https://16c2-77-234-219-9.ngrok-free.app'; +// export const BACKEND_URL = 'https://16c2-77-234-219-9.ngrok-free.app'; +export const BACKEND_URL = 'http://192.168.107.4'; -export const API_URL = BACKEND_URL + '/api'; \ No newline at end of file +export const API_URL = BACKEND_URL + '/api'; diff --git a/src/pages/chat/components/ChatForm/components/ChatFormMultiplePhoto/ChatFormMultiplePhoto.tsx b/src/pages/chat/components/ChatForm/components/ChatFormMultiplePhoto/ChatFormMultiplePhoto.tsx index 2312a33..c3c2b82 100644 --- a/src/pages/chat/components/ChatForm/components/ChatFormMultiplePhoto/ChatFormMultiplePhoto.tsx +++ b/src/pages/chat/components/ChatForm/components/ChatFormMultiplePhoto/ChatFormMultiplePhoto.tsx @@ -1,10 +1,10 @@ -import {ReactFCC} from '../../../../../../utils/ReactFCC'; -import {ChangeEvent} from 'react'; -import s from '../ChatFormPhotoDescription/ChatFormPhotoDescription.module.scss'; -import {UploadButton} from '../../../../../../components/UploadButton'; -import {Control, Controller, FieldValues, UseFormRegisterReturn} from 'react-hook-form'; -import {SimpleButton} from '../../../SimpleButton'; +import { ChangeEvent } from 'react'; +import { Control, Controller, FieldValues, UseFormRegisterReturn } from 'react-hook-form'; import clsx from 'clsx'; +import { ReactFCC } from '../../../../../../utils/ReactFCC'; +import s from '../ChatFormPhotoDescription/ChatFormPhotoDescription.module.scss'; +import { Upload } from '../../../../../../components/Upload'; +import { SimpleButton } from '../../../SimpleButton'; export interface ChatFormMultiplePhotoProps { className?: string; @@ -14,36 +14,37 @@ export interface ChatFormMultiplePhotoProps { } export const ChatFormMultiplePhoto: ReactFCC = (props) => { - const {className, onSubmit, registration, control } = props; + const { className, onSubmit, registration, control } = props; return (
- ( - <> - {value && Object.values(value).map((file: any, index) => ( -

Загружен файл: {file.name}

- ))} + ( + <> + {value && Object.values(value).map((file: any, index) =>

Загружен файл: {file.name}

)} - ) => { - if (!e.target.files) { - return; - } + ) => { + if (!e.target.files) { + return; + } - const files: any = { ...value }; - Array.from(e.target.files).forEach((file, index) => { - files[`file_${Object.keys(files).length + 1}`] = file; - }); + const files: any = { ...value }; + Array.from(e.target.files).forEach((file, index) => { + files[`file_${Object.keys(files).length + 1}`] = file; + }); - onChange({ ...files }) - }} - /> + onChange({ ...files }); + }} + /> - - - )} name={registration.name!} /> + + + )} + name={registration.name!} + />
); }; - diff --git a/src/pages/chat/components/ChatForm/components/ChatFormMultiplePhotoDescription/ChatFormMultiplePhotoDescription.tsx b/src/pages/chat/components/ChatForm/components/ChatFormMultiplePhotoDescription/ChatFormMultiplePhotoDescription.tsx index 46cfaf0..25fe8ef 100644 --- a/src/pages/chat/components/ChatForm/components/ChatFormMultiplePhotoDescription/ChatFormMultiplePhotoDescription.tsx +++ b/src/pages/chat/components/ChatForm/components/ChatFormMultiplePhotoDescription/ChatFormMultiplePhotoDescription.tsx @@ -1,12 +1,12 @@ +import { ChangeEvent } from 'react'; +import { Control, Controller, FieldValues, UseFormRegisterReturn } from 'react-hook-form'; import clsx from 'clsx'; -import {ReactFCC} from '../../../../../../utils/ReactFCC'; -import {Control, Controller, FieldValues, UseFormRegisterReturn} from 'react-hook-form'; -import {SimpleButton} from '../../../SimpleButton'; +import { ReactFCC } from '../../../../../../utils/ReactFCC'; +import { SimpleButton } from '../../../SimpleButton'; import s from '../ChatFormMultipleDateDescription/ChatFormMultipleDateDescription.module.scss'; -import {Textarea} from '../../../../../../components/Textarea'; -import {Button, ButtonVariant} from '../../../../../../components/Button'; -import {ChangeEvent} from 'react'; -import {UploadButton} from '../../../../../../components/UploadButton'; +import { Textarea } from '../../../../../../components/Textarea'; +import { Button, ButtonVariant } from '../../../../../../components/Button'; +import { Upload } from '../../../../../../components/Upload'; export interface ChatFormMultiplePhotoDescriptionProps { className?: string; @@ -16,58 +16,67 @@ export interface ChatFormMultiplePhotoDescriptionProps { } export const ChatFormMultiplePhotoDescription: ReactFCC = (props) => { - const {className, registration, control, onSubmit} = props; + const { className, registration, control, onSubmit } = props; return (
- ( - <> -
- {value.map((item: any, index: number, { length: arrLength }: any) => { - return ( -
- {item.file && ( -

Загружен файл: {item.file.name}

- )} + ( + <> +
+ {value.map((item: any, index: number, { length: arrLength }: any) => { + return ( +
+ {item.file && ( +

Загружен файл: {item.file.name}

+ )} -