cleaning a bunch of the auth stuff but not done
This commit is contained in:
talksik
@@ -7,13 +7,12 @@ import { FaVolumeUp } from "react-icons/fa";
|
||||
import SkeletonLoader from "../../../components/loading/skeleton";
|
||||
import UserAvatarWithStatus from "../../../components/User/userAvatarWithStatus";
|
||||
import UserStatusText from "../../../components/User/userStatusText";
|
||||
import { useGetAllContactBasicDetails } from "../../../controller";
|
||||
import { useRecoilState } from "recoil";
|
||||
import useSocketData from "../../../controller/sockets";
|
||||
|
||||
export default function Conversations() {
|
||||
const { data: contactDetailsListResponse, isLoading } =
|
||||
useGetAllContactBasicDetails();
|
||||
// const { data: contactDetailsListResponse, isLoading } =
|
||||
// useGetAllContactBasicDetails();
|
||||
const { speakingRooms } = useSocketData();
|
||||
const [selectedConvo, setSelectedConvo] = useRecoilState(
|
||||
$selectedConversation
|
||||
@@ -45,7 +44,7 @@ export default function Conversations() {
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
{/* {isLoading ? (
|
||||
<SkeletonLoader />
|
||||
) : (
|
||||
<div className="flex flex-col m-5 p-4">
|
||||
@@ -84,7 +83,7 @@ export default function Conversations() {
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
)} */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,100 +1,100 @@
|
||||
import { $authTokens, $searchQuery } from "../../../controller/recoil";
|
||||
import { Dropdown, Menu } from "antd";
|
||||
import Logo, { LogoType } from "../../../components/Logo";
|
||||
import { useRecoilState, useSetRecoilState } from "recoil";
|
||||
// import { $authTokens, $searchQuery } from "../../../controller/recoil";
|
||||
// import { Dropdown, Menu } from "antd";
|
||||
// import Logo, { LogoType } from "../../../components/Logo";
|
||||
// import { useRecoilState, useSetRecoilState } from "recoil";
|
||||
|
||||
import { GlobalHotKeys } from "react-hotkeys";
|
||||
import { STORE_ITEMS } from "../../../electron/constants";
|
||||
import SocketChannels from "@nirvana/core/sockets/channels";
|
||||
import UserAvatarWithStatus from "../../../components/User/userAvatarWithStatus";
|
||||
import { UserStatus } from "@nirvana/core/models";
|
||||
import { socket } from "../../../nirvanaApp";
|
||||
import { useGetUserDetails } from "../../../controller/index";
|
||||
import { useRef } from "react";
|
||||
// import { GlobalHotKeys } from "react-hotkeys";
|
||||
// import { STORE_ITEMS } from "../../../electron/constants";
|
||||
// import SocketChannels from "@nirvana/core/sockets/channels";
|
||||
// import UserAvatarWithStatus from "../../../components/User/userAvatarWithStatus";
|
||||
// import { UserStatus } from "@nirvana/core/models";
|
||||
// import { socket } from "../../../nirvanaApp";
|
||||
// // import { useGetUserDetails } from "../../../controller/index";
|
||||
// import { useRef } from "react";
|
||||
|
||||
export default function Header() {
|
||||
const { data: user, isLoading } = useGetUserDetails();
|
||||
const [searchQuery, setSearchQuery] = useRecoilState($searchQuery);
|
||||
// export default function Header() {
|
||||
// // const { data: user, isLoading } = useGetUserDetails();
|
||||
// const [searchQuery, setSearchQuery] = useRecoilState($searchQuery);
|
||||
|
||||
const inputRef = useRef(null);
|
||||
// const inputRef = useRef(null);
|
||||
|
||||
const setAuthTokens = useSetRecoilState($authTokens);
|
||||
// const setAuthTokens = useSetRecoilState($authTokens);
|
||||
|
||||
if (isLoading) {
|
||||
return <span>getting data</span>;
|
||||
}
|
||||
// if (isLoading) {
|
||||
// return <span>getting data</span>;
|
||||
// }
|
||||
|
||||
const logOut = () => {
|
||||
window.electronAPI.store.set(STORE_ITEMS.AUTH_TOKENS, null);
|
||||
setAuthTokens(null);
|
||||
};
|
||||
// const logOut = () => {
|
||||
// window.electronAPI.store.set(STORE_ITEMS.GOOGLE_AUTH_TOKENS, null);
|
||||
// setAuthTokens(null);
|
||||
// };
|
||||
|
||||
const updateStatus = (newStatus: UserStatus) => {
|
||||
// send update in socket
|
||||
socket.emit(
|
||||
SocketChannels.SEND_USER_STATUS_UPDATE,
|
||||
user.googleId,
|
||||
newStatus
|
||||
);
|
||||
};
|
||||
// const updateStatus = (newStatus: UserStatus) => {
|
||||
// // send update in socket
|
||||
// socket.emit(
|
||||
// SocketChannels.SEND_USER_STATUS_UPDATE,
|
||||
// user.googleId,
|
||||
// newStatus
|
||||
// );
|
||||
// };
|
||||
|
||||
const ProfileMenu = (
|
||||
<Menu>
|
||||
<Menu.Item key="0">
|
||||
<button onClick={logOut}>Log Out</button>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="1">
|
||||
{user.status === UserStatus.ONLINE ? (
|
||||
<button onClick={() => updateStatus(UserStatus.OFFLINE)}>
|
||||
Set status as away
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={() => updateStatus(UserStatus.ONLINE)}>
|
||||
Set status as online
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
// const ProfileMenu = (
|
||||
// <Menu>
|
||||
// <Menu.Item key="0">
|
||||
// <button onClick={logOut}>Log Out</button>
|
||||
// </Menu.Item>
|
||||
// <Menu.Item key="1">
|
||||
// {user.status === UserStatus.ONLINE ? (
|
||||
// <button onClick={() => updateStatus(UserStatus.OFFLINE)}>
|
||||
// Set status as away
|
||||
// </button>
|
||||
// ) : (
|
||||
// <button onClick={() => updateStatus(UserStatus.ONLINE)}>
|
||||
// Set status as online
|
||||
// </button>
|
||||
// )}
|
||||
// </Menu.Item>
|
||||
// </Menu>
|
||||
// );
|
||||
|
||||
// hot keys for selecting search
|
||||
const handleSearch = () => {
|
||||
if (inputRef?.current) {
|
||||
inputRef?.current?.focus();
|
||||
setSearchQuery("");
|
||||
}
|
||||
};
|
||||
// // hot keys for selecting search
|
||||
// const handleSearch = () => {
|
||||
// if (inputRef?.current) {
|
||||
// inputRef?.current?.focus();
|
||||
// setSearchQuery("");
|
||||
// }
|
||||
// };
|
||||
|
||||
const keyMap = { START_SEARCH: "/" };
|
||||
const handlers = { START_SEARCH: handleSearch };
|
||||
// const keyMap = { START_SEARCH: "/" };
|
||||
// const handlers = { START_SEARCH: handleSearch };
|
||||
|
||||
return (
|
||||
<>
|
||||
<GlobalHotKeys handlers={handlers} keyMap={keyMap}></GlobalHotKeys>
|
||||
// return (
|
||||
// <>
|
||||
// <GlobalHotKeys handlers={handlers} keyMap={keyMap}></GlobalHotKeys>
|
||||
|
||||
<div className="flex flex-row items-center bg-zinc-800 h-20 px-5">
|
||||
<Logo type={LogoType.small} className="scale-[0.4]" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
placeholder="type / to search"
|
||||
className="placeholder:text-zinc-400 bg-transparent outline-none text-zinc-100"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
// <div className="flex flex-row items-center bg-zinc-800 h-20 px-5">
|
||||
// <Logo type={LogoType.small} className="scale-[0.4]" />
|
||||
// <input
|
||||
// ref={inputRef}
|
||||
// placeholder="type / to search"
|
||||
// className="placeholder:text-zinc-400 bg-transparent outline-none text-zinc-100"
|
||||
// value={searchQuery}
|
||||
// onChange={(e) => setSearchQuery(e.target.value)}
|
||||
// />
|
||||
|
||||
<button
|
||||
onClick={() => updateStatus(UserStatus.FLOW_STATE)}
|
||||
className="ml-auto mr-2 hover:scale-110 bg-zinc-600 text-teal-500 py-1 px-2 rounded-lg text-sm"
|
||||
>
|
||||
flow state
|
||||
</button>
|
||||
// <button
|
||||
// onClick={() => updateStatus(UserStatus.FLOW_STATE)}
|
||||
// className="ml-auto mr-2 hover:scale-110 bg-zinc-600 text-teal-500 py-1 px-2 rounded-lg text-sm"
|
||||
// >
|
||||
// flow state
|
||||
// </button>
|
||||
|
||||
<Dropdown overlay={ProfileMenu} trigger={["click"]}>
|
||||
<span className="px-5">
|
||||
<UserAvatarWithStatus user={user} />
|
||||
</span>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
// <Dropdown overlay={ProfileMenu} trigger={["click"]}>
|
||||
// <span className="px-5">
|
||||
// <UserAvatarWithStatus user={user} />
|
||||
// </span>
|
||||
// </Dropdown>
|
||||
// </div>
|
||||
// </>
|
||||
// );
|
||||
// }
|
||||
|
||||
@@ -2,29 +2,28 @@ import Logo, { LogoType } from "../../components/Logo";
|
||||
|
||||
import { $searchQuery } from "../../controller/recoil";
|
||||
import Conversations from "./conversations";
|
||||
import Header from "./header";
|
||||
// import Header from "./header";
|
||||
import Search from "./search";
|
||||
import SelectedConversation from "./selectedConversation";
|
||||
// import SelectedConversation from "./selectedConversation";
|
||||
import { useEffect } from "react";
|
||||
import { useGetUserDetails } from "../../controller/";
|
||||
import { useRecoilValue } from "recoil";
|
||||
|
||||
export default function Home() {
|
||||
const { data: user } = useGetUserDetails();
|
||||
// const { data: user } = useGetUserDetails();
|
||||
const searchQuery = useRecoilValue($searchQuery);
|
||||
|
||||
return (
|
||||
<div className="h-screen bg-zinc-700 flex flex-row">
|
||||
<div className="flex-1">
|
||||
{/* header */}
|
||||
<Header />
|
||||
{/* <Header /> */}
|
||||
|
||||
{/* main content */}
|
||||
|
||||
{searchQuery ? <Search /> : <Conversations />}
|
||||
</div>
|
||||
|
||||
<SelectedConversation />
|
||||
{/* <SelectedConversation /> */}
|
||||
|
||||
<button></button>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,6 @@ import {
|
||||
$searchQuery,
|
||||
$selectedConversation,
|
||||
} from "../../../controller/recoil";
|
||||
import { useGetUserDetails, useSearch } from "../../../controller";
|
||||
|
||||
import { FaAngleRight } from "react-icons/fa";
|
||||
import { Tooltip } from "@mui/material";
|
||||
@@ -22,21 +21,22 @@ export default function Search() {
|
||||
$selectedConversation
|
||||
);
|
||||
|
||||
const { data: userDetails } = useGetUserDetails();
|
||||
// const { data: userDetails } = useGetUserDetails();
|
||||
|
||||
const { data, isLoading, isError, refetch } = useSearch();
|
||||
// const { data, isLoading, isError, refetch } = useSearch();
|
||||
|
||||
useEffect(() => {
|
||||
refetch();
|
||||
// todo debounce after three seconds and show debounce loading while
|
||||
// refetch();
|
||||
}, [searchQuery]);
|
||||
|
||||
if (!data?.users) {
|
||||
return (
|
||||
<span className="text-white">
|
||||
no results. please try someone's email or name.
|
||||
</span>
|
||||
);
|
||||
}
|
||||
// if (!data?.users) {
|
||||
// return (
|
||||
// <span className="text-white">
|
||||
// no results. please try someone's email or name.
|
||||
// </span>
|
||||
// );
|
||||
// }
|
||||
|
||||
const goBack = () => {
|
||||
// implicity takes user back
|
||||
@@ -97,10 +97,10 @@ export default function Search() {
|
||||
Go back
|
||||
</button>
|
||||
|
||||
{data?.users?.map((user) => {
|
||||
{/* {data?.users?.map((user) => {
|
||||
if (user.googleId === userDetails.googleId) return <></>;
|
||||
return renderUserRow(user);
|
||||
})}
|
||||
})} */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,331 +1,325 @@
|
||||
import { FaMicrophone, FaPlay, FaWindowClose } from "react-icons/fa";
|
||||
import { GlobalHotKeys, KeyMap } from "react-hotkeys";
|
||||
import {
|
||||
Querytypes,
|
||||
useConversationDetails,
|
||||
useGetUserDetails,
|
||||
useSendContactRequest,
|
||||
useUpdateRelationshipState,
|
||||
} from "../../../controller";
|
||||
import { useEffect, useState } from "react";
|
||||
// import { FaMicrophone, FaPlay, FaWindowClose } from "react-icons/fa";
|
||||
// import { GlobalHotKeys, KeyMap } from "react-hotkeys";
|
||||
// import { useEffect, useState } from "react";
|
||||
|
||||
import { $selectedConversation } from "../../../controller/recoil";
|
||||
import { Dimensions } from "../../../electron/constants";
|
||||
import { RelationshipState } from "@nirvana/core/models/relationship.model";
|
||||
import SocketChannels from "@nirvana/core/sockets/channels";
|
||||
import UpdateRelationshipStateRequest from "@nirvana/core/requests/updateRelationshipState.request";
|
||||
import UserStatusText from "../../../components/User/userStatusText";
|
||||
import moment from "moment";
|
||||
import { queryClient } from "../../../nirvanaApp";
|
||||
import { socket } from "../../../nirvanaApp";
|
||||
import toast from "react-hot-toast";
|
||||
import { useRecoilState } from "recoil";
|
||||
// import { $selectedConversation } from "../../../controller/recoil";
|
||||
// import { Dimensions } from "../../../electron/constants";
|
||||
// import { Querytypes } from "../../../controller";
|
||||
// import { RelationshipState } from "@nirvana/core/models/relationship.model";
|
||||
// import SocketChannels from "@nirvana/core/sockets/channels";
|
||||
// import UpdateRelationshipStateRequest from "@nirvana/core/requests/updateRelationshipState.request";
|
||||
// import UserStatusText from "../../../components/User/userStatusText";
|
||||
// import moment from "moment";
|
||||
// import { queryClient } from "../../../nirvanaApp";
|
||||
// import { socket } from "../../../nirvanaApp";
|
||||
// import toast from "react-hot-toast";
|
||||
// import { useRecoilState } from "recoil";
|
||||
|
||||
let audioChunks: any = [];
|
||||
// let audioChunks: any = [];
|
||||
|
||||
const constraints = {
|
||||
audio: true,
|
||||
// {
|
||||
// // mandatory: {
|
||||
// // chromeMediaSource: "desktop",
|
||||
// // },
|
||||
// autoGainControl: true,
|
||||
// echoCancellation: true,
|
||||
// } as MediaTrackConstraints,
|
||||
};
|
||||
// const constraints = {
|
||||
// audio: true,
|
||||
// // {
|
||||
// // // mandatory: {
|
||||
// // // chromeMediaSource: "desktop",
|
||||
// // // },
|
||||
// // autoGainControl: true,
|
||||
// // echoCancellation: true,
|
||||
// // } as MediaTrackConstraints,
|
||||
// };
|
||||
|
||||
export default function SelectedConversation() {
|
||||
const [selectedConvo, setSelectedConvo] = useRecoilState(
|
||||
$selectedConversation
|
||||
);
|
||||
const { data: userDetailsData } = useGetUserDetails();
|
||||
const { data: convoDetailsResponse, isLoading } =
|
||||
useConversationDetails(selectedConvo);
|
||||
const { mutate: sendContactRequest } = useSendContactRequest();
|
||||
const { mutate: updateRelationshipState } = useUpdateRelationshipState();
|
||||
const [isRecording, setIsRecording] = useState<boolean>(false);
|
||||
// export default function SelectedConversation() {
|
||||
// const [selectedConvo, setSelectedConvo] = useRecoilState(
|
||||
// $selectedConversation
|
||||
// );
|
||||
// const { data: userDetailsData } = useGetUserDetails();
|
||||
// const { data: convoDetailsResponse, isLoading } =
|
||||
// useConversationDetails(selectedConvo);
|
||||
// const { mutate: sendContactRequest } = useSendContactRequest();
|
||||
// const { mutate: updateRelationshipState } = useUpdateRelationshipState();
|
||||
// const [isRecording, setIsRecording] = useState<boolean>(false);
|
||||
|
||||
const [hasMicPermissions, sethasMicPermissions] = useState<boolean>(false);
|
||||
const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder>();
|
||||
// const [hasMicPermissions, sethasMicPermissions] = useState<boolean>(false);
|
||||
// const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder>();
|
||||
|
||||
// audio handling
|
||||
// setting up recording permissions
|
||||
useEffect(() => {
|
||||
try {
|
||||
// checking for permissions for recording
|
||||
// won't work in https!!!
|
||||
navigator.mediaDevices
|
||||
.getUserMedia(constraints)
|
||||
.then((stream) => {
|
||||
const mediaRecorder = new MediaRecorder(stream);
|
||||
setMediaRecorder(mediaRecorder);
|
||||
// // audio handling
|
||||
// // setting up recording permissions
|
||||
// useEffect(() => {
|
||||
// try {
|
||||
// // checking for permissions for recording
|
||||
// // won't work in https!!!
|
||||
// navigator.mediaDevices
|
||||
// .getUserMedia(constraints)
|
||||
// .then((stream) => {
|
||||
// const mediaRecorder = new MediaRecorder(stream);
|
||||
// setMediaRecorder(mediaRecorder);
|
||||
|
||||
console.log(mediaRecorder);
|
||||
// console.log(mediaRecorder);
|
||||
|
||||
console.log("Permission Granted");
|
||||
sethasMicPermissions(true);
|
||||
})
|
||||
.catch((e: any) => {
|
||||
console.log("Permission Denied");
|
||||
// console.log("Permission Granted");
|
||||
// sethasMicPermissions(true);
|
||||
// })
|
||||
// .catch((e: any) => {
|
||||
// console.log("Permission Denied");
|
||||
|
||||
toast.error(
|
||||
"Please make sure that you have connected a microphone and given permissions."
|
||||
);
|
||||
// toast.error(
|
||||
// "Please make sure that you have connected a microphone and given permissions."
|
||||
// );
|
||||
|
||||
console.log(e);
|
||||
sethasMicPermissions(false);
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
toast.error("something went wrong");
|
||||
}
|
||||
}, []);
|
||||
// console.log(e);
|
||||
// sethasMicPermissions(false);
|
||||
// });
|
||||
// } catch (error) {
|
||||
// console.log(error);
|
||||
// toast.error("something went wrong");
|
||||
// }
|
||||
// }, []);
|
||||
|
||||
// todo: hacky way of re-linking event listeners once we have the relationship id
|
||||
useEffect(() => {
|
||||
if (mediaRecorder && convoDetailsResponse) {
|
||||
mediaRecorder.addEventListener(
|
||||
"dataavailable",
|
||||
mediaRecorderDataAvailable
|
||||
);
|
||||
mediaRecorder.addEventListener("stop", mediaRecorderStop);
|
||||
}
|
||||
// // todo: hacky way of re-linking event listeners once we have the relationship id
|
||||
// useEffect(() => {
|
||||
// if (mediaRecorder && convoDetailsResponse) {
|
||||
// mediaRecorder.addEventListener(
|
||||
// "dataavailable",
|
||||
// mediaRecorderDataAvailable
|
||||
// );
|
||||
// mediaRecorder.addEventListener("stop", mediaRecorderStop);
|
||||
// }
|
||||
|
||||
return () => {
|
||||
if (mediaRecorder) {
|
||||
mediaRecorder.removeEventListener(
|
||||
"dataavailable",
|
||||
mediaRecorderDataAvailable
|
||||
);
|
||||
mediaRecorder.removeEventListener("stop", mediaRecorderStop);
|
||||
}
|
||||
};
|
||||
}, [mediaRecorder, convoDetailsResponse]);
|
||||
// return () => {
|
||||
// if (mediaRecorder) {
|
||||
// mediaRecorder.removeEventListener(
|
||||
// "dataavailable",
|
||||
// mediaRecorderDataAvailable
|
||||
// );
|
||||
// mediaRecorder.removeEventListener("stop", mediaRecorderStop);
|
||||
// }
|
||||
// };
|
||||
// }, [mediaRecorder, convoDetailsResponse]);
|
||||
|
||||
const mediaRecorderDataAvailable = (event: any) => {
|
||||
audioChunks.push(event.data);
|
||||
};
|
||||
// const mediaRecorderDataAvailable = (event: any) => {
|
||||
// audioChunks.push(event.data);
|
||||
// };
|
||||
|
||||
const mediaRecorderStop = () => {
|
||||
socket.emit(
|
||||
SocketChannels.SEND_AUDIO_CLIP,
|
||||
convoDetailsResponse.ourRelationship._id.toString(),
|
||||
audioChunks
|
||||
);
|
||||
// const mediaRecorderStop = () => {
|
||||
// socket.emit(
|
||||
// SocketChannels.SEND_AUDIO_CLIP,
|
||||
// convoDetailsResponse.ourRelationship._id.toString(),
|
||||
// audioChunks
|
||||
// );
|
||||
|
||||
// testing playing before sending off
|
||||
// const audioBlob = new Blob(audioChunks);
|
||||
// const audioUrl = URL.createObjectURL(audioBlob);
|
||||
// const audio = new Audio(audioUrl);
|
||||
// audio.play();
|
||||
// // testing playing before sending off
|
||||
// // const audioBlob = new Blob(audioChunks);
|
||||
// // const audioUrl = URL.createObjectURL(audioBlob);
|
||||
// // const audio = new Audio(audioUrl);
|
||||
// // audio.play();
|
||||
|
||||
audioChunks = [];
|
||||
};
|
||||
// audioChunks = [];
|
||||
// };
|
||||
|
||||
useEffect(() => {
|
||||
// if selected, then change the bounds of this window as well
|
||||
if (selectedConvo) {
|
||||
window.electronAPI.window.resizeWindow(Dimensions.selectedConvo);
|
||||
} else {
|
||||
// change bounds back
|
||||
window.electronAPI.window.resizeWindow(Dimensions.default);
|
||||
}
|
||||
}, [selectedConvo]);
|
||||
// useEffect(() => {
|
||||
// // if selected, then change the bounds of this window as well
|
||||
// if (selectedConvo) {
|
||||
// window.electronAPI.window.resizeWindow(Dimensions.selectedConvo);
|
||||
// } else {
|
||||
// // change bounds back
|
||||
// window.electronAPI.window.resizeWindow(Dimensions.default);
|
||||
// }
|
||||
// }, [selectedConvo]);
|
||||
|
||||
// if no convo selected, don't show this
|
||||
if (!selectedConvo) {
|
||||
return <></>;
|
||||
}
|
||||
// // if no convo selected, don't show this
|
||||
// if (!selectedConvo) {
|
||||
// return <></>;
|
||||
// }
|
||||
|
||||
// todo: add cancel request option
|
||||
// // todo: add cancel request option
|
||||
|
||||
const sendRequest = () => {
|
||||
const otherUserGoogleId = convoDetailsResponse.contactUser.googleId;
|
||||
// const sendRequest = () => {
|
||||
// const otherUserGoogleId = convoDetailsResponse.contactUser.googleId;
|
||||
|
||||
// todo mutation to create a user
|
||||
sendContactRequest(otherUserGoogleId, {
|
||||
onSettled: (data, error) => {
|
||||
return queryClient.invalidateQueries(
|
||||
Querytypes.GET_CONVERSATION_DETAILS + "/" + otherUserGoogleId
|
||||
);
|
||||
},
|
||||
});
|
||||
};
|
||||
// // todo mutation to create a user
|
||||
// sendContactRequest(otherUserGoogleId, {
|
||||
// onSettled: (data, error) => {
|
||||
// return queryClient.invalidateQueries(
|
||||
// Querytypes.GET_CONVERSATION_DETAILS + "/" + otherUserGoogleId
|
||||
// );
|
||||
// },
|
||||
// });
|
||||
// };
|
||||
|
||||
const acceptRequest = () => {
|
||||
const otherUserGoogleId = convoDetailsResponse.contactUser.googleId;
|
||||
// const acceptRequest = () => {
|
||||
// const otherUserGoogleId = convoDetailsResponse.contactUser.googleId;
|
||||
|
||||
updateRelationshipState(
|
||||
new UpdateRelationshipStateRequest(
|
||||
convoDetailsResponse.ourRelationship._id,
|
||||
RelationshipState.ACTIVE
|
||||
),
|
||||
{
|
||||
onSettled: (data, error) => {
|
||||
return queryClient.invalidateQueries(
|
||||
Querytypes.GET_CONVERSATION_DETAILS + "/" + otherUserGoogleId
|
||||
);
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
// updateRelationshipState(
|
||||
// new UpdateRelationshipStateRequest(
|
||||
// convoDetailsResponse.ourRelationship._id,
|
||||
// RelationshipState.ACTIVE
|
||||
// ),
|
||||
// {
|
||||
// onSettled: (data, error) => {
|
||||
// return queryClient.invalidateQueries(
|
||||
// Querytypes.GET_CONVERSATION_DETAILS + "/" + otherUserGoogleId
|
||||
// );
|
||||
// },
|
||||
// }
|
||||
// );
|
||||
// };
|
||||
|
||||
if (isLoading) return <span>Please wait</span>;
|
||||
// if (isLoading) return <span>Please wait</span>;
|
||||
|
||||
const renderMainContent = () => {
|
||||
// if there's no relationship, then don't show messages, show "send request" button
|
||||
if (!convoDetailsResponse?.ourRelationship) {
|
||||
return <button onClick={sendRequest}>Send Request</button>;
|
||||
}
|
||||
// const renderMainContent = () => {
|
||||
// // if there's no relationship, then don't show messages, show "send request" button
|
||||
// if (!convoDetailsResponse?.ourRelationship) {
|
||||
// return <button onClick={sendRequest}>Send Request</button>;
|
||||
// }
|
||||
|
||||
// if the relationship is pending and I am the receiver, then I should see an accept or deny button
|
||||
if (
|
||||
convoDetailsResponse.ourRelationship.state ===
|
||||
RelationshipState.PENDING &&
|
||||
userDetailsData.googleId ===
|
||||
convoDetailsResponse.ourRelationship.receiverUserId
|
||||
) {
|
||||
return (
|
||||
<span>
|
||||
please accept this request by clicking here:{" "}
|
||||
<button onClick={acceptRequest}>accept</button>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
// // if the relationship is pending and I am the receiver, then I should see an accept or deny button
|
||||
// if (
|
||||
// convoDetailsResponse.ourRelationship.state ===
|
||||
// RelationshipState.PENDING &&
|
||||
// userDetailsData.googleId ===
|
||||
// convoDetailsResponse.ourRelationship.receiverUserId
|
||||
// ) {
|
||||
// return (
|
||||
// <span>
|
||||
// please accept this request by clicking here:{" "}
|
||||
// <button onClick={acceptRequest}>accept</button>
|
||||
// </span>
|
||||
// );
|
||||
// }
|
||||
|
||||
// when i sent a request to this person, just tell me that I have to wait
|
||||
if (
|
||||
convoDetailsResponse.ourRelationship.state ===
|
||||
RelationshipState.PENDING &&
|
||||
userDetailsData.googleId ===
|
||||
convoDetailsResponse.ourRelationship.senderUserId
|
||||
) {
|
||||
return <span>Waiting on request to be accepted</span>;
|
||||
}
|
||||
// // when i sent a request to this person, just tell me that I have to wait
|
||||
// if (
|
||||
// convoDetailsResponse.ourRelationship.state ===
|
||||
// RelationshipState.PENDING &&
|
||||
// userDetailsData.googleId ===
|
||||
// convoDetailsResponse.ourRelationship.senderUserId
|
||||
// ) {
|
||||
// return <span>Waiting on request to be accepted</span>;
|
||||
// }
|
||||
|
||||
if (
|
||||
convoDetailsResponse.ourRelationship.state === RelationshipState.ACTIVE
|
||||
) {
|
||||
return <span>this is all of the content</span>;
|
||||
}
|
||||
// if (
|
||||
// convoDetailsResponse.ourRelationship.state === RelationshipState.ACTIVE
|
||||
// ) {
|
||||
// return <span>this is all of the content</span>;
|
||||
// }
|
||||
|
||||
if (
|
||||
convoDetailsResponse.ourRelationship.state === RelationshipState.DENIED
|
||||
) {
|
||||
return <span>this request was denied</span>;
|
||||
}
|
||||
};
|
||||
// if (
|
||||
// convoDetailsResponse.ourRelationship.state === RelationshipState.DENIED
|
||||
// ) {
|
||||
// return <span>this request was denied</span>;
|
||||
// }
|
||||
// };
|
||||
|
||||
const startRecording = async () => {
|
||||
socketStartedSpeaking();
|
||||
setIsRecording(true);
|
||||
// const startRecording = async () => {
|
||||
// socketStartedSpeaking();
|
||||
// setIsRecording(true);
|
||||
|
||||
mediaRecorder.start();
|
||||
};
|
||||
// mediaRecorder.start();
|
||||
// };
|
||||
|
||||
const stopRecording = () => {
|
||||
socketStopSpeaking();
|
||||
setIsRecording(false);
|
||||
// const stopRecording = () => {
|
||||
// socketStopSpeaking();
|
||||
// setIsRecording(false);
|
||||
|
||||
mediaRecorder.stop();
|
||||
};
|
||||
// mediaRecorder.stop();
|
||||
// };
|
||||
|
||||
// emit to room/conversation that someone started speaking
|
||||
const socketStartedSpeaking = () => {
|
||||
// send the room name and the update type
|
||||
// // emit to room/conversation that someone started speaking
|
||||
// const socketStartedSpeaking = () => {
|
||||
// // send the room name and the update type
|
||||
|
||||
// only send if we are in a relationship
|
||||
if (convoDetailsResponse.ourRelationship._id.toString())
|
||||
socket.emit(
|
||||
SocketChannels.SEND_STARTED_SPEAKING,
|
||||
convoDetailsResponse.ourRelationship._id.toString()
|
||||
);
|
||||
};
|
||||
// // only send if we are in a relationship
|
||||
// if (convoDetailsResponse.ourRelationship._id.toString())
|
||||
// socket.emit(
|
||||
// SocketChannels.SEND_STARTED_SPEAKING,
|
||||
// convoDetailsResponse.ourRelationship._id.toString()
|
||||
// );
|
||||
// };
|
||||
|
||||
const socketStopSpeaking = () => {
|
||||
// send the room name and the update type
|
||||
// const socketStopSpeaking = () => {
|
||||
// // send the room name and the update type
|
||||
|
||||
// only send if we are in a relationship
|
||||
if (convoDetailsResponse.ourRelationship._id.toString())
|
||||
socket.emit(
|
||||
SocketChannels.SEND_STOPPED_SPEAKING,
|
||||
convoDetailsResponse.ourRelationship._id.toString()
|
||||
);
|
||||
};
|
||||
// // only send if we are in a relationship
|
||||
// if (convoDetailsResponse.ourRelationship._id.toString())
|
||||
// socket.emit(
|
||||
// SocketChannels.SEND_STOPPED_SPEAKING,
|
||||
// convoDetailsResponse.ourRelationship._id.toString()
|
||||
// );
|
||||
// };
|
||||
|
||||
// hot keys for closing this window
|
||||
const handleClose = () => {
|
||||
setSelectedConvo(null);
|
||||
};
|
||||
const keyMap: KeyMap = {
|
||||
CLOSE_SELECTED_CONVO: "esc",
|
||||
START_RECORDING: {
|
||||
name: "START RECORDING",
|
||||
sequence: "`",
|
||||
action: "keydown",
|
||||
},
|
||||
STOP_RECORDING: {
|
||||
name: "STOP RECORDING",
|
||||
sequence: "`",
|
||||
action: "keyup",
|
||||
},
|
||||
};
|
||||
// // hot keys for closing this window
|
||||
// const handleClose = () => {
|
||||
// setSelectedConvo(null);
|
||||
// };
|
||||
// const keyMap: KeyMap = {
|
||||
// CLOSE_SELECTED_CONVO: "esc",
|
||||
// START_RECORDING: {
|
||||
// name: "START RECORDING",
|
||||
// sequence: "`",
|
||||
// action: "keydown",
|
||||
// },
|
||||
// STOP_RECORDING: {
|
||||
// name: "STOP RECORDING",
|
||||
// sequence: "`",
|
||||
// action: "keyup",
|
||||
// },
|
||||
// };
|
||||
|
||||
const handlers = {
|
||||
CLOSE_SELECTED_CONVO: handleClose,
|
||||
START_RECORDING: startRecording,
|
||||
STOP_RECORDING: stopRecording,
|
||||
};
|
||||
// const handlers = {
|
||||
// CLOSE_SELECTED_CONVO: handleClose,
|
||||
// START_RECORDING: startRecording,
|
||||
// STOP_RECORDING: stopRecording,
|
||||
// };
|
||||
|
||||
return (
|
||||
<>
|
||||
<GlobalHotKeys handlers={handlers} keyMap={keyMap} />
|
||||
// return (
|
||||
// <>
|
||||
// <GlobalHotKeys handlers={handlers} keyMap={keyMap} />
|
||||
|
||||
<div className="bg-zinc-800 flex-1 flex flex-col relative">
|
||||
{/* close marker */}
|
||||
<FaWindowClose
|
||||
onClick={handleClose}
|
||||
className="text-zinc-400 text-xl hover:text-zinc-200 hover:scale-110 absolute top-0 right-0 m-1 cursor-pointer"
|
||||
/>
|
||||
// <div className="bg-zinc-800 flex-1 flex flex-col relative">
|
||||
// {/* close marker */}
|
||||
// <FaWindowClose
|
||||
// onClick={handleClose}
|
||||
// className="text-zinc-400 text-xl hover:text-zinc-200 hover:scale-110 absolute top-0 right-0 m-1 cursor-pointer"
|
||||
// />
|
||||
|
||||
{/* top header/profile information */}
|
||||
<span className="flex flex-row justify-start items-center p-2">
|
||||
<img
|
||||
className="rounded"
|
||||
src={convoDetailsResponse.contactUser.picture}
|
||||
/>
|
||||
<span className="flex flex-col items-start pl-2">
|
||||
<span className="flex flex-row space-x-2 items-center">
|
||||
<span className="text-white font-semibold text-lg">
|
||||
{convoDetailsResponse.contactUser.name}
|
||||
</span>
|
||||
<UserStatusText
|
||||
status={convoDetailsResponse.contactUser.status}
|
||||
/>
|
||||
</span>
|
||||
// {/* top header/profile information */}
|
||||
// <span className="flex flex-row justify-start items-center p-2">
|
||||
// <img
|
||||
// className="rounded"
|
||||
// src={convoDetailsResponse.contactUser.picture}
|
||||
// />
|
||||
// <span className="flex flex-col items-start pl-2">
|
||||
// <span className="flex flex-row space-x-2 items-center">
|
||||
// <span className="text-white font-semibold text-lg">
|
||||
// {convoDetailsResponse.contactUser.name}
|
||||
// </span>
|
||||
// <UserStatusText
|
||||
// status={convoDetailsResponse.contactUser.status}
|
||||
// />
|
||||
// </span>
|
||||
|
||||
<span className="text-zinc-300 text-sm">{`joined ${moment(
|
||||
convoDetailsResponse.contactUser.createdDate
|
||||
).fromNow()}`}</span>
|
||||
</span>
|
||||
</span>
|
||||
// <span className="text-zinc-300 text-sm">{`joined ${moment(
|
||||
// convoDetailsResponse.contactUser.createdDate
|
||||
// ).fromNow()}`}</span>
|
||||
// </span>
|
||||
// </span>
|
||||
|
||||
{renderMainContent()}
|
||||
// {renderMainContent()}
|
||||
|
||||
<span className="flex flex-row my-5 items-center justify-center space-x-5">
|
||||
<span className="flex flex-row justify-center items-center p-1 rounded shadow-lg h-10 w-10 bg-zinc-500 cursor-pointer">
|
||||
{isRecording ? (
|
||||
<FaMicrophone className="text-red-600 text-xl animate-pulse" />
|
||||
) : (
|
||||
<FaMicrophone className="text-red-600 text-lg" />
|
||||
)}
|
||||
</span>
|
||||
// <span className="flex flex-row my-5 items-center justify-center space-x-5">
|
||||
// <span className="flex flex-row justify-center items-center p-1 rounded shadow-lg h-10 w-10 bg-zinc-500 cursor-pointer">
|
||||
// {isRecording ? (
|
||||
// <FaMicrophone className="text-red-600 text-xl animate-pulse" />
|
||||
// ) : (
|
||||
// <FaMicrophone className="text-red-600 text-lg" />
|
||||
// )}
|
||||
// </span>
|
||||
|
||||
<span className="flex flex-row justify-center items-center p-1 rounded shadow-lg h-10 w-10 bg-zinc-500 cursor-pointer">
|
||||
<FaPlay className="text-blue-600 text-lg" />
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
// <span className="flex flex-row justify-center items-center p-1 rounded shadow-lg h-10 w-10 bg-zinc-500 cursor-pointer">
|
||||
// <FaPlay className="text-blue-600 text-lg" />
|
||||
// </span>
|
||||
// </span>
|
||||
// </div>
|
||||
// </>
|
||||
// );
|
||||
// }
|
||||
|
||||
Reference in New Issue
Block a user