├── .eslintrc.json
├── styles
    └── globals.css
├── app
    ├── favicon.ico
    ├── api
    │   └── todo
    │   │   └── route.ts
    ├── layout.tsx
    ├── playground
    │   └── page.tsx
    └── page.tsx
├── postcss.config.js
├── next.config.js
├── components
    ├── SuspenseComponent.tsx
    ├── Counter.tsx
    ├── CompWithFetch.tsx
    ├── ErrorBoundary.tsx
    ├── VirtualizedList.tsx
    ├── ui
    │   ├── label.tsx
    │   ├── textarea.tsx
    │   ├── input.tsx
    │   ├── card.tsx
    │   ├── button.tsx
    │   ├── form.tsx
    │   └── dropdown-menu.tsx
    ├── UseCallbackExample.tsx
    ├── Column.tsx
    ├── SearchComponent.tsx
    ├── PostsComponent.tsx
    ├── UseMemoExample.tsx
    ├── Dashboard.tsx
    ├── TaskList.tsx
    ├── TaskItem.tsx
    └── CreateTaskForm.tsx
├── components.json
├── hooks
    ├── useDebounce.tsx
    ├── useFetch.tsx
    ├── useLocalStorage.tsx
    └── useWindowSize.ts
├── .gitignore
├── tailwind.config.ts
├── public
    ├── vercel.svg
    └── next.svg
├── README.md
├── __tests__
    ├── button.test.tsx
    └── counter.test.tsx
├── tsconfig.json
├── types
    └── types.ts
├── jest.config.ts
├── tailwind.config.js
├── dommyData.ts
├── package.json
├── lib
    └── utils.ts
└── context
    └── BoardContext
        └── BoardContext.tsx


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/betomoedano/Porter-Task-Manager/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   reactStrictMode: false,
4 | };
5 | 
6 | module.exports = nextConfig;
7 | 


--------------------------------------------------------------------------------
/components/SuspenseComponent.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { fetcher } from "@/lib/utils";
 3 | import useSWR from "swr";
 4 | 
 5 | export default function SuspenseComponent() {
 6 |   const { data } = useSWR("/api/todo", fetcher, { suspense: true });
 7 | 
 8 |   return <h1>{data.message}</h1>;
 9 | }
10 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": false
11 |   },
12 |   "aliases": {
13 |     "components": "@/components",
14 |     "utils": "@/lib/utils"
15 |   }
16 | }


--------------------------------------------------------------------------------
/hooks/useDebounce.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | export function useDebounce<T>(value: T, delay: number): T {
 4 |   const [debounceValue, setDebounceValue] = useState<T>(value);
 5 | 
 6 |   useEffect(() => {
 7 |     const handler = setTimeout(() => {
 8 |       setDebounceValue(value);
 9 |     }, delay);
10 | 
11 |     return () => {
12 |       clearTimeout(handler);
13 |     };
14 |   }, [value, delay]);
15 | 
16 |   return debounceValue;
17 | }
18 | 


