NavBar SearchBox functionality

[4-Leafs-Code]

This search bar will need to accept a users input as a keyword and query the database for the keyword. You will need to make the search results return in a pop up model or make a newpage. This is only a functionality issue and does not require much css but your more then welcome to style your design if you would like.

This should only query for user profiles, resources, and post. The post messages are stored in the articles collection db.collection('articles') I do not have the other collections set up yet but please add html style comments to the top of the readme file with name's you've chosen for for the other collection.

[ashwaryy]

Hi. I'd like to work on this. Have a couple of questions. Is there a backend endpoint to interact with the database? If not, is there going to be one in the future? Search implementation will depend on how the backend is setup.

[4-Leafs-Code]

I'm sorry but I do not know what you are referring to by "backend endpoint". I'm using Google's Firebase as the backend (BAAS). Click the blue word for a redirect to the site. The src/reducers and src/actions/ folders are where the majority of the firebase and user functions are written. Currently, I only have the the user auth, sign in, sign out, and articles (for the home page posting feature) wrote in here. This is currently wrote with firebase version 8. I have not learned enough about it, to upgrade to v9. I've tried and failed a couple of times.

Does this answer your question? Thank you for your interest in my project.

[ashwaryy]

Thanks for the response. I got my answer. I see that the project is using Cloud Firestore. I will refer to version 8 docs to construct a search query. Will share implementation details in a while.

[4-Leafs-Code]

Thank you very much. This is my first time using firestore. I normally build my own backend with python, flask, and SQLAlchemy but for this project, I chose Firebase because it will be easier for the Organization's non-programmer people to maintain when I move on to my next project and I can build this site in less time so it will be put to good use sooner.

Do you know firebase well? I've been bug hunting the user to user direct private messages. I think I have mostly wrote right but the page does not render.

[ashwaryy]

About search, there are two approaches - functionality wise:

1. Search query is run as the user types and results are shown in dropdown instantly (like Google)
2. Search query is run only after the user enters a query and presses the search button

Which approach do you prefer?

First approach would require a database lookup on every keyword that user enters. Second approach is simpler. Requires less lookups.

Let me know which one do you prefer.

[4-Leafs-Code]

My first choice is the first option but my follow up thought was pricing. You wouldn't think it would make much of a difference between the two options price wise but as I've said, I'm just getting to know firebase. The organizations we are building this for are non-profits and I would like to make this the best I can without it costing them to much money to run so they can use the funding to help prisoners.

How hard would it be to change to the second option at a later date if we find the rapid query is increase the bill to much? If it would be a simple switch, would you please go with option 1 and leave some instructions in the code on what needs to be changed to make the switch. Not step by step instructions but a point in the right direction type.

[ashwaryy]

Sure. I'll go with the first approach then. It would require significant changes in UI styling and querying logic to switch to the second approach later. Will leave instructions to switch to the second approach. If time permits, even a full code snippet.

[4-Leafs-Code]

Yeah, thank you. With the dropdown option, would you please make it so the dropdown does not extend past the bottom of the page but allows the user to scroll the dropdown instead of the entire page scrolling and hide the scrollbar. Similar to what I've done with the post content on the home page (main.jsx). I've been working to globally implement this scroll feature. I can update it to this when your done, if you would like as well.

[ashwaryy]

Will do. Have a couple of more questions. Is the current Firestore setup on Spark plan or Blaze plan? This is important because a full-text search on articles collection would not work unless configured separately using extensions. For example, if a post description is "Hello World", and the user query is "Hello", then querying the database would give 0 matches. The user query must match the description field word-to-word. Now this is not really a practical solution. So to implement full-text search, you will need to use a dedicated third-party search service. Read more about it here.

[4-Leafs-Code]

