generated from chingu-voyages/voyage-template
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #36 from chingu-voyages/layout-predrag
Added local storage. Added functional search bar. Added a list of tasks to do. Minor fixes
- Loading branch information
Showing
11 changed files
with
208 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,27 @@ | ||
| some reminder for myself (Predrag) | ||
| some reminders for myself (Predrag) | ||
|
|
||
| - try to extract modal logic into a custom hook | ||
| - simplify GroupMembers.jsx by making members automatically wrap inside container so that you can remove "view all" btn | ||
| - replace icons in Total budget/Total expense/Remaining budget cards to be empty not filled, and replace the bugged shopping cart icon with something else | ||
| - see with Fari to make array of colors that look nice and are the same theme, like sand colors or something. this is for the chart colors on groups page | ||
| - inside GroupMembers.jsx make it so that member cards will wrap automatically and the container expands downwards automatically. for some reason, this is not the case right now by default. member cards should not overflow outside the container | ||
| MINOR | ||
|
|
||
| - check whether DarkModeToggle.jsx toggle functionality can be written in more declarative way | ||
| - [IN PROGRESS] see with Fari to make array of colors that look nice and are the same theme, like sand colors or something. this is for the chart colors on groups page | ||
| - [IN PROGRESS] color pallete for dark mode | ||
|
|
||
| CASH MEETING | ||
|
|
||
| - AGREEMENT TO DELAY FOR NOW UNTIL ALL PREVIOUS TASKS ARE DONE discuss purpose of table inside group details and how to handle adding an expense | ||
| - CASH [STEP TO BE DONE?] discuss implementing groups in the sidebar as well and the ability to add new groups from the sidebar [SHOW IMAGE] | ||
| - [STEP TO BE DONE?] implement editing groups total budget and expense from groups details page | ||
| - CASH [STEP TO BE DONE?] fix styling and align everything well in GroupMembers.jsx | ||
| - CASH [STEP TO BE DONE?] inside GroupMembers.jsx members section where you can add and remove members, make a bg change on hover and replace minus for removing members with x and make bg of x more red and do hover too | ||
| - PREDRAG [STEP TO BE DONE?] try to extract modal logic into a custom hook | ||
| - PREDRAG [STEP TO BE DONE?] replace icons in Total budget/Total expense/Remaining budget cards to be empty not filled, and replace the bugged shopping cart icon with something else | ||
| - PREDRAG [STEP TO BE DONE?] refactor the modal in GroupMembers.jsx and all logic related to "member number". it should be contribution, what % of it. | ||
| - PREDRAG [STEP TO BE DONE?] add number of dollars that is percentage inside chart | ||
| - CASH [STEP TO BE DONE?] implement editable description component both for individual group and individual friend | ||
| - CASH [STEP TO BE DONE?] complete the layout on all pages | ||
| - PREDRAG [STEP TO BE DONE?] when there are no members in a group, the Budget Split component is bugged, fix it. ad text that says "there are no members for chart to display" | ||
| - CASH [STEP TO BE DONE?] create styling for a btn for theme toggling and put it in place instead of "need help" btn | ||
| - CASH [STEP TO BE DONE?] make logo clickable, it should take user to homepage | ||
| - AGREEMENT TO REMOVE discuss removing "montly" and "view all" btns in groups details page | ||
| - AGREEMENT TO REMOVE [IMAGE] discuss displayed list of friends on the homepage | ||
| - AGREEMENT TO DISCUSS FURTHER WITH THE REST OF THE TEAM discuss friends details page, NEEDS BIG CHANGES |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { IoIosSearch } from "react-icons/io"; | ||
| import { useState } from "react"; | ||
|
|
||
| function SearchBar({ onSearch }) { | ||
| const [searchQuery, setSearchQuery] = useState(""); | ||
|
|
||
| const handleSearch = (e) => { | ||
| const value = e.target.value; | ||
| setSearchQuery(value); | ||
| onSearch(value); // Call the parent handler to filter groups | ||
| }; | ||
|
|
||
| return ( | ||
| <div className=" relative w-full max-w-xs"> | ||
| <IoIosSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" /> | ||
| <input | ||
| type="text" | ||
| value={searchQuery} | ||
| onChange={handleSearch} | ||
| placeholder="Search groups" | ||
| className="pl-10 pr-4 py-2 rounded-lg border w-full focus:outline-none focus:ring-2 focus:ring-primary dark:bg-dark-input" | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default SearchBar; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| // localStorageUtils.js | ||
|
|
||
| export const loadState = () => { | ||
| try { | ||
| const serializedState = localStorage.getItem("appState"); | ||
| if (serializedState === null) { | ||
| return undefined; // Let reducers initialize the app state | ||
| } | ||
| return JSON.parse(serializedState); // Parse the state | ||
| } catch (err) { | ||
| console.error("Error loading state:", err); | ||
| return undefined; | ||
| } | ||
| }; | ||
|
|
||
| export const saveState = (state) => { | ||
| try { | ||
| const serializedState = JSON.stringify(state); | ||
| localStorage.setItem("appState", serializedState); | ||
| } catch (err) { | ||
| console.error("Error saving state:", err); | ||
| } | ||
| }; | ||
|
|
Oops, something went wrong.