--------------------------------------------------------------------------------
/components/Counter.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import { Button } from "./ui/button";
 3 | 
 4 | export function Counter() {
 5 |   const [count, setCount] = useState<number>(0);
 6 | 
 7 |   const increment = () => {
 8 |     setCount(count + 1);
 9 |   };
10 | 
11 |   return (
12 |     <div>
13 |       <h1 data-testid="count">Counter: {count}</h1>
14 |       <Button data-testid="increment-button" onClick={increment}>
15 |         Increment
16 |       </Button>
17 |     </div>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 


--------------------------------------------------------------------------------
/app/api/todo/route.ts:
--------------------------------------------------------------------------------
 1 | export async function GET(request: Request) {
 2 |   // validate user
 3 |   // auth
 4 |   console.log("This is running on the server");
 5 |   // Wait for one second
 6 | 
 7 |   await new Promise((resolve) => setTimeout(resolve, 3000));
 8 | 
 9 |   // throw new Error("error");
10 |   return Response.json({ message: "Success again" });
11 | }
12 | 
13 | export async function POST(request: Request) {
14 |   const body = await request.json();
15 |   console.log(body);
16 |   return Response.json({ message: "Success POST", body });
17 | }
18 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from 'tailwindcss'
 2 | 
 3 | const config: Config = {
 4 |   content: [
 5 |     './pages/**/*.{js,ts,jsx,tsx,mdx}',
 6 |     './components/**/*.{js,ts,jsx,tsx,mdx}',
 7 |     './app/**/*.{js,ts,jsx,tsx,mdx}',
 8 |   ],
 9 |   theme: {
10 |     extend: {
11 |       backgroundImage: {
12 |         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
13 |         'gradient-conic':
14 |           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
15 |       },
16 |     },
17 |   },
18 |   plugins: [],
19 | }
20 | export default config
21 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { BoardProvider } from "@/context/BoardContext/BoardContext";
 2 | import "../styles/globals.css";
 3 | import { Analytics } from "@vercel/analytics/react";
 4 | 
 5 | export default function RootLayout({
 6 |   children,
 7 | }: {
 8 |   children: React.ReactNode;
 9 | }) {
10 |   return (
11 |     <html lang="en">
12 |       <body className={`h-screen w-full p-6 lg:p-16 bg-slate-50`}>
13 |         <div className="md:max-w-screen-xl mx-auto">
14 |           <BoardProvider>{children}</BoardProvider>
15 |         </div>
16 |         <Analytics />
17 |       </body>
18 |     </html>
19 |   );
20 | }
21 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/components/CompWithFetch.tsx:
--------------------------------------------------------------------------------
 1 | import { getReq } from "@/lib/utils";
 2 | 
 3 | export default async function CompWithFetch() {
 4 |   const data = await getReq();
 5 |   console.log("Server", data);
 6 |   return <h1>{JSON.stringify(data)}</h1>;
 7 | }
 8 | 
 9 | // "use client";
10 | // import { fetcher } from "@/lib/utils";
11 | // import useSWR from "swr";
12 | 
13 | // export default function CompWithFetch() {
14 | //   const { data, error, isLoading } = useSWR("/api/todo", fetcher);
15 | 
16 | //   if (error) return <h1>Error</h1>;
17 | //   if (isLoading) return <h1>Loading...</h1>;
18 | //   return <h1>{data.message}</h1>;
19 | // }
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## About
 2 | 
 3 | Live Demo! 👉🏼 [porter-demo.vercel.app](https://porter-demo.vercel.app/)
 4 | 
 5 | Lear to build this app at [codewithbeto.dev](https://codewithbeto.dev)
 6 | 
 7 | Design provided by [Eco Studios](https://www.ecostudios.dev)
 8 | 
 9 | ## Getting Started
10 | 
11 | Install dependencies:
12 | 
13 | ```bash
14 | npm install
15 | ```
16 | 
17 | Then run the server:
18 | 
19 | ```bash
20 | npm run dev
21 | ```
22 | 
23 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
24 | 
25 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
26 | 


--------------------------------------------------------------------------------
/__tests__/button.test.tsx:
--------------------------------------------------------------------------------
 1 | import "@testing-library/jest-dom";
 2 | import { render, screen } from "@testing-library/react";
 3 | import { Button } from "@/components/ui/button";
 4 | 
 5 | describe("Button Component", () => {
 6 |   test("renders with correct text", () => {
 7 |     render(<Button>Click Me!</Button>);
 8 |     const buttonElement = screen.getByText("Click Me!");
 9 |     expect(buttonElement).toBeInTheDocument();
10 |   });
11 | 
12 |   test("renders correctly", () => {
13 |     render(<Button>a</Button>);
14 |     const buttonElement = screen.getByTestId("button");
15 |     expect(buttonElement).toBeInTheDocument();
16 |   });
17 | });
18 | 


--------------------------------------------------------------------------------
/components/ErrorBoundary.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { Component, ReactNode } from "react";
 3 | 
 4 | interface ErrorBoundaryState {
 5 |   hasError: boolean;
 6 | }
 7 | 
 8 | export class ErrorBoundary extends Component<
 9 |   React.PropsWithChildren<{}>,
10 |   ErrorBoundaryState
11 | > {
12 |   constructor(props: React.PropsWithChildren) {
13 |     super(props);
14 |     this.state = { hasError: false };
15 |   }
16 | 
17 |   static getDerivedStateFromError(error: Error): ErrorBoundaryState {
18 |     return { hasError: true };
19 |   }
20 | 
21 |   render(): ReactNode {
22 |     if (this.state.hasError) {
23 |       return <h2>Something went wrong</h2>;
24 |     }
25 | 
26 |     return this.props.children;
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/__tests__/counter.test.tsx:
--------------------------------------------------------------------------------
 1 | import { Counter } from "@/components/Counter";
 2 | import { fireEvent, render } from "@testing-library/react";
 3 | 
 4 | describe("Counter Component", () => {
 5 |   test("Initial count is 0", () => {
 6 |     const { getByTestId } = render(<Counter />);
 7 |     const countElement = getByTestId("count");
 8 |     expect(countElement.textContent).toBe("Counter: 0");
 9 |   });
10 | 
11 |   test("Increments count by 1 when increment button is clicked", () => {
12 |     const { getByTestId } = render(<Counter />);
13 |     const incrementButton = getByTestId("increment-button");
14 |     fireEvent.click(incrementButton);
15 |     const countElement = getByTestId("count");
16 |     expect(countElement.textContent).toBe("Counter: 1");
17 |   });
18 | });
19 | 


--------------------------------------------------------------------------------
/components/VirtualizedList.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { Product } from "@/lib/utils";
 3 | import * as React from "react";
 4 | import { List, ListRowProps } from "react-virtualized";
 5 | 
 6 | export default function VirtualizedList({
 7 |   products,
 8 | }: {
 9 |   products: Product[];
10 | }): JSX.Element {
11 |   function rowRenderer({ key, index, style }: ListRowProps) {
12 |     return (
13 |       <div key={key} style={style}>
14 |         {products[index].name}
15 |       </div>
16 |     );
17 |   }
18 | 
19 |   return (
20 |     <List
21 |       width={300}
22 |       height={300}
23 |       rowCount={products.length}
24 |       rowHeight={20}
25 |       containerStyle={{ border: "1px solid red", margin: 10 }}
26 |       rowRenderer={rowRenderer}
27 |       overscanRowCount={20}
28 |     />
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/types/types.ts:
--------------------------------------------------------------------------------
 1 | import { DraggableLocation } from "react-beautiful-dnd";
 2 | 
 3 | export type Task = {
 4 |   id: string;
 5 |   task: string;
 6 |   tag: string;
 7 |   date: string;
 8 |   description: string;
 9 | };
10 | 
11 | export type TaskMap = {
12 |   [key: string]: Task[];
13 | };
14 | 
15 | export type Board = {
16 |   columns: TaskMap;
17 |   ordered: string[];
18 | };
19 | 
20 | export type BoardAction =
21 |   | { type: "SET_TASKS"; payload: Board }
22 |   | { type: "ADD_TASK"; payload: Task }
23 |   | { type: "REMOVE_TASK"; payload: RemoveTaskPayload }
24 |   | { type: "MOVE_TASK"; payload: OnDragPayload }
25 |   | { type: "MOVE_COLUMN"; payload: OnDragPayload };
26 | 
27 | type OnDragPayload = {
28 |   source: DraggableLocation;
29 |   destination: DraggableLocation;
30 | };
31 | 
32 | type RemoveTaskPayload = {
33 |   id: string;
34 | };
35 | 


--------------------------------------------------------------------------------
/hooks/useFetch.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | interface FetchState<T> {
 4 |   data: T | null;
 5 |   loading: boolean;
 6 |   error: Error | null;
 7 | }
 8 | 
 9 | export function useFetch<T>(url: string, options?: RequestInit): FetchState<T> {
10 |   const [state, setState] = useState<FetchState<T>>({
11 |     data: null,
12 |     loading: true,
13 |     error: null,
14 |   });
15 | 
16 |   useEffect(() => {
17 |     const fetchData = async () => {
18 |       try {
19 |         const response = await fetch(url, options);
20 |         const data: T = await response.json();
21 |         setState({ data, loading: false, error: null });
22 |       } catch (error) {
23 |         setState({ data: null, loading: false, error: error as Error });
24 |       }
25 |     };
26 | 
27 |     fetchData();
28 |   }, [url, options]);
29 | 
30 |   return state;
31 | }
32 | 


--------------------------------------------------------------------------------
/jest.config.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * For a detailed explanation regarding each configuration property, visit:
 3 |  * https://jestjs.io/docs/configuration
 4 |  */
 5 | 
 6 | import type { Config } from "jest";
 7 | import nextJest from "next/jest";
 8 | 
 9 | // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
10 | const createJestConfig = nextJest({
11 |   dir: "./",
12 | });
13 | 
14 | const config: Config = {
15 |   // Automatically clear mock calls, instances, contexts and results before every test
16 |   clearMocks: true,
17 | 
18 |   // Indicates which provider should be used to instrument code for coverage
19 |   coverageProvider: "v8",
20 |   testEnvironment: "jsdom",
21 | };
22 | 
23 | // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
24 | export default createJestConfig(config);
25 | 


--------------------------------------------------------------------------------
/hooks/useLocalStorage.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | 
 3 | function useLocalStorage<T>(
 4 |   key: string,
 5 |   initialValue: T
 6 | ): [T, (value: T) => void] {
 7 |   const [storedValue, setStoredValue] = useState<T>(() => {
 8 |     try {
 9 |       const item = window.localStorage.getItem(key);
10 |       return item ? JSON.parse(item) : initialValue;
11 |     } catch (error) {
12 |       console.log(error);
13 |       return initialValue;
14 |     }
15 |   });
16 | 
17 |   const setValue = (value: T) => {
18 |     try {
19 |       const valueToStore =
20 |         value instanceof Function ? value(storedValue) : value;
21 |       setStoredValue(valueToStore);
22 |       window.localStorage.setItem(key, JSON.stringify(valueToStore));
23 |     } catch (error) {
24 |       console.log(error);
25 |     }
26 |   };
27 | 
28 |   return [storedValue, setValue];
29 | }
30 | 
31 | export default useLocalStorage;
32 | 


--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface TextareaProps
 6 |   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 7 | 
 8 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 9 |   ({ className, ...props }, ref) => {
10 |     return (
11 |       <textarea
12 |         className={cn(
13 |           "flex min-h-[60px] w-full rounded-md border border-slate-200 bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
14 |           className
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     )
20 |   }
21 | )
22 | Textarea.displayName = "Textarea"
23 | 
24 | export { Textarea }
25 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-9 w-full rounded-md border border-slate-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     )
21 |   }
22 | )
23 | Input.displayName = "Input"
24 | 
25 | export { Input }
26 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: ["class"],
 4 |   content: [
 5 |     "./pages/**/*.{ts,tsx}",
 6 |     "./components/**/*.{ts,tsx}",
 7 |     "./app/**/*.{ts,tsx}",
 8 |     "./src/**/*.{ts,tsx}",
 9 |   ],
10 |   theme: {
11 |     container: {
12 |       center: true,
13 |       padding: "2rem",
14 |       screens: {
15 |         "2xl": "1400px",
16 |       },
17 |     },
18 |     extend: {
19 |       keyframes: {
20 |         "accordion-down": {
21 |           from: { height: 0 },
22 |           to: { height: "var(--radix-accordion-content-height)" },
23 |         },
24 |         "accordion-up": {
25 |           from: { height: "var(--radix-accordion-content-height)" },
26 |           to: { height: 0 },
27 |         },
28 |       },
29 |       animation: {
30 |         "accordion-down": "accordion-down 0.2s ease-out",
31 |         "accordion-up": "accordion-up 0.2s ease-out",
32 |       },
33 |     },
34 |   },
35 |   plugins: [require("tailwindcss-animate")],
36 | };
37 | 


--------------------------------------------------------------------------------
/components/UseCallbackExample.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { useCallback, useState, memo } from "react";
 3 | import { Button } from "./ui/button";
 4 | 
 5 | export default function UseCallbackExample(): JSX.Element {
 6 |   const [count, setCount] = useState<number>(0);
 7 | 
 8 |   const increment = useCallback(() => {
 9 |     setCount((prev) => prev + 1);
10 |   }, []);
11 | 
12 |   return (
13 |     <div>
14 |       <h1>useCallback example</h1>
15 |       <h1>{count}</h1>
16 |       <Other count={count} />
17 |       <CounterButton onIncrement={increment} />
18 |     </div>
19 |   );
20 | }
21 | 
22 | const Other = memo(function Other({ count }: { count: number }) {
23 |   console.log("Other component rendered");
24 |   // fetching
25 |   // filtering
26 |   // sorting
27 |   return <p>Other component {count}</p>;
28 | });
29 | 
30 | const CounterButton = memo(function CounterButton({
31 |   onIncrement,
32 | }: {
33 |   onIncrement: () => void;
34 | }): JSX.Element {
35 |   console.log("CounterButton rendered");
36 |   return <Button onClick={onIncrement}>Increment</Button>;
37 | });
38 | 


--------------------------------------------------------------------------------
/app/playground/page.tsx:
--------------------------------------------------------------------------------
 1 | import { ErrorBoundary } from "@/components/ErrorBoundary";
 2 | import PostsComponent from "@/components/PostsComponent";
 3 | import SearchComponent from "@/components/SearchComponent";
 4 | import SuspenseComponent from "@/components/SuspenseComponent";
 5 | import UseCallbackExample from "@/components/UseCallbackExample";
 6 | import UseMemoExample from "@/components/UseMemoExample";
 7 | import VirtualizedList from "@/components/VirtualizedList";
 8 | import { createProducts } from "@/lib/utils";
 9 | import { Suspense } from "react";
10 | 
11 | export default function Playground() {
12 |   return (
13 |     <main className="">
14 |       <h1 className="text-3xl font-bold">Playground</h1>
15 |       {/* <SearchComponent /> */}
16 |       {/* <PostsComponent />
17 |       <ErrorBoundary>
18 |         <Suspense fallback={<h1>Loading with suspense</h1>}>
19 |           <SuspenseComponent />
20 |         </Suspense>
21 |       </ErrorBoundary> */}
22 |       {/* <UseMemoExample /> */}
23 |       {/* <UseCallbackExample /> */}
24 |       <VirtualizedList products={createProducts()} />
25 |     </main>
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/components/Column.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This component contains a Column e.g. Todo, In Progress, Complete, etc.
 3 |  */
 4 | 
 5 | import { Task } from "@/types/types";
 6 | import {
 7 |   Draggable,
 8 |   DraggableProvided,
 9 |   DraggableStateSnapshot,
10 | } from "react-beautiful-dnd";
11 | import TaskList from "./TaskList";
12 | 
13 | type ColumnProps = {
14 |   listTitle: string;
15 |   listOfTasks: Task[];
16 |   index: number;
17 | };
18 | 
19 | export default function Column({ index, listOfTasks, listTitle }: ColumnProps) {
20 |   return (
21 |     <Draggable draggableId={listTitle} index={index}>
22 |       {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
23 |         <div
24 |           ref={provided.innerRef}
25 |           {...provided.draggableProps}
26 |           {...provided.dragHandleProps}
27 |         >
28 |           <TaskList
29 |             listId={listTitle}
30 |             listType="TASK"
31 |             listOfTasks={listOfTasks}
32 |             isDropDisabled={false}
33 |             listTitle={listTitle}
34 |           />
35 |         </div>
36 |       )}
37 |     </Draggable>
38 |   );
39 | }
40 | 


--------------------------------------------------------------------------------
/hooks/useWindowSize.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | export default function useWindowSize() {
 4 |   const [windowSize, setWindowSize] = useState<{
 5 |     width: number | undefined;
 6 |     height: number | undefined;
 7 |   }>({
 8 |     width: undefined,
 9 |     height: undefined,
10 |   });
11 | 
12 |   useEffect(() => {
13 |     // Handler to call on window resize
14 |     function handleResize() {
15 |       // Set window width/height to state
16 |       setWindowSize({
17 |         width: window.innerWidth,
18 |         height: window.innerHeight,
19 |       });
20 |     }
21 | 
22 |     // Add event listener
23 |     window.addEventListener("resize", handleResize);
24 | 
25 |     // Call handler right away so state gets updated with initial window size
26 |     handleResize();
27 | 
28 |     // Remove event listener on cleanup
29 |     return () => window.removeEventListener("resize", handleResize);
30 |   }, []); // Empty array ensures that effect is only run on mount
31 | 
32 |   return {
33 |     windowSize,
34 |     isMobile: typeof windowSize?.width === "number" && windowSize?.width < 768,
35 |     isDesktop:
36 |       typeof windowSize?.width === "number" && windowSize?.width >= 768,
37 |   };
38 | }
39 | 


--------------------------------------------------------------------------------
/components/SearchComponent.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { useDebounce } from "@/hooks/useDebounce";
 3 | import { ChangeEvent, Suspense, lazy, useEffect, useState } from "react";
 4 | const LazyPostsComponent = lazy(() => import("./PostsComponent"));
 5 | 
 6 | export default function SearchComponent(): JSX.Element {
 7 |   const [searchTerm, setSearchTerm] = useState<string>("");
 8 |   const debouncedSearchTerm = useDebounce<string>(searchTerm, 1000);
 9 | 
10 |   const hanleSearch = (searchValue: string) => {
11 |     console.log("Searching for: ", searchValue);
12 |   };
13 | 
14 |   useEffect(() => {
15 |     if (debouncedSearchTerm) {
16 |       hanleSearch(debouncedSearchTerm);
17 |     }
18 |   }, [debouncedSearchTerm]);
19 | 
20 |   return (
21 |     <div>
22 |       <h1>Debounce example</h1>
23 |       <input
24 |         type="text"
25 |         placeholder="Search something"
26 |         className="border border-gray-500 px-3 py-1 rounded"
27 |         value={searchTerm}
28 |         onChange={(e: ChangeEvent<HTMLInputElement>) =>
29 |           setSearchTerm(e.target.value)
30 |         }
31 |       />
32 |       <Suspense fallback={<h1>Lazy loading...</h1>}>
33 |         <LazyPostsComponent />
34 |       </Suspense>
35 |     </div>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/components/PostsComponent.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useFetch } from "@/hooks/useFetch";
 4 | import useLocalStorage from "@/hooks/useLocalStorage";
 5 | import { Button } from "./ui/button";
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | interface Post {
 9 |   userId: number;
10 |   id: number;
11 |   title: string;
12 |   body: string;
13 | }
14 | 
15 | export default function PostsComponent(): JSX.Element {
16 |   const [theme, setTheme] = useLocalStorage<string>("@theme", "light");
17 |   const { data, error, loading } = useFetch<Post[]>(
18 |     "https://jsonplaceholder.typicode.com/posts"
19 |   );
20 |   const style = theme === "dark" ? "bg-black text-white" : "bg-white";
21 | 
22 |   if (loading) return <div>Loading...</div>;
23 |   if (error) return <div>Error...</div>;
24 |   return (
25 |     <ul>
26 |       <Button
27 |         onClick={() => {
28 |           setTheme(theme === "light" ? "dark" : "light");
29 |         }}
30 |       >
31 |         Toggle Theme
32 |       </Button>
33 |       <li className="font-bold ">Theme value: {theme}</li>
34 |       <li className="font-bold ">Posts fetched using useFetch advanced hook</li>
35 |       {data &&
36 |         data.slice(0, 5).map((post) => (
37 |           <li
38 |             className={cn("text-sm border border-gray-500 p-1", style)}
39 |             key={post.id}
40 |           >
41 |             {post.title}
42 |           </li>
43 |         ))}
44 |     </ul>
45 |   );
46 | }
47 | 


--------------------------------------------------------------------------------
/dommyData.ts:
--------------------------------------------------------------------------------
 1 | import { Task, TaskMap } from "./types/types";
 2 | 
 3 | export const todos: Task[] = [
 4 |   {
 5 |     id: "1",
 6 |     task: "Learn React",
 7 |     description: "Description with some more text here",
 8 |     tag: "Low",
 9 |     date: "Sun Oct 22 2023",
10 |   },
11 |   {
12 |     id: "2",
13 |     task: "Build a To-Do App",
14 |     description: "Description with some more text here",
15 |     tag: "Low",
16 |     date: "Sun Oct 22 2023",
17 |   },
18 |   {
19 |     id: "3",
20 |     task: "Review CSS Modules",
21 |     description: "Description with some more text here",
22 |     tag: "Low",
23 |     date: "Sun Oct 22 2023",
24 |   },
25 | ];
26 | 
27 | export const initialState: TaskMap = {
28 |   Pending: [
29 |     {
30 |       id: "1",
31 |       task: "Learn React",
32 |       description: "Description with some more text here",
33 |       tag: "Low",
34 |       date: "Sun Oct 22 2023",
35 |     },
36 |     {
37 |       id: "2",
38 |       task: "Build a To-Do App",
39 |       description: "Description with some more text here",
40 |       tag: "Low",
41 |       date: "Sun Oct 22 2023",
42 |     },
43 |     {
44 |       id: "3",
45 |       task: "Review CSS Modules",
46 |       description: "Description with some more text here",
47 |       tag: "Low",
48 |       date: "Sun Oct 22 2023",
49 |     },
50 |   ],
51 |   Ongoing: [],
52 |   Done: [
53 |     {
54 |       id: "4",
55 |       task: "Get a Job",
56 |       description: "Description with some more text here",
57 |       tag: "High",
58 |       date: "2023-10-23",
59 |     },
60 |   ],
61 | };
62 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "porter-task-manager",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint",
10 |     "test": "jest"
11 |   },
12 |   "dependencies": {
13 |     "@hookform/resolvers": "^3.3.2",
14 |     "@radix-ui/react-dropdown-menu": "^2.0.6",
15 |     "@radix-ui/react-icons": "^1.3.0",
16 |     "@radix-ui/react-label": "^2.0.2",
17 |     "@radix-ui/react-slot": "^1.0.2",
18 |     "@vercel/analytics": "^1.1.1",
19 |     "class-variance-authority": "^0.7.0",
20 |     "clsx": "^2.0.0",
21 |     "next": "13.5.6",
22 |     "react": "^18",
23 |     "react-beautiful-dnd": "^13.1.1",
24 |     "react-dom": "^18",
25 |     "react-hook-form": "^7.47.0",
26 |     "react-virtualized": "^9.22.5",
27 |     "swr": "^2.2.4",
28 |     "tailwind-merge": "^1.14.0",
29 |     "tailwindcss-animate": "^1.0.7",
30 |     "zod": "^3.22.4"
31 |   },
32 |   "devDependencies": {
33 |     "@testing-library/jest-dom": "^6.1.5",
34 |     "@testing-library/react": "^14.1.2",
35 |     "@types/jest": "^29.5.11",
36 |     "@types/node": "^20",
37 |     "@types/react": "^18",
38 |     "@types/react-beautiful-dnd": "^13.1.6",
39 |     "@types/react-dom": "^18",
40 |     "@types/react-virtualized": "^9.21.29",
41 |     "autoprefixer": "^10",
42 |     "eslint": "^8",
43 |     "eslint-config-next": "13.5.6",
44 |     "jest": "^29.7.0",
45 |     "jest-environment-jsdom": "^29.7.0",
46 |     "postcss": "^8",
47 |     "tailwindcss": "^3",
48 |     "ts-node": "^10.9.2",
49 |     "typescript": "^5"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/components/UseMemoExample.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { Product, createProducts, filterProducts } from "@/lib/utils";
 3 | import { fchown } from "fs";
 4 | import { ChangeEvent, useMemo, useState } from "react";
 5 | import { Button } from "./ui/button";
 6 | 
 7 | const products = createProducts();
 8 | 
 9 | export default function UseMemoExample(): JSX.Element {
10 |   const [dummyVariable, setDummyVariable] = useState<boolean>(false);
11 |   const [filterBy, setFilterBy] = useState<"all" | "expensive" | "cheap">(
12 |     "all"
13 |   );
14 | 
15 |   return (
16 |     <div>
17 |       <Button onClick={() => setDummyVariable(!dummyVariable)}>
18 |         Toggle Dummy
19 |       </Button>
20 |       <select
21 |         onChange={(e: ChangeEvent<HTMLSelectElement>) => {
22 |           setFilterBy(e.target.value as "all" | "expensive" | "cheap");
23 |         }}
24 |       >
25 |         <option value={"all"}>All</option>
26 |         <option value={"expensive"}>Expensive</option>
27 |         <option value={"cheap"}>Cheap</option>
28 |       </select>
29 |       <h1>useMemo example</h1>
30 |       <ProductsList products={products} filterBy={filterBy} />
31 |     </div>
32 |   );
33 | }
34 | 
35 | function ProductsList({
36 |   products,
37 |   filterBy,
38 | }: {
39 |   products: Product[];
40 |   filterBy: "all" | "expensive" | "cheap";
41 | }): JSX.Element {
42 |   const visibleProducts = useMemo(
43 |     () => filterProducts(products, filterBy),
44 |     [filterBy, products]
45 |   );
46 |   return (
47 |     <ul>
48 |       <p>items: {visibleProducts.length}</p>
49 |       {visibleProducts.map((product) => (
50 |         <li key={product.id}>
51 |           {product.id} - ${product.price}{" "}
52 |           {product.isExpensive ? "Expensive" : "Cheap"}
53 |         </li>
54 |       ))}
55 |     </ul>
56 |   );
57 | }
58 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { type ClassValue, clsx } from "clsx";
 2 | import { twMerge } from "tailwind-merge";
 3 | 
 4 | export function cn(...inputs: ClassValue[]) {
 5 |   return twMerge(clsx(inputs));
 6 | }
 7 | 
 8 | export async function fetcher(url: string): Promise<any> {
 9 |   const response = await fetch(url);
10 |   if (!response.ok) {
11 |     throw new Error("Error");
12 |   }
13 |   return response.json();
14 | }
15 | 
16 | export async function getReq() {
17 |   const response = await fetch("http://localhost:3000/api/todo", {
18 |     // body: JSON.stringify({
19 |     //   user: "beto",
20 |     //   pass: "xxx",
21 |     // }),
22 |     // method: "POST",
23 |     headers: {
24 |       "Content-Type": "application/json",
25 |       Authorization: `Bearer ${"beto"}`,
26 |     },
27 |   });
28 |   return await response.json();
29 | }
30 | 
31 | export interface Product {
32 |   id: number;
33 |   name: string;
34 |   isExpensive: boolean;
35 |   price: number;
36 | }
37 | 
38 | export function createProducts(): Product[] {
39 |   console.log("Creating Products");
40 |   const products: Product[] = [];
41 | 
42 |   for (let i = 0; i < 10000; i++) {
43 |     const price = Math.floor(Math.random() * 1000);
44 |     products.push({
45 |       id: i + 1,
46 |       price: price,
47 |       isExpensive: price > 500 ? true : false,
48 |       name: `${i + 1} Product Name`,
49 |     });
50 |   }
51 | 
52 |   return products;
53 | }
54 | 
55 | export function filterProducts(
56 |   products: Product[],
57 |   filterBy: "all" | "expensive" | "cheap"
58 | ): Product[] {
59 |   console.log("Filtering Products");
60 |   return products.filter((product) => {
61 |     if (filterBy === "all") {
62 |       return true;
63 |     } else if (filterBy === "expensive") {
64 |       return product.isExpensive;
65 |     } else if (filterBy === "cheap") {
66 |       return !product.isExpensive;
67 |     }
68 |   });
69 | }
70 | 


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-xl border border-slate-200 bg-white text-slate-950 shadow dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn("font-semibold leading-none tracking-tight", className)}
39 |     {...props}
40 |   />
41 | ))
42 | CardTitle.displayName = "CardTitle"
43 | 
44 | const CardDescription = React.forwardRef<
45 |   HTMLParagraphElement,
46 |   React.HTMLAttributes<HTMLParagraphElement>
47 | >(({ className, ...props }, ref) => (
48 |   <p
49 |     ref={ref}
50 |     className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
51 |     {...props}
52 |   />
53 | ))
54 | CardDescription.displayName = "CardDescription"
55 | 
56 | const CardContent = React.forwardRef<
57 |   HTMLDivElement,
58 |   React.HTMLAttributes<HTMLDivElement>
59 | >(({ className, ...props }, ref) => (
60 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
61 | ))
62 | CardContent.displayName = "CardContent"
63 | 
64 | const CardFooter = React.forwardRef<
65 |   HTMLDivElement,
66 |   React.HTMLAttributes<HTMLDivElement>
67 | >(({ className, ...props }, ref) => (
68 |   <div
69 |     ref={ref}
70 |     className={cn("flex items-center p-6 pt-0", className)}
71 |     {...props}
72 |   />
73 | ))
74 | CardFooter.displayName = "CardFooter"
75 | 
76 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
77 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import CompWithFetch from "@/components/CompWithFetch";
 2 | import Dashboard from "@/components/Dashboard";
 3 | import { Button } from "@/components/ui/button";
 4 | import { GitHubLogoIcon, PlusIcon } from "@radix-ui/react-icons";
 5 | 
 6 | export default function Home() {
 7 |   return (
 8 |     <main className="">
 9 |       <div className="flex items-center justify-between mb-6">
10 |         <h1 className="text-3xl font-bold">
11 |           Porter - Lightweight Task Manager
12 |         </h1>
13 |         <div className="flex items-center gap-3">
14 |           <Button asChild size={"icon"}>
15 |             <a href="https://github.com/betomoedano/Porter-Task-Manager.git">
16 |               <GitHubLogoIcon />
17 |             </a>
18 |           </Button>
19 |           {/* <Button disabled>
20 |             Column <PlusIcon className="ml-1" />
21 |           </Button> */}
22 |         </div>
23 |       </div>
24 |       <p className="mb-3">
25 |         Want to build this app yourself? Head over to{" "}
26 |         <a className="text-blue-500" href="https://codewithbeto.dev">
27 |           codewithbeto.dev
28 |         </a>{" "}
29 |         and check out our React with TypeScript course. <br />
30 |         Oh, and grab our Early Bird deal while youre at it! 🐤
31 |       </p>
32 |       <Dashboard />
33 |       <div className="my-3 min-w-fit flex flex-col items-end">
34 |         <h3 className="hidden lg:flex font-bold mb-2">Shortcuts</h3>
35 |         <div className="hidden lg:flex items-center gap-1 text-sm font-medium ">
36 |           <span className="mr-3">- New Task</span>
37 |           <kbd className="pointer-events-none select-none  rounded border px-1 leading-none text-white text-xl bg-slate-950 border-slate-950">
38 |             ⌘
39 |           </kbd>
40 |           <kbd className="pointer-events-none select-none  rounded border px-1.5 text-white bg-slate-950 border-slate-950">
41 |             K
42 |           </kbd>
43 |         </div>
44 |         <div className="hidden lg:flex items-center gap-1 text-sm font-medium mt-1">
45 |           <span className="mr-3">- Close Task Form</span>
46 |           <kbd className="pointer-events-none select-none  rounded border px-1.5 text-white bg-slate-950 border-slate-950">
47 |             Esc
48 |           </kbd>
49 |         </div>
50 |       </div>
51 |     </main>
52 |   );
53 | }
54 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Slot } from "@radix-ui/react-slot";
 3 | import { cva, type VariantProps } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-slate-300",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-slate-900 text-slate-50 shadow hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
14 |         destructive:
15 |           "bg-red-500 text-slate-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90",
16 |         outline:
17 |           "border border-slate-200 bg-transparent shadow-sm hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:hover:bg-slate-800 dark:hover:text-slate-50",
18 |         secondary:
19 |           "bg-slate-100 text-slate-900 shadow-sm hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
20 |         ghost:
21 |           "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
22 |         link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50",
23 |       },
24 |       size: {
25 |         default: "h-9 px-4 py-2",
26 |         sm: "h-8 rounded-md px-3 text-xs",
27 |         lg: "h-10 rounded-md px-8",
28 |         icon: "h-9 w-9",
29 |       },
30 |     },
31 |     defaultVariants: {
32 |       variant: "default",
33 |       size: "default",
34 |     },
35 |   }
36 | );
37 | 
38 | export interface ButtonProps
39 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
40 |     VariantProps<typeof buttonVariants> {
41 |   asChild?: boolean;
42 | }
43 | 
44 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
45 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
46 |     const Comp = asChild ? Slot : "button";
47 |     return (
48 |       <Comp
49 |         data-testid="button"
50 |         className={cn(buttonVariants({ variant, size, className }))}
51 |         ref={ref}
52 |         {...props}
53 |       />
54 |     );
55 |   }
56 | );
57 | Button.displayName = "Button";
58 | 
59 | export { Button, buttonVariants };
60 | 


