Skip to content

Commit

Permalink
Fix ping-pong function in chat ws
Browse files Browse the repository at this point in the history
  • Loading branch information
@yaroslavUsenko
yaroslavUsenko committed Dec 17, 2024
1 parent e97226f commit 0ccd035
Show file tree
Hide file tree
Showing 59 changed files with 1,763 additions and 1,768 deletions.
118 changes: 59 additions & 59 deletions src/components/FilterPanel/components/StatusCheckboxGroup/StatusCheckboxGroup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,87 +1,87 @@
import { FC, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { FC, useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'

import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Divider from "@mui/material/Divider";
import IconButton from "@mui/material/IconButton";
import useMediaQuery from "@mui/material/useMediaQuery";
import useTheme from "@mui/material/styles/useTheme";
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Divider from '@mui/material/Divider'
import IconButton from '@mui/material/IconButton'
import useTheme from '@mui/material/styles/useTheme'
import useMediaQuery from '@mui/material/useMediaQuery'

import FilterAltIcon from "@mui/icons-material/FilterAlt";
import FilterAltIcon from '@mui/icons-material/FilterAlt'

import { CustomCheckbox } from "./components/CustomCheckbox";
import { VerticalDivider } from "components/VerticalDivider";
import { VerticalDivider } from 'components/VerticalDivider'
import { CustomCheckbox } from './components/CustomCheckbox'

import { useGetStatusesFullInfo } from "./hooks/useGetStatusesFullInfo";
import IPalette from "theme/IPalette.interface";
import { dimensions, urlKeys } from "constants";
import { useChangeURL } from "hooks/index";
import { dimensions, urlKeys } from 'constants/index'
import { useChangeURL } from 'hooks/index'
import IPalette from 'theme/IPalette.interface'
import { useGetStatusesFullInfo } from './hooks/useGetStatusesFullInfo'

interface StatusCheckboxGroupProps {
isAllStatuses: boolean;
isAllStatuses: boolean
}

const StatusCheckboxGroup: FC<StatusCheckboxGroupProps> = ({
isAllStatuses,
}) => {
const { t } = useTranslation();
const { palette }: IPalette = useTheme();
const { t } = useTranslation()
const { palette }: IPalette = useTheme()
const matches = useMediaQuery(
`(max-width: ${dimensions.BREAK_POINTS.STATUSES_FILTER}px)`
);
)

const [isOpen, setIsOpen] = useState(false);
const iconButtonRef = useRef<HTMLElement>(null);
const boxRef = useRef<HTMLElement>(null);
const [isOpen, setIsOpen] = useState(false)
const iconButtonRef = useRef<HTMLElement>(null)
const boxRef = useRef<HTMLElement>(null)

const putStatusesInURL = useChangeURL();
const putStatusesInURL = useChangeURL()

const [statusesFullInfo, checked] = useGetStatusesFullInfo(isAllStatuses);
const isAllUnchecked: boolean = checked && !checked.some(value => value);
const [statusesFullInfo, checked] = useGetStatusesFullInfo(isAllStatuses)
const isAllUnchecked: boolean = checked && !checked.some(value => value)

useEffect(() => {
const handleClickOutside = event => {
const isIconButtonClicked =
iconButtonRef.current && iconButtonRef.current.contains(event.target);
iconButtonRef.current && iconButtonRef.current.contains(event.target)

const isBoxClicked =
boxRef.current && boxRef.current.contains(event.target);
boxRef.current && boxRef.current.contains(event.target)

if (!isIconButtonClicked && !isBoxClicked) {
setIsOpen(false);
setIsOpen(false)
}
};
}

document.addEventListener("click", handleClickOutside);
document.addEventListener('click', handleClickOutside)

return () => {
document.removeEventListener("click", handleClickOutside);
};
}, [iconButtonRef, boxRef]);
document.removeEventListener('click', handleClickOutside)
}
}, [iconButtonRef, boxRef])

const handleParentChange = () => {
const updatedChecked = checked.map(() => false);
const updatedChecked = checked.map(() => false)

const selectedStatuses = statusesFullInfo
.filter(status => updatedChecked[status.id])
.map(status => status.name.toLowerCase())
.join(",");
.join(',')

putStatusesInURL(urlKeys.STATUSES, selectedStatuses, true);
};
putStatusesInURL(urlKeys.STATUSES, selectedStatuses, true)
}

