feat/Adjust the searchbar to perform searches by title, description or context

components/Filter/utils.js

@@ -19,15 +19,25 @@ export const getUniqueFieldValues = (issues) => {
   )
 }
 
-// Filter issues based on selected filters
-export const filterIssuesBySelectedFilters = (issues, selectedFilters) => {
-  return issues.filter((issue) =>
-    Object.entries(selectedFilters).every(
+export const filterIssuesBySearchAndFilters  = (issues, selectedFilters, searchQuery) => {
+  return issues.filter((issue) => {
+    const issuesFilters = Object.entries(selectedFilters).every(
       ([filterName, selectedValue]) =>
         !selectedValue ||
         issue.fields.some((field) => field.field === filterName && field.value === selectedValue)
     )
-  )
+    const issuesSearchQuery = searchQuery
+      ? issue.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        (issue.body && issue.body.toLowerCase().includes(searchQuery.toLowerCase())) ||
+        issue.fields.some(
+          (field) =>
+            typeof field.value === 'string' &&
+            field.value.toLowerCase().includes(searchQuery.toLowerCase())
+        )
+      : true
+
+    return issuesFilters && issuesSearchQuery
+  })
 }
 
 // Get options for the Amount filter based on selected Reward
@@ -53,7 +63,7 @@ export const getAmountFilterOptions = (issues, filters, selectedReward) => {
 }
 
 // Custom hook to manage filter state
-export const useFilterState = (issues) => {
+export const useFilterState = (issues, searchQuery) => {
   const router = useRouter()
   const [filters, setFilters] = useState({})
   const [selectedFilters, setSelectedFilters] = useState({})
@@ -170,7 +180,11 @@ export const useFilterState = (issues) => {
   }, [filters, updateUrlWithFilters])
 
   // Apply filters to issues
-  const filteredIssues = filterIssuesBySelectedFilters(issues, selectedFilters)
+  const filteredAndSearchedIssues = filterIssuesBySearchAndFilters (
+    issues,
+    selectedFilters,
+    searchQuery
+  )
   const { isAmountFilterDisabled, amountFilterTitle, availableAmounts } = getAmountFilterOptions(
     issues,
     filters,
@@ -194,7 +208,7 @@ export const useFilterState = (issues) => {
     toggleFilterDropdown,
     handleFilterSelection,
     clearAllFilters,
-    filteredIssues,
+    filteredIssues: filteredAndSearchedIssues,
     availableAmounts,
     getFilterComponentProps,
   }

components/SearchBar/index.js

@@ -1,14 +1,15 @@
 import React from 'react'
 import { useTheme } from 'next-themes'
 
-const SearchBar = ({ searchQuery, setSearchQuery }) => {
+const SearchBar = ({ searchQuery, setSearchQuery, placeholder }) => {
   const { theme } = useTheme()
   const isLight = theme === 'light'
+
   return (
     <div className="w-[100%] p-4">
       <input
         type="text"
-        placeholder="Search project title & description"
+        placeholder={placeholder}
         value={searchQuery}
         onChange={(e) => setSearchQuery(e.target.value)}
         className={`search-bar text-white ${
@@ -19,4 +20,4 @@ const SearchBar = ({ searchQuery, setSearchQuery }) => {
   )
 }
 
-export default SearchBar
+export default SearchBar

docs/how-to-contribute.md

@@ -98,10 +98,10 @@ Deploy this project on Vercel in one click:
 
 #### Windows
 
-1. Download and install Java from the official [Oracle website](https://www.java.com/en/download/ie_manual.jsp). Make sure to choose the version suitable for your system.
+1. Download and install SDK Java 20 from the official [Oracle website](https://www.oracle.com/java/technologies/javase/jdk20-archive-downloads.html). Make sure to choose the version suitable for your system.
 2. Open Command Prompt and set the `JAVA_HOME` environment variable:
    ```cmd
-   set JAVA_HOME=C:\Program Files\Java\jdk-22
+   set JAVA_HOME=C:\Program Files\Java\jdk-20
    ```
 3. Add Java to your `PATH`:
    ```cmd

pages/tasks/index.js

@@ -31,7 +31,7 @@ const TaskPage = ({ issues }) => {
     filteredIssues,
     availableAmounts,
     getFilterComponentProps,
-  } = useFilterState(issues)
+  } = useFilterState(issues, searchQuery)
 
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, async (user) => {
@@ -57,7 +57,11 @@ const TaskPage = ({ issues }) => {
       </Head>
       <div className="flex w-full items-center justify-center">
         <div className="flex w-full flex-col xl:w-[80%]">
-          <SearchBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
+          <SearchBar 
+          searchQuery={searchQuery} 
+          setSearchQuery={setSearchQuery} 
+          placeholder={t('task.taskPlaceholder')}
+          />
           <div className="flex">
             <div className="flex w-full flex-col items-start md:mx-4 lg:flex-row">
               <Filter
@@ -121,7 +125,7 @@ const TaskPage = ({ issues }) => {
                     </div>
                     <div className="flex flex-col gap-4">
                       {filteredIssues.map((issue) => (
-                        <IssueCard key={issue.github_id} issue={issue} t={t} userInfo={userAuth} />
+                        <IssueCard key={issue.github_id} issue={issue} userInfo={userAuth} />
                       ))}
                     </div>
                   </div>

public/locales/en/translation.json

@@ -91,6 +91,9 @@
     "description1": "Designed to cater to developers of all skill levels, our study groups provide a collaborative environment where you can dive deep into various Web3 topics, including blockchain, decentralized finance, smart contract security, and more. Guided by industry experts, each session offers hands-on experience and practical knowledge, ensuring you can apply what you learn in real-world scenarios.",
     "description2": "Our mission is to make Web3 accessible to everyone, regardless of location or language preference. By joining our study groups, you’ll connect with like-minded peers, participate in engaging projects, and become part of a thriving community dedicated to innovation and growth in the Web3 space. Explore our schedule and start your journey towards becoming a Web3 expert today!,"
   },
+  "task":{
+    "taskPlaceholder": "Search by title, description, or context depth"
+  },
   "validation": {
     "required": "This field is required",
     "email": {

public/locales/pt-BR/translation.json

@@ -91,6 +91,9 @@
     "description1": "Projetados para atender a desenvolvedores de todos os níveis, nossos grupos de estudo oferecem um ambiente colaborativo onde você pode explorar diversos tópicos de Web3, incluindo blockchain, finanças descentralizadas, segurança de contratos inteligentes e muito mais. Orientados por especialistas da indústria, cada sessão oferece experiência prática e conhecimento aplicável, garantindo que você possa usar o que aprende em cenários do mundo real.",
     "description2": "Nossa missão é tornar o Web3 acessível a todos, independentemente da localização ou da preferência de idioma. Ao se juntar aos nossos grupos de estudo, você conectará com colegas interessados, participará de projetos envolventes e se tornará parte de uma comunidade vibrante, dedicada à inovação e ao crescimento no espaço Web3. Explore nossa programação e comece sua jornada para se tornar um especialista em Web3 hoje mesmo"
   },
+  "task":{
+    "taskPlaceholder": "Pesquise por título, descrição ou profundidade de contexto"
+  },
   "validation": {
     "required": "Este campo é obrigatório",
     "email": {

seed-data.json

@@ -837,8 +837,8 @@
       "github_id": "PVTI_lADOBSkJcc4AiejKzgQYxwc",
       "status": "Todo",
       "project_name": "Stellar Study Group [Core]",
-      "title": "Start here",
-      "body": "Our practical learning platform, located at build.w3d.community, offers courses focused on blockchain and web3 technologies",
+      "title": "Other title",
+      "body": "Task to create a new online shopping app via whatsapp",
       "closedAt": null,
       "fields": [
         {
@@ -851,7 +851,7 @@
         },
         {
           "field": "Context Depth",
-          "value": "Novice"
+          "value": "Beginner"
         },
         {
           "field": "Importance",