--------------------------------------------------------------------------------
/components/Dashboard.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { useCallback } from "react";
 3 | import {
 4 |   DragDropContext,
 5 |   Droppable,
 6 |   DropResult,
 7 |   DraggableLocation,
 8 | } from "react-beautiful-dnd";
 9 | import Column from "./Column";
10 | import { useBoard } from "@/context/BoardContext/BoardContext";
11 | import useWindowSize from "@/hooks/useWindowSize";
12 | 
13 | export default function Dashboard() {
14 |   const { boardState, dispatch } = useBoard();
15 |   const { isMobile } = useWindowSize();
16 | 
17 |   // using useCallback is optional
18 |   const onBeforeCapture = useCallback(() => {
19 |     /*...*/
20 |   }, []);
21 |   const onBeforeDragStart = useCallback(() => {
22 |     /*...*/
23 |   }, []);
24 |   const onDragStart = useCallback(() => {
25 |     /*...*/
26 |   }, []);
27 |   const onDragUpdate = useCallback(() => {
28 |     /*...*/
29 |   }, []);
30 |   const onDragEnd = useCallback(
31 |     (result: DropResult) => {
32 |       // console.log(result);
33 |       if (!result.destination) return; // dropped nowhere
34 | 
35 |       const source: DraggableLocation = result.source;
36 |       const destination: DraggableLocation = result.destination;
37 | 
38 |       // Reordering column
39 |       if (result.type === "COLUMN") {
40 |         dispatch({ type: "MOVE_COLUMN", payload: { source, destination } });
41 |         return;
42 |       }
43 |       // Reordering or moving tasks
44 |       if (result.type === "TASK") {
45 |         dispatch({ type: "MOVE_TASK", payload: { source, destination } });
46 |       }
47 |     },
48 |     [dispatch]
49 |   );
50 | 
51 |   return (
52 |     <DragDropContext
53 |       onBeforeCapture={onBeforeCapture}
54 |       onBeforeDragStart={onBeforeDragStart}
55 |       onDragStart={onDragStart}
56 |       onDragUpdate={onDragUpdate}
57 |       onDragEnd={onDragEnd}
58 |     >
59 |       <Droppable
60 |         droppableId="dashboard"
61 |         type="COLUMN"
62 |         direction={isMobile ? "vertical" : "horizontal"}
63 |       >
64 |         {(provided, snapshot) => (
65 |           <ul
66 |             className="grid md:grid-cols-3 gap-3"
67 |             ref={provided.innerRef}
68 |             {...provided.droppableProps}
69 |           >
70 |             {boardState.ordered.map((key, index) => (
71 |               <Column
72 |                 key={key}
73 |                 index={index}
74 |                 listTitle={key}
75 |                 listOfTasks={boardState.columns[key]}
76 |               />
77 |             ))}
78 |           </ul>
79 |         )}
80 |       </Droppable>
81 |     </DragDropContext>
82 |   );
83 | }
84 | 


