kjuulh/todo
1
0
Fork 0
Code Issues 1 Pull Requests 7 Projects Releases Wiki Activity

Refined the design a bit

Browse Source
This commit is contained in:
Kasper Juul Hermansen 2021-11-14 01:50:18 +01:00
parent 62630d63f2
commit ce3d351769
Signed by: kjuulh
GPG Key ID: 0F95C140730F2F23
18 changed files with 315 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/backend/server/Todo/Todo.Api/Controllers/TodosController.cs
View File

@ -16,20 +16,16 @@ public class TodosController : ControllerBase
}
[HttpPost]
public async Task<ActionResult<Core.Entities.Todo>> CreateTodo([FromBody] CreateTodoRequest request)
{
var todo = await _todoRepository.CreateTodoAsync(request.Title);
return Ok(todo);
}
public async Task<ActionResult<Core.Entities.Todo>> CreateTodo([FromBody] CreateTodoRequest request) =>
Ok(await _todoRepository.CreateTodoAsync(request.Title));
[HttpGet]
public async Task<ActionResult<IEnumerable<Core.Entities.Todo>>> GetTodos()
{
var todos = await _todoRepository.GetTodosAsync();
public async Task<ActionResult<IEnumerable<Core.Entities.Todo>>> GetTodos() =>
Ok(await _todoRepository.GetTodosAsync());
return Ok(todos);
}
[HttpGet]
public async Task<ActionResult<IEnumerable<Core.Entities.Todo>>> GetNotDoneTodos() =>
Ok(await _todoRepository.GetNotDoneTodos());
public record CreateTodoRequest
{

23
src/backend/server/Todo/Todo.Api/Hubs/TodoHub.cs
View File

@ -18,36 +18,47 @@ namespace Todo.Api.Hubs
{
var _ = await _todoRepository.CreateTodoAsync(todoTitle);
var todos = await _todoRepository.GetTodosAsync();
var todos = await _todoRepository.GetNotDoneTodos();
var serializedTodos =
JsonSerializer.Serialize(todos
.Select(t => new TodoResponse { Id = t.Id, Title = t.Title })
.ToList());
await Clients.Caller.SendAsync("todos", serializedTodos);
await Clients.Caller.SendAsync("getInboxTodos", serializedTodos);
}
public async Task UpdateTodo(string todoId, bool todoStatus)
{
await _todoRepository.UpdateTodoStatus(todoId, todoStatus);
var todos = await _todoRepository.GetTodosAsync();
var todos = await _todoRepository.GetNotDoneTodos();
var serializedTodos =
JsonSerializer.Serialize(todos
.Select(t => new TodoResponse { Id = t.Id, Title = t.Title, Status = t.Status })
.ToList());
await Clients.Caller.SendAsync("todos", serializedTodos);
await Clients.Caller.SendAsync("getInboxTodos", serializedTodos);
}
public async Task GetTodos()
{
var todos = await _todoRepository.GetTodosAsync();
var serializedTodos = JsonSerializer.Serialize(todos
.Select(t => new TodoResponse { Id = t.Id, Title = t.Title, Status = t.Status})
.Select(t => new TodoResponse { Id = t.Id, Title = t.Title, Status = t.Status })
.ToList());
await Clients.Caller.SendAsync("todos", serializedTodos);
}
public async Task GetInboxTodos()
{
var todos = await _todoRepository.GetNotDoneTodos();
var serializedTodos = JsonSerializer.Serialize(todos
.Select(t => new TodoResponse { Id = t.Id, Title = t.Title, Status = t.Status })
.ToList());
await Clients.Caller.SendAsync("getInboxTodos", serializedTodos);
}
}
}

1
src/backend/server/Todo/Todo.Core/Interfaces/Persistence/ITodoRepository.cs
View File

@ -5,4 +5,5 @@ public interface ITodoRepository
Task<Entities.Todo> CreateTodoAsync(string title);
Task<IEnumerable<Entities.Todo>> GetTodosAsync();
Task UpdateTodoStatus(string todoId, bool todoStatus);
Task<IEnumerable<Entities.Todo>> GetNotDoneTodos();
}

8
src/backend/server/Todo/Todo.Persistence/Mongo/Repositories/TodoRepository.cs
View File

