diff --git a/client/src/components/fakestackoverflow.tsx b/client/src/components/fakestackoverflow.tsx index f348073..ffcdae8 100644 --- a/client/src/components/fakestackoverflow.tsx +++ b/client/src/components/fakestackoverflow.tsx @@ -17,6 +17,7 @@ import AccountInfo from './main/profile/accountInfo'; import TagsInfo from './main/profile/tags'; import CommunityInfo from './main/profile/community'; import ChooseTagsPage from './login/newUser/chooseTagsPage/index'; +import ChooseCommunityPage from './login/newUser/chooseCommunityPage'; import CommunityHomePage from './main/homePage/community'; import PostLoginCommunity from './login/newUser/chooseCommunityPage'; import ChatPage from './main/chat'; @@ -52,10 +53,8 @@ const FakeStackOverflow = ({ socket }: { socket: FakeSOSocket | null }) => { } /> } /> } /> - } - /> + } /> + {/* Protected Routes */} { { }> } /> } /> - } /> + {/* } /> */} } diff --git a/client/src/components/login/newUser/chooseCommunityPage/index.css b/client/src/components/login/newUser/chooseCommunityPage/index.css index b1dd2e9..b31a521 100644 --- a/client/src/components/login/newUser/chooseCommunityPage/index.css +++ b/client/src/components/login/newUser/chooseCommunityPage/index.css @@ -3,75 +3,95 @@ flex-direction: column; align-items: center; justify-content: center; + width: 100%; min-height: 100vh; - text-align: center; padding: 20px; - position: relative; + background-color: #f5f5f5; } .recommendation-header { - margin-top: -40px; - font-size: 24px; - margin-bottom: 20px; + font-size: 26px; + font-weight: bold; + color: #333; + margin-bottom: 30px; } -.communities { +.community-list { display: flex; + flex-direction: row; + align-items: center; + gap: 15px; + width: 100%; flex-wrap: wrap; justify-content: center; - gap: 15px; - margin-bottom: 20px; + margin-bottom: 200px; } -.communities li { - background-color: #895159; +.community-pill { + background-color: #6f4046; color: white; - border-radius: 8px; - padding: 1px; - width: 150px; - height: 55px; + border-radius: 50px; + margin: 5px; + padding: 5px 10px; + width: 160px; + height: 50px; text-align: center; - font-size: 17px; + font-size: 16px; display: flex; align-items: center; justify-content: center; + border: none; + transition: background-color 0.3s, transform 0.2s; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } -.communities li:hover { - background-color: #6f4046; - color: white; -} - -.communities li.selected { - background-color: #ffffff; - color: #6f4046; - border: 2px solid #6f4046; +.community-pill:hover { + background-color: #895159; + transform: scale(1.05); } -.choose-more-text { - font-size: 18px; - margin-top: 50px; - font-weight: bold; +.community-pill.selected { + background-color: #ffffff; + color: #6f4046; + border: 2px solid #6f4046; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); } +/* Button container and alignment */ .button-container { - position: absolute; - bottom: 70px; - right: 40px; + display: flex; + justify-content: flex-end; + width: 100%; + margin-bottom: 20px; } +/* Button styles */ .next-button { - padding: 10px 20px; + padding: 12px 25px; font-size: 16px; cursor: pointer; background-color: #466694; - width: 150px; + width: 160px; height: 45px; color: white; border: none; border-radius: 5px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + transition: background-color 0.3s, transform 0.2s; } .next-button:hover { + background-color: #324b73; + transform: translateY(-2px); +} + +.next-button:active { background-color: #466694; + transform: translateY(0); +} + +.button-text { + text-decoration: none; + color: white; + font-weight: bold; } diff --git a/client/src/components/login/newUser/chooseCommunityPage/index.tsx b/client/src/components/login/newUser/chooseCommunityPage/index.tsx index c8ece11..2ca4013 100644 --- a/client/src/components/login/newUser/chooseCommunityPage/index.tsx +++ b/client/src/components/login/newUser/chooseCommunityPage/index.tsx @@ -1,103 +1,62 @@ /* eslint-disable no-console */ -import React, { useEffect, useState } from 'react'; -import { collection, query, getDoc, getDocs, doc, updateDoc } from 'firebase/firestore'; -import { NavLink } from 'react-router-dom'; -import { db } from '../../../../firebaseConfig'; +import React, { useState } from 'react'; import './index.css'; +import { NavLink } from 'react-router-dom'; +import { auth } from '../../../../firebaseConfig'; +import { updateUserCommunity } from '../../../../services/userService'; +import logo from '../../../../logo.svg'; +import useCommunityNames from '../../../../hooks/useCommunityNames'; + +/** + * Depicts communities that the user can choose from. + */ +const ChooseCommunityPage = () => { + const { communityNames } = useCommunityNames(); + const [selectedCommunity, setSelectedCommunity] = useState(''); + + const handleCommunityClick = (communityName: string) => { + setSelectedCommunity(prevCommunity => (prevCommunity === communityName ? '' : communityName)); + }; -const PostLoginCommunity = ({ userId }: { userId: string }) => { - const [userTags, setUserTags] = useState([]); - const [suggestedCommunities, setSuggestedCommunities] = useState([]); - const [selectedCommunity, setSelectedCommunity] = useState(null); - - useEffect(() => { - const fetchUserTags = async () => { - const userRef = doc(db, 'users', userId); - const docSnap = await getDoc(userRef); - - if (docSnap.exists()) { - setUserTags(docSnap.data().tags || []); - } else { - console.log('User not found!'); - } - }; - - fetchUserTags(); - }, [userId]); - - useEffect(() => { - if (userTags.length === 0) return; - - const fetchSuggestedCommunities = async () => { - const communitiesRef = collection(db, 'communities'); - const q = query(communitiesRef); - - const querySnapshot = await getDocs(q); - const matchedCommunities: string[] = []; - - // eslint-disable-next-line @typescript-eslint/no-shadow - querySnapshot.forEach(doc => { - const community = doc.data(); - const commonTags = community.tags.filter((tag: string) => userTags.includes(tag)); - - // if there are common tags with a community, suggest that community -- can change - // implementation - if (commonTags.length > 0) { - matchedCommunities.push(doc.id); - } - }); - - setSuggestedCommunities(matchedCommunities); - }; - - fetchSuggestedCommunities(); - }, [userTags]); - - const handleCommunitySelect = async (community: string) => { - setSelectedCommunity(community); - const userRef = doc(db, 'users', userId); - + const saveCommunityToUserAccount = async (community: string) => { try { - const docSnap = await getDoc(userRef); - if (!docSnap.exists()) { - console.log('User not found!'); - return; - } - const userData = docSnap.data(); - const communitySelected = userData.communitySelected || []; - - // users can only select one community: - if (communitySelected.length === 0 || communitySelected[0] !== community) { - await updateDoc(userRef, { - communitySelected: [community], - }); - console.log(`Community "${community}" added to user's selected communities`); + const user = auth.currentUser; + if (user) { + console.log('Saving community for user:', user.email); + await updateUserCommunity(user.email!, community); // Call the backend service + console.log('Community updated successfully'); } else { - console.log(`Community "${community}" is already selected.`); + console.error('No user is logged in.'); } } catch (error) { - console.error('Error adding community to user:', error); + console.error('Error saving community:', error); } }; return (
-

- We recommend the following communities based on your interests: -

-
    - {suggestedCommunities.map(community => ( -
  • handleCommunitySelect(community)} - className={selectedCommunity === community ? 'selected' : ''}> - {community} -
  • - ))} -
-

+ Fake Stack Overflow Logo +
+

Recommended Communities:

+
+
+ {communityNames && + communityNames.map(community => ( +
  • handleCommunityClick(community.name)}> + {community.name} +
  • + ))} +
    -