const handleFilterOpen = () => {
setIsOpen(prevState => !prevState);
};
setIsOpen(prevState => !prevState)
}

return (
<>
{matches && (
<Box ref={iconButtonRef}>
<IconButton
sx={{
position: "relative",
position: 'relative',
borderRadius: 1,
border: `2px solid ${palette.grey.border}`,
}}
Expand All @@ -96,56 +96,56 @@ const StatusCheckboxGroup: FC<StatusCheckboxGroupProps> = ({
<Box
ref={boxRef}
sx={{
position: "absolute",
position: 'absolute',
top: 125,
left: 16,
width: 200,
bgcolor: palette.grey.divider,
border: `2px solid ${palette.grey.button}`,
borderRadius: 1,
p: "8px 16px",
p: '8px 16px',
zIndex: 20,
}}
>
<Button
color="inherit"
aria-label="reset-statuses-button"
color='inherit'
aria-label='reset-statuses-button'
onClick={handleParentChange}
disabled={isAllUnchecked}
sx={{ textTransform: "initial", width: "100%" }}
sx={{ textTransform: 'initial', width: '100%' }}
>
{t("statusesFilter.reset")}
{t('statusesFilter.reset')}
</Button>
<Divider sx={{ mt: 0.5, borderWidth: 1 }} />
<Box sx={{ display: "flex", flexWrap: "wrap", ml: 2 }}>
<Box sx={{ display: 'flex', flexWrap: 'wrap', ml: 2 }}>
{statusesFullInfo.map(status => {
return <CustomCheckbox status={status} key={status.id} />;
return <CustomCheckbox status={status} key={status.id} />
})}
</Box>
</Box>
)
) : (
<Box sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Button
color="inherit"
variant="contained"
aria-label="reset-statuses-button"
color='inherit'
variant='contained'
aria-label='reset-statuses-button'
onClick={handleParentChange}
disabled={isAllUnchecked}
sx={{ mr: 1, textTransform: "initial" }}
sx={{ mr: 1, textTransform: 'initial' }}
>
{t("statusesFilter.reset")}
{t('statusesFilter.reset')}
</Button>
<VerticalDivider />
<Box sx={{ display: "flex", flexWrap: "wrap", ml: 2 }}>
<Box sx={{ display: 'flex', flexWrap: 'wrap', ml: 2 }}>
{statusesFullInfo.map(status => {
return <CustomCheckbox status={status} key={status.id} />;
return <CustomCheckbox status={status} key={status.id} />
})}
</Box>
</Box>
)}
</>
);
};
)
}

export { StatusCheckboxGroup };
export { StatusCheckboxGroup }
4 changes: 2 additions & 2 deletions src/components/FilterPanel/components/StatusCheckboxGroup/hooks/useGetStatusesFullInfo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import { useSearchParams } from 'react-router-dom'

import useTheme from '@mui/material/styles/useTheme'

import IPalette from 'theme/IPalette.interface'
import { statuses, urlKeys } from 'constants'
import { statuses, urlKeys } from 'constants/index'
import { useChangeURL } from 'hooks/index'
import IPalette from 'theme/IPalette.interface'