--------------------------------------------------------------------------------
/components/TaskList.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import { Task } from "@/types/types";
  3 | import {
  4 |   Draggable,
  5 |   DraggableProvided,
  6 |   DraggableStateSnapshot,
  7 |   Droppable,
  8 |   DroppableProvided,
  9 |   DroppableStateSnapshot,
 10 | } from "react-beautiful-dnd";
 11 | import { Card, CardContent, CardHeader } from "./ui/card";
 12 | import TaskItem from "./TaskItem";
 13 | import { Button } from "./ui/button";
 14 | import { PlusIcon } from "@radix-ui/react-icons";
 15 | import CreateTaskForm from "./CreateTaskForm";
 16 | import { cn } from "@/lib/utils";
 17 | 
 18 | type TaskListProps = {
 19 |   listTitle?: string;
 20 |   listId?: string;
 21 |   listType?: string;
 22 |   listOfTasks: Task[];
 23 |   isDropDisabled?: boolean;
 24 | };
 25 | 
 26 | /**
 27 |  *
 28 |  * This component supports dropping items
 29 |  * It also renders a list of draggables
 30 |  *
 31 |  */
 32 | 
 33 | export default function TaskList({
 34 |   listTitle,
 35 |   listOfTasks,
 36 |   isDropDisabled,
 37 |   listId = "LIST",
 38 |   listType,
 39 | }: TaskListProps) {
 40 |   const [showForm, setShowForm] = React.useState(false);
 41 | 
 42 |   React.useEffect(() => {
 43 |     const down = (e: KeyboardEvent) => {
 44 |       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
 45 |         e.preventDefault();
 46 |         setShowForm((open) => !open);
 47 |       }
 48 |       if (e.key === "Escape") {
 49 |         e.preventDefault();
 50 |         setShowForm(false);
 51 |       }
 52 |     };
 53 | 
 54 |     document.addEventListener("keydown", down);
 55 |     return () => document.removeEventListener("keydown", down);
 56 |   }, []);
 57 | 
 58 |   return (
 59 |     <Droppable
 60 |       droppableId={listId}
 61 |       type={listType}
 62 |       isDropDisabled={isDropDisabled}
 63 |     >
 64 |       {(
 65 |         dropProvided: DroppableProvided,
 66 |         dropSnapshot: DroppableStateSnapshot
 67 |       ) => (
 68 |         <Card {...dropProvided.droppableProps}>
 69 |           <CardHeader className="h-20 flex flex-row justify-between text-xl font-bold">
 70 |             {listTitle}
 71 |             {listTitle === "Pending" && (
 72 |               <Button
 73 |                 variant={"secondary"}
 74 |                 size={"icon"}
 75 |                 onClick={() => setShowForm(!showForm)}
 76 |               >
 77 |                 <PlusIcon
 78 |                   className={cn(
 79 |                     showForm ? "rotate-45" : "",
 80 |                     "transition-all ease-in-out"
 81 |                   )}
 82 |                 />
 83 |               </Button>
 84 |             )}
 85 |           </CardHeader>
 86 |           <CardContent>
 87 |             {listTitle === "Pending" && showForm && (
 88 |               <div className="mb-3">
 89 |                 <CreateTaskForm setShowForm={setShowForm} />
 90 |               </div>
 91 |             )}
 92 |             <InnerList
 93 |               listOfTasks={listOfTasks}
 94 |               dropProvided={dropProvided}
 95 |               title={listTitle}
 96 |             />
 97 |           </CardContent>
 98 |         </Card>
 99 |       )}
100 |     </Droppable>
101 |   );
102 | }
103 | 
104 | type InnerListProps = {
105 |   dropProvided: DroppableProvided;
106 |   listOfTasks: Task[];
107 |   title?: string;
108 | };
109 | 
110 | function InnerList({ title, listOfTasks, dropProvided }: InnerListProps) {
111 |   return (
112 |     <div ref={dropProvided.innerRef} className="grid grid-cols-1 gap-3">
113 |       {listOfTasks.map((task, index) => {
114 |         return (
115 |           <Draggable key={task.id} draggableId={task.id} index={index}>
116 |             {(
117 |               dragProvided: DraggableProvided,
118 |               dragSnapshot: DraggableStateSnapshot
119 |             ) => (
120 |               <TaskItem
121 |                 key={task.id}
122 |                 task={task}
123 |                 provided={dragProvided}
124 |                 isDragging={dragSnapshot.isDragging}
125 |               />
126 |             )}
127 |           </Draggable>
128 |         );
129 |       })}
130 |       {dropProvided.placeholder}
131 |     </div>
132 |   );
133 | }
134 | 


