-
Notifications
You must be signed in to change notification settings - Fork 351
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #117 from Hexi1997/main
feat: 完成 task1 并补全注册信息
- Loading branch information
Showing
22 changed files
with
2,330 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 项目经验 | ||
现在南京,合作可联系 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 }, | ||
], | ||
}, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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? |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
export default { | ||
plugins: { | ||
tailwindcss: {}, | ||
autoprefixer: {}, | ||
}, | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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[]; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export { Header } from './Header' | ||
export { ToDoList } from './ToDoList' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
@tailwind base; | ||
@tailwind components; | ||
@tailwind utilities; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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>, | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
/// <reference types="vite/client" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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: [], | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" }] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"] | ||
} |
Oops, something went wrong.