diff --git a/src/App.tsx b/src/App.tsx index 96f174c..5276d5b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,7 +10,7 @@ import { setUser } from "./redux/features/user.slice"; import ProtectedRoute from "./Components/ProtectedRoute/ProtectedRoute"; import { Helmet } from "react-helmet"; import { NavbarLayout } from "./utils/routing/layouts"; -import { Loadable } from "./utils/routing"; +import { Loadable, PAGES_ROUTES } from "./utils/routing"; @@ -90,25 +90,25 @@ function App() { }> - } /> + } /> }> - } /> - } /> - } /> + } /> + } /> + } /> - } /> - } /> + } /> + } /> - } /> + } /> - } /> + } /> - } /> - } /> - } /> + } /> + } /> + } /> - } /> + } /> diff --git a/src/features/Posts/Components/Comments/CommentsSection/CommentsSection.tsx b/src/features/Posts/Components/Comments/CommentsSection/CommentsSection.tsx index 4fab907..ca7c361 100644 --- a/src/features/Posts/Components/Comments/CommentsSection/CommentsSection.tsx +++ b/src/features/Posts/Components/Comments/CommentsSection/CommentsSection.tsx @@ -1,17 +1,14 @@ -import React, { useEffect, useMemo, useState } from 'react' +import { useState } from 'react' import CommentRoot from '../Comment/Comment' import AddComment from '../AddComment/AddComment' -import { Comment, } from '../types' -import { createWorkerFactory, useWorker } from '@shopify/react-web-worker' import { useAppSelector } from "src/utils/hooks"; -import * as CommentsWorker from './comments.worker' import { Post_Type } from 'src/graphql' import useComments from './useComments' import IconButton from 'src/Components/IconButton/IconButton' import { AiOutlineClose } from 'react-icons/ai' -import { Link } from 'react-router-dom' -import { createRoute } from 'src/utils/routing' +import { Link, useLocation } from 'react-router-dom' +import { createRoute, PAGES_ROUTES } from 'src/utils/routing' import Preferences from 'src/services/preferences.service' // const createWorker = createWorkerFactory(() => import('./comments.worker')); @@ -24,24 +21,11 @@ interface Props { export default function CommentsSection({ type, id }: Props) { - // const worker = useWorker(createWorker); - // const commentsTree = useMemo(() => convertCommentsToTree(comments), [comments]) - // const [commentsTree, setCommentsTree] = useState([]) const user = useAppSelector(state => state.user.me); - const [showTooltip, setShowTooltip] = useState(Preferences.get('showNostrCommentsTooltip')) - // const filter = useMemo(() => `boltfun ${type}_comment ${id}` + (process.env.NODE_ENV === 'development' ? ' dev' : ""), [id, type]) + const [showTooltip, setShowTooltip] = useState(Preferences.get('showNostrCommentsTooltip')); + const location = useLocation() - // useEffect(() => { - // CommentsWorker.connect(); - // const unsub = CommentsWorker.sub(filter, (newComments) => { - // setCommentsTree(newComments) - // }) - - // return () => { - // unsub(); - // } - // }, [filter]); const { commentsTree, postComment, connectionStatus } = useComments({ type, id }) const handleNewComment = async (content: string, parentId?: string) => { @@ -75,12 +59,23 @@ export default function CommentsSection({ type, id }: Props) { } - {!!user &&
- handleNewComment(content)} - avatar={user.avatar} - /> + {
+
+ handleNewComment(content)} + avatar={user?.avatar ?? 'https://avatars.dicebear.com/api/bottts/Default.svg'} + /> +
+ {!user &&
+ Connect with ⚡ to comment +
}
}
diff --git a/src/utils/routing/routes.ts b/src/utils/routing/routes.ts index b1f6ed9..372a9b2 100644 --- a/src/utils/routing/routes.ts +++ b/src/utils/routing/routes.ts @@ -2,32 +2,32 @@ import { toSlug } from "../helperFunctions"; type RouteOptions = | { - type: 'post', + type: "post", id: string | number, postType: string, title?: string, username?: string, } | { - type: 'story', + type: "story", id: string | number, title?: string, username?: string, } | { - type: 'bounty', + type: "bounty", id: string | number, title?: string, username?: string, } | { - type: 'question', + type: "question", id: string | number, title?: string, username?: string, } | { - type: 'profile', + type: "profile", id: string | number, username?: string, } @@ -35,27 +35,53 @@ type RouteOptions = export function createRoute(options: RouteOptions) { - if (options.type === 'post') + if (options.type === "post") return `/blog/post/${options.postType.toLowerCase()}/${options.id}` + (options.title ? `/${toSlug(options.title)}` : ""); - if (options.type === 'story') + if (options.type === "story") return `/blog/post/story/${options.id}` + (options.title ? `/${toSlug(options.title)}` : ""); - if (options.type === 'bounty') + if (options.type === "bounty") return `/blog/post/bounty/${options.id}` + (options.title ? `/${toSlug(options.title)}` : ""); - if (options.type === 'question') + if (options.type === "question") return `/blog/post/question/${options.id}` + (options.title ? `/${toSlug(options.title)}` : ""); - if (options.type === 'profile') + if (options.type === "profile") return `/profile/${options.id}` + (options.username ? `/${toSlug(options.username)}` : ""); - return '' + return "" +} + +export const PAGES_ROUTES = { + apps: { + default: "/apps", + hottest: "/apps/hottest", + byCategoryId: "/apps/category/:id" + }, + blog: { + feed: "/blog", + postById: "/blog/post/:type/:id/*", + createPost: "/blog/create-post" + }, + hackathons: { + default: "/hackathons" + }, + donate: { + default: "/donate" + }, + profile: { + byId: "/profile/:id/*", + }, + auth: { + login: "/login", + logout: "/logout", + } } \ No newline at end of file