--------------------------------------------------------------------------------
/components/TaskItem.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import {
  3 |   Card,
  4 |   CardContent,
  5 |   CardDescription,
  6 |   CardFooter,
  7 |   CardHeader,
  8 |   CardTitle,
  9 | } from "@/components/ui/card";
 10 | import { Task } from "@/types/types";
 11 | import { DraggableProvided } from "react-beautiful-dnd";
 12 | import { cn } from "@/lib/utils";
 13 | import { Button } from "./ui/button";
 14 | import {
 15 |   CalendarIcon,
 16 |   DotsHorizontalIcon,
 17 |   Pencil1Icon,
 18 |   StarIcon,
 19 |   TrashIcon,
 20 | } from "@radix-ui/react-icons";
 21 | import {
 22 |   DropdownMenu,
 23 |   DropdownMenuContent,
 24 |   DropdownMenuLabel,
 25 |   DropdownMenuSeparator,
 26 |   DropdownMenuTrigger,
 27 | } from "./ui/dropdown-menu";
 28 | import { useBoard } from "@/context/BoardContext/BoardContext";
 29 | 
 30 | type TaskItemProps = {
 31 |   task: Task;
 32 |   isDragging: boolean;
 33 |   provided: DraggableProvided;
 34 | };
 35 | 
 36 | function TaskItem({ isDragging, provided, task }: TaskItemProps) {
 37 |   const { dispatch } = useBoard();
 38 |   return (
 39 |     <li
 40 |       className="relative"
 41 |       ref={provided.innerRef}
 42 |       {...provided.draggableProps}
 43 |       {...provided.dragHandleProps}
 44 |     >
 45 |       <Card className={cn(isDragging ? "bg-slate-50" : "")}>
 46 |         <CardHeader className="pb-3">
 47 |           <div className="flex justify-between">
 48 |             <CardTitle>{task.task}</CardTitle>
 49 |             <DropdownMenu>
 50 |               <DropdownMenuTrigger asChild>
 51 |                 <Button
 52 |                   variant={"outline"}
 53 |                   size={"icon"}
 54 |                   className="absolute right-5 top-5 h-6 w-6"
 55 |                 >
 56 |                   <DotsHorizontalIcon />
 57 |                 </Button>
 58 |               </DropdownMenuTrigger>
 59 |               <DropdownMenuContent className="">
 60 |                 <DropdownMenuLabel>Options</DropdownMenuLabel>
 61 |                 <DropdownMenuSeparator />
 62 |                 <Button
 63 |                   variant="ghost"
 64 |                   className="w-full justify-between hover:text-red-500 hover:bg-red-50"
 65 |                   onClick={() => {
 66 |                     dispatch({ type: "REMOVE_TASK", payload: { id: task.id } });
 67 |                   }}
 68 |                 >
 69 |                   Delete <TrashIcon className="h-[1.2rem] w-[1.2rem]" />
 70 |                 </Button>
 71 |                 <Button
 72 |                   variant="ghost"
 73 |                   className="w-full justify-between hover:text-green-500 hover:bg-green-50"
 74 |                 >
 75 |                   Update
 76 |                   <Pencil1Icon className="h-[1.2rem] w-[1.2rem]" />
 77 |                 </Button>
 78 |                 <Button
 79 |                   variant="ghost"
 80 |                   className="w-full justify-between hover:text-yellow-500 hover:bg-yellow-50"
 81 |                 >
 82 |                   Favorites
 83 |                   <StarIcon className="h-[1.2rem] w-[1.2rem]" />
 84 |                 </Button>
 85 |               </DropdownMenuContent>
 86 |             </DropdownMenu>
 87 |           </div>
 88 |         </CardHeader>
 89 |         {task.description && (
 90 |           <CardContent className="pb-3">
 91 |             <CardDescription>{task.description}</CardDescription>
 92 |           </CardContent>
 93 |         )}
 94 |         <CardFooter className="flex justify-between">
 95 |           <div className="flex h-6 items-center gap-2">
 96 |             <CalendarIcon className="text-slate-500" />
 97 |             <CardDescription>{task.date}</CardDescription>
 98 |           </div>
 99 |           <CardDescription
100 |             className={`${
101 |               task.tag === "High"
102 |                 ? "text-red-500 bg-red-50"
103 |                 : task.tag === "Medium"
104 |                 ? "text-yellow-500 bg-yellow-50"
105 |                 : "text-green-500 bg-green-50"
106 |             } px-2 py-1 rounded text-xs`}
107 |           >
108 |             {task.tag}
109 |           </CardDescription>
110 |         </CardFooter>
111 |       </Card>
112 |     </li>
113 |   );
114 | }
115 | 
116 | export default React.memo<TaskItemProps>(TaskItem);
117 | 


