feat: show a blurred "Add Comment section" for unconnected users.

Fixes #114

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() {
     </Helmet>
     <Suspense fallback={<LoadingPage />}>
       <Routes>
-        <Route path="/blog/create-post" element={<ProtectedRoute><CreatePostPage /></ProtectedRoute>} />
+        <Route path={PAGES_ROUTES.blog.createPost} element={<ProtectedRoute><CreatePostPage /></ProtectedRoute>} />
 
         <Route element={<NavbarLayout />}>
-          <Route path="/apps/hottest" element={<HottestPage />} />
-          <Route path="/apps/category/:id" element={<CategoryPage />} />
-          <Route path="/apps" element={<ExplorePage />} />
+          <Route path={PAGES_ROUTES.apps.hottest} element={<HottestPage />} />
+          <Route path={PAGES_ROUTES.apps.byCategoryId} element={<CategoryPage />} />
+          <Route path={PAGES_ROUTES.apps.default} element={<ExplorePage />} />
 
-          <Route path="/blog/post/:type/:id/*" element={<PostDetailsPage />} />
-          <Route path="/blog" element={<FeedPage />} />
+          <Route path={PAGES_ROUTES.blog.postById} element={<PostDetailsPage />} />
+          <Route path={PAGES_ROUTES.blog.feed} element={<FeedPage />} />
 
-          <Route path="/hackathons" element={<HackathonsPage />} />
+          <Route path={PAGES_ROUTES.hackathons.default} element={<HackathonsPage />} />
 
-          <Route path="/donate" element={<DonatePage />} />
+          <Route path={PAGES_ROUTES.donate.default} element={<DonatePage />} />
 
-          <Route path="/profile/:id/*" element={<ProfilePage />} />
-          <Route path="/login" element={<LoginPage />} />
-          <Route path="/logout" element={<LogoutPage />} />
+          <Route path={PAGES_ROUTES.profile.byId} element={<ProfilePage />} />
+          <Route path={PAGES_ROUTES.auth.login} element={<LoginPage />} />
+          <Route path={PAGES_ROUTES.auth.logout} element={<LogoutPage />} />
 
-          <Route path="/" element={<Navigate to="/apps" />} />
+          <Route path="/" element={<Navigate to={PAGES_ROUTES.apps.default} />} />
         </Route>
 
       </Routes>

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<Comment[]>([])
   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) {
         <IconButton className='shrink-0 self-start' onClick={closeTooltip}><AiOutlineClose className='text-gray-600' /></IconButton>
       </div>}
 
-      {!!user && <div className="mt-24">
-        <AddComment
-          placeholder='Leave a comment...'
-          onSubmit={content => handleNewComment(content)}
-          avatar={user.avatar}
-        />
+      {<div className="mt-24 relative">
+        <div className={!user ? "blur-[2px]" : ""}>
+          <AddComment
+            placeholder='Leave a comment...'
+            onSubmit={content => handleNewComment(content)}
+            avatar={user?.avatar ?? 'https://avatars.dicebear.com/api/bottts/Default.svg'}
+          />
+        </div>
+        {!user && <div className="absolute inset-0 bg-gray-400 bg-opacity-50 rounded-12 flex flex-col justify-center items-center">
+          <Link
+            className='bg-white rounded-12 px-24 py-12'
+            to={PAGES_ROUTES.auth.login}
+            state={{
+              from: location.pathname
+            }}
+          >Connect with ⚡ to comment</Link>
+        </div>}
       </div>}
 
       <div className='flex flex-col gap-16 mt-32'>

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",
+    }
 }