As suggested by @UriGrod in #5 (comment), we can temporarily fix #7 by using a refresh button on top of the protest list to allow changing the address.

Try using the Button component for this. Button title should be 'שינוי כתובת'.

This is a summary of the origina idea presented by @guytepper

Why do we need this?

We want each protest to have an admin that can modify its location, update the whatapp group and maybe do more things in the future. In general this will let us create another circle of people that can help with moderating.

Sign up Flow

• From Protest Page, users will be able to press on a "Claim ownership" button that will redirect them to a sign up page.

• Because we now need the admin role for a specific person on a specific protest we first need to create this user, we'll user facebook auth in order to get the user details, there will be a "sign up using facebook" button.

• After the user signs up using facebook, we're going to save its data on firestore (DB) based on the user id given by facebook login. We'll also need to add the information of which protest this user has admin on. The protest id will be passed as a query parameter to the sign-up page, we'll assign the role of admin for this user on this protest. (At the moment this will be the only way to get an admin on a protest, in the future we'll may create a flow for claming protests for signed in users)

• Before we finish with the registration, we're going to ask the user to add its phone number which we're going to use in case we want to verify this person identity.

• The user is now signed in, and being redirected to the "complete sign up" page where he/she can go back to the home page.

Returning user

• We'll need to add a "login" button for already registered users that want to modify a protest which they are the admin on.

https://1km.vercel.app/support-the-project needs to be updated

Currently, getting started with the project is a bit complex.

It's possible to get it up and running without setting up firebase / google maps account, by using the same one as production. More specifically, I found that setting only these two values is enough to get the app to run:

REACT_APP_FIREBASE_API_KEY=AIzaSyABre2owU3Y-giO0V8U4h4eYN32iFU_hoU
REACT_APP_FIREBASE_PROJECT_ID=one-kol

(don't worry about the firebase API key, it's not a secret).

This should be good enough for getting to the main screen, and being able to start hacking on the project without needing to set up any new cloud accounts (like the comment in #16).

The maps google maps API key from production also works in this setup. I understand that you are billed per request, so you might not want to share it, though, if it seems like 1 developer making contribution is probably worth more than the cost of the few requests they'll make. But this is totally up to you...

Apparently many people are putting there invalid URLs (e.g. with text).

An idea from google business:

Maybe display all near-future dates to the protest manager and let them turn on which dates they're protesting?

In itself this is understandable. but maybe the ability then to go directly to a location would help. Probably a huge feature in itself...

Wonderful initiative BTW. Being able to access the Whatsapp Group from the map / add it (for Whatsapp Admins of points) will be a huge help.

If interested, I can add TypeScript support to the project. This will make it easier to make sure things don't break when other people work on the codebase.

Hi @guytepper !

Is there a list of features or a short roadmap for this project?

Me and our team of developers would love to help you with that project, in any way.

Let me know / assign me to issues if you need any help! :)

This is a summary of a discussion @uriklar about how the edit/claim button in the protest page should behave:

There are 3 types of actions that can be fired when clicking this button

1. New user:

sign-up?returnUrl=/leader-request?protest=hA0gksQ18Ib6FiLpy8df

2. Authenticated user:

/leader-request?protest=hA0gksQ18Ib6FiLpy8df

3. Authenticated user, which is also a protest leader (or admin):

/edit

Edit the protest details :)

The logic of when to show the button

At the moment, this button should not be shown if:

1. There is already a pending request for this protest (query )

var leaderRequestRef = firestore.collection('leader_request');
leaderRequestRef.where('protestId','==', protestId);

2. There is already a leader for the protest

{
    "roles": {
        "leader": ["1231243rsdfsf4fe"]
    }
}

Regularly clone production db one-kol --> dev one-km-dev, it'll make UI development much easier.

Probably related to the map's static zoom level and onMove handler messing up with each other.

Steps to reproduce:

1. Open the app on an iPad / laptop (screen width > 768px)
2. Search for a place that shows only 1 protest
3. Examine at the protest list

Expected result:
Only 1 protest is found so there's no need to show a scroll bar.

Actual result:
A disabled scrollbar is presented:

Before protests show up & in case no protests are found, the sidebar looks like this:

The button should be at the top in all scenerios, like this:

Later today we plan on posting what's going on right now, call for more volunteers and also a picture of all the current active contributors & their names.
If you've contributed to the project and I have not reached out to you about this, and you'd like to be included in this post - please come over to discord and start a chat with me. 🙂

It would be nice if when you click a demonstration on the sidebar it's flag would change to make it easy to find on the map.