@ -20,7 +20,7 @@ public class TodoRepository : ITodoRepository
{
var todo = new MongoTodo() { Title = title };
await _todosCollection.InsertOneAsync(todo);
return new Core.Entities.Todo() { Id = todo.Id, Title = todo.Title };
return new Core.Entities.Todo() { Id = todo.Id, Title = todo.Title, Status = false};
}
public async Task<IEnumerable<Core.Entities.Todo>> GetTodosAsync()
@ -38,4 +38,10 @@ public class TodoRepository : ITodoRepository
.UpdateOneAsync(t => t.Id == todoId,
Builders<MongoTodo>.Update.Set(t => t.Status, todoStatus));
}
public async Task<IEnumerable<Core.Entities.Todo>> GetNotDoneTodos()
{
var todos = await GetTodosAsync();
return todos.Where(t => t.Status == false);
}
}

13
src/client/.idea/runConfigurations/dev.xml Normal file
View File

@ -0,0 +1,13 @@
<component name="ProjectRunConfigurationManager">
<configuration default="false" name="dev" type="js.build_tools.npm" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" />
<command value="run" />
<scripts>
<script value="dev" />
</scripts>
<node-interpreter value="project" />
<package-manager value="yarn" />
<envs />
<method v="2" />
</configuration>
</component>

8
src/client/src/components/todos/addTodo.tsx
View File

