ershisan99/todolist_next
1
0
Fork 0
mirror of https://github.com/ershisan99/todolist_next.git synced 2026-01-22 21:02:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

lint and format

Browse Source
This commit is contained in:
andres
2024-08-11 15:28:53 +02:00
parent da0cccfb0e
commit 57c5998435
36 changed files with 407 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/auth-redirect/index.tsx
View File

@@ -1,31 +1,31 @@
import type { FC, ReactNode } from "react";
import { useEffect } from "react";
import type { FC, ReactNode } from "react"
import { useEffect } from "react"
import { useRouter } from "next/router";
import { useRouter } from "next/router"
import { Loader } from "../loader";
import { Loader } from "../loader"
import { useMeQuery } from "@/services";
import { useMeQuery } from "@/services"
export const AuthRedirect: FC<{ children: ReactNode }> = ({ children }) => {
const router = useRouter();
const { data: user, isLoading } = useMeQuery();
const router = useRouter()
const { data: user, isLoading } = useMeQuery()
const isAuthPage =
router.pathname === "/login" || router.pathname === "/sign-up";
router.pathname === "/login" || router.pathname === "/sign-up"
useEffect(() => {
if (!isLoading && !user && !isAuthPage) {
router.push("/login");
router.push("/login")
}
}, [user, isLoading, isAuthPage, router]);
}, [user, isLoading, isAuthPage, router])
if (isLoading || (!user && !isAuthPage)) {
return (
<div className={"h-screen"}>
<Loader />
</div>
);
)
}
return <>{children}</>;
};
return <>{children}</>
}

14
src/components/button/index.tsx
View File

@@ -1,10 +1,10 @@
import type { ComponentPropsWithoutRef, FC } from "react";
import type { ComponentPropsWithoutRef, FC } from "react"
import { cn } from "@/helpers";
import { cn } from "@/helpers"
type Props = ComponentPropsWithoutRef<"button"> & {
variant?: "primary" | "outlined" | "icon";
};
variant?: "primary" | "outlined" | "icon"
}
export const Button: FC<Props> = ({
className,
@@ -18,9 +18,9 @@ export const Button: FC<Props> = ({
variant === "outlined" && "border-sky-700 bg-inherit text-sky-700",
variant === "icon" &&
"h-6 w-6 shrink-0 border-none bg-inherit p-0 text-sky-700 hover:bg-slate-100 hover:text-sky-800",
className
className,
)}
{...rest}
/>
);
};
)
}

6
src/components/fullscreen-loader/index.tsx
View File

@@ -1,9 +1,9 @@
import { Loader } from "../loader";
import { Loader } from "../loader"
export const FullscreenLoader = () => {
return (
<div className={"flex h-screen items-center justify-center"}>
<Loader />
</div>
);
};
)
}

12
src/components/index.ts
View File

@@ -1,6 +1,6 @@
export * from "./todolist";
export * from "./auth-redirect";
export * from "./button";
export * from "./input";
export * from "./loader";
export * from "./fullscreen-loader";
export * from "./todolist"
export * from "./auth-redirect"
export * from "./button"
export * from "./input"
export * from "./loader"
export * from "./fullscreen-loader"

8
src/components/input/index.tsx
View File

@@ -1,9 +1,9 @@
import type { DetailedHTMLProps, FC, InputHTMLAttributes } from "react";
import type { DetailedHTMLProps, FC, InputHTMLAttributes } from "react"
type Props = DetailedHTMLProps<
InputHTMLAttributes<HTMLInputElement>,
HTMLInputElement
>;
>
export const Input: FC<Props> = ({ className, ...rest }) => {
return (
@@ -11,5 +11,5 @@ export const Input: FC<Props> = ({ className, ...rest }) => {
className={`w-full rounded-md border border-gray-300 px-4 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-600 ${className}`}
{...rest}
/>
);
};
)
}

4
src/components/loader/index.tsx
View File

@@ -3,5 +3,5 @@ export const Loader = () => {
<div className={"flex h-full w-full items-center justify-center"}>
<span className="loader" />
</div>
);
};
)
}

82
src/components/todolist/index.tsx
View File