Give the user an option to change their current address after they gave their initial coordinates in the intro modal.
Lots of users requested this feature to see protests in other location, and it also provides a solution to #5.

Ideally this should be a search box just above the ProtestList:

Most of the work will probably done inside App.js:

• The protests displayed on the ProtestList are stored inside the protests state property. Note that they are loaded only initially, so it will need to be changed.
• userCoordinates state property (which resembles the initial user coordinates, and stay the same even as they move the map) should be updated with the new coordinates.
• PlacesAutocomplete can be used to provide suggestions & geocode values.

Hi everyone - we have 2 days left from Thursday! 🥳

It means that we need to be very clear about what we can realistically achieve until then.
My hope is to get the super admin page & minimal protest page ready.

Just want to share with you that:

• There are tons of support requests coming in; we have a support team waiting to get started, they just need a dashboard to be able to provide support.
• The protest dates is the main requested feature at the moment (comes up in 1 in 3 emails~)
• There are talks about integrating all the other protest maps (there are around 3 popular at the moment), and make all organizations move to use our project as their platform for finding local protests.
  I don't know when and if it'll happen but it largely depends on the admin dashboard, since we can't allow the huge increase in support tickets without being able to provide it easily.

Today I hope that we'll finish the "MVP" for both protest & admin pages. Tomorrow we can stabilize and make them work fine.
If possible, we'll add the option to add protest admin & protest dates.

What are your thoughts about this timeline? Do you think it's possible for us to achieve the above until Thursday?

On a side note, it's overwhelming for me to see all the people coming here to help. Thanks a lot to everyone who gives a hand, and I'm so happy it became a community project.
We're making something that tremendously helps to change the face of things in this country.

Currently, the way we remove protests is by deleting them from the collection.
It's better if we add an archived property to it instead. It'll require changes across all source code (wherever we fetch protests we need to add an archived != true condition to it.
We'll probably need to add a migration that adds the archived property to all existing protests (it'll make it easier to run conditions on the collection).

• Table that display all protests.
• Filter for Approved / Not Approved protests.
• When viewing any of them, the Protest Page opens.

Adding the approve & edit functionality will be handled in a separate PR.

I'll provide the design soon

2nd Week Roadmap

Read first: 1km - update about the first weekend and future plans

Hi everyone. Thanks for all the responses and the will to contribute. I appreciate it a lot.
I'm handling all aspects of the project currently which is very time consuming, so I'd appreciate any help, mainly with the project development.

The plan is to ship the following features by Thursday this week.

Dedicated protest Page

• Address & Map
• WhatsApp / Telegram / Facebook groups
• Next demonstration time(s)
• The option to upload photos (& videos?)

Protest Organizer Dashboard

• An option to promote users to be protest organizers and edit the above details.
• Should be in the same view as the dedicated protest page.

Admin Dashboard

• A 'super-admin' dashboard, allowing (non tech) contributors to filter protests, approve & edit them & manage protest organizers.

Open Ideas

• Photo gallery displaying photos nationwide protest photos.
• An option to add a live broadcast to a protest, and a page to display all live broadcasts (credit goes to Etay T [pending for github username] for the idea)

Please share any thoughts or ideas related to these features. Issues will be open for them soon.
If there's a specific feature you want to take responsibility for, let me know.

Let's make it happen 💫

When admin approves a user we need to let them know. Email is probably the easiest unless facebook notification is easy

We have a new design!
The designer, Lena, would like to guide us through implementation in order to avoid confusion.
It's also a time for us to plan how to plan what we'll do today & tomorrow.

If you'd like to join, and you're not in our discord channel yet, come on in!

Current offset:

Correct position:

1. מציאת הפגנות באזורי
2. In the sidebar, click on שינוי כתובת
3. Change to a different address

Expected: sidebar get's updated with relevant protests.
Actual: Old results stay

Autofocus the address input when it gets rendered.
Simply adding autoFocus to the element won't work, probably because of react-modal which takes control of the focus state in the modal.

Implement recaptcha v2 in the ProtestForm.

Currently recaptcha v3 is commented out since it rejected 50% of the users.
The recaptcha API (using react-recaptcha-v3) is commented out in the api file and in ProtestForm,

When getting to the site for the first time, you need to enter your location.
After #20 will be merged, it will be possible to change your address, and therefore "refresh" wouldn't be the only option.

We can use local storage API to save the address chosen by the user on their device and use it next time the user visits the site.

Email / sms

