deleting and getting things running fine
This commit is contained in:
talksik
@@ -69,14 +69,6 @@
|
||||
"preload": {
|
||||
"js": "./src/electron/preload.ts"
|
||||
}
|
||||
},
|
||||
{
|
||||
"html": "./src/index.html",
|
||||
"js": "./src/rendererTwo.ts",
|
||||
"name": "second_window",
|
||||
"preload": {
|
||||
"js": "./src/electron/preload.ts"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import "./index.css";
|
||||
import "./carbon.scss";
|
||||
import "./styles/index.css";
|
||||
import "./styles/carbon.scss";
|
||||
|
||||
import * as React from "react";
|
||||
import * as ReactDOM from "react-dom";
|
||||
|
||||
import NirvanaApp from "./nirvanaApp";
|
||||
import NirvanaApp from "./pages/nirvanaApp";
|
||||
|
||||
function render() {
|
||||
ReactDOM.render(<NirvanaApp />, document.getElementById("root"));
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
|
||||
|
||||
import SocketChannels from "@nirvana/core/sockets/channels";
|
||||
import { UserStatus } from "../../../core/models/user.model";
|
||||
import { socket } from "../nirvanaApp";
|
||||
import { socket } from "../pages/nirvanaApp";
|
||||
|
||||
// import { useGetAllContactBasicDetails } from "./index";
|
||||
|
||||
|
||||
@@ -10,7 +10,6 @@ import store from "./electron/store";
|
||||
// whether you're running in development or production).
|
||||
declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
|
||||
declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
|
||||
declare const SECOND_WINDOW_WEBPACK_ENTRY: string;
|
||||
|
||||
// Handle creating/removing shortcuts on Windows when installing/uninstalling.
|
||||
if (require("electron-squirrel-startup")) {
|
||||
@@ -21,7 +20,6 @@ if (require("electron-squirrel-startup")) {
|
||||
// Keep a global reference of the window object, if you don't, the window will
|
||||
// be closed automatically when the JavaScript object is garbage collected.
|
||||
export let browserWindow: BrowserWindow;
|
||||
export let overlayWindow: BrowserWindow;
|
||||
|
||||
const createWindow = (): void => {
|
||||
// Create the browser window.
|
||||
@@ -34,23 +32,11 @@ const createWindow = (): void => {
|
||||
icon: "./assets/1024x1024.icns",
|
||||
});
|
||||
|
||||
overlayWindow = new BrowserWindow({
|
||||
...Dimensions.default,
|
||||
webPreferences: {
|
||||
preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
|
||||
sandbox: true,
|
||||
},
|
||||
icon: "./assets/1024x1024.icns",
|
||||
alwaysOnTop: true,
|
||||
});
|
||||
|
||||
// and load the index.html of the app.
|
||||
browserWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
|
||||
overlayWindow.loadURL(SECOND_WINDOW_WEBPACK_ENTRY);
|
||||
|
||||
// Open the DevTools.
|
||||
browserWindow.webContents.openDevTools({ mode: "detach" });
|
||||
overlayWindow.webContents.openDevTools({ mode: "detach" });
|
||||
};
|
||||
|
||||
// This method will be called when Electron has finished
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
import "../index.css";
|
||||
import "../carbon.scss";
|
||||
|
||||
import * as React from "react";
|
||||
import * as ReactDOM from "react-dom";
|
||||
|
||||
import { Button } from "carbon-components-react";
|
||||
|
||||
function render() {
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
this is the overlay for video streams and conversations to be passed in
|
||||
<Button>yoo carbone what's up</Button>
|
||||
</div>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
}
|
||||
|
||||
render();
|
||||
@@ -1,167 +0,0 @@
|
||||
import {
|
||||
$newConvoPage,
|
||||
$selectedConversation,
|
||||
} from "../../../controller/recoil";
|
||||
import { Avatar, Tooltip } from "antd";
|
||||
import {
|
||||
Conversation,
|
||||
ConversationMemberState,
|
||||
} from "../../../../../core/models/conversation.model";
|
||||
import { useRecoilState, useSetRecoilState } from "recoil";
|
||||
|
||||
import BasicConversationRow from "../../../components/conversation/basicRow";
|
||||
import { ContactDetails } from "@nirvana/core/responses/getContacts.response";
|
||||
import { FaVolumeUp } from "react-icons/fa";
|
||||
import MasterConversation from "../../../../../core/models/masterConversation.model";
|
||||
import SkeletonLoader from "../../../components/loading/skeleton";
|
||||
import UserAvatarWithStatus from "../../../components/User/userAvatarWithStatus";
|
||||
import UserStatusText from "../../../components/User/userStatusText";
|
||||
import useSocketData from "../../../controller/sockets";
|
||||
import { useState } from "react";
|
||||
import { useUserConvos } from "../../../controller/index";
|
||||
|
||||
enum ConvoTab {
|
||||
LIVE = "LIVE",
|
||||
TUNED = "TUNED",
|
||||
INBOX = "INBOX",
|
||||
REQUESTS = "REQUESTS",
|
||||
}
|
||||
export default function Conversations() {
|
||||
// const { data: contactDetailsListResponse, isLoading } =
|
||||
// useGetAllContactBasicDetails();
|
||||
const { speakingRooms } = useSocketData();
|
||||
const [selectedConvo, setSelectedConvo] = useRecoilState(
|
||||
$selectedConversation
|
||||
);
|
||||
const setNewConvoPageTrigger = useSetRecoilState($newConvoPage);
|
||||
|
||||
const [selectedTab, setSelectedTab] = useState<ConvoTab>(ConvoTab.INBOX);
|
||||
|
||||
const handleChangeTab = (event: any, newTab: ConvoTab) => {
|
||||
setSelectedTab(newTab);
|
||||
};
|
||||
|
||||
const handleNewConvo = () => {
|
||||
setNewConvoPageTrigger(true);
|
||||
};
|
||||
|
||||
// todo: show conversations with activity/new content for me first...then the rest of the contacts
|
||||
|
||||
const selectContact = async (googleUserId: string) => {
|
||||
// if this person is already selected, unselect
|
||||
if (selectedConvo === googleUserId) {
|
||||
setSelectedConvo(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedConvo(googleUserId);
|
||||
};
|
||||
|
||||
const { data: userConverstionsData } = useUserConvos();
|
||||
|
||||
// render right content based on selected tab
|
||||
const renderConversationContent = () => {
|
||||
// if no content for a tab, then show stale text
|
||||
|
||||
const invitedConvos = userConverstionsData?.filter(
|
||||
(masterConvo) =>
|
||||
masterConvo.currentUserMember.state === ConversationMemberState.INVITED
|
||||
);
|
||||
const inboxConvos = userConverstionsData?.filter(
|
||||
(masterConvo) =>
|
||||
masterConvo.currentUserMember.state === ConversationMemberState.INBOX
|
||||
);
|
||||
const tunedConvos = userConverstionsData?.filter(
|
||||
(masterConvo) =>
|
||||
masterConvo.currentUserMember.state === ConversationMemberState.TUNED
|
||||
);
|
||||
|
||||
const liveConversations = [];
|
||||
|
||||
switch (selectedTab) {
|
||||
case ConvoTab.LIVE:
|
||||
return (
|
||||
<span className="text-center">
|
||||
None of your channels are live. Join and chill in a room and it will
|
||||
show up here!
|
||||
</span>
|
||||
);
|
||||
case ConvoTab.TUNED:
|
||||
if (tunedConvos?.length) {
|
||||
return <span>displaying all tuned in convos</span>;
|
||||
}
|
||||
return <span>Pin a channel to turn it into a walkie talkie.</span>;
|
||||
case ConvoTab.INBOX:
|
||||
if (inboxConvos?.length) {
|
||||
return (
|
||||
<>
|
||||
{inboxConvos.map((convo) => (
|
||||
<BasicConversationRow masterConvo={convo} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
return <span>Connect with someone and start talking!</span>;
|
||||
case ConvoTab.REQUESTS:
|
||||
if (invitedConvos?.length) {
|
||||
return <span>displaying all request convos</span>;
|
||||
}
|
||||
return (
|
||||
<span>
|
||||
No new conversations, connect with someone to get started.
|
||||
</span>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-row justify-between items-center p-2"></div>
|
||||
|
||||
<div className="flex flex-col items-center">
|
||||
{renderConversationContent()}
|
||||
</div>
|
||||
|
||||
{/* {isLoading ? (
|
||||
<SkeletonLoader />
|
||||
) : (
|
||||
<div className="flex flex-col m-5 p-4">
|
||||
{contactDetailsListResponse?.contactsDetails.map(
|
||||
(contactDetail: ContactDetails) => {
|
||||
const isSelected =
|
||||
contactDetail.otherUser.googleId === selectedConvo;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={contactDetail.relationship._id.toString()}
|
||||
onClick={() =>
|
||||
selectContact(contactDetail.otherUser.googleId)
|
||||
}
|
||||
className={`flex flex-row items-center hover:bg-zinc-600 group py-4 px-2 cursor-pointer ${
|
||||
isSelected ? "bg-zinc-600" : ""
|
||||
} rounded`}
|
||||
>
|
||||
<UserAvatarWithStatus user={contactDetail.otherUser} />
|
||||
|
||||
<span className="text-white font-semibold ml-2">
|
||||
{contactDetail.otherUser.name}
|
||||
</span>
|
||||
|
||||
<span className="ml-2">
|
||||
<UserStatusText status={contactDetail.otherUser.status} />
|
||||
</span>
|
||||
|
||||
{speakingRooms.includes(
|
||||
contactDetail.relationship._id.toString()
|
||||
) ? (
|
||||
<span className="ml-auto">speaking...</span>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
)} */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,95 +0,0 @@
|
||||
import { $jwtToken, $searchQuery } from "../../../controller/recoil";
|
||||
import Logo, { LogoType } from "../../../components/Logo";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useRecoilState, useSetRecoilState } from "recoil";
|
||||
|
||||
import { GlobalHotKeys } from "react-hotkeys";
|
||||
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";
|
||||
|
||||
export default function Header() {
|
||||
const { data: userDetailsResponse, isLoading } = useGetUserDetails();
|
||||
const [searchQuery, setSearchQuery] = useRecoilState($searchQuery);
|
||||
const setJwtToken = useSetRecoilState($jwtToken);
|
||||
const inputRef = useRef(null);
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const openAvatarMenu = Boolean(anchorEl);
|
||||
|
||||
const [userVideo, setUserVideo] = useState<any>(null);
|
||||
|
||||
// useEffect(() => {
|
||||
// navigator.mediaDevices
|
||||
// .getUserMedia({ video: true, audio: true })
|
||||
// .then((localMediaStream: any) => {
|
||||
// console.log(localMediaStream);
|
||||
|
||||
// setUserVideo(localMediaStream);
|
||||
|
||||
// var video = document.querySelector("video");
|
||||
// video.srcObject = localMediaStream;
|
||||
// video.onloadedmetadata = function (e) {
|
||||
// video.play();
|
||||
// };
|
||||
|
||||
// setTimeout(() => {
|
||||
// localMediaStream.getTracks().forEach((track: any) => {
|
||||
// track.stop();
|
||||
// });
|
||||
|
||||
// video.srcObject = null;
|
||||
// }, 2000);
|
||||
// });
|
||||
// }, []);
|
||||
|
||||
const handleClick = (event: any) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <span>getting data</span>;
|
||||
}
|
||||
|
||||
const logOut = () => {
|
||||
console.log("logging out!");
|
||||
setJwtToken(undefined);
|
||||
};
|
||||
|
||||
const updateStatus = (newStatus: UserStatus) => {
|
||||
// send update in socket
|
||||
socket.emit(
|
||||
SocketChannels.SEND_USER_STATUS_UPDATE,
|
||||
userDetailsResponse.user.status,
|
||||
newStatus
|
||||
);
|
||||
};
|
||||
|
||||
// hot keys for selecting search
|
||||
const handleSearch = () => {
|
||||
if (inputRef?.current) {
|
||||
inputRef?.current?.focus();
|
||||
setSearchQuery("");
|
||||
}
|
||||
};
|
||||
|
||||
const keyMap = { START_SEARCH: "/" };
|
||||
const handlers = { START_SEARCH: handleSearch };
|
||||
|
||||
return (
|
||||
<>
|
||||
<GlobalHotKeys handlers={handlers} keyMap={keyMap}></GlobalHotKeys>
|
||||
|
||||
<video height="400" width="430" autoPlay muted />
|
||||
|
||||
<div className="flex flex-row items-center bg-zinc-800 h-20 px-5">
|
||||
<Logo type={LogoType.small} className="scale-[0.4]" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
import { $newConvoPage, $searchQuery } from "../../controller/recoil";
|
||||
import Logo, { LogoType } from "../../components/Logo";
|
||||
|
||||
import Conversations from "./conversations";
|
||||
import Header from "./header";
|
||||
import NewConvo from "./newConvo";
|
||||
// import Header from "./header";
|
||||
import Search from "./search";
|
||||
// import SelectedConversation from "./selectedConversation";
|
||||
import { useEffect } from "react";
|
||||
import { useRecoilValue } from "recoil";
|
||||
|
||||
export default function Home() {
|
||||
// const { data: user } = useGetUserDetails();
|
||||
const searchQuery = useRecoilValue($searchQuery);
|
||||
|
||||
const newConvoPage = useRecoilValue($newConvoPage);
|
||||
|
||||
const renderMainContent = () => {
|
||||
if (searchQuery) return <Search />;
|
||||
|
||||
if (newConvoPage) return <NewConvo />;
|
||||
|
||||
return <Conversations />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-screen bg-zinc-700 flex flex-row">
|
||||
<div className="flex-1">
|
||||
{/* header */}
|
||||
<Header />
|
||||
|
||||
{/* main content */}
|
||||
|
||||
{renderMainContent()}
|
||||
</div>
|
||||
|
||||
{/* <SelectedConversation /> */}
|
||||
|
||||
<button></button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,182 +0,0 @@
|
||||
import {
|
||||
useCreateConvo,
|
||||
useGetDmByUserId,
|
||||
useGetUserDetails,
|
||||
useUserSearch,
|
||||
} from "../../../controller/index";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { $newConvoPage } from "../../../controller/recoil";
|
||||
import { ApiCalls } from "../../../controller/nirvanaApi";
|
||||
import { User } from "@nirvana/core/models/user.model";
|
||||
import UserRow from "../../../components/User/basicUserDetailsRow";
|
||||
import toast from "react-hot-toast";
|
||||
import { useSetRecoilState } from "recoil";
|
||||
|
||||
export default function NewConvo() {
|
||||
const setNewPageConvo = useSetRecoilState($newConvoPage);
|
||||
const [userSearchQuery, setuserSearchQuery] = useState<string>("");
|
||||
const [debUserSearchQ, setDebUserSearchQ] = useState<string>("");
|
||||
const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
|
||||
|
||||
const { data: userDetails } = useGetUserDetails();
|
||||
|
||||
const {
|
||||
data,
|
||||
isLoading: isSearching,
|
||||
isError,
|
||||
refetch,
|
||||
} = useUserSearch(debUserSearchQ);
|
||||
|
||||
const [debTimeout, setdebTimeout] = useState<any>();
|
||||
|
||||
// trigger the react query to refetch once our deb/"final" search query is set
|
||||
useEffect(() => {
|
||||
if (debUserSearchQ) refetch();
|
||||
}, [debUserSearchQ]);
|
||||
|
||||
const handleGoBack = () => {
|
||||
setNewPageConvo(false);
|
||||
};
|
||||
|
||||
const triggerSearch = (searchQ: string) => {
|
||||
// update search query now and
|
||||
|
||||
setDebUserSearchQ(searchQ);
|
||||
};
|
||||
|
||||
const handleUpdateSearchInput = (event: any) => {
|
||||
const newSearchQuery = event.target.value;
|
||||
|
||||
// wait 2 seconds to hit api
|
||||
const currInitInterval = setTimeout(() => {
|
||||
console.log("triggering debounced search");
|
||||
|
||||
triggerSearch(newSearchQuery);
|
||||
}, 1000);
|
||||
|
||||
// clear previous interval now that there is a new search entry
|
||||
// preventing the last interval from triggering a search
|
||||
setdebTimeout((prevTimeout: any) => {
|
||||
clearTimeout(prevTimeout);
|
||||
return currInitInterval;
|
||||
});
|
||||
|
||||
// update the view showing that the user's input is visibly changing input
|
||||
setuserSearchQuery(newSearchQuery);
|
||||
};
|
||||
|
||||
// select or unselect
|
||||
const selectOrUnselectUser = (user: User) => {
|
||||
// remove from list/unselect
|
||||
if (
|
||||
selectedUsers.find(
|
||||
(selectedUser) => selectedUser.googleId === user.googleId
|
||||
)
|
||||
) {
|
||||
console.log("unselecting user");
|
||||
setSelectedUsers((prevUsers) =>
|
||||
prevUsers.filter(
|
||||
(prevUser) => prevUser._id.toString() !== user._id.toString()
|
||||
)
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("selecting user");
|
||||
|
||||
// add to the list of selected
|
||||
setSelectedUsers((prevUsers) => [...prevUsers, user]);
|
||||
};
|
||||
|
||||
let nonSelectedUsers = [] as User[];
|
||||
// remove the user from the list of search results
|
||||
if (data?.users) {
|
||||
nonSelectedUsers = data?.users.filter(
|
||||
(user) =>
|
||||
!selectedUsers.find(
|
||||
(selectedUser) => selectedUser._id.toString() === user._id.toString()
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const { mutateAsync } = useGetDmByUserId();
|
||||
const { mutateAsync: createConvoMutateAsync } = useCreateConvo();
|
||||
|
||||
const createConvo = async () => {
|
||||
if (!selectedUsers?.length) {
|
||||
toast.error("Must select at least one person");
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// consolidate the user Ids into an array
|
||||
// make sure that there are no duplicates
|
||||
const otherMemberIds = selectedUsers.map((selUser) =>
|
||||
selUser._id.toString()
|
||||
);
|
||||
|
||||
// IF it's a one on one chat
|
||||
// check backend with one route if there is an existing conversation
|
||||
if (selectedUsers?.length === 1) {
|
||||
let existingConvoRes;
|
||||
try {
|
||||
existingConvoRes = await mutateAsync(selectedUsers[0]._id.toString());
|
||||
|
||||
console.log("there is an existing convo!");
|
||||
if (existingConvoRes) {
|
||||
toast.error("already have a convo with this person");
|
||||
console.log(existingConvoRes);
|
||||
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
console.log("done");
|
||||
}
|
||||
}
|
||||
|
||||
// create a conversation object in db with convoMembers
|
||||
try {
|
||||
const createConvoRes = await createConvoMutateAsync(otherMemberIds);
|
||||
|
||||
toast.success("Successfully create conversation");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
console.log("done creating convo");
|
||||
}
|
||||
|
||||
// broadcast this to right sockets either here or serverside after convo creation
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div className="flex flex-row"></div>
|
||||
|
||||
<span className="mx-auto">{data?.users.length ?? 0} results</span>
|
||||
|
||||
{isSearching ? <span className="mx-auto">loading</span> : <></>}
|
||||
|
||||
{/* selected people */}
|
||||
{selectedUsers?.map((user) => (
|
||||
<div onClick={() => selectOrUnselectUser(user)}>
|
||||
<UserRow user={user} />
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* search results list */}
|
||||
<div className="flex flex-col">
|
||||
{nonSelectedUsers?.map((user) => (
|
||||
<div onClick={() => selectOrUnselectUser(user)}>
|
||||
<UserRow user={user} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="ml-auto"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
import {
|
||||
$searchQuery,
|
||||
$selectedConversation,
|
||||
} from "../../../controller/recoil";
|
||||
|
||||
import { FaAngleRight } from "react-icons/fa";
|
||||
import { User } from "@nirvana/core/models";
|
||||
import { useEffect } from "react";
|
||||
import { useRecoilState } from "recoil";
|
||||
|
||||
// todo:
|
||||
// remove myself from list
|
||||
// add friend capability
|
||||
// unfriend? nahhh not right now
|
||||
|
||||
export default function Search() {
|
||||
const [searchQuery, setSearchQuery] = useRecoilState($searchQuery);
|
||||
|
||||
const [selectedConvo, setSelectedConvo] = useRecoilState(
|
||||
$selectedConversation
|
||||
);
|
||||
|
||||
// const { data: userDetails } = useGetUserDetails();
|
||||
|
||||
// const { data, isLoading, isError, refetch } = useSearch();
|
||||
|
||||
useEffect(() => {
|
||||
// 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>
|
||||
// );
|
||||
// }
|
||||
|
||||
const goBack = () => {
|
||||
// implicity takes user back
|
||||
setSearchQuery("");
|
||||
};
|
||||
|
||||
const selectContact = async (googleUserId: string) => {
|
||||
// if this person is already selected, unselect
|
||||
if (selectedConvo === googleUserId) {
|
||||
setSelectedConvo(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedConvo(googleUserId);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="px-5">
|
||||
<button
|
||||
onClick={goBack}
|
||||
className="rounded shadow border border-zinc-300 text-zinc-300 p-1 my-2"
|
||||
>
|
||||
Go back
|
||||
</button>
|
||||
|
||||
{/* {data?.users?.map((user) => {
|
||||
if (user.googleId === userDetails.googleId) return <></>;
|
||||
return renderUserRow(user);
|
||||
})} */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,325 +0,0 @@
|
||||
// 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 { 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 = [];
|
||||
|
||||
// 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);
|
||||
|
||||
// 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);
|
||||
|
||||
// console.log(mediaRecorder);
|
||||
|
||||
// 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."
|
||||
// );
|
||||
|
||||
// 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);
|
||||
// }
|
||||
|
||||
// return () => {
|
||||
// if (mediaRecorder) {
|
||||
// mediaRecorder.removeEventListener(
|
||||
// "dataavailable",
|
||||
// mediaRecorderDataAvailable
|
||||
// );
|
||||
// mediaRecorder.removeEventListener("stop", mediaRecorderStop);
|
||||
// }
|
||||
// };
|
||||
// }, [mediaRecorder, convoDetailsResponse]);
|
||||
|
||||
// const mediaRecorderDataAvailable = (event: any) => {
|
||||
// audioChunks.push(event.data);
|
||||
// };
|
||||
|
||||
// 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();
|
||||
|
||||
// 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]);
|
||||
|
||||
// // if no convo selected, don't show this
|
||||
// if (!selectedConvo) {
|
||||
// return <></>;
|
||||
// }
|
||||
|
||||
// // todo: add cancel request option
|
||||
|
||||
// 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
|
||||
// );
|
||||
// },
|
||||
// });
|
||||
// };
|
||||
|
||||
// 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
|
||||
// );
|
||||
// },
|
||||
// }
|
||||
// );
|
||||
// };
|
||||
|
||||
// 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>;
|
||||
// }
|
||||
|
||||
// // 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>;
|
||||
// }
|
||||
|
||||
// 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>;
|
||||
// }
|
||||
// };
|
||||
|
||||
// const startRecording = async () => {
|
||||
// socketStartedSpeaking();
|
||||
// setIsRecording(true);
|
||||
|
||||
// mediaRecorder.start();
|
||||
// };
|
||||
|
||||
// const stopRecording = () => {
|
||||
// socketStopSpeaking();
|
||||
// setIsRecording(false);
|
||||
|
||||
// mediaRecorder.stop();
|
||||
// };
|
||||
|
||||
// // 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()
|
||||
// );
|
||||
// };
|
||||
|
||||
// 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()
|
||||
// );
|
||||
// };
|
||||
|
||||
// // 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,
|
||||
// };
|
||||
|
||||
// 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"
|
||||
// />
|
||||
|
||||
// {/* 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>
|
||||
|
||||
// {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 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>
|
||||
// </>
|
||||
// );
|
||||
// }
|
||||
@@ -1,3 +0,0 @@
|
||||
export default function Profile() {
|
||||
return <span>this is the profile page</span>;
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import { QueryClient, QueryClientProvider } from "react-query";
|
||||
|
||||
import Home from "./pages/Home";
|
||||
import Login from "./pages/Login";
|
||||
import ProtectedRoute from "./components/ProtectedRoute";
|
||||
import Login from "./Login";
|
||||
import NirvanaRouter from "./router";
|
||||
import ProtectedRoute from "../components/ProtectedRoute";
|
||||
import { ReactQueryDevtools } from "react-query/devtools";
|
||||
import { RecoilRoot } from "recoil";
|
||||
import { Toaster } from "react-hot-toast";
|
||||
@@ -22,7 +22,7 @@ function NirvanaApp() {
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<RecoilRoot>
|
||||
<ProtectedRoute>
|
||||
<Home />
|
||||
<NirvanaRouter />
|
||||
</ProtectedRoute>
|
||||
<ReactQueryDevtools initialIsOpen={true} position={"bottom-left"} />
|
||||
</RecoilRoot>
|
||||
@@ -0,0 +1,3 @@
|
||||
export default function NirvanaRouter() {
|
||||
return <>this is the top level router</>;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
import "./overlay/index";
|
||||
Reference in New Issue
Block a user