teampetpoison / pet-poison-alert

client repo for pet poison alert

pet-poison-alert

client repo for pet poison alert

pet-poison-alert's Issues

Setup Firebase account

We'll need to create a firebase account and setup billing alerts all that crap, fire DB, hosting. Need to create a new project there and get the env variables we'll need for the nextjs config.

https://firebase.google.com/docs/firestore
https://firebase.google.com/docs/hosting/nextjs#serve_fully_dynamic_content_ssr

In Safari, center bottom nav button not centered

Noticed when loading the app in Safari, center button floats left over top of other BottomNav elements.

Setup Leaflet and React Leaflet

In the nextjs app we'll need leaflet.js and react-leaflet installed and up in working.

When the nextjs application loads the default center of the map should be for now which should display a bit of Bali, ID on the map.

const defaultCenter = [-8.7445,115.1820];
const defaultZoom = 11;

Slow to render photos in form

When in the report form, uploading photos results in sluggish performance when rendering the image "thumbnails".

Perhaps the problem is the file size. We still want the original or optimized quality of the photos but not to render a thumbnail version perhaps.

To recreate the issue trying selecting 6 or more photos and see the poor performance in the form rendering the photo components.

Create monorepo using npm workspaces

Let's use a monorepo as that might come in handy later.

Setup packages/client for now. Create a tsconfig.base.json root dir and reference it in the client dir. Add prettier and all that other eslint crap etc... at the root or where appropriate.

Create Mobile Bottom Navigation

Mobile Bottom Navigation Component

In the Map View

For now no functionality other than the "selected" color shown as the "blueish color". In tailwind, this is the selected class.

This navigation will be more mobile-only but it's fine if it's shown on larger device sizes for now.

All icons are from Hero Icons. If it's not already installed you can install the library.
https://heroicons.com/

Figma File for Design Spec
https://www.figma.com/file/1JldbWl3Pe6fir7V3aMotw/Pet-Poison-Alert-Figma-Design?node-id=9%3A353&t=5DE50BmBomMhd8an-1

Update `tsconfig` in client to reduce linting errors in JS files

Current config in packages/client/tsconfig.json is:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "checkJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "store/formStore.js"],
  "exclude": ["node_modules"]
}

The current config results in some type-checking in JS files which is resulting in some unwanted errors for those not familiar with typescript.

Example TS linting errors:

Parameter 'marker' implicitly has an 'any' type.ts(7006)

Property 'click' does not exist on type 'never'.ts(2339)

Deploy to GH pages and setup GH Actions for CI

Tasks

• build Next.js app in GH actions
• deploy build to GH Pages
• setup basic CI and branch protections

Resources

• https://github.com/TeamPetPoison/pet-poison-alert/actions/new?category=none&query=next
• https://nextjs.org/docs/pages/building-your-application/deploying/ci-build-caching

Report form markers on map show form data

There isn't a current figma spec for this but after a new report is created, that marker should be

1. Clickable
2. On click it is the selected marker and should have some css styles to distinguish it
3. When selected it should display somehow a small preview of the form data
4. It should have a button in the preview to show the form data in a full screen view
5. Has a button to exit the full screen view
6. Has a button to hide or close the preview view
7. When a different marker is selected the old selected marker should not show the preview and also not have the styles

See https://react-leaflet.js.org/docs/example-popup-marker/ for a simple example

Create Scaffold

Fix Tailwind config

Tailwind is not configured for current component path. Quick fix.

Give admin access to the Project

Looks like I cannot create or move tickets. So I at least need admin access. I think other collabs might need a different level or admin as well.

https://docs.github.com/en/issues/planning-and-tracking-with-projects/managing-your-project/managing-access-to-your-projects

add re captcha to form submission

We need to add re captcha to our from submission to prevent bots from spamming our database with fake submissions