@@ -1,19 +1,19 @@
import type { ChangeEvent, FC, FormEvent, MouseEventHandler } from "react";
import { memo, useState } from "react";
import type { ChangeEvent, FC, FormEvent } from "react"
import { memo, useState } from "react"
import { Trash, Plus } from "lucide-react";
import { Plus, Trash } from "lucide-react"
import type {
Task,
Todolist as TodolistType,
} from "../../services/todolist-api/todolists";
import { Button } from "../button";
import { Input } from "../input";
} from "../../services/todolist-api/todolists"
import { Button } from "../button"
import { Input } from "../input"
import {
ToggleGroup,
ToggleGroupItem,
} from "@/components/toggle-group/toggle-group";
} from "@/components/toggle-group/toggle-group"
import {
TaskStatus,
useCreateTaskMutation,
@@ -21,62 +21,62 @@ import {
useDeleteTodolistMutation,
useGetTasksQuery,
useUpdateTaskMutation,
} from "@/services";
} from "@/services"
type Props = {
todolist: TodolistType;
};
todolist: TodolistType
}
type Filter = "all" | "active" | "completed";
type Filter = "all" | "active" | "completed"
export const Todolist: FC<Props> = memo(({ todolist }) => {
const { data: tasks, isLoading } = useGetTasksQuery(todolist.id);
const { mutate: putTask } = useUpdateTaskMutation();
const { mutate: deleteTask } = useDeleteTaskMutation();
const { mutate: deleteTodolist } = useDeleteTodolistMutation();
const { mutate: createTask } = useCreateTaskMutation();
const [newTaskTitle, setNewTaskTitle] = useState("");
const [filter, setFilter] = useState("all");
const { data: tasks, isLoading } = useGetTasksQuery(todolist.id)
const { mutate: putTask } = useUpdateTaskMutation()
const { mutate: deleteTask } = useDeleteTaskMutation()
const { mutate: deleteTodolist } = useDeleteTodolistMutation()
const { mutate: createTask } = useCreateTaskMutation()
const [newTaskTitle, setNewTaskTitle] = useState("")
const [filter, setFilter] = useState("all")
const handleChangeStatus = (todolistId: string, task: Task) => {
const newTask: Task = {
...task,
status:
task.status === TaskStatus.DONE ? TaskStatus.OPEN : TaskStatus.DONE,
};
}
putTask({ todolistId, task: newTask });
};
putTask({ todolistId, task: newTask })
}
const handleDeleteTask = (todolistId: string, taskId: string) => {
deleteTask({ todolistId, taskId });
};
deleteTask({ todolistId, taskId })
}
const handleDeleteTodolist = (todolistId: string) => {
deleteTodolist({ todolistId });
};
deleteTodolist({ todolistId })
}
const handleAddTask = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
createTask({ todolistId: todolist.id, title: newTaskTitle });
setNewTaskTitle("");
};
e.preventDefault()
createTask({ todolistId: todolist.id, title: newTaskTitle })
setNewTaskTitle("")
}
const handleNewTaskTitleChange = (e: ChangeEvent<HTMLInputElement>) => {
setNewTaskTitle(e.target.value);
};
setNewTaskTitle(e.target.value)
}
const handleFilterChange = (value: string) => {
setFilter(value as Filter);
};
setFilter(value as Filter)
}
if (isLoading) return <div>loading...</div>;
if (isLoading) return <div>loading...</div>
const filteredTasks = tasks?.filter((task) => {
switch (filter) {
case "active":
return task.status === TaskStatus.OPEN;
return task.status === TaskStatus.OPEN
case "completed":
return task.status === TaskStatus.DONE;
return task.status === TaskStatus.DONE
default:
return true;
return true
}
});
})
return (
<div
@@ -122,7 +122,7 @@ export const Todolist: FC<Props> = memo(({ todolist }) => {
<Trash size={16} />
</Button>
</div>
);
)
})}
<div className={"flex"}>
<ToggleGroup
@@ -143,5 +143,5 @@ export const Todolist: FC<Props> = memo(({ todolist }) => {
</ToggleGroup>
</div>
</div>
);
});
)
})

34
src/components/toggle-group/toggle-group.tsx
View File

@@ -1,12 +1,12 @@
"use client";
"use client"
import * as React from "react";
import * as React from "react"
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
import type { VariantProps } from "class-variance-authority"
import { cva } from "class-variance-authority"
import { cn } from "@/helpers";
import { cn } from "@/helpers"
const toggleVariants = cva(
"inline-flex border border-sky-700 items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-sky-700 data-[state=on]:text-white",
@@ -27,14 +27,14 @@ const toggleVariants = cva(
variant: "default",
size: "default",
},
}
);
},
)
const ToggleGroupContext = React.createContext<
VariantProps<typeof toggleVariants>
>({
size: "default",
variant: "default",
});
})
const ToggleGroup = React.forwardRef<
React.ElementRef<typeof ToggleGroupPrimitive.Root>,
@@ -50,16 +50,16 @@ const ToggleGroup = React.forwardRef<
{children}
</ToggleGroupContext.Provider>
</ToggleGroupPrimitive.Root>
));
))
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
const ToggleGroupItem = React.forwardRef<
React.ElementRef<typeof ToggleGroupPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
VariantProps<typeof toggleVariants>
>(({ className, children, variant, size, ...props }, ref) => {
const context = React.useContext(ToggleGroupContext);
const context = React.useContext(ToggleGroupContext)
return (
<ToggleGroupPrimitive.Item
@@ -69,15 +69,15 @@ const ToggleGroupItem = React.forwardRef<
variant: context.variant || variant,
size: context.size || size,
}),
className
className,
)}
{...props}
>
{children}
</ToggleGroupPrimitive.Item>
);
});
)
})
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
export { ToggleGroup, ToggleGroupItem };
export { ToggleGroup, ToggleGroupItem }