Skip to content

6
63_webinar
Commit 3eb8ef68 authored by Pavel Mishakov's avatar Pavel Mishakov
Browse files
Options

63 webinar is done

parents
Hide whitespace changes
Inline Side-by-side
Showing with 635 additions and 0 deletions
.gitignore 0 → 100644
View file @ 3eb8ef68
# 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?
README.md 0 → 100644
View file @ 3eb8ef68
# 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) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/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:
```js
export default tseslint.config({
extends: [
// Remove ...tseslint.configs.recommended and replace with this
...tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
...tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
...tseslint.configs.stylisticTypeChecked,
],
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
```
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default tseslint.config({
plugins: {
// Add the react-x and react-dom plugins
'react-x': reactX,
'react-dom': reactDom,
},
rules: {
// other rules...
// Enable its recommended typescript rules
...reactX.configs['recommended-typescript'].rules,
...reactDom.configs.recommended.rules,
},
})
```
eslint.config.js 0 → 100644
View file @ 3eb8ef68
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
)
index.html 0 → 100644
View file @ 3eb8ef68
<!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>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
package-lock.json 0 → 100644
View file @ 3eb8ef68
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
View file @ 3eb8ef68
{
"name": "webinar",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.9.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-router": "^7.6.2"
},
"devDependencies": {
"@eslint/js": "^9.25.0",
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"@vitejs/plugin-react": "^4.4.1",
"eslint": "^9.25.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^16.0.0",
"typescript": "~5.8.3",
"typescript-eslint": "^8.30.1",
"vite": "^6.3.5"
}
}
public/vite.svg 0 → 100644
View file @ 3eb8ef68
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
src/axios/axiosInstance.ts 0 → 100644
View file @ 3eb8ef68
import axios from "axios";
export const axiosInstance = axios.create({
baseURL: 'https://burger-project-ajs-22-default-rtdb.firebaseio.com/'
})
\ No newline at end of file
src/components/Form/Form.module.css 0 → 100644
View file @ 3eb8ef68
.Form {
max-width: 400px;
}
\ No newline at end of file
src/components/Form/Form.tsx 0 → 100644
View file @ 3eb8ef68
import { useState, type ChangeEvent, type FormEvent } from "react"
import Input from "../UI/Input/Input"
import styles from './Form.module.css'
import { axiosInstance } from "../../axios/axiosInstance"
import type { TCreateInstanceDto } from "../../types/TCreateInstanceDto"
import type { TInstance } from "../../types/TInstance"
type Props = {
path: string
placeholder?: string
setItems: (cb: (data: TInstance[]) => TInstance[]) => void
multiline?: boolean
}
const Form = ({path, placeholder, setItems, multiline = false}: Props) => {
const [inputValues, setInputValues] = useState<TCreateInstanceDto>({
content: ''
})
const inputHandler = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setInputValues(prev => ({...prev, [e.target.name]: e.target.value}))
}
const submit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault()
try {
const response = await axiosInstance.post(path, {
content: inputValues.content
})
if (response.data.name) {
setItems(prev => ([...prev, {id: response.data.name, content: inputValues.content}]))
}
setInputValues({content: ''})
} catch(err) {
console.log(err)
}
}
return (
<div className={styles.Form}>
<form onSubmit={submit}>
<Input multiline={multiline} placeholder={placeholder} onChange={inputHandler} value={inputValues.content} name={'content'} />
<button>SUBMIT</button>
</form>
</div>
)
}
export default Form
\ No newline at end of file
src/components/Header/Header.module.css 0 → 100644
View file @ 3eb8ef68
.Header {
background: lightblue;
}
.HeaderContent {
padding: 20px;
margin: 0 auto;
max-width: 1000px;
}
.HeaderNav {
display: flex;
width: 100%;
gap: 20px;
}
.HeaderNav a {
color: black;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}
\ No newline at end of file
src/components/Header/Header.tsx 0 → 100644
View file @ 3eb8ef68
import { NavLink } from 'react-router'
import styles from './Header.module.css'
const Header = () => {
return (
<header className={styles.Header}>
<div className={styles.HeaderContent}>
<nav className={styles.HeaderNav}>
<NavLink to={'/'}>Home</NavLink>
<NavLink to={'/todo'}>Todo</NavLink>
<NavLink to={'/movie'}>Movie</NavLink>
</nav>
</div>
</header>
)
}
export default Header
\ No newline at end of file
src/components/List/List.tsx 0 → 100644
View file @ 3eb8ef68
import type { TInstance } from "../../types/TInstance"
import ListItem from "../ListItem/ListItem"
type Props = {
items: TInstance[]
setItems: (cb: (data: TInstance[]) => TInstance[]) => void
}
const List = ({items, setItems}: Props) => {
return (
<ul>
{items.map((item: TInstance) => {
return (
<ListItem
key={item.id}
item={item}
setItems={setItems}
/>
)
})}
</ul>
)
}
export default List
\ No newline at end of file
src/components/ListItem/ListItem.tsx 0 → 100644
View file @ 3eb8ef68
import { useState, type ChangeEvent } from "react"
import { axiosInstance } from "../../axios/axiosInstance"
import type { TInstance } from "../../types/TInstance"
type Props = {
item: TInstance
setItems: (cb: (data: TInstance[]) => TInstance[]) => void
}
const ListItem = ({item, setItems}: Props) => {
const [isEditing, setIsEditing] = useState<boolean>(false)
const [value, setValue] = useState<string>(item.content)
const inputHandler = (e: ChangeEvent<HTMLTextAreaElement>) => {
setValue(e.target.value)
}
const deleteHandler = async () => {
try {
await axiosInstance.delete(`todo/${item.id}.json`)
setItems((prev: TInstance[]) => {
const copyState = prev.filter((p: TInstance) => p.id !== item.id)
return copyState
})
} catch (err) {
console.log(err)
}
}
const saveHandler = async () => {
try {
await axiosInstance.patch(`todo/${item.id}.json`, {
content: value
})
setItems((prev: TInstance[]) => {
const idx = prev.findIndex((p: TInstance) => p.id === item.id)
prev[idx].content = value
return prev
})
setIsEditing(false)
} catch (err) {
console.log(err)
}
}
return (
<li>
{isEditing ? <textarea onChange={inputHandler} value={value}/> : <p>{item.content}</p>}
<button onClick={deleteHandler}>DELETE</button>
{isEditing
?
<div>
<button onClick={() => {
setIsEditing(false)
setValue(item.content)
}}>CANCEL</button>
<button onClick={saveHandler}>SAVE</button>
</div>
:
<button onClick={() => setIsEditing(true)}>EDIT</button>}
</li>
)
}
export default ListItem
\ No newline at end of file
src/components/UI/Input/Input.module.css 0 → 100644
View file @ 3eb8ef68
.Input {
resize: none;
width: 100%;
padding: 10px;
border: none;
border-radius: 10px;
background: lightblue;
color: black;
}
\ No newline at end of file
src/components/UI/Input/Input.tsx 0 → 100644
View file @ 3eb8ef68
import styles from './Input.module.css'
import type { ChangeEventHandler } from "react"
type Props = {
multiline?: boolean
onChange: ChangeEventHandler
value: string
placeholder?: string
name: string
}
const Input = ({multiline = false, onChange, value, placeholder, name}: Props) => {
return (
<>
{multiline
?
<textarea placeholder={placeholder} name={name} className={styles.Input} rows={5} value={value} onChange={onChange} />
:
<input placeholder={placeholder} name={name} className={styles.Input} type="text" value={value} onChange={onChange} />
}
</>
)
}
export default Input
\ No newline at end of file
src/components/layouts/Layout/Layout.tsx 0 → 100644
View file @ 3eb8ef68
import { Outlet } from "react-router"
import Header from "../../Header/Header"
const Layout = () => {
return (
<>
<Header />
<main>
<Outlet />
</main>
</>
)
}
export default Layout
\ No newline at end of file
src/components/utils/firebaseParser.ts 0 → 100644
View file @ 3eb8ef68
import type { TFirebaseData } from "../../types/TFirebaseData";
import type { TInstance } from "../../types/TInstance";
export const firebaseParser = (obj: TFirebaseData): TInstance[] => {
const result: TInstance[] = Object.keys(obj).map(key => {
return {
id: key,
content: obj[key].content
}
})
return result
}
\ No newline at end of file
src/index.css 0 → 100644
View file @ 3eb8ef68
* {
margin: 0;
box-sizing: border-box;
}
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
src/main.tsx 0 → 100644
View file @ 3eb8ef68
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import { createBrowserRouter, RouterProvider } from 'react-router'
import Layout from './components/layouts/Layout/Layout'
import TodoPage from './pages/TodoPage/TodoPage'
import MoviePage from './pages/MoviePage/MoviePage'
const router = createBrowserRouter([
{
path: '/',
element: <Layout />,
children: [
{
index: true,
element: <h1>Welcome to Homework 62</h1>
},
{
path: 'todo',
element: <TodoPage />
},
{
path: 'movie',
element: <MoviePage />
}
]
}
])
createRoot(document.getElementById('root')!).render(
<StrictMode>
<RouterProvider router={router} />
</StrictMode>,
)
src/pages/MoviePage/MoviePage.module.css 0 → 100644
View file @ 3eb8ef68
.Movie {
margin: 20px auto;
max-width: 1000px;
}
\ No newline at end of file
src/pages/MoviePage/MoviePage.tsx 0 → 100644
View file @ 3eb8ef68
import { useEffect, useState } from 'react'
import Form from '../../components/Form/Form'
import List from '../../components/List/List'
import styles from './MoviePage.module.css'
import type { TInstance } from '../../types/TInstance'
import { axiosInstance } from '../../axios/axiosInstance'
import type { TFirebaseData } from '../../types/TFirebaseData'
import { firebaseParser } from '../../components/utils/firebaseParser'
const MoviePage = () => {
const [items, setItems] = useState<TInstance[]>([])
useEffect(() => {
const fetchData = async() => {
try {
const response = await axiosInstance.get('movie.json')
const data: TFirebaseData = response.data
setItems(firebaseParser(data))
} catch(err) {
console.log(err)
}
}
fetchData()
}, [])
return (
<section className={styles.Movie}>
<h1>Movie Page</h1>
<Form
path='movie.json'
placeholder='Type you Movie here!'
setItems={setItems}
multiline={true}
/>
<hr />
<List items={items} setItems={setItems} />
</section>
)
}
export default MoviePage
\ No newline at end of file
src/pages/TodoPage/TodoPage.module.css 0 → 100644
View file @ 3eb8ef68
.Todo {
margin: 20px auto;
max-width: 1000px;
}
\ No newline at end of file
src/pages/TodoPage/TodoPage.tsx 0 → 100644
View file @ 3eb8ef68
import { useEffect, useState } from 'react'
import Form from '../../components/Form/Form'
import List from '../../components/List/List'
import styles from './TodoPage.module.css'
import type { TInstance } from '../../types/TInstance'
import { axiosInstance } from '../../axios/axiosInstance'
import type { TFirebaseData } from '../../types/TFirebaseData'
import { firebaseParser } from '../../components/utils/firebaseParser'
const TodoPage = () => {
const [items, setItems] = useState<TInstance[]>([])
useEffect(() => {
const fetchData = async() => {
try {
const response = await axiosInstance.get('todo.json')
const data: TFirebaseData = response.data
setItems(firebaseParser(data))
} catch(err) {
console.log(err)
}
}
fetchData()
}, [])
return (
<section className={styles.Todo}>
<h1>Todo Page</h1>
<Form
path='todo.json'
placeholder='Type you Todo here!'
setItems={setItems}
/>
<hr />
<List items={items} setItems={setItems} />
</section>
)
}
export default TodoPage
\ No newline at end of file
src/types/TCreateInstanceDto.ts 0 → 100644
View file @ 3eb8ef68
export type TCreateInstanceDto = {
content: string
}
\ No newline at end of file
src/types/TFirebaseData.ts 0 → 100644
View file @ 3eb8ef68
export type TFirebaseData = {
[key: string]: {
content: string
}
}
\ No newline at end of file
src/types/TInstance.ts 0 → 100644
View file @ 3eb8ef68
export type TInstance = {
id: string
content: string
}
\ No newline at end of file
src/vite-env.d.ts 0 → 100644
View file @ 3eb8ef68
/// <reference types="vite/client" />
tsconfig.app.json 0 → 100644
View file @ 3eb8ef68
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}
tsconfig.json 0 → 100644
View file @ 3eb8ef68
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}
tsconfig.node.json 0 → 100644
View file @ 3eb8ef68
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}
vite.config.ts 0 → 100644
View file @ 3eb8ef68
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 3000
}
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment