Purva/export to csv #56

dagapurva3 · 2025-02-01T17:56:35Z

Notion ticket link

Export to CSV

Implementation description

Added a button that looks like the image added
Used the /api/users api to fetch all the data from the users table
Created a downloadable link so that the csv file gets downloaded into your system
Added json to csv converter so that the data inside csv can be controlled directly by the api or backend

Steps to test

Build and start the application (docker compose build --up)
Go to /exportUsers url, see the design of the button and the funtionality, it should download a file with all the users data.
Check the downloaded csv and if you are able to see the columns and the rows with proper names and data

What should reviewers focus on?

Checklist

My PR name is descriptive and in imperative tense
My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
I have run the appropriate linter(s)
I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

vercel · 2025-02-01T17:56:39Z

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

Name	Status	Preview	Comments	Updated (UTC)
sistema	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 3, 2025 3:42pm

ChinemeremChigbo · 2025-02-01T18:31:41Z

.dockerignore

@@ -0,0 +1 @@
+node_modules


I would put this as well as the changes to the .gitignore into a separate PR.

Please revert this added line

ChinemeremChigbo · 2025-02-01T18:34:05Z

.gitignore

+
+# Docker
+.dockerignore


I don't think we should ignore the .dockerignore.

ChinemeremChigbo · 2025-02-01T18:49:50Z

src/pages/exportUsers.tsx

+  return (
+    <div style={{ textAlign: 'center' }}>
+      <button
+        onClick={handleDownload}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '46.36px',
+          padding: '11.273px 15.031px',
+          gap: '16px',
+          backgroundColor: '#0468C1',
+          color: '#FFFFFF',
+          fontFamily: 'Poppins, sans-serif',
+          fontSize: '16px',
+          fontWeight: 600,
+          border: '1px solid #D2D2D2',
+          borderRadius: '7px',
+          cursor: 'pointer',
+          transition: 'background 0.2s ease-in-out, transform 0.1s',
+        }}
+        onMouseOver={(e) => (e.currentTarget.style.backgroundColor = '#0358A3')}
+        onMouseOut={(e) => (e.currentTarget.style.backgroundColor = '#0468C1')}
+        onMouseDown={(e) => (e.currentTarget.style.transform = 'scale(0.95)')}
+        onMouseUp={(e) => (e.currentTarget.style.transform = 'scale(1)')}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="26"
+          height="25"
+          viewBox="0 0 26 25"
+          fill="white"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.7443 14.583C4.3196 14.583 4.78597 15.0494 4.78597 15.6247V19.7913C4.78597 20.0676 4.89572 20.3326 5.09107 20.5279C5.28642 20.7233 5.55137 20.833 5.82764 20.833H20.411C20.6872 20.833 20.9522 20.7233 21.1475 20.5279C21.3429 20.3326 21.4526 20.0676 21.4526 19.7913V15.6247C21.4526 15.0494 21.919 14.583 22.4943 14.583C23.0696 14.583 23.536 15.0494 23.536 15.6247V19.7913C23.536 20.6201 23.2067 21.415 22.6207 22.001C22.0346 22.5871 21.2398 22.9163 20.411 22.9163H5.82764C4.99883 22.9163 4.20398 22.5871 3.61793 22.001C3.03188 21.415 2.70264 20.6201 2.70264 19.7913V15.6247C2.70264 15.0494 3.16901 14.583 3.7443 14.583Z"
+            fill="white"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7.17448 9.6801C7.58128 9.2733 8.24082 9.2733 8.64762 9.6801L13.1194 14.1519L17.5911 9.6801C17.9979 9.2733 18.6575 9.2733 19.0643 9.6801C19.4711 10.0869 19.4711 10.7464 19.0643 11.1532L13.856 16.3616C13.4492 16.7684 12.7896 16.7684 12.3828 16.3616L7.17448 11.1532C6.76769 10.7464 6.76769 10.0869 7.17448 9.6801Z"
+            fill="white"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M13.1193 2.08301C13.6946 2.08301 14.161 2.54938 14.161 3.12467V15.6247C14.161 16.2 13.6946 16.6663 13.1193 16.6663C12.544 16.6663 12.0776 16.2 12.0776 15.6247V3.12467C12.0776 2.54938 12.544 2.08301 13.1193 2.08301Z"
+            fill="white"
+          />
+        </svg>
+
+        {/* Export Text */}
+        <span style={{ lineHeight: 'normal' }}>Export</span>
+      </button>
+      {error && (
+        <p style={{ color: 'red', marginTop: '10px', fontSize: '14px' }}>
+          {error}
+        </p>
+      )}
+    </div>
+  );


We use Chakra UI for our UI components. I would recommend something like:

Suggested change