--------------------------------------------------------------------------------
/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as LabelPrimitive from "@radix-ui/react-label"
  3 | import { Slot } from "@radix-ui/react-slot"
  4 | import {
  5 |   Controller,
  6 |   ControllerProps,
  7 |   FieldPath,
  8 |   FieldValues,
  9 |   FormProvider,
 10 |   useFormContext,
 11 | } from "react-hook-form"
 12 | 
 13 | import { cn } from "@/lib/utils"
 14 | import { Label } from "@/components/ui/label"
 15 | 
 16 | const Form = FormProvider
 17 | 
 18 | type FormFieldContextValue<
 19 |   TFieldValues extends FieldValues = FieldValues,
 20 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 21 | > = {
 22 |   name: TName
 23 | }
 24 | 
 25 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 26 |   {} as FormFieldContextValue
 27 | )
 28 | 
 29 | const FormField = <
 30 |   TFieldValues extends FieldValues = FieldValues,
 31 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 32 | >({
 33 |   ...props
 34 | }: ControllerProps<TFieldValues, TName>) => {
 35 |   return (
 36 |     <FormFieldContext.Provider value={{ name: props.name }}>
 37 |       <Controller {...props} />
 38 |     </FormFieldContext.Provider>
 39 |   )
 40 | }
 41 | 
 42 | const useFormField = () => {
 43 |   const fieldContext = React.useContext(FormFieldContext)
 44 |   const itemContext = React.useContext(FormItemContext)
 45 |   const { getFieldState, formState } = useFormContext()
 46 | 
 47 |   const fieldState = getFieldState(fieldContext.name, formState)
 48 | 
 49 |   if (!fieldContext) {
 50 |     throw new Error("useFormField should be used within <FormField>")
 51 |   }
 52 | 
 53 |   const { id } = itemContext
 54 | 
 55 |   return {
 56 |     id,
 57 |     name: fieldContext.name,
 58 |     formItemId: `${id}-form-item`,
 59 |     formDescriptionId: `${id}-form-item-description`,
 60 |     formMessageId: `${id}-form-item-message`,
 61 |     ...fieldState,
 62 |   }
 63 | }
 64 | 
 65 | type FormItemContextValue = {
 66 |   id: string
 67 | }
 68 | 
 69 | const FormItemContext = React.createContext<FormItemContextValue>(
 70 |   {} as FormItemContextValue
 71 | )
 72 | 
 73 | const FormItem = React.forwardRef<
 74 |   HTMLDivElement,
 75 |   React.HTMLAttributes<HTMLDivElement>
 76 | >(({ className, ...props }, ref) => {
 77 |   const id = React.useId()
 78 | 
 79 |   return (
 80 |     <FormItemContext.Provider value={{ id }}>
 81 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 82 |     </FormItemContext.Provider>
 83 |   )
 84 | })
 85 | FormItem.displayName = "FormItem"
 86 | 
 87 | const FormLabel = React.forwardRef<
 88 |   React.ElementRef<typeof LabelPrimitive.Root>,
 89 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 90 | >(({ className, ...props }, ref) => {
 91 |   const { error, formItemId } = useFormField()
 92 | 
 93 |   return (
 94 |     <Label
 95 |       ref={ref}
 96 |       className={cn(error && "text-red-500 dark:text-red-900", className)}
 97 |       htmlFor={formItemId}
 98 |       {...props}
 99 |     />
100 |   )
101 | })
102 | FormLabel.displayName = "FormLabel"
103 | 
104 | const FormControl = React.forwardRef<
105 |   React.ElementRef<typeof Slot>,
106 |   React.ComponentPropsWithoutRef<typeof Slot>
107 | >(({ ...props }, ref) => {
108 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
109 | 
110 |   return (
111 |     <Slot
112 |       ref={ref}
113 |       id={formItemId}
114 |       aria-describedby={
115 |         !error
116 |           ? `${formDescriptionId}`
117 |           : `${formDescriptionId} ${formMessageId}`
118 |       }
119 |       aria-invalid={!!error}
120 |       {...props}
121 |     />
122 |   )
123 | })
124 | FormControl.displayName = "FormControl"
125 | 
126 | const FormDescription = React.forwardRef<
127 |   HTMLParagraphElement,
128 |   React.HTMLAttributes<HTMLParagraphElement>
129 | >(({ className, ...props }, ref) => {
130 |   const { formDescriptionId } = useFormField()
131 | 
132 |   return (
133 |     <p
134 |       ref={ref}
135 |       id={formDescriptionId}
136 |       className={cn("text-[0.8rem] text-slate-500 dark:text-slate-400", className)}
137 |       {...props}
138 |     />
139 |   )
140 | })
141 | FormDescription.displayName = "FormDescription"
142 | 
143 | const FormMessage = React.forwardRef<
144 |   HTMLParagraphElement,
145 |   React.HTMLAttributes<HTMLParagraphElement>
146 | >(({ className, children, ...props }, ref) => {
147 |   const { error, formMessageId } = useFormField()
148 |   const body = error ? String(error?.message) : children
149 | 
150 |   if (!body) {
151 |     return null
152 |   }
153 | 
154 |   return (
155 |     <p
156 |       ref={ref}
157 |       id={formMessageId}
158 |       className={cn("text-[0.8rem] font-medium text-red-500 dark:text-red-900", className)}
159 |       {...props}
160 |     >
161 |       {body}
162 |     </p>
163 |   )
164 | })
165 | FormMessage.displayName = "FormMessage"
166 | 
167 | export {
168 |   useFormField,
169 |   Form,
170 |   FormItem,
171 |   FormLabel,
172 |   FormControl,
173 |   FormDescription,
174 |   FormMessage,
175 |   FormField,
176 | }
177 | 


