[ref] component result card #76

Joel-leal · 2024-11-01T03:09:44Z

Description

Result card component created and rendered on the results page.

Changes

Result card component created
Renders the list of candidates using the result card on the election results page.

Board issue

Closes #71

vercel · 2024-11-01T03:09:48Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
voting-system	⬜️ Ignored (Inspect)			Dec 1, 2024 0:19am

marco-souza · 2024-11-01T13:53:12Z

public/image/avatar1.png

For an example application, it's ok to put images in a git repo, but for real applications, we would need a storage service (block storage, S3, and others)

I have an idea for a cool backlog, thank you for pointing that out!

@Joel-leal for now. Remove the images from the repo, we don't want these assets here. Find some public image on the internet (use this https://picsum.photos/) and use it while our data is mocked please.

marco-souza · 2024-11-01T13:54:39Z

src/app/elections/[electionId]/results/page.tsx

@@ -1,8 +1,26 @@
+import ResultCard from "@packages/components/ResultCard";
+import candidates from "src/data/data";


instead of getting the data directly, I'd create a DAO for candidates, abstracting the data access.

Therefore, when you switch your data source to a real DB, you won't need to change the data access interface

@Joel-leal please build this and mock until DAO level

I am going to study this DAO-level topic and implement it.

marco-souza · 2024-11-01T13:55:54Z

src/packages/shadcn-ui/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client";


why do we need this?

marco-souza · 2024-11-01T13:57:01Z

src/packages/shadcn-ui/ui/avatar.tsx

+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;