I know you are doing rapid prototyping but thought I should point something out. Although your project is Open Source, currently each code contributor (of ANY code) still holds full copyright to it. This means that no code can be legally forked and used in any other project. Also if you manage to make this a viable project that makes money they may want some of that in the future.

For the good of the project I suggest you implement one of the varies Open Source licences available at the Open Source Initiative. Note, for this to be legally binding you must receive authorization in writing from all authors who you ended up using their code in your project. Every day that goes by will make this more difficult for you in the future.

You may find https://choosealicense.com useful in deciding which one to use.

I am willing to help you coordinate this if you wish

The DB should have the notion of which logged-in user approved/rejected a leader request.

I believe most times the page is loaded, the user wants to see protests in their area.
I think it would be better not to pop the modal every time the user loads the page, and instead focus the map according to the device's location.
Now that there's a "change address" button, if the user intended to input an address -- they can do that with one click / tap.

If there's an agreement that this would be a good change, I can create the PR for it.

We were suggested by a lawyer to add the following הבהרה משפטית:

להלן הבהרה משפטית חשובה: 

1. אתר זה נבנה בהתנדבות ומתוך רצון לסייע לאזרחים לממש את זכות היסוד החוקתית שלהם להפגין למען המשטר הדמוקרטי ושלטון החוק. 

2. אתר זה נועד לסייע לאזרחים להפגין תוך שמירה על החוק ועל תקנת איסור הפגנה מעבר למתחם קילומטר אחד מהבית. 

3. בוני האתר ומפעיליו אינם אחראים משפטית לשום נזק או פגיעה שייגרמו למפגין שאינו שומר על הכללים ועל הוראות החוק והתקנות. 

4. אנו קוראים לכל המפגינים והמפגינות לפעול אך ורק בהתאם לחוק ולתקנות ולכללי הזהירות הרפואית.

It's a good chance to create a Post component, and a posts folder under views.
We should be able to provide markdown to generate new pages. You can take the styles from update page.

You can remove the GitHub icon from the footer and place the link on the other side. It should be smallest as possible for the human eye to notice.

The most requested feature is to allow protest managers to update the upcoming protest dates.
We currently rely on them adding it to the protest notes.

The 3 options in my mind for providing the dates:

• Recurring: Showing Sun-Sat dates, with hours for each date, and let them check on what day & time they will protest.
• Specific: Add a specific date & time for each protest.
• Both: Provide the option for both recurring and specific dates.

Personally I think that the 3rd option is the best, in case it won't be drastically harder to implement.

For discussion:

• How should we model each use case?
• How should we combine them together, in case we go with the 3rd way?

The prices for those APIs are tremendously high, at least for our current requests amount.

Does anyone know a good API for autocomplete Israeli addresses, preferably with love for open source projects?

The details that needs to be shown at the moment are:

• Address
• Next demonstration time (if exists, if not- only hour)
• Notes
• Chat groups

Currently in progress by @uriklar in #41

Overflow:
On >768px screens.
Might be related to the changes from #21 ?

Sticky:
On >768px the footer should stick to the bottom using (position: sticky). It used to work but it isn't anymore. It also might be related to #21.

Making it now. Will update as I progress

make this app accessible to all Israeli official languages(Hebrew, English, Russian, Arabic).

Too many flags are great in real life - but for the UI it can be a bit messy.
We can use react-leaflet-markercluster to fix this.

I'm not sure about how to display it. Some options in my mind:

1. Showing the number of flags.
2. Create a marker icon that shows a couple of flags together, depends on the amount of flags in the area.

I'm in favor for the 2nd option but let me know if you think otherwise.

Implementation will possibly be related to those lines in the Map component.

As discussed in #6, the Autocomplete API gets tons of requests and every day makes us waste money.

Let's try to use an address field with the addition of a search button, while keeping the UX still simple and easy.

I think this means switching to another library from use-places-autocomplete, and maybe to another API too. We can still use google for the time being.

See video in link.

https://www.screencast.com/t/tYbWLwX1VKWX

Hi folks,

I'm overwhelmed by the community response to help with the project. Thank you, I appreciate it a lot.

I didn't expect the project to get to where it is right now - and I need to ask for help in order to make the project achieve it's goals.
Currently, I'm responsible for all aspects of the project - some of it includes supporting users, approving & editing protests, creating a [non-tech] contribution infrastructure and getting in touch with organizations.
It's hard for me to maintain the development aspect while being in this position.

I'm looking for people who have time and feel they can help me maintain the project in the upcoming weeks.
If you feel you can take this position, let me know.

Cheers,
Guy