Skip to content

Commit

Permalink
clean
Browse files Browse the repository at this point in the history
  • Loading branch information
@roienatan
roienatan committed Dec 9, 2023
1 parent bb6da2e commit 5ce3f9f
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 192 deletions.
26 changes: 0 additions & 26 deletions ...mponents/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,6 @@
padding: 0 1.5rem;
}

.modalContent {
//padding: 0;
}

.modalCloseWrapper {
top: 0.5rem;
margin: 0;
Expand Down Expand Up @@ -58,28 +54,6 @@
align-items: center;
}

// .control {
// background-color: var(--secondaryBackground);
// color: var(--primaryText);
// }

// .menuList {
// background-color: var(--tertiaryFill);
// }

// .option {
// color: var(--primaryText);
// }

// .indicatorsContainer {
// display: none;
// }

// .singleValue {
// background-color: var(--secondaryBackground);
// color: var(--primaryText);
// }

.infoText {
margin: 1rem 0;
padding: 0 1rem;
Expand Down
183 changes: 17 additions & 166 deletions ...inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,14 @@
import React, {
FC,
ReactElement,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import React, { FC, ReactElement, useEffect } from "react";
import { useDispatch } from "react-redux";
import Select from "react-select";
import { Modal, UserAvatar } from "@/shared/components";
import { KeyboardKeys } from "@/shared/constants";
import { useDMUserChatChannel } from "@/shared/hooks/useCases";
import useThemeColor from "@/shared/hooks/useThemeColor";
import { SearchIcon } from "@/shared/icons";
import { DMUser } from "@/shared/interfaces";
import { Button, Loader } from "@/shared/ui-kit";
import { emptyFunction } from "@/shared/utils";
import { inboxActions } from "@/store/states";
import { DirectMessageUserItem, SearchInput } from "./components";
import { selectorStyles } from "./components/selectorStyles";
import { useDMUsers } from "./hooks";
import styles from "./DirectMessageModal.module.scss";
Expand All @@ -30,6 +20,12 @@ interface DirectMessageModalProps {
groupMessage?: boolean;
}

interface SelectOption {
value: string;
user: DMUser;
label: JSX.Element;
}

const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
const {
isOpen,
Expand All @@ -39,9 +35,6 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
} = props;
const dispatch = useDispatch();
const { getThemeColor } = useThemeColor();
const listRef = useRef<HTMLUListElement>(null);
//const [searchText, setSearchText] = useState("");
const [activeItemIndex, setActiveItemIndex] = useState<number | null>(null);
const {
loading: areDMUsersLoading,
dmUsers,
Expand All @@ -56,50 +49,6 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
error: isChannelLoadedWithError,
} = useDMUserChatChannel();

// const filteredDMUsers = useMemo(() => {
// if (!searchText) {
// return dmUsers;
// }

// const lowerCasedSearchText = searchText.toLowerCase();

// return dmUsers.filter((item) =>
// item.userName.toLowerCase().startsWith(lowerCasedSearchText),
// );
// }, [dmUsers, searchText]);

//const totalUsersAmount = filteredDMUsers.length;

// const handleArrowUp = useCallback(() => {
// setActiveItemIndex((currentIndex) => {
// if (totalUsersAmount === 0) {
// return null;
// }
// if (currentIndex === null) {
// return totalUsersAmount - 1;
// }

// const nextIndex = currentIndex - 1;

// return nextIndex < 0 ? totalUsersAmount - 1 : nextIndex;
// });
// }, [totalUsersAmount]);

// const handleArrowDown = useCallback(() => {
// setActiveItemIndex((currentIndex) => {
// if (totalUsersAmount === 0) {
// return null;
// }
// if (currentIndex === null) {
// return 0;
// }

// const nextIndex = currentIndex + 1;

// return nextIndex >= totalUsersAmount ? 0 : nextIndex;
// });
// }, [totalUsersAmount]);

const handleUserItemClick = (item: DMUser) => {
fetchDMUserChatChannel(item.uid);
};
Expand All @@ -110,77 +59,9 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
return;
}

setActiveItemIndex(null);
//setSearchText("");
resetDMUserChatChannel();
}, [isOpen]);