Refactor buttons and icons for reusability and maintainability

          Huh? what happened here? Maybe just create a reusable `<Icon />` component with the common TW classes like `h-6 w-7` and have a prop className or whatever to add or override the classes. Up to you. For the `Xmark` if this is used more than once it's fine as it's own reuseable component use use the `<Icon />` component and compose them together. Or you could have a component `<IconWithButton />` or something if you find you need that?

Originally posted by @toreylittlefield in #35 (comment)

Create Map Search Component

Map Search Component with a dropdown for the search results (autocomplete). Some call it a combobox.

For now let's just use mock data. It doesn't need to you can use static coordinates and the map will navigate to that location. In the future we'll implement an api for the search results like openstreetmaps api.

Use Hero Icons. All icons are Hero Icons.
https://heroicons.com/

Figma File for Design Spec
https://www.figma.com/file/1JldbWl3Pe6fir7V3aMotw/Pet-Poison-Alert-Figma-Design?node-id=9%3A353&t=5DE50BmBomMhd8an-1

Firebase Config cleanup

Move out this file into the lib directory under a firebase dir. So lib/firebase/firebaseConfig.js or something.

Another thing is the env variable names should be all uppercase and separated with an underscore. This is just JS convention. It doesn't change anything.

NEXT_PUBLIC_apiKey -> NEXT_PUBLIC_API_KEY

Last thing
const firebaseAnalytics = getAnalytics(app); throws an a window not defined error. It's a nextjs thing because of SSR. I think we don't need the analytics right now so we can remove it and figure out the solution later.

I'll create a separate ticket for these issues. Again great job and congrats!

Originally posted by @toreylittlefield in #10 (comment)

Firebase Nextjs Config

Requires #6

Scaffold the Nextjs / Firebase config in the nextjs app. Use the firebase env variables.

https://firebase.google.com/docs/hosting/nextjs#serve_fully_dynamic_content_ssr

Tailwind Colors and Config

Seems like the color scheme in tailwind.config.js is confusing. Instead of using the extend let's override the colors by use not using extend. This will force only color options in the tailwind.config.js to work instead of the preset options like white-500 black gray-100 purple-500 etc... By doing this we can stick to the Figma file which already has the colors we need.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './lib/components/**/*.{js,ts,jsx,tsx}',

    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
-   extend: {
      /**
       * Colors are defined in global.css
       * they are defined as CSS variables
       * @see https://tailwindcss.com/docs/customizing-colors#using-css-variables
       */
      colors: {
        primary: 'rgb(var(--color-primary) / <alpha-value>)',
        foreground: 'rgb(var(--color-foreground) / <alpha-value>)',
        background: 'rgb(var(--color-background) / <alpha-value>)',
        backgroundAlt: 'rgb(var(--color-background-alt) / <alpha-value>)',
        positive: 'rgb(var(--color-positive) / <alpha-value>)',
        negative: 'rgb(var(--color-negative) / <alpha-value>)',
        warning: 'rgb(var(--color-warning) / <alpha-value>)',
        info: 'rgb(var(--color-info) / <alpha-value>)',
        selected: 'rgb(var(--color-selected) / <alpha-value>)',
      },
-    },
  },
  plugins: [],
};

Also, it appears that there might be confusion around border color. We could add to the colors object in the config a name for a border-color and just use that. Not sure what a good name is to not cause confusion. We can use one value for the border color which should be based on var(--color-foreground).

Example:

        borderColor: 'rgb(var(--color-foreground) / <alpha-value>)',

This is the same as the foreground (black) class we made, but we can use it like borderColor/30 to make it more "gray".

Last let's use this prettier TW plugin for automatic class sorting. This will probably touch every file so we'll have to be aware of merge conflicts. Let's communicate with our teammates on that to let them know. Let's run it across the whole project.
https://github.com/tailwindlabs/prettier-plugin-tailwindcss

Tasks