return (

<div style={{ textAlign: 'center' }}>

<button

onClick={handleDownload}

style={{

display: 'flex',

alignItems: 'center',

justifyContent: 'center',

height: '46.36px',

padding: '11.273px 15.031px',

gap: '16px',

backgroundColor: '#0468C1',

color: '#FFFFFF',

fontFamily: 'Poppins, sans-serif',

fontSize: '16px',

fontWeight: 600,

border: '1px solid #D2D2D2',

borderRadius: '7px',

cursor: 'pointer',

transition: 'background 0.2s ease-in-out, transform 0.1s',

}}

onMouseOver={(e) => (e.currentTarget.style.backgroundColor = '#0358A3')}

onMouseOut={(e) => (e.currentTarget.style.backgroundColor = '#0468C1')}

onMouseDown={(e) => (e.currentTarget.style.transform = 'scale(0.95)')}

onMouseUp={(e) => (e.currentTarget.style.transform = 'scale(1)')}

>

<svg

xmlns="http://www.w3.org/2000/svg"

width="26"

height="25"

viewBox="0 0 26 25"

fill="white"

>

<path

fillRule="evenodd"

clipRule="evenodd"

d="M3.7443 14.583C4.3196 14.583 4.78597 15.0494 4.78597 15.6247V19.7913C4.78597 20.0676 4.89572 20.3326 5.09107 20.5279C5.28642 20.7233 5.55137 20.833 5.82764 20.833H20.411C20.6872 20.833 20.9522 20.7233 21.1475 20.5279C21.3429 20.3326 21.4526 20.0676 21.4526 19.7913V15.6247C21.4526 15.0494 21.919 14.583 22.4943 14.583C23.0696 14.583 23.536 15.0494 23.536 15.6247V19.7913C23.536 20.6201 23.2067 21.415 22.6207 22.001C22.0346 22.5871 21.2398 22.9163 20.411 22.9163H5.82764C4.99883 22.9163 4.20398 22.5871 3.61793 22.001C3.03188 21.415 2.70264 20.6201 2.70264 19.7913V15.6247C2.70264 15.0494 3.16901 14.583 3.7443 14.583Z"

fill="white"

/>

<path

fillRule="evenodd"

clipRule="evenodd"

d="M7.17448 9.6801C7.58128 9.2733 8.24082 9.2733 8.64762 9.6801L13.1194 14.1519L17.5911 9.6801C17.9979 9.2733 18.6575 9.2733 19.0643 9.6801C19.4711 10.0869 19.4711 10.7464 19.0643 11.1532L13.856 16.3616C13.4492 16.7684 12.7896 16.7684 12.3828 16.3616L7.17448 11.1532C6.76769 10.7464 6.76769 10.0869 7.17448 9.6801Z"

fill="white"

/>

<path

fillRule="evenodd"

clipRule="evenodd"

d="M13.1193 2.08301C13.6946 2.08301 14.161 2.54938 14.161 3.12467V15.6247C14.161 16.2 13.6946 16.6663 13.1193 16.6663C12.544 16.6663 12.0776 16.2 12.0776 15.6247V3.12467C12.0776 2.54938 12.544 2.08301 13.1193 2.08301Z"

fill="white"

/>

</svg>

{/* Export Text */}

<span style={{ lineHeight: 'normal' }}>Export</span>

</button>

{error && (

<p style={{ color: 'red', marginTop: '10px', fontSize: '14px' }}>

{error}

</p>

)}

</div>

);

import { Button, Box, Text } from '@chakra-ui/react';

import { DownloadIcon } from '@chakra-ui/icons';

return (

<Box>

<Button

leftIcon={<DownloadIcon />}

colorScheme="blue"

variant="solid"

onClick={handleDownload}

_hover={{ bg: 'blue.600' }}

_active={{ transform: 'scale(0.95)' }}

>

Export

</Button>

{error && (

<Text color="red.500" mt={4} fontSize="sm">

{error}

</Text>

)}

</Box>

);

But moving the imports to the top of the file.

ChinemeremChigbo · 2025-02-01T19:11:23Z

src/pages/exportUsers.tsx

+  const handleDownload = async () => {
+    try {
+      setError(null);
+      const response = await fetch('/api/users');
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch CSV: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      const csvData = convertToCSV(data);
+      const blob = new Blob([csvData], { type: 'text/csv' });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = 'users.csv';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error('Error downloading CSV:', err);
+      setError('Failed to export users. Please try again.');
+    }
+  };


I don't love the direct DOM manipulation and think you can do without it.

Suggested change

const handleDownload = async () => {

try {

setError(null);

const response = await fetch('/api/users');

if (!response.ok) {

throw new Error(`Failed to fetch CSV: ${response.statusText}`);

}

const data = await response.json();

const csvData = convertToCSV(data);

const blob = new Blob([csvData], { type: 'text/csv' });

const url = URL.createObjectURL(blob);

const link = document.createElement('a');

link.href = url;

link.download = 'users.csv';

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

URL.revokeObjectURL(url);

} catch (err) {

console.error('Error downloading CSV:', err);

setError('Failed to export users. Please try again.');

}

};