// useEffect(() => {
// setActiveItemIndex(null);
// }, [searchText]);

useEffect(() => {
if (activeItemIndex !== null) {
const listElement = listRef.current?.children.item(activeItemIndex);
listElement?.scrollIntoView(false);
}
}, [activeItemIndex]);

// useEffect(() => {
// if (!isOpen) {
// return;
// }

// const handler = (event: KeyboardEvent) => {
// const key = event.key as KeyboardKeys;

// switch (key) {
// case KeyboardKeys.ArrowUp:
// handleArrowUp();
// break;
// case KeyboardKeys.ArrowDown:
// handleArrowDown();
// break;
// default:
// break;
// }
// };

// window.addEventListener("keyup", handler);

// return () => {
// window.removeEventListener("keyup", handler);
// };
// }, [isOpen, handleArrowUp, handleArrowDown]);

// useEffect(() => {
// if (!isOpen) {
// return;
// }

// const handler = (event: KeyboardEvent) => {
// const key = event.key as KeyboardKeys;

// if (key !== KeyboardKeys.Enter) {
// return;
// }

// const item = filteredDMUsers.find(
// (dmUser, index) => index === activeItemIndex,
// );

// if (item) {
// handleUserItemClick(item);
// }
// };

// window.addEventListener("keyup", handler);

// return () => {
// window.removeEventListener("keyup", handler);
// };
// }, [isOpen, activeItemIndex, filteredDMUsers]);

useEffect(() => {
if (dmUserChatChannel) {
dispatch(inboxActions.addChatChannelItem(dmUserChatChannel));
Expand All @@ -206,7 +87,7 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
return <p className={styles.infoText}>No users found</p>;
}

const options = dmUsers.map((user) => ({
const options: SelectOption[] = dmUsers.map((user) => ({
value: user.userName,
user: user,
label: (
Expand All @@ -222,12 +103,18 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
),
}));

const handleClick = (item: SelectOption) => {
if (!groupMessage) {
handleUserItemClick(item.user);
} else {
console.log("HANDLE GROUP MESSAGE");
}
};

return (
<>
<Select
onChange={(item) =>
!groupMessage && item && handleUserItemClick((item as any).user)
}
onChange={(item) => handleClick(item as SelectOption)}
isMulti={groupMessage}
options={options}
placeholder="Search"
Expand All @@ -245,34 +132,6 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
{groupMessage && <Button>Create</Button>}
</>
);

// return (
// <ul ref={listRef} className={styles.itemList}>
// {filteredDMUsers.map((item, index) => {
// const isActive = index === activeItemIndex;

// return (
// <li
// key={item.uid}
// className={styles.item}
// tabIndex={0}
// role="button"
// aria-pressed={isActive}
// onFocus={() => setActiveItemIndex(index)}
// onMouseDown={(event) => event.preventDefault()}
// onClick={() => handleUserItemClick(item)}
// >
// <DirectMessageUserItem
// className={styles.userItem}
// image={item.photoURL}
// name={item.userName}
// isActive={isActive}
// />
// </li>
// );
// })}
// </ul>
// );
};

return (
Expand All @@ -285,13 +144,6 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
<h3 className={styles.modalTitle}>
{groupMessage ? "Group message" : "Direct message"}
</h3>
{/* {!isChannelLoading && (
<SearchInput
value={searchText}
onChange={setSearchText}
autoFocus
/>
)} */}
</div>
}
isHeaderSticky
Expand All @@ -301,7 +153,6 @@ const DirectMessageModal: FC<DirectMessageModalProps> = (props) => {
modalOverlay: styles.modalOverlay,
headerWrapper: styles.modalHeaderWrapper,
header: styles.modalHeader,
content: styles.modalContent,
closeWrapper: styles.modalCloseWrapper,
}}
>
Expand Down

0 comments on commit 5ce3f9f

Please sign in to comment.