30 | There was an error when trying to log you out, please try again in
31 | a few minutes.
32 |
33 | => {
46 | setIsLoadingSignout(true)
47 |
48 | signOut()
49 | }
50 |
51 | return { handleSignout, isLoadingSignout }
52 | }
53 |
54 | export default useHandleSignout
55 |
--------------------------------------------------------------------------------
/packages/app/src/components/AccountInfo/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Button,
3 | Flex,
4 | Group,
5 | Text,
6 | rem,
7 | useMantineTheme
8 | } from "@mantine/core"
9 | import React from "react"
10 | import { useNavigate } from "react-router"
11 | import iconImgSrc from "../../../public/icons/account.svg"
12 | import UserAvatar from "../UserAvatar"
13 | import useGlobalStore from "../../store/useGlobalStore"
14 | import { getAvatarImage } from "../../helpers/getAvatarImage"
15 |
16 | const MyAccountInfo = () => {
17 | const { user, setApp } = useGlobalStore()
18 | const theme = useMantineTheme()
19 | const navigate = useNavigate()
20 | return (
21 |
34 |
35 |
36 |
37 |
38 | {user.name}
39 |
40 |
41 | Online
42 |
43 |
44 |
45 |
50 |
65 |
66 |
67 | )
68 | }
69 |
70 | export default MyAccountInfo
71 |
--------------------------------------------------------------------------------
/packages/app/src/components/Friends/FriendsConditionalRendering/FriendsConditionalrendering.tsx:
--------------------------------------------------------------------------------
1 | import useGlobalStore, { type IFriend } from "../../../store/useGlobalStore"
2 |
3 | interface Props {
4 | children: JSX.Element
5 | renderIf?: "FRIENDS" | "PENDING" | "REQUEST" | "NOT_FRIENDS"
6 | userId: string
7 | }
8 |
9 | const FriendsConditionalRendering = ({
10 | children,
11 | userId,
12 | renderIf = "FRIENDS"
13 | }: Props): JSX.Element | null => {
14 | const { relationships, user } = useGlobalStore()
15 |
16 | const checkIfFriend = (friendship: IFriend) => {
17 | return friendship.user_a === userId || friendship.user_b === userId
18 | }
19 |
20 | const checkIfPending = (friendship: IFriend) => {
21 | if (
22 | friendship.status === "PENDING" &&
23 | friendship.user_id === user.uid
24 | ) {
25 | return friendship.user_a === userId || friendship.user_b === userId
26 | }
27 |
28 | return false
29 | }
30 |
31 | const checkIfRequest = (friendship: IFriend) => {
32 | if (
33 | friendship.status === "PENDING" &&
34 | friendship.user_id !== user.uid
35 | ) {
36 | return friendship.user_a === userId || friendship.user_b === userId
37 | }
38 |
39 | return false
40 | }
41 |
42 | if (userId === user.uid) return null // Don't do anything if its you
43 |
44 | if (renderIf === "FRIENDS") {
45 | const isFriends = relationships.friends.some(checkIfFriend)
46 |
47 | if (!isFriends) return null
48 |
49 | return children
50 | }
51 |
52 | if (renderIf === "NOT_FRIENDS") {
53 | const isFriends = relationships.friends.some(checkIfFriend)
54 | const isPending = relationships.pending.some(checkIfFriend)
55 | const isRequest = relationships.requests.some(checkIfFriend)
56 |
57 | if (isFriends || isPending || isRequest) return null
58 |
59 | return children
60 | }
61 |
62 | if (renderIf === "PENDING") {
63 | const isPending = relationships.pending.some(checkIfPending)
64 |
65 | if (!isPending) return null
66 |
67 | return children
68 | }
69 |
70 | if (renderIf === "REQUEST") {
71 | const isRequest = relationships.requests.some(checkIfRequest)
72 |
73 | if (!isRequest) return null
74 |
75 | return children
76 | }
77 |
78 | return null
79 | }
80 |
81 | export default FriendsConditionalRendering
82 |
--------------------------------------------------------------------------------
/packages/app/src/components/Friends/GuidesList/GuidesList.tsx:
--------------------------------------------------------------------------------
1 | import { Flex, Text, Title, useMantineTheme } from "@mantine/core"
2 | import React from "react"
3 | import { type IFriend, type IUser } from "../../../store/useGlobalStore"
4 | import getFriend from "../../../utils/getFriend"
5 | import UserAvatarWithIndicator from "../../UserAvatarWithIndicator/UserAvatarWithIndicator"
6 | import UserPopup from "../../UserPopup/UserPopup"
7 | import { getAvatarImage } from "../../../helpers/getAvatarImage"
8 |
9 | const GuidesList = ({
10 | friends,
11 | user
12 | }: {
13 | friends: IFriend[]
14 | user: IUser
15 | }): JSX.Element => {
16 | const theme = useMantineTheme()
17 |
18 | if (friends.length === 0) {
19 | return No guides yet!
20 | }
21 |
22 | return (
23 |
24 | {friends.map((friendship: IFriend) => {
25 | const { friendData } = getFriend({
26 | friendship,
27 | userId: user.uid || ""
28 | })
29 |
30 | if (!friendData) return null
31 |
32 | return (
33 |
36 |
52 |
59 |
60 |
61 |
62 |
67 | {friendData.name}
68 |
69 |
70 |
75 | {friendData.email}
76 |
77 |
78 |
79 |
80 | )
81 | })}
82 |
No messages... yet
13 |
14 | )
15 | }
16 |
17 | export default EmptyRoom
18 |
--------------------------------------------------------------------------------
/packages/app/src/components/LoadingOverlay/LoadingOverlay.tsx:
--------------------------------------------------------------------------------
1 | import { Loader } from "@mantine/core"
2 | import React from "react"
3 | import useGlobalStore from "../../store/useGlobalStore"
4 | import useLoadingOverlayStyles from "./useLoadingOverlayStyles"
5 |
6 | const LoadingOverlay = (): JSX.Element | null => {
7 | const { app } = useGlobalStore()
8 |
9 | const { classes } = useLoadingOverlayStyles()
10 |
11 | if (!app.isLoading) return null
12 |
13 | return (
14 |
20 | )
21 | }
22 |
23 | export default LoadingOverlay
24 |
--------------------------------------------------------------------------------
/packages/app/src/components/LoadingOverlay/useLoadingOverlayStyles.ts:
--------------------------------------------------------------------------------
1 | import { createStyles } from "@mantine/core"
2 |
3 | const useLoadingOverlayStyles = createStyles((theme) => ({
4 | backdrop: {
5 | height: "100vh",
6 | width: "100vw",
7 | position: "fixed",
8 | left: 0,
9 | top: 0,
10 | opacity: 0.7,
11 | zIndex: 9998,
12 | backgroundColor:
13 | theme.colorScheme === "dark" ? theme.colors.dark[9] : theme.white
14 | },
15 | container: {
16 | height: "100vh",
17 | width: "100vw",
18 | position: "fixed",
19 | zIndex: 9999,
20 | left: 0,
21 | top: 0,
22 | display: "flex",
23 | justifyContent: "center",
24 | alignItems: "center",
25 | backdropFilter: "blur(5px)"
26 | }
27 | }))
28 |
29 | export default useLoadingOverlayStyles
30 |
--------------------------------------------------------------------------------
/packages/app/src/components/MobileHeader/MobileHeader.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | const MobileHeader = () => {
4 | return (
5 |
6 |
Mobile header
7 |
8 | )
9 | }
10 |
11 | export default MobileHeader
12 |
--------------------------------------------------------------------------------
/packages/app/src/components/OAuthUser/index.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 100vh;
3 | width: 100vw;
4 | background-image: url("../../../public/images/background.png");
5 | background-size: cover;
6 | background-position: 0% 10%;
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | }
11 |
12 | .container > div {
13 | display: flex;
14 | flex-direction: column;
15 | align-items: center;
16 | justify-content: center;
17 | }
18 |
19 | .header {
20 | padding: 1.2rem;
21 | width: 20rem;
22 | font-weight: bold;
23 | text-align: center;
24 | color: beige;
25 | }
26 |
27 | .authCard {
28 | width: 20rem;
29 | background-color: rgba(0, 0, 0, 0.8);
30 | border-radius: 1rem;
31 | display: flex;
32 | flex-direction: column;
33 | align-items: center;
34 | justify-content: center;
35 | box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
36 | padding: 2rem;
37 | }
38 |
39 | .authCard > h3 {
40 | font-size: 1rem;
41 | font-weight: normal;
42 | }
43 |
44 | .authProvider {
45 | display: flex;
46 | justify-content: center;
47 | align-items: center;
48 | padding-top: 1rem;
49 | width: 100%;
50 | }
51 |
52 | .authIcon {
53 | width: 2.5rem;
54 | height: 2.5rem;
55 | cursor: pointer;
56 | }
57 |
--------------------------------------------------------------------------------
/packages/app/src/components/ProfileHeader/index.tsx:
--------------------------------------------------------------------------------
1 | import { Text, useMantineTheme } from "@mantine/core"
2 | import React from "react"
3 | import useRoomHeaderStyles from "./useProfileHeaderStyles"
4 |
5 | const ProfileHeader = ({ title }: { title: string }): JSX.Element => {
6 | const { classes } = useRoomHeaderStyles()
7 |
8 | const theme = useMantineTheme()
9 |
10 | return (
11 |
12 |
13 |
14 | {title}
15 |
16 |
17 |
30 | null}
34 | >
35 |
39 |
44 |
45 |
49 |
54 |
55 |
56 | Completed, click back button to get to previous step
57 |
58 |
59 |
60 | )
61 | }
62 |
63 | export default RegisterUser
64 |
--------------------------------------------------------------------------------
/packages/app/src/components/RegisterUser/steps/step1.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Divider, Flex, TextInput } from "@mantine/core"
2 | import React from "react"
3 | import { ArrowRight } from "react-feather"
4 | import { useForm } from "react-hook-form"
5 | import useGlobalStore from "../../../store/useGlobalStore"
6 | import { type IStepProps } from "../RegisterUser"
7 |
8 | interface IFormValues {
9 | name: string
10 | }
11 |
12 | const Step1 = ({ nextStep }: IStepProps): JSX.Element => {
13 | const { user, setUser } = useGlobalStore()
14 |
15 | const {
16 | register,
17 | handleSubmit,
18 | formState: { errors }
19 | } = useForm({
20 | defaultValues: {
21 | name: user.name || ""
22 | }
23 | })
24 |
25 | const onSubmit = handleSubmit((data) => {
26 | setUser({ name: data.name })
27 |
28 | nextStep()
29 | })
30 |
31 | return (
32 |
62 | )
63 | }
64 |
65 | export default Step1
66 |
--------------------------------------------------------------------------------
/packages/app/src/components/SideMenu/ChangeThemeModal/ChangeThemeModal.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { Select, Divider, Flex, Button } from "@mantine/core"
3 | import { closeAllModals } from "@mantine/modals"
4 | import useGlobalStore from "../../../store/useGlobalStore"
5 |
6 | const ChangeThemeModal = (): JSX.Element => {
7 | const { setState } = useGlobalStore()
8 |
9 | return (
10 |
11 |
{
22 | const friendship = friends.find(x => x.id.toString() === children.key)
23 |
24 | setApp({
25 | secondaryActiveSideMenu: friendship?.room_id,
26 | isMobileMenuOpen: false
27 | })
28 |
29 | navigate(`/chat/${friendship?.room_id}`)
30 | }}
31 | >
32 | {children}
33 |
34 | )
35 | }
36 |
37 | export default UserPopup
38 |
--------------------------------------------------------------------------------
/packages/app/src/constants/constants.ts:
--------------------------------------------------------------------------------
1 | export const isProd = () => {
2 | if (!import.meta.env.NODE_ENV || import.meta.env.NODE_ENV === "development") {
3 | return false
4 | }
5 |
6 | return true
7 | }
8 |
9 | export default {
10 | avatarPlaceholder: (seed: string | number) => {
11 | return `https://api.dicebear.com/6.x/micah/svg?seed=${seed}`
12 | },
13 | supabaseUrl: import.meta.env.VITE_SUPABASE_URL ?? "https://pronvzrzfwsptkojvudd.supabase.co",
14 | supabaseAnonKey: import.meta.env.VITE_SUPABASE_ANON_KEY ??
15 | "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InByb252enJ6ZndzcHRrb2p2dWRkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDY4NTYwNDcsImV4cCI6MjAyMjQzMjA0N30.I6_-XrqssUb2SWYg5DjsUqSodNS3_RPoET3-aPdqywM",
16 | posthogApiKey: "phc_zI9MsoTRSrvQoMSHj2lEdlzXN51nbOrdpS5ZUmWGWuU"
17 | }
18 |
--------------------------------------------------------------------------------
/packages/app/src/helpers/functions.ts:
--------------------------------------------------------------------------------
1 | import { Capacitor } from "@capacitor/core"
2 |
3 | export const isSmartphone = Capacitor.getPlatform() === "ios" || Capacitor.getPlatform() === "android"
4 |
--------------------------------------------------------------------------------
/packages/app/src/helpers/getAvatarImage.ts:
--------------------------------------------------------------------------------
1 | export function getAvatarImage (avatar: string): string {
2 | // hash avatar string down to a number between 1 and 106
3 | const hash = avatar.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0)
4 | const number = hash % 106 + 1
5 | return `/profile-images/${number}.jpg`
6 | }
7 |
--------------------------------------------------------------------------------
/packages/app/src/helpers/getUnreadMessagesInDms.ts:
--------------------------------------------------------------------------------
1 | import { type IRoom, type IUnreadMessages } from "./../store/useGlobalStore"
2 |
3 | interface Props {
4 | dms: IRoom[]
5 | unreadMessages: IUnreadMessages[]
6 | }
7 |
8 | const getUnreadMessagesInDms = ({ dms, unreadMessages }: Props) => {
9 | let unread = 0
10 |
11 | unreadMessages.forEach((message) => {
12 | if (dms.find((dm) => dm.id === message.room_id)) {
13 | unread += message.message_count
14 | }
15 | })
16 |
17 | return unread
18 | }
19 |
20 | export default getUnreadMessagesInDms
21 |
--------------------------------------------------------------------------------
/packages/app/src/helpers/getUnreadMessagesInRooms.ts:
--------------------------------------------------------------------------------
1 | import { type IRoom, type IUnreadMessages } from "./../store/useGlobalStore"
2 |
3 | interface Props {
4 | rooms: IRoom[]
5 | unreadMessages: IUnreadMessages[]
6 | }
7 |
8 | const getUnreadMessagesInRooms = ({ unreadMessages, rooms }: Props) => {
9 | let unread = 0
10 |
11 | unreadMessages.forEach((message) => {
12 | if (rooms.find((dm) => dm.id === message.room_id)) {
13 | unread += message.message_count
14 | }
15 | })
16 |
17 | return unread
18 | }
19 |
20 | export default getUnreadMessagesInRooms
21 |
--------------------------------------------------------------------------------
/packages/app/src/helpers/removeTypingIndicatorFromOfflineUsers.ts:
--------------------------------------------------------------------------------
1 | import { type RealtimePresenceState } from "@supabase/supabase-js"
2 | import { type ICurrentRoom, type IUsersTyping } from "../store/useGlobalStore"
3 |
4 | interface Props {
5 | onlineUsers: RealtimePresenceState
6 | setCurrentRoom: (state: Partial) => void
7 | usersTyping: IUsersTyping[]
8 | }
9 |
10 | const removeTypingIndicatorFromOfflineUsers = ({
11 | usersTyping,
12 | onlineUsers,
13 | setCurrentRoom
14 | }: Props) => {
15 | if (!onlineUsers) return
16 | if (!usersTyping) return
17 |
18 | const onlineUsersArr = Object.keys(onlineUsers)
19 | const newUsersTyping = usersTyping
20 |
21 | const removed = newUsersTyping.filter((user) => {
22 | return onlineUsersArr.includes(user.email)
23 | })
24 |
25 | setCurrentRoom({
26 | usersTyping: removed
27 | })
28 | }
29 |
30 | export default removeTypingIndicatorFromOfflineUsers
31 |
--------------------------------------------------------------------------------
/packages/app/src/index.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JoinTheAlliance/cojourney/05bc2ff25450927cc28f0ab7f82a119a51b75ef6/packages/app/src/index.css
--------------------------------------------------------------------------------
/packages/app/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import ReactDOM from "react-dom/client"
3 | import "./index.css"
4 |
5 | import App from "./App"
6 |
7 | ReactDOM.createRoot(document.getElementById("root")!).render(
8 |
9 | )
10 |
--------------------------------------------------------------------------------
/packages/app/src/pages/404/Error404.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import {
3 | Button,
4 | Container,
5 | Flex,
6 | ScrollArea,
7 | Text,
8 | Title
9 | } from "@mantine/core"
10 | import { Link } from "react-router-dom"
11 | import useError404Styles from "./useError404Styles"
12 |
13 | const Error404 = (): JSX.Element => {
14 | const { classes } = useError404Styles()
15 |
16 | return (
17 |
21 |
22 | 404
23 | Listen here, partner.
24 |
29 | I'm gettin' real tired of this, partner! The blasted page
30 | you're barkin' after, it's up and gone, disappeared
31 | like a damn coyote on a moonless night. Maybe you ain't got your
32 | trail right, or your words are all jumbled, but you're in the
33 | wrong damn place! Ain't no reason for this ruckus but sure as
34 | hell stirs up a storm. Life's a rough ride, not some Sunday
35 | picnic, you gotta grit your teeth, dig your spurs in, and ride the
36 | damn thing! So dust off and buckle up, this ain't the end of the
37 | road. There's a whole wild world out there, a helluva lot bigger
38 | than one measly missing page!
39 |
40 |
41 |
46 |
47 |
53 |
54 |
55 |
59 | There's no more to see here for now
60 |
61 |
62 |
63 |
64 | )
65 | }
66 |
67 | export default Error404
68 |
--------------------------------------------------------------------------------
/packages/app/src/pages/404/useError404Styles.ts:
--------------------------------------------------------------------------------
1 | import { createStyles, rem } from "@mantine/core"
2 |
3 | const useError404Styles = createStyles((theme) => ({
4 | root: {
5 | backgroundColor: theme.fn.variant({
6 | variant: "filled",
7 | color: theme.primaryColor
8 | }).background,
9 | height: "100vh",
10 | paddingTop: rem(120),
11 | paddingBottom: rem(120),
12 | minHeight: "100vh"
13 | },
14 |
15 | label: {
16 | textAlign: "center",
17 | fontWeight: 900,
18 | fontSize: rem(220),
19 | lineHeight: 1,
20 | marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
21 | color: theme.colors[theme.primaryColor][3],
22 |
23 | [theme.fn.smallerThan("sm")]: {
24 | fontSize: rem(120)
25 | }
26 | },
27 |
28 | title: {
29 | fontFamily: `Greycliff CF, ${theme.fontFamily}`,
30 | textAlign: "center",
31 | fontWeight: 900,
32 | fontSize: rem(38),
33 | color: theme.white,
34 |
35 | [theme.fn.smallerThan("sm")]: {
36 | fontSize: rem(32)
37 | }
38 | },
39 |
40 | description: {
41 | maxWidth: rem(840),
42 | margin: "auto",
43 | marginTop: theme.spacing.xl,
44 | marginBottom: `calc(${theme.spacing.xl} * 1.5)`,
45 | color: theme.colors[theme.primaryColor][1]
46 | }
47 | }))
48 |
49 | export default useError404Styles
50 |
--------------------------------------------------------------------------------
/packages/app/src/pages/app/MainLayout.tsx/LayoutStyles.ts:
--------------------------------------------------------------------------------
1 | import { createStyles } from "@mantine/core"
2 |
3 | const useRoomStyles = createStyles(() => ({
4 | layout: {
5 | display: "flex",
6 | overflowY: "auto",
7 | position: "relative",
8 | paddingBottom: "2.5rem",
9 | flexDirection: "column",
10 | width: "100%",
11 | height: "100%",
12 |
13 | "@media (min-width: 768px)": {
14 | paddingTop: 0
15 | },
16 | "@media (min-width: 1024px)": {
17 | paddingLeft: "380px"
18 | }
19 | },
20 | header: {
21 | padding: "1rem",
22 | display: "flex",
23 | alignItems: "center",
24 | justifyContent: "center"
25 | },
26 | headerContainer: {
27 | position: "relative",
28 | borderBottom: "0.0625rem solid #2A2A2A"
29 | }
30 | }))
31 |
32 | export default useRoomStyles
33 |
--------------------------------------------------------------------------------
/packages/app/src/pages/app/MainLayout.tsx/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { Flex, Text, useMantineTheme } from "@mantine/core"
3 | import useSideMenuStyles from "./LayoutStyles"
4 | import iconImgSrc from "../../../../public/icons/arrow_left.svg"
5 | import { useMediaQuery } from "@mantine/hooks"
6 | import { useNavigate } from "react-router-dom" // Import the hook
7 |
8 | function index ({
9 | children,
10 | title
11 | }: {
12 | children: React.ReactNode
13 | title: string
14 | }) {
15 | const { classes } = useSideMenuStyles()
16 | const theme = useMantineTheme()
17 | const isMobile = useMediaQuery("(max-width: 900px)")
18 | const nav = useNavigate()
19 | return (
20 |
21 |
27 | {isMobile && (
28 | {
30 | nav(-1)
31 | }}
32 | >
33 |
40 |
43 |
44 | {title}
45 |
46 |
47 |
48 |
49 |
{children}
50 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | )
28 | }
29 |
30 | export default LoadingRoomData
31 |
--------------------------------------------------------------------------------
/packages/app/src/pages/app/Room/Messages/Message/Message.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Flex,
3 | HoverCard,
4 | Text
5 | } from "@mantine/core"
6 | import moment from "moment"
7 | import React from "react"
8 | import UserAvatarWithIndicator from "../../../../../components/UserAvatarWithIndicator/UserAvatarWithIndicator"
9 | import UserPopup from "../../../../../components/UserPopup/UserPopup"
10 | import {
11 | type IDatabaseMessage
12 | } from "../../../../../store/useGlobalStore"
13 | import useMessageStyles from "../useMessageStyles"
14 |
15 | interface Props {
16 | message: IDatabaseMessage
17 | }
18 |
19 | const Message = ({ message }: Props): JSX.Element => {
20 | const { classes } = useMessageStyles()
21 |
22 | return (
23 |
24 |
32 |
33 |
39 |
40 |
41 |
42 |
49 |
50 |
51 |
52 |
53 | {/* @ts-expect-error */}
54 | {`${message.userData.name} - ${moment(
55 | message.created_at
56 | ).fromNow()}`}
57 |
58 | {message.content?.content}
59 |
60 |
61 |
62 |
63 |
64 |
Error loading messages
52 | if (messages.length === 0) return
53 |
54 | const filteredMessages = (
55 | userMessage
56 | ? [
57 | ...messages.filter(
58 | // filter out messages that match userMessage
59 | (message) => message.content.content !== userMessage.content.content
60 | ),
61 | { ...userMessage, userData: user }
62 | ]
63 | : messages
64 | )
65 | .filter(
66 | // filter any messages where action is NEW_USER
67 | (message) => (message.content as Content).action !== "NEW_USER"
68 | )
69 | .sort(
70 | // sort by created_at
71 | (a, b) =>
72 | new Date(a.created_at!).getTime() - new Date(b.created_at!).getTime()
73 | )
74 |
75 | return (
76 |
77 |
78 | {filteredMessages.map((message) => {
79 | return (
80 |
81 |
82 |
83 | )
84 | })}
85 |
86 |
87 |
88 | )
89 | }
90 |
91 | export default Messages
92 |
--------------------------------------------------------------------------------
/packages/app/src/pages/app/Room/Messages/MessagesFunctions/MessageFunctions.tsx:
--------------------------------------------------------------------------------
1 | import { Edit } from "react-feather"
2 | import React from "react"
3 | import { ActionIcon, Flex, Tooltip } from "@mantine/core"
4 | import useGlobalStore, {
5 | type IDatabaseMessage
6 | } from "../../../../../store/useGlobalStore"
7 |
8 | interface IMessageFunctions {
9 | handleEdit: () => void
10 | message: IDatabaseMessage
11 | }
12 | const MessageFunctions = ({
13 | handleEdit,
14 | message
15 | }: IMessageFunctions): JSX.Element => {
16 | const {
17 | user: { uid }
18 | } = useGlobalStore()
19 |
20 | return (
21 |
22 | {message.user_id === uid && (
23 |
28 |
29 |
30 |
31 |
32 | )}
33 |
34 | )
35 | }
36 |
37 | export default MessageFunctions
38 |
--------------------------------------------------------------------------------
/packages/app/src/pages/app/Room/Messages/useMessageStyles.ts:
--------------------------------------------------------------------------------
1 | import { createStyles } from "@mantine/core"
2 |
3 | const useMessageStyles = createStyles((theme) => ({
4 | messageDiv: {
5 | borderRadius: "0.5rem",
6 | position: "relative",
7 | width: "100%",
8 | paddingLeft: 10,
9 |
10 | "&:hover": {
11 | backgroundColor:
12 | theme.colorScheme === "dark"
13 | ? theme.colors.dark[6]
14 | : theme.colors.gray[1]
15 | }
16 | },
17 | avatarDiv: {
18 | display: "flex"
19 | },
20 | messageFunctionsDiv: {
21 | display: "flex",
22 | alignItems: "center",
23 | height: "100%",
24 | right: 0
25 | },
26 | edit_input: {
27 | width: "calc(100% - 60px)",
28 | zIndex: 9999,
29 | top: 0,
30 | marginBottom: 10,
31 | marginTop: 10
32 | }
33 | }))
34 |
35 | export default useMessageStyles
36 |
--------------------------------------------------------------------------------
/packages/app/src/pages/app/Room/RoomHeader/useRoomHeaderStyles.ts:
--------------------------------------------------------------------------------
1 | import { createStyles } from "@mantine/core"
2 |
3 | const useRoomHeaderStyles = createStyles((_theme) => ({
4 | container: {
5 | padding: "1rem"
6 | },
7 |
8 | headerLeft: {
9 | display: "flex",
10 | alignItems: "center",
11 | justifyContent: "space-between"
12 | },
13 |
14 | participants: {
15 | cursor: "pointer"
16 | }
17 | }))
18 |
19 | export default useRoomHeaderStyles
20 |
--------------------------------------------------------------------------------
/packages/app/src/pages/app/Room/RoomNotFound/RoomNotFound.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | const RoomNotFound = (): JSX.Element => {
4 | return (
5 |
6 |
Room not found
7 |
8 | The room you are trying to access does not exist or it may have been
9 | deleted.
10 |
11 |
Error: roomId not found
21 |
22 | return (
23 |
27 | )
28 | }
29 |
30 | export default RoomIndex
31 |
--------------------------------------------------------------------------------
/packages/app/src/pages/app/UserProfile/index.styles.ts:
--------------------------------------------------------------------------------
1 | import { createStyles } from "@mantine/core"
2 |
3 | const useProfileStyles = createStyles(() => ({
4 | container: {
5 | padding: 8,
6 | position: "relative",
7 | overflow: "auto",
8 | width: "100%",
9 | height:
10 | "calc(100vh - var(--mantine-header-height, 0rem) - var(--mantine-footer-height, 0rem))"
11 | },
12 | titleContainer: {
13 | flexGrow: 1
14 | },
15 | content: {
16 | height: "100%"
17 | },
18 | select: {
19 | border: "none",
20 | backgroundColor: "#232627",
21 | padding: "1em 1em",
22 | display: "block",
23 | width: "100%",
24 | borderRadius: "10px",
25 | // hide the arrow
26 | WebkitAppearance: "none"
27 | },
28 | input: {
29 | padding: "1.5rem",
30 | border: "1px solid #232627",
31 | borderRadius: "0.8rem",
32 | background: "transparent"
33 | },
34 | logoutButton: {
35 | color: "#f00",
36 | cursor: "pointer",
37 | textAlign: "center"
38 | },
39 | profile_container: {
40 | display: "flex",
41 | paddingLeft: "0.75rem",
42 | paddingRight: "0.75rem",
43 | paddingTop: "1.25rem",
44 | paddingBottom: "1.25rem",
45 | flexDirection: "column",
46 | flexGrow: 1,
47 | width: "100%",
48 | maxWidth: "100%",
49 | height: "0",
50 |
51 | "@media (min-width: 768px)": {
52 | paddingLeft: "1.25rem",
53 | paddingRight: "1.25rem",
54 | paddingTop: "2.5rem"
55 | }
56 | },
57 | headerContainer: {
58 | position: "relative",
59 | borderBottom: "0.0625rem solid #2A2A2A"
60 | }
61 | }))
62 |
63 | export default useProfileStyles
64 |
--------------------------------------------------------------------------------
/packages/app/src/pages/app/useRootStyles.ts:
--------------------------------------------------------------------------------
1 | import { createStyles } from "@mantine/core"
2 |
3 | const useRootStyles = createStyles((theme) => ({
4 | container: {
5 | height: "100vh",
6 | position: "relative",
7 | display: "flex",
8 | flexDirection: "row",
9 | "@media (max-width: 900px)": {
10 | flexDirection: "column"
11 | }
12 | },
13 | content: {
14 | height: "100%",
15 | width: "100%",
16 | paddingTop: 0
17 | },
18 | header: {
19 | width: "100vw",
20 | padding: 15,
21 | display: "flex",
22 | justifyContent: "space-between",
23 | backgroundColor:
24 | theme.colorScheme === "dark"
25 | ? theme.colors.dark[9]
26 | : theme.colors.gray[1],
27 |
28 | borderBottom: `1px solid ${
29 | theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[3]
30 | }`
31 | }
32 | }))
33 |
34 | export default useRootStyles
35 |
--------------------------------------------------------------------------------
/packages/app/src/utils/getFriend.ts:
--------------------------------------------------------------------------------
1 | import { type IDatabaseUser, type IFriend } from "../store/useGlobalStore"
2 |
3 | interface Props {
4 | friendship: IFriend
5 | userId: string
6 | }
7 |
8 | const getFriend = ({
9 | friendship,
10 | userId
11 | }: Props): { friendData: IDatabaseUser | null, status: string | null } => {
12 | if (friendship.user_a === userId) {
13 | if (!Array.isArray(friendship.userData2)) {
14 | return { friendData: friendship.userData2, status: friendship.status }
15 | }
16 | }
17 |
18 | if (friendship.user_b === userId) {
19 | if (!Array.isArray(friendship.userData1)) {
20 | return { friendData: friendship.userData1, status: friendship.status }
21 | }
22 | }
23 |
24 | return { friendData: null, status: null }
25 | }
26 |
27 | export default getFriend
28 |
--------------------------------------------------------------------------------
/packages/app/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | content: [
3 | './pages/**/*.{js,ts,jsx,tsx}',
4 | './components/**/*.{js,ts,jsx,tsx}',
5 | './app/**/*.{js,ts,jsx,tsx}',
6 | ],
7 | theme: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | }
12 |
--------------------------------------------------------------------------------
/packages/app/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "useDefineForClassFields": true,
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "module": "ESNext",
13 | "moduleResolution": "Node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noUnusedLocals": false,
17 | "allowUnusedLabels": true,
18 | "noEmit": true,
19 | "jsx": "react",
20 | "paths": {
21 | "react": [ "./node_modules/@types/react" ]
22 | }
23 | },
24 | "include": ["src", "vite-env.d.ts"],
25 | "references": [{ "path": "./tsconfig.node.json" }]
26 | }
27 |
--------------------------------------------------------------------------------
/packages/app/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "module": "ESNext",
5 | "moduleResolution": "Node",
6 | "allowSyntheticDefaultImports": true
7 | },
8 | "include": ["vite.config.ts"]
9 | }
10 |
--------------------------------------------------------------------------------
/packages/app/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "rewrites": [
3 | {
4 | "source": "/api/(.*)",
5 | "destination": "/api/$1"
6 | },
7 | {
8 | "source": "/static/(.*)",
9 | "destination": "/static/$1"
10 | },
11 | {
12 | "source": "/public/(.*)",
13 | "destination": "/static/$1"
14 | },
15 | {
16 | "source": "/(.*)",
17 | "destination": "/"
18 | }
19 | ]
20 | }
--------------------------------------------------------------------------------
/packages/app/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line @typescript-eslint/triple-slash-reference
2 | ///
3 |
4 | interface ImportMetaEnv {
5 | // Define your environment variables here
6 | readonly VITE_SERVER_URL: string
7 | // Add more environment variables as needed
8 | }
9 |
10 | interface ImportMeta {
11 | readonly env: ImportMetaEnv
12 | }
13 |
--------------------------------------------------------------------------------
/packages/app/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 |
4 | const buildType = process.env.BUILD_TYPE || 'app';
5 |
6 | export default defineConfig(() => {
7 | if (buildType === 'library') {
8 | return {
9 | plugins: [react()],
10 | build: {
11 | lib: {
12 | entry: 'src/App.tsx', // Path to your main component
13 | name: 'cojourney',
14 | formats: ['es', 'umd'], // Specify library formats
15 | fileName: (format) => `index.${format}.js`
16 | },
17 | rollupOptions: {
18 | // Externalize React to avoid bundling it into your library
19 | external: ['react', 'react-dom'],
20 | output: {
21 | // Configure globals for external dependencies
22 | globals: {
23 | react: 'React',
24 | 'react-dom': 'ReactDOM'
25 | }
26 | }
27 | }
28 | }
29 | };
30 | } else {
31 | return {
32 | build: {
33 | minify: false,
34 | },
35 | plugins: [react()],
36 | base: "/",
37 | server: {
38 | port: 3000,
39 | },
40 | };
41 | }
42 | });
--------------------------------------------------------------------------------
/packages/docs/.gitignore:
--------------------------------------------------------------------------------
1 | # Dependencies
2 | /node_modules
3 |
4 | # Production
5 | /build
6 |
7 | # Generated files
8 | .docusaurus
9 | .cache-loader
10 |
11 | # Misc
12 | .DS_Store
13 | .env.local
14 | .env.development.local
15 | .env.test.local
16 | .env.production.local
17 |
18 | npm-debug.log*
19 |
--------------------------------------------------------------------------------
/packages/docs/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/packages/docs/README.md:
--------------------------------------------------------------------------------
1 | # Website
2 |
3 | This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
4 |
5 | ### Installation
6 |
7 | ```
8 | $ npm install
9 | ```
10 |
11 | ### Local Development
12 |
13 | ```
14 | $ npm start
15 | ```
16 |
17 | This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
--------------------------------------------------------------------------------
/packages/docs/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
3 | };
4 |
--------------------------------------------------------------------------------
/packages/docs/docs/intro.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 1
3 | ---
4 |
5 | # Cojourney Intro
6 |
--------------------------------------------------------------------------------
/packages/docs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@cojourney/docs",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "docusaurus": "docusaurus",
7 | "start": "docusaurus start --no-open",
8 | "dev": "docusaurus start --port 3002 --no-open",
9 | "build": "docusaurus build",
10 | "swizzle": "docusaurus swizzle",
11 | "deploy": "docusaurus deploy",
12 | "clear": "docusaurus clear",
13 | "serve": "docusaurus serve",
14 | "write-translations": "docusaurus write-translations",
15 | "write-heading-ids": "docusaurus write-heading-ids"
16 | },
17 | "dependencies": {
18 | "@docusaurus/core": "3.1.1",
19 | "@docusaurus/preset-classic": "3.1.1",
20 | "@mdx-js/react": "^3.0.0",
21 | "clsx": "^2.0.0",
22 | "prism-react-renderer": "^2.3.0",
23 | "react": "^18.2.0",
24 | "react-dom": "^18.2.0",
25 | "react-router-dom": "^6.22.0"
26 | },
27 | "devDependencies": {
28 | "@docusaurus/module-type-aliases": "3.1.1",
29 | "@docusaurus/types": "3.1.1"
30 | },
31 | "browserslist": {
32 | "production": [
33 | ">0.5%",
34 | "not dead",
35 | "not op_mini all"
36 | ],
37 | "development": [
38 | "last 3 chrome version",
39 | "last 3 firefox version",
40 | "last 5 safari version"
41 | ]
42 | },
43 | "engines": {
44 | "node": ">=18.0"
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/packages/docs/sidebars.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Creating a sidebar enables you to:
3 | - create an ordered group of docs
4 | - render a sidebar for each doc of that group
5 | - provide next/previous navigation
6 |
7 | The sidebars can be generated from the filesystem, or explicitly defined here.
8 |
9 | Create as many sidebars as you want.
10 | */
11 |
12 | // @ts-check
13 |
14 | /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
15 | const sidebars = {
16 | // By default, Docusaurus generates a sidebar from the docs folder structure
17 | tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
18 | };
19 |
20 | export default sidebars;
21 |
--------------------------------------------------------------------------------
/packages/docs/src/components/HomepageFeatures/index.js:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx'
2 | import Heading from '@theme/Heading'
3 | import styles from './styles.module.css'
4 |
5 | const FeatureList = [
6 | {
7 | title: 'Made By Users',
8 | description: (
9 | <>
10 | Cojourney is open source, community developed and designed to be beautiful and easy to use.
11 |
12 | )
13 | },
14 | {
15 | title: 'Powered By AI',
16 | description: (
17 | <>
18 | Cojourney is a new kind of social network that uses AI to help you find your people.
19 |
20 | )
21 | },
22 | {
23 | title: 'For a Better World',
24 | description: (
25 | <>
26 | If you have ideas for how to make better agents for everyone, join us and help make it happen.
27 |
28 | )
29 | }
30 | ]
31 |
32 | function Feature ({ Svg, title, description }) {
33 | return (
34 |
35 |
44 | {/*
45 |
46 |
*/}
47 |
48 |
{title}
49 |
{description}
50 |
51 |
52 |
60 |
61 | {FeatureList.map((props, idx) => (
62 |
63 | ))}
64 |
65 |
13 |
14 | {siteConfig.title}
15 |
16 |
{siteConfig.tagline}
17 |
4 |
5 | Cojourney is about making high quality connections with other people. It's a social network that's designed to help you find people who share your interests, and to help you build the right context.
6 |
7 | ## Developing Live on Discord
8 |