--------------------------------------------------------------------------------
/context/BoardContext/BoardContext.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import * as React from "react";
  3 | import { initialState } from "@/dommyData";
  4 | import { Board, BoardAction } from "@/types/types";
  5 | 
  6 | const boardInitialState: Board = {
  7 |   columns: initialState,
  8 |   ordered: Object.keys(initialState),
  9 | };
 10 | 
 11 | const BoardContext = React.createContext({
 12 |   boardState: boardInitialState,
 13 |   dispatch: (action: BoardAction) => {},
 14 | });
 15 | 
 16 | export const BoardProvider = ({ children }: React.PropsWithChildren) => {
 17 |   const [boardState, dispatch] = React.useReducer(
 18 |     boardReducer,
 19 |     boardInitialState
 20 |   );
 21 |   const [loading, setLoading] = React.useState(true);
 22 | 
 23 |   React.useEffect(() => {
 24 |     loadData();
 25 |   }, []);
 26 | 
 27 |   function loadData() {
 28 |     const localBoardData = localStorage.getItem("@Board");
 29 | 
 30 |     if (localBoardData === null) {
 31 |       localStorage.setItem("@Board", JSON.stringify(boardInitialState));
 32 |     } else {
 33 |       const dataObject = JSON.parse(localBoardData);
 34 |       dispatch({ type: "SET_TASKS", payload: dataObject });
 35 |     }
 36 |     setLoading(false);
 37 |   }
 38 | 
 39 |   if (loading) return;
 40 |   return (
 41 |     <BoardContext.Provider value={{ boardState, dispatch }}>
 42 |       {children}
 43 |     </BoardContext.Provider>
 44 |   );
 45 | };
 46 | 
 47 | /**
 48 |  * custom hook for easy context usage :)
 49 |  */
 50 | export function useBoard() {
 51 |   return React.useContext(BoardContext);
 52 | }
 53 | 
 54 | /**
 55 |  * Tasks reducer
 56 |  * This function handles actions on the state
 57 |  */
 58 | 
 59 | function boardReducer(state: Board, action: BoardAction): Board {
 60 |   switch (action.type) {
 61 |     case "SET_TASKS": {
 62 |       return action.payload;
 63 |     }
 64 |     case "MOVE_COLUMN": {
 65 |       const result = [...state.ordered];
 66 |       const [removed] = result.splice(action.payload.source.index, 1);
 67 |       result.splice(action.payload.destination.index, 0, removed);
 68 | 
 69 |       const newState = { ...state, ordered: result };
 70 |       // save locally
 71 |       localStorage.setItem("@Board", JSON.stringify(newState));
 72 |       return newState;
 73 |     }
 74 |     case "MOVE_TASK": {
 75 |       if (
 76 |         action.payload.source.droppableId ===
 77 |         action.payload.destination.droppableId
 78 |       ) {
 79 |         // Reordering within the same column
 80 |         const reorderedTasks = [
 81 |           ...state.columns[action.payload.source.droppableId],
 82 |         ];
 83 |         const [movedTask] = reorderedTasks.splice(
 84 |           action.payload.source.index,
 85 |           1
 86 |         );
 87 |         reorderedTasks.splice(action.payload.destination.index, 0, movedTask);
 88 | 
 89 |         const newState = {
 90 |           ...state,
 91 |           columns: {
 92 |             ...state.columns,
 93 |             [action.payload.source.droppableId]: reorderedTasks,
 94 |           },
 95 |         };
 96 |         // save locally
 97 |         localStorage.setItem("@Board", JSON.stringify(newState));
 98 |         // Exit after handling reordering within the same column
 99 |         return newState;
100 |       }
101 | 
102 |       // Handling movement between different columns
103 |       const startTasks = [...state.columns[action.payload.source.droppableId]];
104 |       const finishTasks = [
105 |         ...state.columns[action.payload.destination.droppableId],
106 |       ];
107 |       const [removedTask] = startTasks.splice(action.payload.source.index, 1);
108 |       finishTasks.splice(action.payload.destination.index, 0, removedTask);
109 | 
110 |       const newState = {
111 |         ...state,
112 |         columns: {
113 |           ...state.columns,
114 |           [action.payload.source.droppableId]: startTasks,
115 |           [action.payload.destination.droppableId]: finishTasks,
116 |         },
117 |       };
118 | 
119 |       // save locally
120 |       localStorage.setItem("@Board", JSON.stringify(newState));
121 | 
122 |       return newState;
123 |     }
124 |     case "ADD_TASK": {
125 |       const newState = {
126 |         ...state,
127 |         columns: {
128 |           ...state.columns,
129 |           ["Pending"]: [action.payload, ...state.columns.Pending],
130 |         },
131 |       };
132 | 
133 |       // save
134 |       localStorage.setItem("@Board", JSON.stringify(newState));
135 | 
136 |       return newState;
137 |     }
138 |     case "REMOVE_TASK": {
139 |       // I'm sure there is a better way to do this :')
140 |       const taskToRemoveId = action.payload.id;
141 |       const newState = { ...state };
142 | 
143 |       for (const column of Object.keys(state.columns)) {
144 |         newState.columns[column] = newState.columns[column].filter(
145 |           (task) => task.id !== taskToRemoveId
146 |         );
147 |       }
148 |       // save
149 |       localStorage.setItem("@Board", JSON.stringify(newState));
150 | 
151 |       return newState;
152 |     }
153 |     default: {
154 |       return boardInitialState;
155 |     }
156 |   }
157 | }
158 | 