export interface IStatus {
id: number
Expand Down
68 changes: 34 additions & 34 deletions src/components/LogInModal/LogInModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,60 @@
import { useState, FC, Dispatch, SetStateAction } from "react";
import { Dispatch, FC, SetStateAction, useState } from 'react'

import Modal from "@mui/material/Modal";
import Box from "@mui/material/Box";
import useMediaQuery from "@mui/material/useMediaQuery";
import useTheme from "@mui/material/styles/useTheme";
import Box from '@mui/material/Box'
import Modal from '@mui/material/Modal'
import useTheme from '@mui/material/styles/useTheme'
import useMediaQuery from '@mui/material/useMediaQuery'

import { SendEmailStep } from "./components/SendEmailStep";
import { LoginStep } from "./components/LoginStep/LoginStep";
import { ConfirmStep } from "./components/ConfirmStep";
import { ConfirmStep } from './components/ConfirmStep'
import { LoginStep } from './components/LoginStep/LoginStep'
import { SendEmailStep } from './components/SendEmailStep'

import { dimensions } from "constants";
import IPalette from "theme/IPalette.interface";
import { dimensions } from 'constants/index'
import IPalette from 'theme/IPalette.interface'

interface LogInModalProps {
open: boolean;
setOpen: Dispatch<SetStateAction<boolean>>;
handleSignUn: () => void;
open: boolean
setOpen: Dispatch<SetStateAction<boolean>>
handleSignUn: () => void
}

const LogInModal: FC<LogInModalProps> = ({ open, setOpen, handleSignUn }) => {
const { palette }: IPalette = useTheme();
const { palette }: IPalette = useTheme()
const matches = useMediaQuery(
`(max-width: ${dimensions.BREAK_POINTS.LOGIN_MODAL}px)`
);
)

const [activeStep, setActiveStep] = useState(0);
const [activeStep, setActiveStep] = useState(0)

const handleClose = (): void => {
setOpen(false);
setActiveStep(0);
};
setOpen(false)
setActiveStep(0)
}

const wrapperStyle = {
flexDirection: "column",
alignItems: "center",
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
flexDirection: 'column',
alignItems: 'center',
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
borderRadius: 4,
gap: matches ? 3 : 4,
width: matches ? "90vw" : 450,
width: matches ? '90vw' : 450,
bgcolor: palette.grey.border,
border: `2px solid ${palette.grey.active}`,
p: matches ? "24px" : "32px 56px",
};
p: matches ? '24px' : '32px 56px',
}

return (
<>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-login"
aria-describedby="modal-modal-authorization"
aria-labelledby='modal-modal-login'
aria-describedby='modal-modal-authorization'
>
<Box sx={{ display: "flex", flexDirection: "column", gap: 1, mb: 4 }}>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, mb: 4 }}>
{activeStep === 0 && (
<LoginStep
handleSignUn={handleSignUn}
Expand All @@ -75,7 +75,7 @@ const LogInModal: FC<LogInModalProps> = ({ open, setOpen, handleSignUn }) => {
</Box>
</Modal>
</>
);
};
)
}

export { LogInModal };
export { LogInModal }
44 changes: 22 additions & 22 deletions ...onents/LogInModal/components/LoginStep/components/CabinetAuthButton/CabinetAuthButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { useTranslation } from "react-i18next";
import { useTranslation } from 'react-i18next'

import Button from "@mui/material/Button";
import Button from '@mui/material/Button'

import { general } from "constants";
import { general } from 'constants/index'

const CabinetAuthButton = () => {
const { t } = useTranslation();
let authWindow: Window | null;
const { t } = useTranslation()
let authWindow: Window | null

const popupWindow = (
url: string,
Expand All @@ -15,43 +15,43 @@ const CabinetAuthButton = () => {
h: number
) => {
if (!window || !window.top) {
console.error("Window object or its top property is null or undefined");
return null;
console.error('Window object or its top property is null or undefined')
return null
}

const x = window.top.outerWidth / 2 + window.top.screenX - w / 2;
const y = window.top.outerHeight / 2 + window.top.screenY - h / 2;
const x = window.top.outerWidth / 2 + window.top.screenX - w / 2
const y = window.top.outerHeight / 2 + window.top.screenY - h / 2

return window.open(
url,
windowName,
`width=${w}, height=${h}, top=${y}, left=${x}`
);
};
)
}

const openAuth = () => {
if (authWindow && !authWindow.closed) {
authWindow.focus();
authWindow.focus()
} else {
authWindow = popupWindow(
`https://cabinet.sumdu.edu.ua/index/service/${general.TRES_TOKEN}`,
"_self",
'_self',
general.CABINET_POPUP_WIDTH,
general.CABINET_POPUP_HEIGHT
);
)
}
};
}

return (
<Button
color="success"
variant="contained"
color='success'
variant='contained'
onClick={openAuth}
sx={{ color: "#fff" }}
sx={{ color: '#fff' }}
>
{t("login.cabinetButton")}
{t('login.cabinetButton')}
</Button>
);
};
)
}

export { CabinetAuthButton };
export { CabinetAuthButton }
Loading

0 comments on commit 0ccd035

Please sign in to comment.