Skip to content

Commit

Permalink
Merge pull request #117 from Hexi1997/main
Browse files Browse the repository at this point in the history
feat: 完成 task1 并补全注册信息
  • Loading branch information
zhengqiuwan authored Jun 5, 2024
2 parents aa891d8 + d23f905 commit 4575885
Show file tree
Hide file tree
Showing 22 changed files with 2,330 additions and 0 deletions.
17 changes: 17 additions & 0 deletions members/Hexi1997/readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Web3 前端训练营报名

## 个人信息

* Github ID: Hexi1997

* Wechat ID: Somethingforno

* Openbuild Username: Hexi1997

* ERC20 钱包地址: 0xC623848bcc9764cF26F7392D5FF1277596C9E75F

### 个人介绍

4年 react 开发经验
3年 web3 项目经验
现在南京,合作可联系
18 changes: 18 additions & 0 deletions members/Hexi1997/task1/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
24 changes: 24 additions & 0 deletions members/Hexi1997/task1/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
30 changes: 30 additions & 0 deletions members/Hexi1997/task1/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
}
```

- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
13 changes: 13 additions & 0 deletions members/Hexi1997/task1/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Task1</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
32 changes: 32 additions & 0 deletions members/Hexi1997/task1/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{
"name": "task1",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/node": "^20.14.1",
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.19",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.3",
"typescript": "^5.2.2",
"vite": "^5.2.0"
}
}
6 changes: 6 additions & 0 deletions members/Hexi1997/task1/postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
1 change: 1 addition & 0 deletions members/Hexi1997/task1/public/vite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions members/Hexi1997/task1/src/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Header, ToDoList } from '@/components'
export default function App() {
return (
<div className='min-h-screen flex items-center justify-center flex-col gap-y-4'>
<Header />
<ToDoList />
</div>
)
}
31 changes: 31 additions & 0 deletions members/Hexi1997/task1/src/components/AddToDo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { useState } from "react";

interface IAddToDoProps {
onAdd: (content: string) => void;
}
export function AddToDo(props: IAddToDoProps) {
const [content, setContent] = useState("");
const { onAdd } = props;
return (
<div className="flex items-center h-12 text-lg gap-x-4 mt-6">
<input
value={content}
onChange={(e) => {
setContent(e.target.value);
}}
className="w-2/3 h-full rounded-lg outline-none border-[1px] border-solid border-[#272b33] px-4"
placeholder="Please enter content"
/>
<button
onClick={() => {
if (!content) return;
onAdd(content);
setContent("");
}}
className="w-1/3 bg-[#ea4c89] text-white rounded-lg h-full duration-200 hover:opacity-95"
>
Add
</button>
</div>
);
}
7 changes: 7 additions & 0 deletions members/Hexi1997/task1/src/components/Header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export function Header() {
return (
<header>
<h1 className="text-3xl font-semibold">TODO LIST</h1>
</header>
);
}
41 changes: 41 additions & 0 deletions members/Hexi1997/task1/src/components/ToDoItem.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { ITodoItem } from "./ToDoList";

interface IToDoItemProps {
data: ITodoItem;
onDelete: (id: string) => void;
onUpdateDoneStatus: (id: string, isDone: boolean) => void;
}
export function ToDoItem(props: IToDoItemProps) {
const { data, onDelete, onUpdateDoneStatus } = props;
const checkBoxId = `${data.id}-checkbox`;
return (
<li
key={data.id}
className="w-full flex items-center h-12 text-lg gap-x-4 mt-2"
>
<div className="w-2/3 h-full flex items-center justify-start gap-x-1">
<input
type="checkbox"
id={checkBoxId}
checked={data.isDone}
className="scale-125 cursor-pointer"
title={data.isDone ? "Set to Not Completed" : "Set as Completed"}
onChange={() => {
onUpdateDoneStatus(data.id, !data.isDone);
}}
/>
<label htmlFor={checkBoxId} className="line-clamp-1 cursor-pointer">
{data.content}
</label>
</div>
<button
onClick={() => {
onDelete(data.id);
}}
className="w-1/3 bg-[#272b33] text-white rounded-lg h-full duration-200 hover:opacity-95"
>
Delete
</button>
</li>
);
}
69 changes: 69 additions & 0 deletions members/Hexi1997/task1/src/components/ToDoList.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import { useEffect, useState } from "react";
import { ToDoItem } from "./ToDoItem";
import { AddToDo } from "./AddToDo";

export interface ITodoItem {
id: string;
content?: string;
isDone: boolean;
}

export function ToDoList() {
const [todoList, setTodoList] = useState<ITodoItem[]>([]);

const onUpdateDoneStatus = (id: string, isDone: boolean) => {
const newTodoList = [...todoList];
const todoItem = newTodoList.find((item) => item.id === id);
if (todoItem) {
todoItem.isDone = isDone;
}
setTodoList(newTodoList);
saveToLocal(newTodoList);
};

const onAdd = (content: string) => {
const newTodoList = [
...todoList,
{
id: Date.now().toString(),
isDone: false,
content,
},
];
setTodoList(newTodoList);
saveToLocal(newTodoList);
};
const onDelete = (id: string) => {
const newTodoList = todoList.filter((item) => item.id !== id);
setTodoList(newTodoList);
saveToLocal(newTodoList);
};

// recover data
useEffect(() => {
setTodoList(recoverData());
}, []);

return (
<div className="w-[calc(100vw_-_32px)] max-w-[480px]">
<ul>
{todoList.map((item) => (
<ToDoItem
data={item}
onDelete={onDelete}
onUpdateDoneStatus={onUpdateDoneStatus}
/>
))}
</ul>
<AddToDo onAdd={onAdd} />
</div>
);
}

const storageKey = "todo-list";
function saveToLocal(data: ITodoItem[]) {
localStorage.setItem(storageKey, JSON.stringify(data));
}
function recoverData() {
return JSON.parse(localStorage.getItem(storageKey) || "[]") as ITodoItem[];
}
2 changes: 2 additions & 0 deletions members/Hexi1997/task1/src/components/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { Header } from './Header'
export { ToDoList } from './ToDoList'
3 changes: 3 additions & 0 deletions members/Hexi1997/task1/src/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
10 changes: 10 additions & 0 deletions members/Hexi1997/task1/src/main.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
1 change: 1 addition & 0 deletions members/Hexi1997/task1/src/vite-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="vite/client" />
12 changes: 12 additions & 0 deletions members/Hexi1997/task1/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

32 changes: 32 additions & 0 deletions members/Hexi1997/task1/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,

/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,

// path alias
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@/components/*": ["src/components/*"],
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
11 changes: 11 additions & 0 deletions members/Hexi1997/task1/tsconfig.node.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"strict": true
},
"include": ["vite.config.ts"]
}
Loading

0 comments on commit 4575885

Please sign in to comment.