UseArrayStateDemo

1'use client';
2 
3import React, { useState } from 'react';
4 
5import { Badge } from '@/components/ui/badge';
6import { Button } from '@/components/ui/button';
7import {
8  Card,
9  CardContent,
10  CardDescription,
11  CardFooter,
12  CardHeader,
13  CardTitle,
14} from '@/components/ui/card';
15import { Input } from '@/components/ui/input';
16 
17import { useArrayState } from '@/hooks/guarahooks/use-array-state';
18 
19export default function UseArrayStateDemo() {
20  const [inputValue, setInputValue] = useState('');
21  const [updateIndex, setUpdateIndex] = useState('');
22  const [updateValue, setUpdateValue] = useState('');
23 
24  const {
25    array,
26    length,
27    isEmpty,
28    first,
29    last,
30    push,
31    pop,
32    shift,
33    unshift,
34    insert,
35    remove,
36    update,
37    clear,
38    reset,
39    sort,
40    reverse,
41    filter,
42  } = useArrayState<string>({
43    initialValue: ['React', 'TypeScript', 'Next.js'],
44    onChange: (newArray) => {
45      console.log('Array changed:', newArray);
46    },
47  });
48 
49  const handleAddItem = () => {
50    if (inputValue.trim()) {
51      push(inputValue.trim());
52      setInputValue('');
53    }
54  };
55 
56  const handleUpdateItem = () => {
57    const index = parseInt(updateIndex);
58    if (!isNaN(index) && updateValue.trim()) {
59      update(index, updateValue.trim());
60      setUpdateIndex('');
61      setUpdateValue('');
62    }
63  };
64 
65  const handleInsertAtStart = () => {
66    if (inputValue.trim()) {
67      unshift(inputValue.trim());
68      setInputValue('');
69    }
70  };
71 
72  const handleRemoveItem = (index: number) => {
73    remove(index);
74  };
75 
76  const handleFilterLongItems = () => {
77    filter((item) => item.length <= 6);
78  };
79 
80  return (
81    <Card className="w-full max-w-2xl mx-auto">
82      <CardHeader>
83        <CardTitle>useArrayState</CardTitle>
84        <CardDescription>
85          A powerful hook for managing arrays as React state with built-in
86          manipulation methods.
87        </CardDescription>
88      </CardHeader>
89      <CardContent className="space-y-6">
90        {/* Array Display */}
91        <div>
92          <h3 className="text-sm font-medium mb-2">Current Array:</h3>
93          <div className="flex flex-wrap gap-2 min-h-[40px] p-3 border rounded-md bg-muted/20">
94            {array.map((item, index) => (
95              <Badge
96                key={index}
97                variant="secondary"
98                className="cursor-pointer hover:bg-destructive hover:text-destructive-foreground"
99                onClick={() => handleRemoveItem(index)}
100              >
101// … truncated