The hawkercentral from limyifan1

Enforce DCO

The DCO bot doesn't seem to be configured yet, we should add it so that the DCO can be enforced via a PR status check.

Let's enable the bot and make it a required status check. Otherwise, #20 is not effective and may become a liability.

Adding listeners for cookies

Issue: [Translation branch] Other components eg in Home.js, etc need to know when the language cookie is set in Menu.js

Currently using universal-cookie: https://www.npmjs.com/package/universal-cookie and there is an addChangeListener function. However, I can't seem to get it working, this code snippet in Home.js simply doesn't trigger an update when I set the cookie in Menu.js.

const cookies = new Cookies();

cookies.addChangeListener(onCookieChange);

function onCookieChange() {
  console.log("Noticed cookie change!")
}

Tried binding onCookieChange like this:
cookies.addChangeListener(this.onCookieChange.bind(this));
and got this error:
TypeError: Cannot read property 'onCookieChange' of undefined

Adopt and enforce DCO

What is the issue?

Currently, any users can contribute to the project without signing a CLA or DCO. This could potentially leave the repository at risk of liability should a contributor include code or other materials that infringes existing copyright.

A DCO is recommended over a CLA as it is more "relaxed" and therefore has a lower barrier of entry for contributions.

The most common DCO used is the one provided by The Linux Foundation:

DCO text

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

How to rectify this issue?

DCOs are enforced by requiring a signoff in every commit using git commit --signoff (or git commit -s) and by a CI pipeline or a bot.

A signoff does not automatically equate to an agreement to a DCO. Hence, it is important to document the DCO in a CONTRIBUTING.md file and/or in a PR template so as to make it clear to the contributor the purpose of the signoff.

The documentation of the signoff purpose can be written as follows:

To acknowledge the Developer Certificate of Origin (DCO), sign your commits by adding Signed-off-by: John Doe [email protected] to the last line of each Git commit message. The e-mail address used to sign must match the e-mail address of the Git author.

Let users open individual listings in a new window

Current listings won't let you open in a new window, weird for users who usually want to see many at once.

Awesome project! Would love to contribute to this project if it is still ongoing.

Questions:

do we mean to open a new tab (instead of window) on click of an item?
should the current tab be switched to the newly opened tab or stay on the listings tab?

Create order management dashboard page

We want a page so that hawkers can view deliveries performed via OrderLeh throughout the day. Hawkers can access this page through a unique link (repeated in every SMS) whenever a delivery is fulfilled. We could look into a password as well.

The page should eventually include list of historical deliveries, their delivery fees, and who to PayNow/PayLah to.

Code refactoring for Components usage and constant values like cuisines

Would suggest refactoring SearchAll and Nearby components to be a single common component. That will make it easier to maintain over time. As well as abstracting cuisines values into a common file for easier access and maintainability.

Use a dependency auto updater

What's the issue?

Currently there's no "dependency auto updater". Due to the nature of the Node.js ecosystem, this could cause dependencies and the package locks to go stale relatively quickly and potentially leave certain dependency vulnerabilities unchecked.

How to rectify the issue?

WhiteSource Rennovate is free, popular GitHub bot for automatically creating PRs to update dependencies and package locks.

Suggestions (Moving forward)

Hi there! Spoke to one of your team members earlier on Facebook Messenger, and I took a quick look at the codebase.

As this project grows, I have a couple of suggestions to make it scalable, on top of what was raised during our conversation.

Architecture.

Right now, we have a lot of different types of files in each directory, and I believe there is a better way to structure this. For instance, media files (such as icons) can be stored on a directory called assets, and each component can be stored within its own directory based on the function, or even the route. In addition, pure UI components should be moved to its own directory.
What I have suggested here may be subjective, as there is no 1 solution when it comes to architecture, hence we should keep an open discussion when it comes to this.

Git structure

Instead of directly pushing to master, a more definite architecture would be to create a separate develop branch for development, whereby feature branches can be branched off from it. Keep the master branch clean for deployment.

CSS methodologies.

Instead of having inline styles, I would recommend the team to isolate styles to CSS modules, or usage of CSS-in-JS (such as styled-components).

PWAs.

Setting of up service workers and manifest.json.

Linting.

Setting up of ESLint (for JS) and CSS linters (for instance, StyleLint)

Happy to keep this discussion open. In fact, I am happy to work on any of the tickets, though my time may be limited as I can only contribute during my free time.

Administrator Login

Stretch goal:

We would like to implement an admin login in the long term to allow quick EDIT and DELETE functions for listings. (currently we are planning to lock the edit access and instead set up email requests for edit and delete) We have some considerations:

Security with storing email and password
Design considerations, we are thinking if you are logged in as admin the edit/delete button will have a different function, deleting directly or bringing directly to edit page. Suggestions welcome!

Add CONTRIBUTING.md

Currntly, there's no CONTRIBUTING.md file to state how to contribute to the project.

Order Management System

