Make community and chatbot features visible after logout

Add LoginModal component and integrate it into MediaOutlet and Community pages. Adjust button click handlers to conditionally open the login modal if the user is not authenticated.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/d35d7YU
This commit is contained in:
kimjaehyeon0101
2025-10-15 04:08:10 +00:00
parent 1fe66ac046
commit 1684a8f3ba
2 changed files with 50 additions and 29 deletions

View File

@ -13,6 +13,7 @@ import { Eye, MessageCircle, ThumbsUp, Pin, Search, Info, Settings, User, LogOut
import type { MediaOutlet, CommunityPost } from "@shared/schema"; import type { MediaOutlet, CommunityPost } from "@shared/schema";
import { queryClient, apiRequest } from "@/lib/queryClient"; import { queryClient, apiRequest } from "@/lib/queryClient";
import SearchModal from "@/components/SearchModal"; import SearchModal from "@/components/SearchModal";
import LoginModal from "@/components/LoginModal";
export default function Community() { export default function Community() {
const [, params] = useRoute("/media/:slug/community"); const [, params] = useRoute("/media/:slug/community");
@ -22,6 +23,7 @@ export default function Community() {
const [sortBy, setSortBy] = useState("latest"); const [sortBy, setSortBy] = useState("latest");
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
const [isSearchModalOpen, setIsSearchModalOpen] = useState(false); const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
const [enlargedImage, setEnlargedImage] = useState<string | null>(null); const [enlargedImage, setEnlargedImage] = useState<string | null>(null);
const slug = params?.slug || ''; const slug = params?.slug || '';
@ -238,7 +240,15 @@ export default function Community() {
<Dialog open={isNewPostOpen} onOpenChange={setIsNewPostOpen}> <Dialog open={isNewPostOpen} onOpenChange={setIsNewPostOpen}>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button data-testid="button-new-post"> <Button
onClick={(e) => {
if (!isAuthenticated) {
e.preventDefault();
setIsLoginModalOpen(true);
}
}}
data-testid="button-new-post"
>
</Button> </Button>
</DialogTrigger> </DialogTrigger>
@ -434,6 +444,11 @@ export default function Community() {
</div> </div>
)} )}
</main> </main>
<LoginModal
isOpen={isLoginModalOpen}
onClose={() => setIsLoginModalOpen(false)}
/>
</div> </div>
); );
} }

View File

@ -253,36 +253,42 @@ export default function MediaOutlet() {
/> />
</div> </div>
<Button
variant="ghost"
size="sm"
onClick={() => setLocation("/auctions")}
data-testid="button-auctions"
>
Auctions
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => setLocation(`/media/${outlet.slug}/community`)}
data-testid="button-community"
>
Community
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => {
if (isAuthenticated) {
setIsChatbotOpen(true);
} else {
setIsLoginModalOpen(true);
}
}}
data-testid="button-chatbot"
>
<MessageCircle className="h-4 w-4 mr-1" />
Chat
</Button>
{isAuthenticated && user ? ( {isAuthenticated && user ? (
<> <>
<Button
variant="ghost"
size="sm"
onClick={() => setLocation("/auctions")}
data-testid="button-auctions"
>
Auctions
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => setLocation(`/media/${outlet.slug}/community`)}
data-testid="button-community"
>
Community
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => setIsChatbotOpen(true)}
data-testid="button-chatbot"
>
<MessageCircle className="h-4 w-4 mr-1" />
Chat
</Button>
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"