• update and do not extend tailwind config custom colors
• consider adding another custom util color class for border
• install the TW prettier plugin https://github.com/tailwindlabs/prettier-plugin-tailwindcss and run it across the whole project.
  • FYI: this is a monorepo so you can't install it like you normally would, use the install command npm install -D -w=packages/client prettier prettier-plugin-tailwindcss
  • The -w= is for workspace so we point the install at the packages/client workspace to install in client dir of the monorepo since if we have a server or core package in the future we wouldn't need this plugin there in those packages.
  • If you've installed it correctly you should see only the root package-lock.json updated and the packages/client/package.json updated but NOT the root package.json of our project.
  • setup npm run script to format using prettier and the prettier-tailwind plugin

Move `copy-webpack-plugin` to devDependencies

This package is installed in the nextjs app incorrectly and needs to be moved from dependencies to devDependencies.

https://webpack.js.org/plugins/copy-webpack-plugin/

Reorganize file & folder structure

Will simply reorganize the file and folder structure for the /lib directory which contains the components and other jsx files

Add netlify cli for per branch previews in CI

Add the Netlify cli so that we can see per-branch previews in CI and ensure that the branch is not breaking prod. Also to help troubleshoot issues before merge.

Integrate Location API for search

There are probably other APIs we can use but apparently OpenStreetMaps uses this one:

https://nominatim.org/release-docs/latest/api/Overview/ . Specifically, https://nominatim.org/release-docs/latest/api/Search/

It has a free tier and doesn't require any authentication or API key so I figured it was good enough for now.

Once #17 is completed. The API can be used for the purposes of autocomplete in the search component and updating the location state in the app.

1. Debounce the autocomplete in the location search component to every 500ms.
2. Only show at max 5 results in the autocomplete dropdown.
3. Cache the result(s) in memory.
4. Upon selecting an option from the location search API results the Map pin should be updated and the map should be recentered around the pin if it is off the current screen.

Setup Zustand Store

Let's use Zustand for state management instead of things like React context api or redux. It's a lot easier.

Create simple zustand store in the ./store directory. The filename can be store.js.

To ensure it's working, set and update the state of the Map.jsx location to the users current location (coordinates). Use the Geolocation API

https://github.com/pmndrs/zustand
https://docs.pmnd.rs/zustand/recipes/recipes

Refactor colors to use utility classes

          for any `white` use `background` class for any `black` use `foreground` etc... Can you double check these throughout the PR? I've noticed this in a few spots now for the TW classes. Have a look at `global.css` and `tailwind.config.js`. They should match the figma design and I tried to use those names postive, negative, foreground, background etc... in figma too. If there's any questions please let me know. I understand it's confusing.

Originally posted by @toreylittlefield in #35 (comment)

Setup Playwright and Github Actions to run in CI for end to end tests

We'll use Playwright for end-to-end testing and additionally UI testing. We must set up Playwright and Github Actions as our CI pipeline. We currently have no backend APIs to test against so we can start with a simple init test example.
See https://playwright.dev/docs/ci-intro

• simple config for Playwright
• config GHA to run Playwright in CI
• simple initial test

Rename repo and project to same name: pet-poison-alert

Just a rename for the repo and project please to keep the names consistent and avoid confusion.

Let's use "pet-poison-alert". Thank you @MacAndersonUche

I'll take care of this

Create Zoom Controls

See Figma File for the zoom controls. I'll include a screenshot here as well.

Use Hero Icons (if not installed you can install them). We'll use Hero Icons for all the icons in this project.
https://heroicons.com/

Looks like react-leaflet allows you to turn off the default zoom control with a prop zoomControl in the MapContainer component.
There's a component called ZoomControl that you can use to render the component.

I think you might have to override the CSS or something to custom the look. If it's not possible let me know. You might have to look at the leaflet docs or google around.

https://react-leaflet.js.org/docs/api-components/#zoomcontrol

Change tsconfig "strict" setting to "false" to avoid annoying type errors

Just a temporary thing to avoid type errors and red squiggles.

Marker Clusters for optimizing large concentrations of markers

https://github.com/Leaflet/Leaflet.markercluster Consider adding marker cluster support to allow better performance with increased markers.

Mobile browser address bar and bottom navigation viewport

Reproduce issue

