diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..a26af3c --- /dev/null +++ b/.prettierignore @@ -0,0 +1,27 @@ +*.css +*.html + +pnpm-lock.yaml + +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..e74ed9f --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,6 @@ +{ + "trailingComma": "es5", + "tabWidth": 4, + "semi": false, + "singleQuote": true +} diff --git a/package.json b/package.json index edd6041..0dbfbe0 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,8 @@ "cheerio": "1.0.0-rc.12", "react": "experimental", "react-dom": "experimental", + "react-loader-spinner": "^5.3.4", + "react-router-dom": "^6.9.0", "rect-use": "^1.0.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fec9eb2..195927a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,6 +10,8 @@ specifiers: cheerio: 1.0.0-rc.12 react: experimental react-dom: experimental + react-loader-spinner: ^5.3.4 + react-router-dom: ^6.9.0 rect-use: ^1.0.0 typescript: ^4.9.3 vite: ^3.2.5 @@ -20,6 +22,8 @@ dependencies: cheerio: 1.0.0-rc.12 react: 0.0.0-experimental-9c54b29b4-20230322 react-dom: 0.0.0-experimental-9c54b29b4-20230322_ed6xpwya6oca3tppk6uilvo2my + react-loader-spinner: 5.3.4_tah32hmxhmi2g7goovfvj5m5ou + react-router-dom: 6.9.0_tah32hmxhmi2g7goovfvj5m5ou rect-use: 1.0.0_tah32hmxhmi2g7goovfvj5m5ou devDependencies: @@ -464,6 +468,11 @@ packages: tslib: 1.14.1 dev: false + /@remix-run/router/1.4.0: + resolution: {integrity: sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==} + engines: {node: '>=14'} + dev: false + /@tanstack/query-core/4.27.0: resolution: {integrity: sha512-sm+QncWaPmM73IPwFlmWSKPqjdTXZeFf/7aEmWh00z7yl2FjqophPt0dE1EHW9P1giMC5rMviv7OUbSDmWzXXA==} dev: false @@ -587,7 +596,7 @@ packages: babel-plugin-syntax-jsx: 6.18.0 lodash: 4.17.21 picomatch: 2.3.1 - styled-components: 5.3.9_tah32hmxhmi2g7goovfvj5m5ou + styled-components: 5.3.9_yq6yrxxdqxx5g35vt2chfkqpai dev: false /babel-plugin-syntax-jsx/6.18.0: @@ -1291,11 +1300,51 @@ packages: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} dev: false + /react-is/18.2.0: + resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} + dev: false + + /react-loader-spinner/5.3.4_tah32hmxhmi2g7goovfvj5m5ou: + resolution: {integrity: sha512-G2vw4ssX+RDZ/vfaeva06yfNqyFViv/u+tVZ3kFLy5TKNlNx2DbuwreBSpRtPespQA+VxinxUJsigwLwG9erOg==} + peerDependencies: + react: ^16.0.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 + dependencies: + react: 0.0.0-experimental-9c54b29b4-20230322 + react-dom: 0.0.0-experimental-9c54b29b4-20230322_ed6xpwya6oca3tppk6uilvo2my + react-is: 18.2.0 + styled-components: 5.3.9_yq6yrxxdqxx5g35vt2chfkqpai + styled-tools: 1.7.2 + dev: false + /react-refresh/0.14.0: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} engines: {node: '>=0.10.0'} dev: true + /react-router-dom/6.9.0_tah32hmxhmi2g7goovfvj5m5ou: + resolution: {integrity: sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==} + engines: {node: '>=14'} + peerDependencies: + react: '>=16.8' + react-dom: '>=16.8' + dependencies: + '@remix-run/router': 1.4.0 + react: 0.0.0-experimental-9c54b29b4-20230322 + react-dom: 0.0.0-experimental-9c54b29b4-20230322_ed6xpwya6oca3tppk6uilvo2my + react-router: 6.9.0_ed6xpwya6oca3tppk6uilvo2my + dev: false + + /react-router/6.9.0_ed6xpwya6oca3tppk6uilvo2my: + resolution: {integrity: sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==} + engines: {node: '>=14'} + peerDependencies: + react: '>=16.8' + dependencies: + '@remix-run/router': 1.4.0 + react: 0.0.0-experimental-9c54b29b4-20230322 + dev: false + /react/0.0.0-experimental-9c54b29b4-20230322: resolution: {integrity: sha512-aFi5dUOoDIxM1zVPbrwcltNii/ZEBJGj1ODqmq+RIPScX/Q7fpHnBHHoomJIfBxx9bhK13ygr1bDWmj0Q13V0Q==} engines: {node: '>=0.10.0'} @@ -1399,6 +1448,33 @@ packages: supports-color: 5.5.0 dev: false + /styled-components/5.3.9_yq6yrxxdqxx5g35vt2chfkqpai: + resolution: {integrity: sha512-Aj3kb13B75DQBo2oRwRa/APdB5rSmwUfN5exyarpX+x/tlM/rwZA2vVk2vQgVSP6WKaZJHWwiFrzgHt+CLtB4A==} + engines: {node: '>=10'} + peerDependencies: + react: '>= 16.8.0' + react-dom: '>= 16.8.0' + react-is: '>= 16.8.0' + dependencies: + '@babel/helper-module-imports': 7.18.6 + '@babel/traverse': 7.21.3_supports-color@5.5.0 + '@emotion/is-prop-valid': 1.2.0 + '@emotion/stylis': 0.8.5 + '@emotion/unitless': 0.7.5 + babel-plugin-styled-components: 2.0.7_styled-components@5.3.9 + css-to-react-native: 3.2.0 + hoist-non-react-statics: 3.3.2 + react: 0.0.0-experimental-9c54b29b4-20230322 + react-dom: 0.0.0-experimental-9c54b29b4-20230322_ed6xpwya6oca3tppk6uilvo2my + react-is: 18.2.0 + shallowequal: 1.1.0 + supports-color: 5.5.0 + dev: false + + /styled-tools/1.7.2: + resolution: {integrity: sha512-IjLxzM20RMwAsx8M1QoRlCG/Kmq8lKzCGyospjtSXt/BTIIcvgTonaxQAsKnBrsZNwhpHzO9ADx5te0h76ILVg==} + dev: false + /stylefire/7.0.3: resolution: {integrity: sha512-Q0l7NSeFz/OkX+o6/7Zg3VZxSAZeQzQpYomWmIpOehFM/rJNMSLVX5fgg6Q48ut2ETNKwdhm97mPNU643EBCoQ==} dependencies: diff --git a/src/app/App.css b/src/app/App.css index 2c5e2ef..c985096 100644 --- a/src/app/App.css +++ b/src/app/App.css @@ -39,3 +39,15 @@ .read-the-docs { color: #888; } + +.nav{ + + padding:20px; +} +.navItem{ + + margin:10px; + background-color: #444444; + border-radius: 10px; + padding:12px; +} diff --git a/src/app/App.tsx b/src/app/App.tsx index 089f557..4457a80 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -1,23 +1,16 @@ -import { Suspense } from 'react' - -import reactLogo from '../assets/react.svg' - -import UsersPage from './users/UsersPage' +import React from 'react' import './App.css' +import logo from '../assets/react.svg' +import { AppRoutes } from './AppRoutes' function App() { - return (
- React logo + React logo
- Loading…}> - - -