--------------------------------------------------------------------------------
/components/CreateTaskForm.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { TrashIcon, StarIcon, MixerVerticalIcon } from "@radix-ui/react-icons";
  3 | import { Button } from "./ui/button";
  4 | import { Card, CardContent, CardHeader } from "./ui/card";
  5 | import {
  6 |   DropdownMenu,
  7 |   DropdownMenuContent,
  8 |   DropdownMenuItem,
  9 |   DropdownMenuLabel,
 10 |   DropdownMenuSeparator,
 11 |   DropdownMenuTrigger,
 12 | } from "./ui/dropdown-menu";
 13 | import { Input } from "./ui/input";
 14 | import * as z from "zod";
 15 | import { useForm } from "react-hook-form";
 16 | import { zodResolver } from "@hookform/resolvers/zod";
 17 | import {
 18 |   Form,
 19 |   FormControl,
 20 |   FormDescription,
 21 |   FormField,
 22 |   FormItem,
 23 |   FormLabel,
 24 |   FormMessage,
 25 | } from "./ui/form";
 26 | import { Dispatch, SetStateAction, useState } from "react";
 27 | import { useBoard } from "@/context/BoardContext/BoardContext";
 28 | import { cn } from "@/lib/utils";
 29 | import { Textarea } from "./ui/textarea";
 30 | 
 31 | const formSchema = z.object({
 32 |   task: z.string().min(2, { message: "Enter at least 2 characters" }).max(100),
 33 |   description: z.string().max(500),
 34 | });
 35 | 
 36 | export default function CreateTaskForm({
 37 |   setShowForm,
 38 | }: {
 39 |   setShowForm: Dispatch<SetStateAction<boolean>>;
 40 | }) {
 41 |   const form = useForm<z.infer<typeof formSchema>>({
 42 |     resolver: zodResolver(formSchema),
 43 |     defaultValues: {
 44 |       task: "",
 45 |       description: "",
 46 |     },
 47 |   });
 48 |   const { dispatch } = useBoard();
 49 |   const [tag, setTag] = useState("Low");
 50 | 
 51 |   function onSubmit({ task, description }: z.infer<typeof formSchema>) {
 52 |     dispatch({
 53 |       type: "ADD_TASK",
 54 |       payload: {
 55 |         id: Math.random().toString(), // YOLO
 56 |         date: new Date().toDateString(),
 57 |         tag,
 58 |         description,
 59 |         task,
 60 |       },
 61 |     });
 62 |     setShowForm(false);
 63 |   }
 64 |   return (
 65 |     <Form {...form}>
 66 |       <form onSubmit={form.handleSubmit(onSubmit)}>
 67 |         <Card>
 68 |           <CardHeader className="font-bold pb-3">New Task</CardHeader>
 69 |           <CardContent>
 70 |             <div className="flex items-end justify-between gap-3">
 71 |               <FormField
 72 |                 control={form.control}
 73 |                 name="task"
 74 |                 render={({ field }) => (
 75 |                   <FormItem className="w-full">
 76 |                     <FormLabel>Title</FormLabel>
 77 |                     <FormMessage className="w-full" />
 78 |                     <FormControl>
 79 |                       <Input
 80 |                         autoFocus
 81 |                         placeholder="Visit codewithbeto.dev"
 82 |                         {...field}
 83 |                       />
 84 |                     </FormControl>
 85 |                   </FormItem>
 86 |                 )}
 87 |               />
 88 |               <DropdownMenu>
 89 |                 <DropdownMenuTrigger asChild>
 90 |                   <Button variant={"outline"}>
 91 |                     <MixerVerticalIcon />
 92 |                   </Button>
 93 |                 </DropdownMenuTrigger>
 94 |                 <DropdownMenuContent className="w-40">
 95 |                   <DropdownMenuLabel>Select Priority</DropdownMenuLabel>
 96 |                   <DropdownMenuSeparator />
 97 |                   <DropdownMenuItem
 98 |                     className={cn(
 99 |                       "w-full px-3 justify-between focus:bg-red-50 focus:text-red-500 cursor-pointer"
100 |                     )}
101 |                     onClick={() => setTag("High")}
102 |                   >
103 |                     High <span>!!!</span>
104 |                   </DropdownMenuItem>
105 |                   <DropdownMenuItem
106 |                     className={cn(
107 |                       "w-full px-3 justify-between focus:bg-yellow-50 focus:text-yellow-500 cursor-pointer"
108 |                     )}
109 |                     onClick={() => setTag("Medium")}
110 |                   >
111 |                     Medium <span>!!</span>
112 |                   </DropdownMenuItem>
113 |                   <DropdownMenuItem
114 |                     className={cn(
115 |                       "w-full px-3 justify-between focus:bg-green-50 focus:text-green-500 cursor-pointer"
116 |                     )}
117 |                     onClick={() => setTag("Low")}
118 |                   >
119 |                     Low <span>!</span>
120 |                   </DropdownMenuItem>
121 |                 </DropdownMenuContent>
122 |               </DropdownMenu>
123 |             </div>
124 |             <FormField
125 |               control={form.control}
126 |               name="description"
127 |               render={({ field }) => (
128 |                 <FormItem className="mt-2">
129 |                   <FormLabel>Description</FormLabel>
130 |                   <FormControl>
131 |                     <Textarea placeholder="Description" {...field} />
132 |                   </FormControl>
133 |                   <FormMessage />
134 |                 </FormItem>
135 |               )}
136 |             />
137 |             <div className="flex gap-3 mt-5">
138 |               <Button
139 |                 onClick={() => setShowForm(false)}
140 |                 type="button"
141 |                 className="w-full"
142 |                 variant={"secondary"}
143 |               >
144 |                 Cancel
145 |               </Button>
146 |               <Button className="w-full" type="submit">
147 |                 Save
148 |               </Button>
149 |             </div>
150 |           </CardContent>
151 |         </Card>
152 |       </form>
153 |     </Form>
154 |   );
155 | }
156 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  5 | import {
  6 |   CheckIcon,
  7 |   ChevronRightIcon,
  8 |   DotFilledIcon,
  9 | } from "@radix-ui/react-icons"
 10 | 
 11 | import { cn } from "@/lib/utils"
 12 | 
 13 | const DropdownMenu = DropdownMenuPrimitive.Root
 14 | 
 15 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 16 | 
 17 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 18 | 
 19 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 20 | 
 21 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 22 | 
 23 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 24 | 
 25 | const DropdownMenuSubTrigger = React.forwardRef<
 26 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 27 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 28 |     inset?: boolean
 29 |   }
 30 | >(({ className, inset, children, ...props }, ref) => (
 31 |   <DropdownMenuPrimitive.SubTrigger
 32 |     ref={ref}
 33 |     className={cn(
 34 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-800 dark:data-[state=open]:bg-slate-800",
 35 |       inset && "pl-8",
 36 |       className
 37 |     )}
 38 |     {...props}
 39 |   >
 40 |     {children}
 41 |     <ChevronRightIcon className="ml-auto h-4 w-4" />
 42 |   </DropdownMenuPrimitive.SubTrigger>
 43 | ))
 44 | DropdownMenuSubTrigger.displayName =
 45 |   DropdownMenuPrimitive.SubTrigger.displayName
 46 | 
 47 | const DropdownMenuSubContent = React.forwardRef<
 48 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 49 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 50 | >(({ className, ...props }, ref) => (
 51 |   <DropdownMenuPrimitive.SubContent
 52 |     ref={ref}
 53 |     className={cn(
 54 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
 55 |       className
 56 |     )}
 57 |     {...props}
 58 |   />
 59 | ))
 60 | DropdownMenuSubContent.displayName =
 61 |   DropdownMenuPrimitive.SubContent.displayName
 62 | 
 63 | const DropdownMenuContent = React.forwardRef<
 64 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 65 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 66 | >(({ className, sideOffset = 4, ...props }, ref) => (
 67 |   <DropdownMenuPrimitive.Portal>
 68 |     <DropdownMenuPrimitive.Content
 69 |       ref={ref}
 70 |       sideOffset={sideOffset}
 71 |       className={cn(
 72 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-md dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
 73 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 74 |         className
 75 |       )}
 76 |       {...props}
 77 |     />
 78 |   </DropdownMenuPrimitive.Portal>
 79 | ))
 80 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 81 | 
 82 | const DropdownMenuItem = React.forwardRef<
 83 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 84 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 85 |     inset?: boolean
 86 |   }
 87 | >(({ className, inset, ...props }, ref) => (
 88 |   <DropdownMenuPrimitive.Item
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
 92 |       inset && "pl-8",
 93 |       className
 94 |     )}
 95 |     {...props}
 96 |   />
 97 | ))
 98 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 99 | 
100 | const DropdownMenuCheckboxItem = React.forwardRef<
101 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
102 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
103 | >(({ className, children, checked, ...props }, ref) => (
104 |   <DropdownMenuPrimitive.CheckboxItem
105 |     ref={ref}
106 |     className={cn(
107 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
108 |       className
109 |     )}
110 |     checked={checked}
111 |     {...props}
112 |   >
113 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
114 |       <DropdownMenuPrimitive.ItemIndicator>
115 |         <CheckIcon className="h-4 w-4" />
116 |       </DropdownMenuPrimitive.ItemIndicator>
117 |     </span>
118 |     {children}
119 |   </DropdownMenuPrimitive.CheckboxItem>
120 | ))
121 | DropdownMenuCheckboxItem.displayName =
122 |   DropdownMenuPrimitive.CheckboxItem.displayName
123 | 
124 | const DropdownMenuRadioItem = React.forwardRef<
125 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
126 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
127 | >(({ className, children, ...props }, ref) => (
128 |   <DropdownMenuPrimitive.RadioItem
129 |     ref={ref}
130 |     className={cn(
131 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
132 |       className
133 |     )}
134 |     {...props}
135 |   >
136 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
137 |       <DropdownMenuPrimitive.ItemIndicator>
138 |         <DotFilledIcon className="h-4 w-4 fill-current" />
139 |       </DropdownMenuPrimitive.ItemIndicator>
140 |     </span>
141 |     {children}
142 |   </DropdownMenuPrimitive.RadioItem>
143 | ))
144 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
145 | 
146 | const DropdownMenuLabel = React.forwardRef<
147 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
148 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
149 |     inset?: boolean
150 |   }
151 | >(({ className, inset, ...props }, ref) => (
152 |   <DropdownMenuPrimitive.Label
153 |     ref={ref}
154 |     className={cn(
155 |       "px-2 py-1.5 text-sm font-semibold",
156 |       inset && "pl-8",
157 |       className
158 |     )}
159 |     {...props}
160 |   />
161 | ))
162 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
163 | 
164 | const DropdownMenuSeparator = React.forwardRef<
165 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
166 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
167 | >(({ className, ...props }, ref) => (
168 |   <DropdownMenuPrimitive.Separator
169 |     ref={ref}
170 |     className={cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800", className)}
171 |     {...props}
172 |   />
173 | ))
174 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
175 | 
176 | const DropdownMenuShortcut = ({
177 |   className,
178 |   ...props
179 | }: React.HTMLAttributes<HTMLSpanElement>) => {
180 |   return (
181 |     <span
182 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
183 |       {...props}
184 |     />
185 |   )
186 | }
187 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
188 | 
189 | export {
190 |   DropdownMenu,
191 |   DropdownMenuTrigger,
192 |   DropdownMenuContent,
193 |   DropdownMenuItem,
194 |   DropdownMenuCheckboxItem,
195 |   DropdownMenuRadioItem,
196 |   DropdownMenuLabel,
197 |   DropdownMenuSeparator,
198 |   DropdownMenuShortcut,
199 |   DropdownMenuGroup,
200 |   DropdownMenuPortal,
201 |   DropdownMenuSub,
202 |   DropdownMenuSubContent,
203 |   DropdownMenuSubTrigger,
204 |   DropdownMenuRadioGroup,
205 | }
206 | 


--------------------------------------------------------------------------------