1. Visit https://teampetpoison.github.io/pet-poison-alert/ on a mobile device and browser
2. Observe that the browser's navigation bar is causing the app's bottom navigation to not fit in the viewport

This is a common issue. See something like https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ to apply a fix by calculating the correct height for the viewport instead of using height:100vh units

Setup Firebase security rules

https://firebase.google.com/docs/rules/get-started

Need to setup security rules and data rules in the Firebase console.

Setup Tailwind in Nextjs

Setup Tailwind in Nextjs. Keep it basic for now.

We won't worry about dark mode right now but using this setup will make it easy in the future.

Let's use CSS global vars instead which we can adjust.
https://tailwindcss.com/docs/customizing-colors#using-css-variables

Pick your own tailwind colors or generate I don't care right now. UI doesn't matter much at the moment and this can be easily updated later.

And the tailwind config should use these vars

/// tailwind.config
module.exports = {
  theme: {
    colors: {
primary: 'rgb(var(--color-primary) / <alpha-value>)', // let's use a purple
foreground: 'rgb(var(--color-foreground) / <alpha-value>)', // our text color let's use black
background: ... // our bg color let's use white for now
positive: // green 
negative: // red 
warning: // a yellow
...
    },
  },
}

Create Project in Repo and Branch Protection

@MacAndersonUche you're the repo owner so can you create a "Project" inside the repo so we can use a Kanban board? Can you also setup branch protection on Main. Thank you

Also, since you're the repo owner and GH has limitations you'll have to be the one to manage the Settings and anything else we need like private variables to run in CI. Shouldn't be a lot though.

Add the Location Marker in Map

The map needs a location marker (pin) that should be distinguishable from other map markers. This marker should be moved when the user updates the search or allows the app to access their location data.

Use something like google maps for inspiration in terms of when and how the marker shows up but let's keep it simple for now

Tasks

• show a custom marker to indicate the selected or searched location from the user
• update marker if the user searches and selects a new location
• allow the marker to be dragged or moved by the user. Should also update the location state in the main store for lat lng?
• marker should be easy to distinguish from other markers on the app and should be allowed to be hidden

Configure additional ESLint rules for sorting and others

• sort-keys: https://eslint.org/docs/latest/rules/sort-keys
• sort-imports https://eslint.org/docs/latest/rules/sort-imports
• prefer-template https://eslint.org/docs/latest/rules/prefer-template

Map in form needs to integrate search api

In the map view in the report form, the search component is a dummy component and should be swapped with the current working implementation.

Additionally its worth investigating whether the the application needs 2 separate Map view components or it can just reuse one.

Report Incident Form Progress Bar

Once form is completed consider adding a progress bar or some indication of progress to form.

Report Incident Form

Figma link: https://www.figma.com/file/1JldbWl3Pe6fir7V3aMotw/Pet-Poison-Alert-Figma-Design?node-id=57-942&t=aje9IqoH84t1Nxgq-4

Create the components and the view for reporting a new incident to the map with the location. This view should be displayed when the user clicks on the big middle button in the bottom nav bar.

There's a separate ticket for the location search component that can be integrated into this component. A simple version can suffice for now it's not yet complete. See #17

We won't persist the data to the firebase DB just yet, but we can persist the data to local storage and populate the map with the markers from local storage or some static data for now.

For the global store we'll probably want to use the zustand store, but if it's not yet setup we can integrate it later. See #18

Updated Figma

Location info in form should be more informative than only coordinates

The location information in the form location and form summary views only shows the lat and lng coordinates.

It would be nice instead to also show additional location information that is more helpful and description. If the user select a place with a known name on the map the it should show that name in place of the coordinates (or the coordinates could be show elsewhere but less prominent). We can fallback to show the coordinates if there is no name but we can at least include some information like city, state/region, country?

• include show name of place alongside, include if possible, the city, state/region, country alongside the lat and lng if available
• fallback to lat and lng if no other information about the location is available

No mock up exists at the moment to follow how the text should look like but we can use good judgement and learn from google maps or other such related examples.