- React 18 use() hook showcase -

+ +

React 18 use() hook showcase

) } diff --git a/src/app/AppRoutes.tsx b/src/app/AppRoutes.tsx new file mode 100644 index 0000000..299d8a9 --- /dev/null +++ b/src/app/AppRoutes.tsx @@ -0,0 +1,47 @@ +import React, { Suspense } from 'react' +import { Blocks } from 'react-loader-spinner' +import { createBrowserRouter, RouterProvider } from 'react-router-dom' +import NavBar from './NavBar' +import Root from './routes' +import { SpeakersPage } from './SpeakersPage' +import UsersPage from './users/UsersPage' + +const router = createBrowserRouter([ + { + path: '/', + element: , + children: [ + { + path: '/', + element: ( + loading...

}> + + + ), + }, + { + path: '/constantine/speakers', + element: ( + + } + > + + + ), + }, + ], + }, +]) + +export const AppRoutes = () => { + return +} diff --git a/src/app/NavBar.tsx b/src/app/NavBar.tsx new file mode 100644 index 0000000..2080148 --- /dev/null +++ b/src/app/NavBar.tsx @@ -0,0 +1,18 @@ +import reactLogo from '../../assets/react.svg' +import { Link, Outlet } from 'react-router-dom' + +export default function Root() { + return ( +
+ + +
+ ) +} diff --git a/src/app/SpeakersPage.tsx b/src/app/SpeakersPage.tsx new file mode 100644 index 0000000..be41e8b --- /dev/null +++ b/src/app/SpeakersPage.tsx @@ -0,0 +1,21 @@ +import { use } from 'react' + +import Title from '@/components/Title' +import { speakerService, Speaker } from '@/lib/services/speakerService' + +export function SpeakersPage() { + const speakers = use(speakerService.fetchSpeakers()) + + return ( + <> + Speakers +
+ {speakers.map((speaker) => ( +

+ {speaker.name} ({speaker.lecture}) +

+ ))} +
+ + ) +} diff --git a/src/lib/services/speakerService.ts b/src/lib/services/speakerService.ts index fca35c6..312efdb 100644 --- a/src/lib/services/speakerService.ts +++ b/src/lib/services/speakerService.ts @@ -45,7 +45,7 @@ class SpeakerService { } } - return speakers + return speakers.filter((spk) => !!spk) } catch (error) { throw error } diff --git a/src/lib/services/userService.ts b/src/lib/services/userService.ts index ea43d05..2a7b777 100644 --- a/src/lib/services/userService.ts +++ b/src/lib/services/userService.ts @@ -7,7 +7,8 @@ class UserService { singleUser: (id: number) => `/users/${id}`, } - private mapUsers = (usersArr: any[]) => usersArr.map((user: any) => new User(user)) + private mapUsers = (usersArr: any[]) => + usersArr.map((user: any) => new User(user)) private mapUser = (userData: any) => new User(userData) async fetchUsers() {