Feat: Change data input and display format to csv (#3)

Signed-off-by: Stanislaw Mazowiecki <[email protected]>

src/App.tsx

@@ -116,10 +116,10 @@ const App = () => {
               <Label htmlFor="holders">
                 {data.length} {dictionary.outOf} {accountIds.length} {dictionary.textAreaLabel} {tokenId}
               </Label>
-              <Textarea data-testid="response" readOnly className="min-h-[200px]" id="holders" value={JSON.stringify(data)} />
+              <Textarea data-testid="response" readOnly className="min-h-[200px]" id="holders" value={data.join(', ')} />
               <Button
                 onClick={async () => {
-                  await copyToClipboard(JSON.stringify(data));
+                  await copyToClipboard(data.join(', '));
                 }}
               >
                 {dictionary.copyToClipboard}

src/components/HoldersForm.tsx

@@ -21,13 +21,13 @@ import React, { useEffect, useState } from 'react';
 import dictionary from '@/dictionary/en.json';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import { Loader2 } from 'lucide-react';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import { z } from 'zod';
 import { formSchema } from '@/utils/formSchema';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Textarea } from '@/components/ui/textarea';
+import { parseCSV } from '@/utils/parseCSV';
 import { Progress } from '@/components/ui/progress';
 
 type HoldersFormProps = {
@@ -51,8 +51,8 @@ export const HoldersForm = ({ setTokenId, setAccountIds, setShouldFetch, isFetch
 
   const onSubmit = ({ tokenId, accountIds }: z.infer<typeof formSchema>) => {
     setTokenId(tokenId);
-    setAccountIds(JSON.parse(accountIds));
-    setAccountIdsLength(JSON.parse(accountIds).length);
+    setAccountIdsLength(parseCSV(accountIds).length);
+    setAccountIds(parseCSV(accountIds));
     setShouldFetch(true);
   };
 

src/dictionary/en.json

@@ -7,13 +7,13 @@
   "tokenId": "TokenId",
   "exampleTokenId": "0.0.1234",
   "accountIds": "Account Ids list",
-  "exampleAccountIds": "[\"0.0.1234\",\"0.0.1235\",\"0.0.1236\"]",
+  "exampleAccountIds": "0.0.123, 0.0.124, 0.0.125, 0.0.126",
   "buildList": "Build list",
   "outOf": "out of",
   "textAreaLabel": "accounts will be able to receive an airdrop of tokens from",
   "accounts": "associated accounts",
   "successfullyFetchedData": "Successfully fetched data",
   "tokenIdFormatError": "TokenId must be in the format 0.0.x",
   "minAmountFormatError": "MinAmount must be a number greater than or equal to 0",
-  "accountIdsFormatError": "AccountIds must be a string representation of an array of strings. Example: [\"one\",\"two\",\"three\"]"
+  "accountIdsFormatError": "AccountIds must be a string representation of an csv. Example: 0.0.123, 0.0.124, 0.0.125, 0.0.126"
 }

src/test/unit/parseCSV.test.ts

@@ -0,0 +1,43 @@
+import { parseCSV } from '@/utils/parseCSV';
+
+describe('parseCSV', () => {
+  it('should return array of strings from separated by commas string ', async () => {
+    const input = '0.0.123, 0.0.124, 0.0.125, 0.0.126';
+
+    const result = parseCSV(input);
+
+    expect(result).toEqual(['0.0.123', '0.0.124', '0.0.125', '0.0.126']);
+  });
+
+  it('should return array of strings from separated by commas without space string', async () => {
+    const input = '0.0.123,0.0.124,0.0.125,0.0.126';
+
+    const result = parseCSV(input);
+
+    expect(result).toEqual(['0.0.123', '0.0.124', '0.0.125', '0.0.126']);
+  });
+
+  it('should return array of strings from separated by spaces string ', async () => {
+    const input = '0.0.123 0.0.124 0.0.125 0.0.126';
+
+    const result = parseCSV(input);
+
+    expect(result).toEqual(['0.0.123', '0.0.124', '0.0.125', '0.0.126']);
+  });
+
+  it('should return array of strings from separated by commas and spaces string ', async () => {
+    const input = '0.0.123, 0.0.124 0.0.125, 0.0.126';
+
+    const result = parseCSV(input);
+
+    expect(result).toEqual(['0.0.123', '0.0.124', '0.0.125', '0.0.126']);
+  });
+
+  it('should allow line breaks(enter key) between strings', () => {
+    const input = '0.0.123\n' + '0.0.124';
+
+    const result = parseCSV(input);
+
+    expect(result).toEqual(['0.0.123', '0.0.124']);
+  });
+});

src/utils/formSchema.ts

@@ -26,12 +26,8 @@ export const formSchema = z.object({
   }),
   accountIds: z.string().refine(
     (value) => {
-      try {
-        const parsedValue = JSON.parse(value);
-        return Array.isArray(parsedValue) && parsedValue.every((item) => typeof item === 'string');
-      } catch {
-        return false;
-      }
+      const splitValues = value.split(/, |\s|\n/);
+      return splitValues.every((item) => /^0\.0\.\d*$/.test(item));
     },
     {
       message: dictionary.accountIdsFormatError,

src/utils/parseCSV.ts

@@ -0,0 +1,4 @@
+export const parseCSV = (input: string): string[] => {
+  const splitValues = input.split(/,|\s|\n/);
+  return splitValues.map((item) => item.trim()).filter((item) => item !== '');
+};