I personally found this code kind of ugly, code :(

Maybe we can use something like: https://www.npmjs.com/package/tailwind-styled-components

same issue for the shared components bellow

@marco-souza 🥶

That's what shadcn components looks like. Then maybe choose something else? or just create the components from scratch?

Exactly, this is also code that we're not suposed to maintain, as zenha mentioned, this is shadcn's component, I don't see value on re-writing it.

this is so sad I wanna die 😢

Warning
I don't like shadcn

Let me explain better my POV:

How can we see a displayName and think this is ok?

We intended to share some styles, but instead we created forwardRef components that feature complex and poorly readable types, utilizing spread operators - all of that do add some custom CSS 🤯

In my opinion, this code is challenging to maintain because it requires a deep understanding of the need for forwardRef to customize shadcn components - not easy for a fresh junior or a 5y person to maintain

If you guys are saying that this is the shadcn way, I won't block this PR, BUT still ugly as hell

Let's at least create a wrapper to hide this ugliness

Suggested style wrapper WithStyles:

Suggested change

const AvatarFallback = React.forwardRef<

React.ElementRef<typeof AvatarPrimitive.Fallback>,

React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>

>(({ className, ...props }, ref) => (

<AvatarPrimitive.Fallback

ref={ref}

className={cn(

"flex h-full w-full items-center justify-center rounded-full bg-muted",

className,

)}

{...props}

/>

));

AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;

function WithStyles(ShadcnElement, styles) {

const CustomComponent = React.forwardRef<

React.ElementRef<typeof ShadcnElement>,

React.ComponentPropsWithoutRef<typeof ShadcnElement>

>(({ className, ...props }, ref) => (

<ShadcnElement

ref={ref}

className={cn(styles, className)}

{...props}

/>

));

CustomComponent.displayName = ShadcnElement.displayName;

return CustomComponent;

}

Then you can do something like

const AvatarFallback = WithStyles( AvatarPrimitive.Fallback, "flex h-full w-full items-center justify-center rounded-full bg-muted", ) const Avatar = WithStyles( AvatarPrimitive.Root, "flex h-full w-full items-center justify-center rounded-full bg-muted", ) const AvatarImage = WithStyles( AvatarPrimitive.Image, "flex h-full w-full items-center justify-center rounded-full bg-muted", )

frattezi

Great work my friend! Added some comments alongside with the guys! Let me know if you need any help

frattezi · 2024-11-05T13:19:32Z

src/packages/components/ResultCard.tsx

+  image,
+}: ElectionResult) {
+  return (
+    <Card className="flex flex-row w-[60vw] p-4 shadow-md shadow-gray-200 border-[rgba(0,0,0,0)]">


Is [rgba(0,0,0,0)] necessary? border-black wouldn't work?

frattezi · 2024-11-05T13:20:23Z

src/packages/components/ResultCard.tsx

+  candidate,
+  vice,
+  party,
+  percentagem,


Variable in portuguese

frattezi · 2024-11-05T13:20:32Z

src/packages/components/ResultCard.tsx

+  vice,
+  party,
+  percentagem,
+  votos,


same as above

frattezi · 2024-11-05T13:21:38Z

src/packages/components/ResultCard.tsx

+          <AvatarImage src={image} />
+        </Avatar>
+        <div>
+          <p className="font-bold">Presidente: {candidate}</p>


It's ok to have portuguese on the text displayed to the user (we can enhance that with internationalization) but code and variables, always in colonizador language

frattezi · 2024-11-05T13:22:57Z

src/app/elections/[electionId]/results/page.tsx

@@ -1,8 +1,26 @@
+import ResultCard from "@packages/components/ResultCard";
+import candidates from "src/data/data";


@Joel-leal please build this and mock until DAO level

marco-souza · 2024-11-28T19:50:36Z

prisma/schema.prisma

@@ -4,7 +4,7 @@ generator client {

 datasource db {
  provider = "postgresql"
-  url = env("DATABASE_URL")
+  url = "postgres://test:test@localhost:5432/test"


(╯°□°)╯︵ ┻━┻ 💥

There is a bug that we still don't understand, but there is a local error that doesn't accept this reference. However, on the remote side, it is accepted. I will push it corrected, and then I will investigate again to find out what might be causing it. Another sticker unlocked!

Joel-leal added 3 commits October 31, 2024 12:44

fea: create result card and add dependencies avatar

cf9a22b

fea: test inserted data and avatar in result card

b74c7a1

fix: corrections of the format spaces

e1dbc58

Joel-leal requested a review from frattezi November 1, 2024 03:09

Joel-leal self-assigned this Nov 1, 2024

Joel-leal added the enhancement New feature or request label Nov 1, 2024

Joel-leal temporarily deployed to Preview November 1, 2024 03:10 — with GitHub Actions Inactive

Joel-leal requested a review from marco-souza November 1, 2024 11:47

marco-souza reviewed Nov 1, 2024

View reviewed changes

frattezi reviewed Nov 5, 2024

View reviewed changes

Joel-leal had a problem deploying to Preview November 27, 2024 14:07 — with GitHub Actions Failure

Applied the corrections from the review

adaa9d2

Joel-leal force-pushed the joel/component-result-card branch from fa56ccd to adaa9d2 Compare November 28, 2024 13:19

Joel-leal had a problem deploying to Preview November 28, 2024 13:20 — with GitHub Actions Failure

Joel-leal had a problem deploying to Preview November 28, 2024 13:32 — with GitHub Actions Failure

Joel-leal had a problem deploying to Preview November 28, 2024 14:50 — with GitHub Actions Failure

marco-souza requested changes Nov 28, 2024

View reviewed changes

fix: correction url db

1da8c0c

Joel-leal had a problem deploying to Preview December 1, 2024 00:20 — with GitHub Actions Failure

Joel-leal temporarily deployed to Preview December 1, 2024 01:14 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ref] component result card #76

[ref] component result card #76

Joel-leal commented Nov 1, 2024

vercel bot commented Nov 1, 2024 •

edited

Loading

marco-souza Nov 1, 2024

frattezi Nov 5, 2024

frattezi Nov 5, 2024

Joel-leal Nov 26, 2024

marco-souza Nov 1, 2024

frattezi Nov 5, 2024

frattezi Nov 5, 2024

Joel-leal Nov 26, 2024

marco-souza Nov 1, 2024

marco-souza Nov 1, 2024

marco-souza Nov 1, 2024

vzsoares Nov 1, 2024

vzsoares Nov 1, 2024

frattezi Nov 5, 2024

marco-souza Nov 5, 2024 •

edited

Loading

marco-souza Nov 5, 2024 •

edited

Loading

marco-souza Nov 5, 2024 •

edited

Loading

marco-souza Nov 5, 2024 •

edited

Loading

frattezi left a comment

frattezi Nov 5, 2024

frattezi Nov 5, 2024

frattezi Nov 5, 2024

frattezi Nov 5, 2024

frattezi Nov 5, 2024

marco-souza Nov 28, 2024

Joel-leal Nov 29, 2024

		@@ -1,8 +1,26 @@
		import ResultCard from "@packages/components/ResultCard";
		import candidates from "src/data/data";

[ref] component result card #76

Are you sure you want to change the base?

[ref] component result card #76

Conversation

Joel-leal commented Nov 1, 2024

Description

Changes

Board issue

vercel bot commented Nov 1, 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

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

marco-souza Nov 5, 2024 • edited Loading

Choose a reason for hiding this comment

marco-souza Nov 5, 2024 • edited Loading

Choose a reason for hiding this comment

marco-souza Nov 5, 2024 • edited Loading

Choose a reason for hiding this comment

marco-souza Nov 5, 2024 • edited Loading

Choose a reason for hiding this comment

frattezi left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vercel bot commented Nov 1, 2024 •

edited

Loading

marco-souza Nov 5, 2024 •

edited

Loading

marco-souza Nov 5, 2024 •

edited

Loading

marco-souza Nov 5, 2024 •

edited

Loading

marco-souza Nov 5, 2024 •

edited

Loading