const handleDownload = async () => {

try {

setError(null);

const response = await fetch('/api/users');

if (!response.ok) {

throw new Error(`Failed to fetch CSV: ${response.statusText}`);

}

const data = await response.json();

const csvData = convertToCSV(data);

const blob = new Blob([csvData], { type: 'text/csv' });

const url = URL.createObjectURL(blob);

const link = document.createElement('a');

link.href = url;

link.download = 'users.csv';

link.click();

URL.revokeObjectURL(url);

} catch (err) {

console.error('Error downloading CSV:', err);

setError('Failed to export users. Please try again.');

}

};

ChinemeremChigbo · 2025-02-01T19:11:26Z

src/pages/exportUsers.tsx

+      .map((row) =>
+        Object.values(row)
+          .map((value) => `"${value}"`)
+          .join(',')
+      )
+      .join('\n');


it would be nice to handle potential edge cases like quotes within the values

Suggested change

.map((row) =>

Object.values(row)

.map((value) => `"${value}"`)

.join(',')

)

.join('\n');

.map((row) =>

Object.values(row)

.map((value) => `"${String(value).replace(/"/g, '""')}"`)

.join(',')

)

ChinemeremChigbo · 2025-02-02T04:31:25Z

.gitignore

@@ -32,4 +32,4 @@ npm-debug.log*

 # typescript
 *.tsbuildinfo
-next-env.d.ts


Please revert this spacing change

ChinemeremChigbo · 2025-02-02T04:31:30Z

.dockerignore

@@ -0,0 +1 @@
+node_modules


Please revert this added line

ChinemeremChigbo

LGTM

dagapurva3 added 2 commits February 1, 2025 12:50

Added the export to csv button

8840ffa

Added dockerignore to gitignore

2b767f1

dagapurva3 requested a review from ChinemeremChigbo February 1, 2025 17:56

vercel bot deployed to Preview February 1, 2025 17:58 View deployment

ChinemeremChigbo requested changes Feb 1, 2025

View reviewed changes

Added the chakra ui components and removed the gitignore changes

b02c6fe

vercel bot deployed to Preview February 1, 2025 19:23 View deployment

dagapurva3 requested a review from ChinemeremChigbo February 1, 2025 19:31

ChinemeremChigbo reviewed Feb 2, 2025

View reviewed changes

dagapurva3 added 2 commits February 3, 2025 10:37

Removed the git and docker ignore changes

083ebed

Removed the docker ignore file

715b951

vercel bot deployed to Preview February 3, 2025 15:42 View deployment

ChinemeremChigbo self-requested a review February 3, 2025 18:03

ChinemeremChigbo approved these changes Feb 3, 2025

View reviewed changes

dagapurva3 requested review from a team, 135ze and aadhyaaamashru and removed request for a team February 5, 2025 01:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Purva/export to csv #56

Purva/export to csv #56

dagapurva3 commented Feb 1, 2025 •

edited

Loading

vercel bot commented Feb 1, 2025 •

edited

Loading

ChinemeremChigbo Feb 1, 2025

ChinemeremChigbo Feb 2, 2025

ChinemeremChigbo Feb 1, 2025

ChinemeremChigbo Feb 1, 2025

ChinemeremChigbo Feb 1, 2025

ChinemeremChigbo Feb 1, 2025 •

edited

Loading

ChinemeremChigbo Feb 2, 2025

ChinemeremChigbo Feb 2, 2025

ChinemeremChigbo left a comment

		@@ -0,0 +1 @@
		node_modules

		@@ -0,0 +1 @@
		node_modules

Purva/export to csv #56

Are you sure you want to change the base?

Purva/export to csv #56

Conversation

dagapurva3 commented Feb 1, 2025 • edited Loading

Notion ticket link

Implementation description

Steps to test

What should reviewers focus on?

Checklist

vercel bot commented Feb 1, 2025 • edited Loading

ChinemeremChigbo Feb 1, 2025

Choose a reason for hiding this comment

ChinemeremChigbo Feb 2, 2025

Choose a reason for hiding this comment

ChinemeremChigbo Feb 1, 2025

Choose a reason for hiding this comment

ChinemeremChigbo Feb 1, 2025

Choose a reason for hiding this comment

ChinemeremChigbo Feb 1, 2025

Choose a reason for hiding this comment

ChinemeremChigbo Feb 1, 2025 • edited Loading

Choose a reason for hiding this comment

ChinemeremChigbo Feb 2, 2025

Choose a reason for hiding this comment

ChinemeremChigbo Feb 2, 2025

Choose a reason for hiding this comment

ChinemeremChigbo left a comment

Choose a reason for hiding this comment

dagapurva3 commented Feb 1, 2025 •

edited

Loading

vercel bot commented Feb 1, 2025 •

edited

Loading

ChinemeremChigbo Feb 1, 2025 •

edited

Loading