[feat] implement remove plant functionality & style PlantPages #53

SashankBalusu · 2024-11-22T10:00:18Z

What's new in this PR 🧑‍🌾

Description

styled the general and user plant page
- consolidates styling to /plant-pages/styles.ts. Both Plant Pags are also under the plant-page directory.
allow user to remove plant from their plants
- this actually means we update the date_removed; we don't actually delete the row from the db
also made edits to the plantpage components in order to match the styles
updated UserPlant type to include date_removed rather than date_harvested. also, planting_type is now PlantingTypeEnum type.

Screenshots

Previously:

Note that the images of plants were hard coded for proof of concept, if you were to pull and run you will not see the image

Now:
GeneralPlantPage

UserPlantPage

How to review

can view both the general and user plant pages, test back button and remove button

Next steps

create the SeasonColorKey and use it in the PlantPages (maybe create a new component, PlantingTimeline, since both PlantPages use it)
on the issue of whether we should actually delete rows when "Removing Plants": POC wants a Retool workflow to filter out plants that have been removed a season ago.
fix /add-details handling of "SELECT" value, which is now invalid as a planting_type

Relevant links

Online sources

Related PRs

CC: @ccatherinetan

ccatherinetan

looking great, tysm sashank! a couple comments

nit: all styling files should be plural, i.e. styles.ts rather than style.ts
we might want to consolidate the shared styles between UserPlantPage and GeneralPlantPage. one way to do this is to move both components under the view-plants route and add a shared/styles.ts file (see my comment)
let's avoid using negative margins if it's not for overlapping components. I will push some global styles that will address the white space issue; see my comment about changing styles for Container, Header, and Content.

ccatherinetan · 2024-11-25T01:46:54Z

api/supabase/queries/userPlants.ts

+  if (error) {
+    console.error('Error deleting row:', error);
+    return null;
+  }


note: honestly i'm down to generally throw errors in queries, but that would require us to catch the error wherever the query is used. this allows us to use the error message + do more specific/custom error-handling. this is fine for now, but if we do want to do custom error-handling, we might consider changing it to throwing an error later

ccatherinetan · 2024-11-25T01:47:37Z

app/all-plants/[plantId]/page.tsx

+                    router.push(`/view-plants`);
+                  }}
+                >
+                  ←


note: this is good for now! we might want to export the arrow icon from figma eventually??

ccatherinetan · 2024-11-25T01:48:25Z

app/all-plants/[plantId]/style.ts

+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-style: inherit;


styles are inherited by default so we can remove this line!

ccatherinetan · 2024-11-25T02:23:17Z

components/YourPlantDetails/style.ts

 `;

 export const StyledIcon = styled.div`
  color: ${COLORS.shrub};
  display: flex;
  align-items: center;
 `;
+
+export const StyledHeading = styled(H3)`
+  font-size: 16px;


font sizes should be in rem! 16px = 1 rem

Also, note: if this is a H3, it should inherit the sizing from H3, so you wouldn't need to re-define it here. Kyrene is working on making everything consistent, so you can keep the font-size for now

ccatherinetan · 2024-11-25T02:40:19Z

app/all-plants/[plantId]/page.tsx