It is currently on the spark plan. I would imagine it will need to be upgraded to the Blaze plan at some point close to pre or post launch because this will have anywhere from 2000-5000 people querying the database thru out any given business day.
I believe this would exceed the limits of the free plan. Just me and you alone today have made 115 writes and were not even using it's full functionality. A sister repo of this one will be moved to an orgs page with there firebase credentials and I will most likely be given admin access to their firebase to help out. Meanwhile this repo will stay open for the reentry community to post feature request or report a bug. This will stay open source but the sister will be private. I will post a link to the sister repos web address for contributors to use in there portfolios.

[ashwaryy]

Hi. Here's the progress I've made so far. Ignore the styling. I haven't worked on it yet. The idea is to display dropdown results separated in three different categories with the result count in square brackets. Currently, only post results are shown because there are no results found in other categories (resources and users). But if found, they would also show up.

Will resume working on it tomorrow after work.

Have a look:

https://user-images.githubusercontent.com/94191845/210183510-e6d73a2d-3698-4767-bbc1-ebb79574d194.mov

[4-Leafs-Code]

That was beautiful. Thank you so so very much. I am waiting to give the users in the database (from working on this repo) time to respond to notice I posted last night on the repos readme file before I start really building the functionality of the profiles, resources, and notifications features. I'm trying to respect their privacy wishes if they have some and give them the option to be left out of this next step or request to be removed from the stored users all together.

I've asked for a conference with the heads of the organizations to get a bullet list of keywords for cross-referencing the database among other things.

This is my first big collaboration and open source project. I spend just as much time managing and I do building. I don't want to offend anyone by accidently displaying them. For example: Your post is now featured in the readme file that is the face of this repo. But your image is broken and I drew over your name to hid your identity in case you might be offended. May be I'm being extra but I love this project.

[ashwaryy]

It's nice to see that you're being so considerate. And rightly so. Comment here once the profiles and resources functionality are implemented. I'll integrate them in the search component.

[ashwaryy]

Do you know firebase well? I've been bug hunting the user to user direct private messages. I think I have mostly wrote right but the page does not render.

Can't claim to know firebase well. But I can help you with this bug. Let me know what exactly you're trying to implement and the file/component in which you've written the code for this. Maybe even open an issue and assign it to me. I'd be happy to give it a try.

[4-Leafs-Code]

It's issue: More work needed for messaging page #85

If you look at NewMessagingWorkInProgress.md in the components folder. I have the current messages file and styles in the top two code blocks and in the bottom 2 code blocks is the file and styles that has a bug. I might have wrote it completely wrong but I was trying to change a v9 to a v8. I found this article: https://www.geeksforgeeks.org/user-to-user-private-chat-app-using-reactjs-and-firebase-without-socket-programming/ and was using the Chat-Home.js firebase code and trying to alter it into mine. I dont know whats going on. the terminal keeps throwing errors about source maps but stackexchange makes me this it's not the issue.

[4-Leafs-Code]

Thank you for looking.

[4-Leafs-Code]

I probably made these files after you made your fork. I made two .md files so everyone could work on these but put the showcase files back in place before they made a pull request. This way the site will still look good while we work on a major feature upgrade. I never know when I might zoom with one of the organization's and run the site to show them the work we are all doing.

[4-Leafs-Code]

@ashwaryy I just posted a video on the site the image is broken from my page but I'm behind a firewall. Will you please let me know if you can see the video I posted. Is it loading correctly?

[ashwaryy]

Looks like this:

[4-Leafs-Code]

KK thank you. I'll make an issue for the bug and work on it when I can. I had a feeling this was happening.

[4-Leafs-Code]

@ashwaryy I'm having some difficulties figuring out how to use the json information but I'm working on the profile page and Martin is working on the resources. I did figure out a temporary checkbox/resource solution , thou. I was wondering if you would mind, when I'm ready, if i pushed the messaging page code, would you review it and tell me where I'm messing up so I can get that working? Pretty Please! :innocent: :wink: :smiley:

[4-Leafs-Code]

@ashwaryy I'm going to close this for now. Just to clean up we can reopen it when we have those pages set up if you would like to close it with a Pull Request then.