Issue: We would like customers to be able to create an order, view total price, and send the complete order with address details and contact info via WhatsApp to the hawker.

Need to reformat menu item entry to be a dynamic array instead of current 10 entry fields
Need to incorporate Take.sg data (which they've kindly shared with us!)
Need to add logic to select # items, calculate price, send custom WhatsApp message.

unique URL for hawkers to track orders

Whenever someone orders via Whatsapp, we want the hawker to receive a unique link to:
www.foodleh.app/driver?=....

We want this link to go to www.foodleh.app/driver with prefilled hawker & customer details so hawkers hardly have to key in anything.

Returning to same position on page after viewing listing

We want users to be able to return to same position in the page instead of starting at the top when they click on a listing. Will greatly improve user experience.

Location search: consider GeoFireX

For a given postcode, the current iteration of the app does the following:

translate the postcode to latlong;
retrieve 100 entries from the hawkers collection, then;
filter for entries within a certain distance, then sort the entries nearest first.

This may result in fewer entries than desired being returned to the user, as not everything returned would be within the threshold.

This issue proposes the use of GeoFireX to retrieve entries within a certain geographic radius. In short, GeoFireX determines proximity through multiple queries against entries that contain geohashes.

Note that this would require a Firebase-wide update to your data.

Further reading:
https://fireship.io/lessons/geolocation-query-in-firestore-realtime/

CI pipeline fails due to react-scripts

This issue is to track a non-blocking issue introduced by #25. It's not a P1 issue as we don't rely on a passing CI pipeline yet (nor do we have any effective test coverage).

Currently, the CI pipeline fails at the bootstrapping stage for 2 reasons:

react-scripts uses its own ESLint config.

We have our own ESLint config that extends the one used by react-scripts, and want to utilize that, This can be fixed by introducing the EXTEND_ESLINT=true env. var. in a .env root file.
react-scripts functions differently when a CI pipeline is detected (via CI=true env. var.).

This may be fixed if we fix the above issue.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions

.github/workflows/continous-integration.yaml

actions/checkout v2

actions/setup-node v1

actions/checkout v2

actions/setup-node v1

actions/checkout v2

actions/setup-node v1

npm

functions/package.json

bitly 7.1.0

firebase-admin 8.12.1

firebase-functions 3.6.2

node-fetch 2.6.0

request 2.88.2

telegraf 3.38.0

twilio 3.45.0

@firebase/testing 0.20.0

eslint 6.8.0

eslint-plugin-promise 4.2.1

firebase-functions-test 0.2.1

mocha 7.2.0

node 8

package.json

@material-ui/core 4.10.1

@material-ui/icons 4.9.1

@material-ui/lab 4.0.0-alpha.55

@mojs/core 0.288.2

@testing-library/jest-dom 5.9.0

@testing-library/react 10.0.6

@testing-library/user-event 11.3.1

axios 0.19.2

bitly 7.1.0

bootstrap 4.5.0

cheerio 1.0.0-rc.3

csv-writer 1.6.0

emailjs-com 2.4.1

firebase 7.15.0

firebaseui 4.5.0

gatsby-plugin-react-helmet 3.3.3

geofirex 0.1.0

google-map-react 1.1.7

immutability-helper 3.1.1

jimp 0.12.1

material-ui-color-picker 3.5.0

node-sass 4.14.1

notistack 0.9.16

rc-progress 3.0.0

react 16.13.1

react-addons-update 15.6.2

react-bootstrap 1.0.1

react-bootstrap-typeahead 4.2.3

react-clap-button 1.2.9

react-date-picker 8.0.1

react-datetime-picker 3.0.2

react-dom 16.13.1

react-firebaseui 4.1.0

react-ga 2.7.0

react-helmet 6.0.0

react-i18next 11.5.0

react-image-gallery 1.0.7

react-lazy-load-image-component 1.4.3

react-linkify 1.0.0-alpha

react-multi-carousel 2.5.5

react-router-dom 5.2.0

react-scripts 3.4.1

react-select 3.1.0

react-share 4.2.0

react-time-picker 4.0.1

react-window 1.8.5

reactjs-popup 1.5.0

reactstrap 8.4.1

rxjs 6.5.5

ua-parser-js 0.7.21

universal-cookie 4.0.3

vercel 19.0.1

@commitlint/cli 8.3.5

@commitlint/config-conventional 8.3.4

@loopback/cli 2.8.0

eslint 6.8.0

husky 4.2.5

prettier 2.0.5

Check this box to trigger a request for Renovate to run again on this repository

Firestore Security

Currently, our Firestore security allows anyone to access it... we will appreciate help configuring firestore.rules to step up security but at the same time allow Github developers to run locally on their machine.

Implement react-window for DOM recycling/infinite scrolling

Credits for noticing & possible solutions to a fellow dev who messaged us on FB. Thank you!
The page has become incredibly slow as the page loads the entire page at once. Looking for help to implement react-window to render only the viewport.

Slow keyword search

Open-ended question - noticed that website takes longer to load search results as more listings come up. Suggestions welcome!

Possible reasons:

Currently updating search results every time a character is added, should it only be updated when user hits Enter?
Some server-side issue that we're not aware of?

Remove references to The Smart Local

See:

https://github.com/limyifan1/hawkercentral/blob/1494a29efb17c58333246b8aaf5f72a52f1bdf0e/src/Components/data.html
https://github.com/limyifan1/hawkercentral/blob/1494a29efb17c58333246b8aaf5f72a52f1bdf0e/src/Components/out.csv
hawkercentral/src/Components/SearchAll.js

Line 306 in 1494a29

return !d.url.includes("thesmartlocal");
hawkercentral/src/Components/addData.js

Line 201 in 1494a29

const $ = await fetchHTML("https://thesmartlocal.com/delivery?page=" + page);
hawkercentral/src/Components/Nearby.js

Line 337 in 1494a29

return !d.url.includes("thesmartlocal")}