@ -2,9 +2,11 @@ import { useState } from "react";
import { CollapsedAddTodo } from "@src/components/todos/collapsed/collapsedAddTodo";
import { AddTodoForm } from "@src/components/todos/collapsed/addTodoForm";
import { CollapsedState } from "@src/components/todos/collapsed/collapsedState";
import {HubConnection} from "@microsoft/signalr";
import { useCreateTodo } from "@src/presentation/hooks/socketHooks";
export function AddTodo(props: {}) {
const { createTodo } = useCreateTodo();
export function AddTodo(props: {conn: HubConnection}) {
const [collapsed, setCollapsed] = useState<CollapsedState>(
CollapsedState.collapsed
);
@ -20,7 +22,7 @@ export function AddTodo(props: {conn: HubConnection}) {
return (
<AddTodoForm
onAdd={(todoName) => {
props.conn.invoke("CreateTodo", todoName).catch(console.error)
createTodo(todoName);
}}
onClose={() => setCollapsed(CollapsedState.collapsed)}
/>

61
src/client/src/components/todos/collapsed/addTodoForm.tsx
View File

@ -7,29 +7,44 @@ export const AddTodoForm: FC<{
const [todoName, setTodoName] = useState("");
return (
<div className="p-2 space-y-1">
<div className="todo-input-form py-2 px-4 bg-gray-900 border border-gray-600">
<input
type="text"
placeholder="Todo name"
className="text-sm"
value={todoName}
onChange={(e) => setTodoName(e.target.value)}
/>
<form
onSubmit={(e) => {
e.preventDefault();
onAdd(todoName);
setTodoName("");
}}
>
<div className="py-2 space-y-3">
<div className="todo-input-form py-2 px-4 bg-gray-800 border border-gray-500 rounded-lg">
<input
type="text"
placeholder="Todo name"
className="text-sm"
autoFocus
value={todoName}
tabIndex={1}
onChange={(e) => setTodoName(e.target.value)}
/>
</div>
<div className="space-x-2">
<button
type="submit"
tabIndex={2}
disabled={!todoName}
className="base-button dark:bg-accent-500 disabled:bg-accent-800 active:bg-accent-400"
>
Add todo
</button>
<button
tabIndex={3}
type="button"
className="base-button"
onClick={onClose}
>
Cancel
</button>
</div>
</div>
<div className="space-x-2">
<button
disabled={!todoName}
onClick={() => {
onAdd(todoName);
setTodoName("");
}}
className="disabled:text-gray-800 transition"
>
Add todo
</button>
<button onClick={onClose}>Cancel</button>
</div>
</div>
</form>
);
};

9
src/client/src/components/todos/collapsed/collapsedAddTodo.tsx
View File

@ -1,5 +1,12 @@
import { FC } from "react";
export const CollapsedAddTodo: FC<{ onClick: () => void }> = ({ onClick }) => {
return <div onClick={onClick}>Add todo</div>;
return (
<div
className="cursor-pointer select-none dark:text-gray-400"
onClick={onClick}
>
Add todo
</div>
);
};

2
src/client/src/components/todos/todoCheckmark.tsx
View File

@ -11,7 +11,7 @@ export const TodoCheckmark: FC<TodoCheckmarkProps> = (props) => (
onClick={() =>
props.updateTodo({ ...props.todo, status: !props.todo.status })
}
className={`h-5 w-5 rounded-full border dark:border-gray-700 ${
className={`h-5 w-5 rounded-full border dark:border-gray-500 ${
props.todo.status === StatusState.done
? "dark:bg-gray-700"
: "hover:dark:bg-gray-600"

2
src/client/src/components/todos/todoItem.tsx
View File

@ -8,7 +8,7 @@ interface TodoItemProps {
}
export const TodoItem: FC<TodoItemProps> = (props) => (
<div className="py-3 border-b border-gray-300 dark:border-gray-700">
<div className="py-3 border-b border-gray-300 dark:border-gray-600">
<div className="flex items-center space-x-4">
<TodoCheckmark {...props} />
<span className="pb-1">{props.todo.title}</span>

44
src/client/src/components/todos/todoList.tsx
View File

@ -1,24 +1,28 @@
import { Todo } from "@src/core/entities/todo";
import { TodoItem } from "@src/components/todos/todoItem";
import { AddTodo } from "@src/components/todos/addTodo";
import { HubConnection } from "@microsoft/signalr";
import { useUpdateTodoState } from "@src/presentation/hooks/socketHooks";
export const TodoList = (props: { todos: Todo[]; conn: HubConnection }) => (
<>
<ul id="inbox">
{props.todos.map((t, i) => (
<li key={i}>
<TodoItem
todo={t}
updateTodo={(todo) => {
props.conn
.invoke("UpdateTodo", todo.id, todo.status)
.catch(console.error);
}}
/>
</li>
))}
</ul>
<AddTodo conn={props.conn} />
</>
);
export const TodoList = (props: { todos: Todo[]; hideDone: boolean }) => {
const { updateTodoState } = useUpdateTodoState();
return (
<>
<ul id="inbox">
{props.todos
.filter((t) => t.status == false)
.map((t, i) => (
<li key={i}>
<TodoItem
todo={t}
updateTodo={(todo) => {
updateTodoState(todo.id, todo.status);
}}
/>
</li>
))}
</ul>
<AddTodo />
</>
);
};

18
src/client/src/core/entities/todo.tsx
View File

@ -1,6 +1,6 @@
type NotDone = false;
type Done = true;
type StatusState = NotDone | Done;
export type StatusState = NotDone | Done;
export const StatusState: { done: Done; notDone: NotDone } = {
done: true,
notDone: false,
@ -11,3 +11,19 @@ export interface Todo {
title: string;
status: StatusState;
}
export const asTodo = (item: Todo): Todo => {
if (!item.id) {
throw new Error("Validation failed: id is null");
}
if (!item.title) {
throw new Error("Validation failed: title is null");
}
if (!!item.status) {
throw new Error("Validation failed: status is null");
}
return item;
};

6
src/client/src/pages/_app.tsx
View File

@ -1,9 +1,11 @@
import { AppProps } from "next/app";
import "@src/styles/tailwind.css";
import SocketProvider from "@src/presentation/contexts/SocketContext";
const MyApp = ({ Component, pageProps }: AppProps) => (
<Component {...pageProps} />
<SocketProvider>
<Component {...pageProps} />
</SocketProvider>
);
export default MyApp;

27
src/client/src/pages/index.tsx
View File

@ -1,34 +1,15 @@
import { useEffect, useState } from "react";
import { PageHeading } from "@src/components/common/headings/pageHeading";
import { TodoList } from "@src/components/todos";
import * as signalR from "@microsoft/signalr";
import { HubConnection } from "@microsoft/signalr";
import { Todo } from "@src/core/entities/todo";
import { useSelectInboxTodos } from "@src/presentation/hooks/socketHooks";
const HomePage = () => {
const [conn, setConn] = useState<HubConnection>();
const [todos, setTodos] = useState<Todo[]>([]);
useEffect(() => {
const connection = new signalR.HubConnectionBuilder()
.withUrl("http://localhost:5000/hubs/todo")
.build();
connection.on("todos", (todos) => {
const parsedTodos = JSON.parse(todos);
setTodos(parsedTodos);
});
connection.start().then(() => connection.invoke("GetTodos"));
setConn(connection);
}, []);
const { todos, loading } = useSelectInboxTodos();
return (
<main className="py-8 px-14 space-y-6">
<section className="space-y-2">
<section className="space-y-2 mx-auto max-w-4xl">
<PageHeading title="Inbox" />
<TodoList todos={todos} conn={conn} />
<TodoList todos={loading ? [] : todos} hideDone />
</section>
</main>
);

85
src/client/src/presentation/contexts/SocketContext.tsx Normal file
View File

@ -0,0 +1,85 @@
import { createContext, FC, useEffect, useState } from "react";
import {
HubConnection,
HubConnectionBuilder,
LogLevel,
} from "@microsoft/signalr";
import { asTodo, StatusState, Todo } from "@src/core/entities/todo";
interface SocketContextProps {
conn: HubConnection;
todos: Todo[];
inboxTodos: Todo[];
getTodos: () => void;
getInboxTodos: () => void;
createTodo: (todoName: string) => void;
updateTodo: (todoId: string, todoStatus: StatusState) => void;
}
export const SocketContext = createContext<SocketContextProps>({
conn: void 0,
todos: [],
inboxTodos: [],
getTodos: () => {},
getInboxTodos: () => {},
createTodo: (todoName) => {},
updateTodo: (todoId, todoStatus) => {},
});
export const SocketProvider: FC = (props) => {
const [conn, setConn] = useState<HubConnection>();
const [todos, setTodos] = useState<Todo[]>([]);
const [inboxTodos, setInboxTodos] = useState<Todo[]>([]);
useEffect(() => {
const connection = new HubConnectionBuilder()
.withUrl("http://localhost:5000/hubs/todo")
.withAutomaticReconnect()
.configureLogging(LogLevel.Information)
.build();
connection.on("getTodos", (rawTodos) => {
const newTodos = JSON.parse(rawTodos) as Todo[];
const validatedTodos = newTodos.map(asTodo);
setTodos(validatedTodos);
});
connection.on("getInboxTodos", (rawTodos) => {
const newTodos = JSON.parse(rawTodos) as Todo[];
const validatedTodos = newTodos
.map(asTodo)
.filter((t) => t.status == false);
setInboxTodos(validatedTodos);
});
connection.start().then(() => {
setConn(connection);
});
}, []);
return (
<SocketContext.Provider
value={{
conn,
todos,
inboxTodos,
getTodos: () => {
conn.invoke("GetTodos").catch(console.error);
},
getInboxTodos: () => {
conn.invoke("GetInboxTodos").catch(console.error);
},
createTodo: (todoName) => {
conn.invoke("CreateTodo", todoName).catch(console.error);
},
updateTodo: (todoId, todoStatus) => {
conn.invoke("UpdateTodo", todoId, todoStatus).catch(console.error);
},
}}
>
{conn ? props.children : "loading"}
</SocketContext.Provider>
);
};
export default SocketProvider;

36
src/client/src/presentation/hooks/socketHooks.tsx Normal file
View File

@ -0,0 +1,36 @@
import { useContext, useEffect } from "react";
import { SocketContext } from "@src/presentation/contexts/SocketContext";
import { StatusState } from "@src/core/entities/todo";
export const useSelectInboxTodos = () => {
const socketContext = useContext(SocketContext);
useEffect(() => {
socketContext.getInboxTodos();
}, []);
return {
loading: false,
todos: socketContext.inboxTodos,
};
};
export const useCreateTodo = () => {
const socketContext = useContext(SocketContext);
return {
createTodo: (todoName: string) => {
socketContext.createTodo(todoName);
},
};
};
export const useUpdateTodoState = () => {
const socketContext = useContext(SocketContext);
return {
updateTodoState: (todoId: string, todoState: StatusState) => {
socketContext.updateTodo(todoId, todoState);
},
};
};

22
src/client/src/styles/tailwind.css
View File

@ -2,7 +2,7 @@
@tailwind components;
input {
@apply shadow-none placeholder-gray-300 dark:placeholder-gray-700 border-none outline-none;
@apply shadow-none placeholder-gray-50 dark:placeholder-gray-500 border-none outline-none;
background: transparent;
}
@ -12,10 +12,26 @@ input {
@tailwind utilities;
.base-button {
@apply py-2
px-4
rounded-lg
transition
bg-gray-700
disabled:bg-gray-800
active:bg-gray-600
border
border-gray-500
disabled:border-gray-600
text-sm
font-semibold
disabled:text-gray-300
}
* {
@apply dark:text-gray-100
@apply dark:text-gray-50
}
body {
@apply h-screen dark:bg-black
@apply h-screen dark:bg-gray-700
}

29
src/client/tailwind.config.js
View File

@ -5,7 +5,34 @@ module.exports = {
},
darkMode: "media", // or 'media' or 'class'
theme: {
extend: {},
extend: {
colors: {
gray: {
50: "#eaeaea",
100: "#d4d4d5",
200: "#bfbfc0",
300: "#a9aaab",
400: "#949596",
500: "#535557",
600: "#3d3f42",
700: "#282A2D",
800: "#1c1d1f",
900: "#141517",
},
accent: {
50: "#fcf6e7",
100: "#faeccf",
200: "#f5d99e",
300: "#efc66e",
400: "#eab33d",
500: "#e5a00d",
600: "#b7800a",
700: "#896008",
800: "#5c4005",
900: "#2e2003",
},
},
},
},
variants: {
extend: {},