Merge main

src/api/post-profile.js

@@ -1,8 +1,8 @@
 async function postProfile(
     bio,
-    city,
-    country,
+    area,
     state,
+    country,
     location,
     picture_url,
     is_hidden,
@@ -30,7 +30,7 @@ async function postProfile(
         },
         body: JSON.stringify({
             "bio": bio,
-            "city": city,
+            "area": area,
             "state": state,
             "country": country,
             "location": location,

src/components/ExperienceCard/ExperienceCard.css

@@ -7,6 +7,9 @@
     transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     border-radius: 10px;
     box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 1), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+    min-width: 250px;
+    max-width: 350px;
+
 }
 
 .experience-card-container .Project-image img {

src/components/Forms/CreateProfileForm.jsx

@@ -37,7 +37,7 @@ function CreateProfileForm() {
   // Update the profile object with the selected country, state, and city values
     profile.state = stateIso2;
     profile.country = countryIso2;
-    profile.city = city;
+    profile.area = city;
     profile.location = `${city}, ${stateIso2}, ${countryIso2}`;
     profile.tags = selectedTags;
     profile.industries = selectedIndustries;
@@ -71,7 +71,7 @@ function CreateProfileForm() {
       } else if (auth.token && profile.bio) {
         postProfile(
           profile.bio,
-          profile.city,
+          profile.area,
           profile.state,
           profile.country,
           profile.location,

src/components/Forms/SelectOptions/CitySelect.jsx

@@ -29,8 +29,12 @@ function CitySelect({countryIso2, stateIso2, setSelectedCityId}) { // props pass
     // Event handler to update selected city
     const handleCityChange = (event) => {
         const value = event.target.value;
-        setSelectedCityName(value);
-
+        if (value === "") {
+            setSelectedCityName("");
+            setSelectedCityId("");
+        } else {
+            setSelectedCityName(value);
+        }
         //and fetch and set corresponding cityId
         const selectedCityData = citiesData.find(city => city.name === value);
         if (selectedCityData) {
@@ -42,7 +46,7 @@ function CitySelect({countryIso2, stateIso2, setSelectedCityId}) { // props pass
             <label className="form-controller">
                 City:
                 <select value={selectedCityName} onChange={handleCityChange}>
-                    <option value="">Select City</option>
+                    <option value="">Not Selected</option>
                     {cityNames.map((cityName, index) => (
                         <option key={index} value={cityName}>{cityName}</option>
                     ))}

src/components/Forms/SelectOptions/CountrySelect.jsx

@@ -29,7 +29,12 @@ function CountrySelect({setCountryIso2}) { // props passed in from LocationDropd
     // Event handler to update selected country
     const handleCountryChange = (event) => {
         const value = event.target.value;
+        if (value === "") {
+            setSelectedCountryName("");
+            setCountryIso2("");
+        } else {
         setSelectedCountryName(value);
+        }
 
         // and fetch and set corresponding states
         const selectedCountryData = countriesData.find(country => country.name === value);
@@ -42,7 +47,7 @@ function CountrySelect({setCountryIso2}) { // props passed in from LocationDropd
             <label className="select-label">
                 Country
                 <select value={selectedCountryName} onChange={handleCountryChange}>
-                    <option value="">Select Country</option>
+                    <option value="">Not Selected</option>
                     {countryNames.map((countryName, index) => (
                         <option key={index} value={countryName}>{countryName}</option>
                     ))}

src/components/Forms/SelectOptions/StateSelect.jsx

@@ -29,8 +29,12 @@ function StateSelect({countryIso2, setStateIso2}) { // props passed in from Loca
     // Event handler to update selected state
     const handleStateChange = (event) => {
         const value = event.target.value;
-        setSelectedStateName(value);
-
+        if (value === "") {
+            setSelectedStateName("");
+            setStateIso2("");
+        } else {
+            setSelectedStateName(value);
+        }
         //and fetch and set corresponding stateIso2
         const selectedStateData = statesData.find(state => state.name === value);
         if (selectedStateData) {
@@ -42,7 +46,7 @@ function StateSelect({countryIso2, setStateIso2}) { // props passed in from Loca
             <label className="form-controller">
                 State:
                 <select value={selectedStateName} onChange={handleStateChange}>
-                    <option value="">Select State</option>
+                    <option value="">Not Selected</option>
                     {stateNames.map((stateName, index) => (
                         <option key={index} value={stateName}>{stateName}</option>
                     ))}

src/components/ProfilePage/ProfilePage.css

@@ -10,6 +10,7 @@
     box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 1), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
     overflow: hidden;
     width: 100%;
+    min-width: 250px;
     margin: 0;
 }
 
@@ -24,7 +25,6 @@
     justify-content: space-between;
     align-items: center;
     height: 120px;
-    z-index: 500;
 }
 
 .profile-details,
@@ -137,4 +137,33 @@
 
 img{
     object-fit: cover;
-}
+}
+
+
+@media screen and (min-width: 640px) {
+    .experience-cards-container{
+        margin: 1rem;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 32px;
+        align-items: center;
+        justify-content: flex-start;
+    }
+}
+
+@media screen and  (min-width: 768px) {
+
+}
+
+@media screen and (min-width: 1024px) {
+
+}
+
+@media screen and  (min-width: 1280px) {
+
+}
+
+@media screen and (min-width: 1536px) {
+
+}

src/pages/HomePage.jsx

@@ -13,76 +13,104 @@ import ToggleSwitch from "../components/Forms/ToggleSwitch/ToggleSwitch.jsx";
 
 //---------FILTERING PROFILE CARD LOGIC----------------
 
-//function to check if the profile tags match the filter tags
-function doesProfileMatchTags(profileTags, filterTags) {
-  //return true if all the filter tags are included in the profile tags
-  return filterTags.every((filterTag) => profileTags.includes(filterTag));
-}
-//function to check if the profile Industries match the filter Industries
-function doesProfileMatchIndustries(profileIndustries, filterIndustries) {
-  //return true if all the filter Industries are included in the profile industries
-  return filterIndustries.every((filterIndustry) =>
-    profileIndustries.includes(filterIndustry)
+//function to check if the multiselects (tags and industries) on profile match the same multiselects as the filters
+function doesProfileMatchMultiSelect(profileMultiSelect, filterMultiSelect) {
+  //return true if all the multiselects that are selected in the filter are included in the profile array that we expect to return
+  return filterMultiSelect.every((filterMultiSelect) => 
+    profileMultiSelect.includes(filterMultiSelect)
   );
 }
-//function to check if the profile information matches the filter tags and filter Industries
-function doesProfileMatchAllFilters(
-  profileTags,
-  filterTags,
-  profileIndustries,
-  filterIndustries
-) {
-  //return true if the profile matches all the filters
-  return (
-    doesProfileMatchTags(profileTags, filterTags) &&
-    doesProfileMatchIndustries(profileIndustries, filterIndustries)
-  );
+
+
+function doesProfileMatchSingleSelect(profileSingleSelect, filterSingleSelect) {
+  //return true if the profile matches the filter
+  return profileSingleSelect === filterSingleSelect;
 }
 
 //function to filter the profiles based on the filters
-function filterProfiles(profiles, filterTags, filterIndustries) {
-  //return the profiles that match the filter tags
-  if (filterTags.length === 0 && filterIndustries.length === 0) {
-    return profiles;
-  } else {
-    return profiles.filter((profile) =>
-      doesProfileMatchAllFilters(
-        profile.tags,
-        profile.industries,
-        filterTags,
-        filterIndustries
-      )
-    );
-  }
+function filterProfiles(
+  profiles, 
+  filterTags, 
+  filterIndustries,
+  filterIsOpenToMentor,
+  filterIsSeekingMentorship,
+  filterCountryIso2, 
+  filterStateIso2, 
+  filterArea
+  ) {
+    if (filterTags.length === 0 && 
+        filterIndustries.length === 0 && 
+        filterIsOpenToMentor === false &&
+        filterIsSeekingMentorship === false &&
+        filterCountryIso2 === "" &&
+        filterStateIso2 === "" &&
+        filterArea === ""
+        ) {
+      return profiles;
+    }
+
+    return profiles.filter((profile) => {
+      console.log("filterArea, profile.area", filterArea, profile.area);
+      // true if the profile matches all the filters
+      return doesProfileMatchMultiSelect(profile.tags, filterTags) &&
+      doesProfileMatchMultiSelect(profile.industries, filterIndustries) &&
+      (!filterIsOpenToMentor || doesProfileMatchSingleSelect(profile.is_open_to_mentor, filterIsOpenToMentor)) &&
+      (!filterIsSeekingMentorship || doesProfileMatchSingleSelect(profile.is_seeking_mentorship, filterIsSeekingMentorship)) &&
+      (!filterCountryIso2 || doesProfileMatchSingleSelect(profile.country, filterCountryIso2)) &&
+      (!filterStateIso2 || doesProfileMatchSingleSelect(profile.state, filterStateIso2)) &&
+      (!filterArea || doesProfileMatchSingleSelect(Number(profile.area), filterArea))
+  });
 }
 
-
-
-
 function HomePage() {
   const { profiles, isLoading, error } = useProfiles();
   const [selectedTags, setSelectedTags] = useState([]);
   const [selectedIndustries, setSelectedIndustries] = useState([]);
-  const filteredProfiles = filterProfiles(
-    profiles,
-    selectedTags,
-    selectedIndustries
-  );
+
+
   // State variables to hold selected country, state, and city id values
   const [stateIso2, setStateIso2] = useState("");
   const [countryIso2, setCountryIso2] = useState("");
-  const [city, setSelectedCityId] = useState("");
-  const [seekMentorValue, setSeekMentorValue] = useState(null);
-  const [openMentorValue, setOpenMentorValue] = useState(null);
-  const multiSelectRef = useRef(null); // creating a reference to the multiselect component
+  const [area, setSelectedCityId] = useState("");
+  // const multiSelectRef = useRef(null); // creating a reference to the multiselect component
+  const [toggles, setToggles] = useState({
+    is_open_to_mentor: false,
+    is_seeking_mentorship: false
+  });
+
+  // change handler for the toggle switch
+  const handleChange = (event) => {
+    const { id, value } = event.target;
+    setToggles((prevToggles) => ({
+      ...prevToggles,
+      [id]: value,
+    }));
+  };
 
-  console.log("selectedIndustries in HomePage:", selectedIndustries);
+  const isOpenToMentorToggle = toggles.is_open_to_mentor;
+  const isSeekingMentorshipToggle = toggles.is_seeking_mentorship;
 
+  const filteredProfiles = filterProfiles(
+    profiles,
+    selectedTags,
+    selectedIndustries,
+    isOpenToMentorToggle,
+    isSeekingMentorshipToggle,
+    countryIso2,
+    stateIso2,
+    area
+  );
+
+  // console.log("Profiles:", profiles);
+  console.log("Toggles outside:", toggles);
+  console.log("isOpenToMentorToggle:", isOpenToMentorToggle);
+  console.log("isSeekingMentorhip:",isSeekingMentorshipToggle);
   console.log("SelectedTags:", selectedTags);
   console.log("FilteredProfiles:", filteredProfiles);
   console.log("SelectedIndustries:", selectedIndustries);
-  console.log("Profiles:", profiles);
-
+  console.log("StateIso2:", stateIso2);
+  console.log("CountryIso2:", countryIso2); 
+  console.log("Area:", area);
 
   return (
     <div className="main-container">
@@ -123,11 +151,15 @@ function HomePage() {
             />
             <div className="home-page-switch-container mt-2 mb-2">
               <p className="toggle">Open to Mentoring</p>
-              <ToggleSwitch Name="is_open_to_mentor"/>
+              <ToggleSwitch
+                onChange={handleChange}
+                Name="is_open_to_mentor"/>
             </div>
             <div className="home-page-switch-container mb-2">
               <p className="toggle">Seeking Mentorship</p>
-              <ToggleSwitch Name="is_seeking_mentorship"/>
+              <ToggleSwitch
+                onChange={handleChange}
+                Name="is_seeking_mentorship"/>
             </div>
           </div>
           <div className="profile-card-container">

src/pages/UserPage.css

@@ -61,3 +61,19 @@
   justify-content: space-around;
 }
 
+.user-button-container{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+.change-password-btn a{
+  text-decoration-line: none;
+  color: aliceblue;
+}
+.change-password-btn a:hover{
+  color: aliceblue;
+}

src/pages/UserPage.jsx

@@ -74,7 +74,7 @@ function userPage() {
             <button className="user-button" onClick={handleDeleteClick}>
               Delete
             </button>
-            <button className="user-button">
+            <button className="user-button change-password-btn">
               <Link to="/update-password">Update Password</Link>
             </button>
           </div>