@@ -18,12 +36,52 @@ export default function GeneralPlantPage() {
    getPlant();
  }, [plantId]);
  return (
-    <div>
+    <Container>
      {currentPlant && (


note: maybe we should add a spinner if it's loading in the future? let's discuss in worksesh

ccatherinetan · 2024-11-26T03:41:41Z

app/all-plants/[plantId]/style.ts

+export const TitleWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 2px;


is this necessary? can we remove the gap?

ccatherinetan · 2024-11-26T03:49:26Z

app/my-garden/[userPlantId]/style.ts

nit: styling folders should be plural: this file should be renamed styles.ts

also, since there are so many shared styles between GeneralPlantPage and UserPlantPage, we should just have them share styles rather than duplicate the styles, as this will reduce redundancy make it easier for us to keep styling consistent between pages.

One way to do is this is to restructure the directories like so:

UserPlantPage → app/view-plants/my-garden/[userPlantId]/page.tsx

[userPlantId]/styles.ts if there are any custom styles that aren't shared with GeneralPlantPage

GeneralPlantPage → app/view-plants/all-plants/[plantId]/page.tsx

[plantId]/styles.ts if there are any custom styles that aren't shared with userPlantPage

Shared Styles → app/view-plants/shared/styles.ts

should include Container, Header, HeaderContainer, PlantImage, Content, NameWrapper etc.

ccatherinetan · 2024-11-26T06:29:05Z

app/all-plants/[plantId]/style.ts

+export const Container = styled.div`
+  padding: 20px;
+`;


we should remove the padding from Container and instead include margin: 24px; in Content

ccatherinetan · 2024-11-26T06:39:02Z

app/all-plants/[plantId]/style.ts

+
+export const NameWrapper = styled.div`
+  display: flex;
+  justify-content: flex-start;


nit: i think this is the default so we don't have to include this line here

ccatherinetan · 2024-11-26T06:40:18Z

app/all-plants/[plantId]/style.ts

+  gap: 2px;
+  justify-content: space-between;
+`;
+export const AddPlant = styled.button`


note: kyrene said this button style may change, so let's just leave this for now, and i'll update it later

ccatherinetan · 2024-12-07T05:08:10Z

api/supabase/queries/userPlants.ts

@@ -44,3 +44,15 @@ export async function getCurrentUserPlantsByUserId(
  }
  return data;
 }
+export async function removeUserPlantById(id: UUID) {


omg i just realized that we actually don't want to delete the plants from their lists, but instead include date_removed, so that it is no longer fetched

SashankBalusu linked an issue Nov 22, 2024 that may be closed by this pull request

Style PlantPage and Add Remove Plant Functionality #49

Closed

ccatherinetan changed the title ~~styled plantpages + remove functionality~~ [feat] implement remove plant functionality & style PlantPages Nov 25, 2024

ccatherinetan reviewed Nov 26, 2024

View reviewed changes

ccatherinetan mentioned this pull request Nov 26, 2024

[chore] add global styles #55

Merged

ccatherinetan reviewed Dec 7, 2024

View reviewed changes

SashankBalusu and others added 12 commits December 6, 2024 21:23

styled plantpages + remove functionality

19c670b

fixed background grey

6ba281c

fixed background stretch

e4c3025

fix styling for gardening tips

a587c20

finalize PlantCare styling; add Sunlight helper funcs

da08e76

fix SunlightEnum helper func abstraction

b56029f

style YourPlantDetails; make planting_type a PlantingTypeEnum

9df0d6a

refactor PlantCareDescription

8461cbe

refactor YourPlantDetails with DetailRow

85e0a78

create upsertUserPlant query

80a2a12

use upsertUserPlant in userPlantPage

1620f61

consolidate styling between plantpages in /plant-page route

db325e4

ccatherinetan force-pushed the 49-style-plantpage-and-add-remove-plant-functionality branch from e9b8121 to db325e4 Compare December 7, 2024 09:42

ccatherinetan added 2 commits December 7, 2024 01:46

fix imgheader padding

6d4e128

change String to string

6162cae

ccatherinetan merged commit ea231e2 into main Dec 7, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[feat] implement remove plant functionality & style PlantPages #53

[feat] implement remove plant functionality & style PlantPages #53

SashankBalusu commented Nov 22, 2024 •

edited by ccatherinetan

Loading

ccatherinetan left a comment

ccatherinetan Nov 25, 2024

ccatherinetan Nov 25, 2024 •

edited

Loading

ccatherinetan Nov 25, 2024

ccatherinetan Nov 25, 2024

ccatherinetan Nov 25, 2024

ccatherinetan Nov 26, 2024 •

edited

Loading

ccatherinetan Nov 26, 2024

ccatherinetan Nov 26, 2024

ccatherinetan Nov 26, 2024

ccatherinetan Nov 26, 2024

ccatherinetan Nov 26, 2024

ccatherinetan Dec 7, 2024

[feat] implement remove plant functionality & style PlantPages #53

[feat] implement remove plant functionality & style PlantPages #53

Conversation

SashankBalusu commented Nov 22, 2024 • edited by ccatherinetan Loading

What's new in this PR 🧑‍🌾

Description

Screenshots

How to review

Next steps

Relevant links

Online sources

Related PRs

ccatherinetan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ccatherinetan Nov 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ccatherinetan Nov 26, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SashankBalusu commented Nov 22, 2024 •

edited by ccatherinetan

Loading

ccatherinetan Nov 25, 2024 •

edited

Loading

ccatherinetan Nov 26, 2024 •

edited

Loading