UPDATE: readme

ADD: concept of generating csv file

Author: Ap73MKa

QUICK_START.md

@@ -1,15 +1,21 @@
 # Quick Start
 
 1. Download [NodeJS](https://nodejs.org/en/download/)
-2. Start up main app:
+2. Install bun (optional)
+
+```bash
+npm i -g bun
+```
+
+3. Start up main app:
 
 ```bash
 cd main-app
 npm install
 npm run dev
 ```
 
-3. Start up react-redirect
+4. Start up react-redirect
 
 ```bash
 cd redirect-app

README.md

@@ -1,34 +1,31 @@
-# ShortyWebClient
-
-[![CodeFactor](https://www.codefactor.io/repository/github/bagger-steam/shortyreactclient/badge)](https://www.codefactor.io/repository/github/bagger-steam/shortyreactclient)
-![CI](https://github.com/Bagger-sTeam/ShortyReactClient/workflows/CI/badge.svg?)
+<h1 align="center">Shorty</h1>
+
+<p align="center">
+  <img alt="" src="https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white" />
+  <img alt="" src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB" />
+  <img alt="" src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white" />
+  <img alt="" src="https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white" />
+  <img alt="" src="https://img.shields.io/badge/Bun-%23000000.svg?style=for-the-badge&logo=bun&logoColor=white" />
+  <img alt="" src="https://img.shields.io/badge/-React%20Query-FF4154?style=for-the-badge&logo=react%20query&logoColor=white" />
+  <img alt="" src="https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white" />
+  <img alt="" src="https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white" />
+</p>
 
 ## Overview
 
-This is React client application for **[Shorty Api](https://github.com/Bagger-sTeam/ShortyRestApi)**
-
-## 💻 Tech Stack
+Shorty is a service for URL shortening, analytics, and short link management. With Shorty, you can easily create short links, track their statistics, and manage them all in one place.
 
-- [TypeScript](https://www.typescriptlang.org/)
-- [React](https://reactjs.org/)
-- [NextJS](https://nextjs.org/)
-- [Next Auth](https://next-auth.js.org/)
-- [Tailwind CSS](https://tailwindcss.com/)
-- [Docker](https://www.docker.com/)
+This repository is part of the overall Shorty project. To find out about the backend components of the site, look at **[Shorty Server](https://github.com/Bagger-sTeam/ShortyRestApi)**.
 
-## 💾 Installation
+## Installation
 
-1. [Quick install](QUICK_START.md)
+1. [Quick start](QUICK_START.md)
 2. Install by **docker-compose**
 
 ```bash
-docker-compose up
+docker compose up
 ```
 
-## 👇 Helpful resources
-
-- [ShortyApi](https://github.com/Bagger-sTeam/ShortyRestApi)
-
-## 🚑 Support
+## Support
 
 Please click the `star` button, if this tool was helpful to you.

RESOURCES.md

@@ -12,7 +12,7 @@ export const currentDomain = signal<DomainType>({
 export const subdomainStub = signal<SubdomainType>({
   value: 'Unselected',
   uid: uuidv4(),
-  domainUid: ''
+  domainUid: '',
 })
 
 export const currentSubdomain = signal<SubdomainType>(subdomainStub.value)

main-app/src/features/create-link-form/create-form-context.ts

@@ -0,0 +1,134 @@
+import { CalendarDaysIcon } from '@heroicons/react/24/outline'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { addDays, format } from 'date-fns'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import cn from '@/shared/lib/tailwind-merge'
+import { Button } from '@/shared/ui/button'
+import { Calendar } from '@/shared/ui/calendar'
+import { Form, FormControl, FormField, FormItem } from '@/shared/ui/form'
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/ui/popover'
+import { useToast } from '@/shared/ui/use-toast'
+
+const testData = [
+  {
+    redirectDate: new Date(),
+    os: 'Windows',
+    device: 'Mobile',
+    isUnique: true,
+  },
+  {
+    redirectDate: new Date(),
+    os: 'Windows',
+    device: 'Desktop',
+    isUnique: false,
+  },
+]
+
+const analyticsFormScheme = z.object({
+  date: z.object({
+    from: z.date(),
+    to: z.date(),
+  }),
+})
+
+export default function CsvGenerateForm() {
+  const { toast } = useToast()
+  const form = useForm<z.infer<typeof analyticsFormScheme>>({
+    resolver: zodResolver(analyticsFormScheme),
+    defaultValues: {
+      date: {
+        from: addDays(new Date(), -20),
+        to: new Date(),
+      },
+    },
+  })
+
+  const onSubmit = (values: z.infer<typeof analyticsFormScheme>) => {
+    console.log(values)
+    toast({
+      title: 'Values',
+      description: `from: ${values.date.from}\nto: ${values.date.to}`,
+    })
+    window.open(generateCsv())
+  }
+
+  // eslint-disable-next-line unicorn/consistent-function-scoping
+  const generateCsv = (): string => {
+    const headers = ['Index', 'RedirectDate', 'OS', 'Device', 'Unique']
+    let csvContent = 'data:text/csv;charset=utf-8,' + headers.join(';') + '\n'
+
+    testData.forEach((item, index) => {
+      const row = [
+        index + 1,
+        item.redirectDate.toISOString(), // Convert date to ISO string format
+        item.os,
+        item.device,
+        item.isUnique,
+      ].join(';')
+      csvContent += row + '\n'
+    })
+
+    console.log(csvContent)
+    return encodeURI(csvContent)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="flex gap-3">
+        <FormField
+          control={form.control}
+          name="date"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <div className="grid gap-2">
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button
+                        id="date"
+                        variant="outline"
+                        className={cn(
+                          'w-[300px] justify-start text-left font-normal',
+                          !field.value && 'text-muted-foreground'
+                        )}
+                      >
+                        <CalendarDaysIcon className="mr-2 size-4" />
+                        {field.value?.from ? (
+                          field.value.to ? (
+                            <>
+                              {format(field.value.from, 'LLL dd, y')} -{' '}
+                              {format(field.value.to, 'LLL dd, y')}
+                            </>
+                          ) : (
+                            format(field.value.from, 'LLL dd, y')
+                          )
+                        ) : (
+                          <span>Pick a date</span>
+                        )}
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0" align="start">
+                      <Calendar
+                        initialFocus
+                        mode="range"
+                        fromMonth={addDays(new Date(), -80)}
+                        toDate={new Date()}
+                        defaultMonth={field.value.from}
+                        selected={field.value}
+                        onSelect={field.onChange}
+                        numberOfMonths={2}
+                      />
+                    </PopoverContent>
+                  </Popover>
+                </div>
+              </FormControl>
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Download</Button>
+      </form>
+    </Form>
+  )
+}

main-app/src/features/date-picker-with-range/date-picker-with-range.tsx

@@ -15,11 +15,11 @@ import {
   useGetAnalyticsByLink,
 } from '@/entities/analytics'
 import { useGetCurrentRecord } from '@/entities/record'
-import DatePickerWithRange from '@/features/date-picker-with-range'
 import { Button } from '@/shared/ui/button'
 import { Tabs, TabsList, TabsTrigger } from '@/shared/ui/tabs'
 import { useToast } from '@/shared/ui/use-toast'
 
+import CsvGenerateForm from './csv-generate-form'
 import DashboardCard from './dashboard-card'
 import DeviceCard from './device-card'
 import ViewsCard from './views-card'
@@ -64,10 +64,7 @@ export default function Dashboard() {
             Reset
           </Button>
         </div>
-        <div className="flex gap-3">
-          <DatePickerWithRange />
-          <Button>Download</Button>
-        </div>
+        <CsvGenerateForm />
       </div>
       <Tabs
         value={period}