Delete/Report listing button

Similar functionality to #8

We would like to add a delete button next to the edit button with the same functionality as PR #8 which sends an email message to [email protected] titled "Please delete listing.." with some listing identifier.

Querying: drop client-side filtering in favour of server-side equivalent

I thought to drop a question here for @limyifan1 - browsing through the commit log, I've noticed that you moved from performing the search using Google Cloud Functions to retrieving entries directly from Firebase and filtering client-side.

Given that you are familiar with the data schema, would making a Firebase query be viable? If so, I'm willing to submit a PR that would move some of the filtering criteria into query clauses.

Pulling street address via postal code sometimes glitches

When keying in the postal code for making orders, there's been a few times that the wrong street address is pulled, and it doesn't refresh until deleting at least a digit and keying it in again. It appears that the field updates too frequently, thereby causing it to update prematurely.

Changing free edit access

We wanted all users to be able to edit listings so we gave free edit access, but realise that this makes our site vulnerable to misuse by bad people. So the next step is to change the edit button on each listing to trigger an email request to [email protected] where we will manually review edit requests.

Mobile version Search Button

Mobile > Home > search button not the same width when clicking on dabao or delivery. Help appreciated!

Prevent duplicate listings from being added

There are a number of duplicate listings on the site. These listings may have slight differences in their descriptions etc, but they are for the exact same outlet (based on the address provided in the listing).

Here are some examples from a quick search:

Zong Shi Fu Quan Bah Kut Teh (Listing 1 and Listing 2)
Hup Seng Huat Cooked Food (Kelly's Mum Wantan Mee) and Hup Seng Huat Wantan Mee (Listing 1 and Listing 2)
Ubi DMQ Eating House (Listing 1 and Listing 2)

Such duplicate listings do not value add to the site. Instead, they can confuse users if duplicate listings for the same place provide slightly different information.

While this is not a big problem now, the team may want to consider preventing duplicate listings from being added to the site. This may possibly be done using the address, but it would require the address format to be standardised (at least having postal code + unit number) in order to identify unique stores.

Minor UI Bug: Claps

When a listing has more than 3-digit claps, it exceeds the space in the clap sticker on the thumbnail, and the clap image is cut off, which looks weird. Fix is probably to make the clap sticker size dynamically above 3 digits, other suggestions welcome too. Making font size smaller is possible but might look wonky. Picture attached for clarity, 4 digit vs 2 digit.

Grocery Shopping filter not showing tagged listings

We noticed that this specific filter for Grocery Shopping is not returning any results, even though listings like Heng Hup Huat Foodstuffs Trading Pte Ltd are tagged as Grocery Shopping. Any insights welcome!

Slow loading and high network usage

Credits for noticing & possible solutions to a fellow dev who messaged us on FB. Thank you!

Issue: We are currently loading full-sized images for thumbnail icons, possible solutions:

Make multiple sizes of each image on Firebase, load right image size based on device viewport
Endpoint/microservice that processes the image based on the viewport
Use webp image format instead of jpg/png for better compression

Enforce passing status checks

Currently, the PRs do not enforce passing status checks from the CI pipeline. This makes the status checks ineffective. Hence, let's make them required status checks.

Create tab Language translation

Stretch goal:

We want to have a toggle button to switch instructions (especially the Create tab) to other languages so that hawkers who are less comfortable with English can create listings easily too. We are looking at Mandarin Chinese first as this seems to cover most hawkers at first. We hope to expand to Malay too! Any translation help or technical help with toggling is welcome.

What to contribute to?

Hi, I'm not too sure where or what to start contributing to.

I forked the repository and will probably look into

Folder Organisation (Assets or Components)
Possible Refactor (I haven't taken a look at the codebase yet but saw a suggestion on (#15) about it
Performance, Not too sure how much I can contribute to this (#23)

Let me know if there is a roadmap or somewhere a feature or chore that needs prioritizing :)

limyifan1 / hawkercentral Goto Github PK

hawkercentral's People

Contributors

Stargazers

Watchers

Forkers

hawkercentral's Issues