From 07ba2ca79d52ee8db6ce82fd1760f0863b95ccc0 Mon Sep 17 00:00:00 2001 From: siyi zhang Date: Tue, 30 Jul 2024 11:50:47 -0400 Subject: [PATCH 1/2] fix firebase.tsx syntax error --- src/utils/Firebase.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/utils/Firebase.tsx b/src/utils/Firebase.tsx index b70ecee..d454aa9 100644 --- a/src/utils/Firebase.tsx +++ b/src/utils/Firebase.tsx @@ -95,18 +95,19 @@ export async function getUserJobs(userId: string): Promise { } -export async function submitUserForJob(userId: string, jobId: string, questionAnswers: string[]) { - try { - const docRef = await addDoc(collection(db, "userJobsApplied"),{ +export async function submitUserForJob(userId: string, jobId: string, questionAnswers: string[]) { + try { + const docRef = await addDoc(collection(db, "userJobsApplied"), { userId: userId, jobId: jobId, questionAnswers: questionAnswers }); - console.log("Document written with ID: ", docRef.id); + console.log("Document written with ID: ", docRef.id); return docRef.id; - } catch (e) { + } catch (e) { console.error("Error adding document: ", e); } +} export async function createNewJob(userID: string, title: string, description: string, jobSkills: string[], header: string, thumbnail: string, jobDuration: number, questions: string[]) { if (!userID || !title) { From 283ff48ff04fa8299ef7f4f674090196bf1b1692 Mon Sep 17 00:00:00 2001 From: siyi zhang Date: Thu, 1 Aug 2024 18:35:45 -0400 Subject: [PATCH 2/2] skills share page --- .../CategoryDropdown/CategoryDropdown.tsx | 50 +++++++++-------- src/components/JobCard/JobCard.scss | 0 src/components/JobCard/JobCard.tsx | 37 ++++++------ src/pages/MarketPlacePage/MarketPlace.tsx | 23 +------- src/pages/SkillSharePage/index.scss | 15 +++++ src/pages/SkillSharePage/index.tsx | 56 ++++++++++++++----- src/utils/Firebase.tsx | 3 +- 7 files changed, 106 insertions(+), 78 deletions(-) create mode 100644 src/components/JobCard/JobCard.scss diff --git a/src/components/CategoryDropdown/CategoryDropdown.tsx b/src/components/CategoryDropdown/CategoryDropdown.tsx index 1adbaef..8928c80 100644 --- a/src/components/CategoryDropdown/CategoryDropdown.tsx +++ b/src/components/CategoryDropdown/CategoryDropdown.tsx @@ -1,41 +1,42 @@ -import { useState } from "react"; -import { Link } from "react-router-dom"; -import "@/src/styles/index.scss"; -import DropdownIcon from "../../styles/assets/icons/icons8-dropdown-50.png"; +import { useState } from 'react' +import { Link } from 'react-router-dom' +import '@/src/styles/index.scss' +import DropdownIcon from '../../styles/assets/icons/icons8-dropdown-50.png' interface CategoryDropdownProps { - onSelectCategory: (category: string) => void; + onSelectCategory: (category: string) => void } const CategoryDropdown: React.FC = ({ - onSelectCategory, + onSelectCategory }) => { - const [isMenuOpen, setIsMenuOpen] = useState(false); - const [selectedCategory, setSelectedCategory] = useState(null); + const [isMenuOpen, setIsMenuOpen] = useState(false) + const [selectedCategory, setSelectedCategory] = useState(null) const toggleMenu = () => { - setIsMenuOpen(!isMenuOpen); - }; + setIsMenuOpen(!isMenuOpen) + } const closeMenu = () => { - setIsMenuOpen(false); - }; + setIsMenuOpen(false) + } const handleCategoryClick = (category: string) => { - setSelectedCategory(category); - onSelectCategory(category); - closeMenu(); - }; + setSelectedCategory(category) + onSelectCategory(category) + closeMenu() + } const handleShowAll = () => { - setSelectedCategory(null); - setIsMenuOpen(false); + setSelectedCategory(null) + onSelectCategory(null) + setIsMenuOpen(false) } return (

Search by categories

-
+
{isMenuOpen && ( -
+
= ({ )} {/* Display the selected category as a bubble tag */} {selectedCategory && ( -
- +
+ {selectedCategory}
)}
+
) -}; +} -export default CategoryDropdown; +export default CategoryDropdown diff --git a/src/components/JobCard/JobCard.scss b/src/components/JobCard/JobCard.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/JobCard/JobCard.tsx b/src/components/JobCard/JobCard.tsx index 2529cf1..a6f5b44 100644 --- a/src/components/JobCard/JobCard.tsx +++ b/src/components/JobCard/JobCard.tsx @@ -11,7 +11,8 @@ type Job = { title: string description: string imageUrl: string - job_tags: string[] + jobSkills: string[] + categories: string[] } type JobCardProps = { @@ -20,7 +21,7 @@ type JobCardProps = { const JobCard = ({ job }: JobCardProps) => { console.log(JSON.stringify(job)) - const { job_tags, category, job_description, name } = job + const { jobSkills, categories, description, title } = job const [likeProject, setLikeProject] = useState(false) @@ -34,9 +35,9 @@ const JobCard = ({ job }: JobCardProps) => { return ( // -
+
-

{name}

+

{title}

{likeProject ? (
{
)}
- - Sunset in the mountains -
-

{job_description}

-
+ + Sunset in the mountains +
+

{description}

+
+ {/* */}
- - {category} - + {categories.map((category: string) => ( + + {category} + ))}

SKILLS & TOOLS

- {job_tags?.map((job_tag: string) => ( + {jobSkills?.map((job_tag: string) => ( { - const [selectedCategory, setSelectedCategory] = useState(null) - const onSelectCategory = (category: string) => { - setSelectedCategory(category) - } - - // Filter jobs based on selectedCategory - const filteredJobs = selectedCategory - ? projectData.jobs.filter((job: Job) => job.category === selectedCategory) - : projectData.jobs return (
-
-
- -
-
-

Market Place

-
- {filteredJobs.map((job: Job) => ( - - ))} -
-
-
+ Go to "SkillShare Page" to start
) } diff --git a/src/pages/SkillSharePage/index.scss b/src/pages/SkillSharePage/index.scss index 70e3b18..f145a77 100644 --- a/src/pages/SkillSharePage/index.scss +++ b/src/pages/SkillSharePage/index.scss @@ -60,5 +60,20 @@ letter-spacing: -0.22px; } } + + &-cards { + display: grid; + grid-template-columns: auto auto auto; + + // grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 16px; + } + + &-cardcontainer { + display: flex; + gap: 30px; + flex-wrap: wrap; + + } } } \ No newline at end of file diff --git a/src/pages/SkillSharePage/index.tsx b/src/pages/SkillSharePage/index.tsx index a095bfe..0f2a3b9 100644 --- a/src/pages/SkillSharePage/index.tsx +++ b/src/pages/SkillSharePage/index.tsx @@ -1,25 +1,53 @@ -import { useState } from "react"; -import "./index.scss"; -import CategoryDropdown from "@/src/components/CategoryDropdown/CategoryDropdown"; -import SearchCard from "@/src/components/Search/Search"; -import CreateProjectCard from "./components/CreateProjectCard/CreateProjectCard"; -import projectData from '../../data/dummy_data_extended.json' -import JobCard from "@/src/components/JobCard/JobCard"; +import { useEffect, useState } from 'react' +import './index.scss' +import CategoryDropdown from '@/src/components/CategoryDropdown/CategoryDropdown' +import SearchCard from '@/src/components/Search/Search' +import CreateProjectCard from './components/CreateProjectCard/CreateProjectCard' +//import projectData from '../../data/dummy_data_extended.json' +import JobCard from '@/src/components/JobCard/JobCard' +import { getAllTasks } from '@/src/utils/Firebase' function SkillShare() { const [tabStatus, setTabStatus] = useState('provider') + const [projectData, setProjectData] = useState<{ id: string }[]>([]) + + + async function fetchAllTasks() { + try { + console.log('getAllTasks...') + const tasks = await getAllTasks() + setProjectData(tasks); + return tasks; + } catch (error) { + console.error('Error fetching tasks:', error) + } + } + + + + useEffect(() => { + fetchAllTasks(); + + // setProjectData(tasks); + }, []) + + console.log(JSON.stringify(projectData)+ "!!!.>>"); const [selectedCategory, setSelectedCategory] = useState(null) const onSelectCategory = (category: string) => { - - category !== "Show All" ? setSelectedCategory(category) : setSelectedCategory(null) + category !== 'Show All' + ? setSelectedCategory(category) + : setSelectedCategory(null) } // Filter jobs based on selectedCategory const filteredJobs = selectedCategory - ? projectData.jobs.filter((job: Job) => job.category === selectedCategory) - : projectData.jobs + ? projectData.filter( + (job: Job) => + job.categories.include(selectedCategory) + ) + : projectData return (
@@ -50,8 +78,8 @@ function SkillShare() {
{tabStatus == 'seeker' && }
-

Projects you might like

-
+

Projects you might like

+
{filteredJobs.map((job: Job) => ( ))} @@ -63,4 +91,4 @@ function SkillShare() { ) } -export default SkillShare \ No newline at end of file +export default SkillShare diff --git a/src/utils/Firebase.tsx b/src/utils/Firebase.tsx index f7c373b..9608e74 100644 --- a/src/utils/Firebase.tsx +++ b/src/utils/Firebase.tsx @@ -26,6 +26,8 @@ const firebaseConfig = { measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID } + + // Initialize Firebase const app = initializeApp(firebaseConfig) @@ -133,7 +135,6 @@ export async function createNewJob( return } - try { const newJob = { userID: userID,