5 |
13 | );
14 |
15 | export default Scenario;
16 |
--------------------------------------------------------------------------------
/workshops/state-management-react/context/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | import { dirname } from "path";
2 | import { fileURLToPath } from "url";
3 | import { FlatCompat } from "@eslint/eslintrc";
4 |
5 | const __filename = fileURLToPath(import.meta.url);
6 | const __dirname = dirname(__filename);
7 |
8 | const compat = new FlatCompat({
9 | baseDirectory: __dirname,
10 | });
11 |
12 | const eslintConfig = [
13 | ...compat.extends("next/core-web-vitals", "next/typescript"),
14 | ];
15 |
16 | export default eslintConfig;
17 |
--------------------------------------------------------------------------------
/lectures/25-testing/practice/react-example/my-app/src/components/FocusInput.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import FocusInput from './FocusInput';
3 | import {render, fireEvent, cleanup, screen} from '@testing-library/react';
4 |
5 | afterEach(cleanup);
6 |
7 | test('clicking on button trigger focus on input', () => {
8 | render({props.title}
6 |{props.description}
7 | {props.component}
8 |
9 | Check the code in GitHub
10 |
11 | {props.snippet}
12 |
7 |
13 |
14 |
15 | );
16 | };
17 |
18 | export default FocusInput;
19 |
--------------------------------------------------------------------------------
/workshops/ui-libraries/with-chakra-ui-app/src/components/Hero.tsx:
--------------------------------------------------------------------------------
1 | import { Flex, Heading } from "@chakra-ui/react";
2 |
3 | export const Hero = ({ title }: { title: string }) => (
4 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/lectures/18-react-basics/practice/my-app/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env*.local
29 |
30 | # vercel
31 | .vercel
32 |
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 |
--------------------------------------------------------------------------------
/workshops/ui-libraries/with-chakra-ui-app/src/pages/_document.tsx:
--------------------------------------------------------------------------------
1 | import NextDocument, { Html, Head, Main, NextScript } from "next/document";
2 | import { ColorModeScript } from "@chakra-ui/react";
3 |
4 | export default class Document extends NextDocument {
5 | render() {
6 | return (
7 |
8 |
12 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/lectures/22-nextjs-1/practice/src/app/react-csr-approach/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useEffect, useState } from 'react';
4 |
5 | import Tasks from '@/components/Tasks';
6 | import { Task } from '@/interfaces/task';
7 |
8 | export default function ReactApproach() {
9 | const [tasks, setTasks] = useState
13 |
16 | Hello guys!
14 | 099 226 99 89
15 |
19 |
20 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/workshops/state-management-react/tanstack-query/src/app/StoreProvider.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import type * as React from 'react';
3 | import { QueryClientProvider } from '@tanstack/react-query';
4 | import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
5 | import { getQueryClient } from '@/app/get-query-client';
6 |
7 | export default function Providers({ children }: { children: React.ReactNode }) {
8 | const queryClient = getQueryClient();
9 |
10 | return (
11 | Tasks
21 |
7 |
8 | Welcome, {name === '' ? 'Anonymous User' : name}!
9 |
10 |
11 | setName(e.target.value)} 17 | /> 18 |
19 | );
20 | }
21 |
22 | export default ChangeInput;
23 |
--------------------------------------------------------------------------------
/lectures/11-js-dom/practice/practice-1/sizing.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | 11 | setName(e.target.value)} 17 | /> 18 |
14 |
15 |
16 |
14 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/lectures/11-js-dom/practice/practice-1/script/4-modifying.js:
--------------------------------------------------------------------------------
1 | // const userData = document.querySelector('.user-data');
2 | // const cityInfo = document.createElement('p');
3 | // cityInfo.textContent = 'London';
4 |
5 | // userData.prepend(cityInfo);
6 | // userData.append(cityInfo);
7 | // userData.before(cityInfo);
8 | // userData.after(cityInfo);
9 | // userData.replaceWith(cityInfo);
10 | // userData.remove();
11 |
12 | // userData.insertAdjacentElement('beforebegin', cityInfo);
13 | // userData.insertAdjacentElement('afterbegin', cityInfo);
14 | // userData.insertAdjacentElement('afterend', cityInfo);
15 | // userData.insertAdjacentElement('beforeend', cityInfo);
16 |
--------------------------------------------------------------------------------
/lectures/11-js-dom/practice/events/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
15 |
19 | 16 | 17 |
18 |
15 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/workshops/state-management-react/pure-redux-example/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/lectures/15-typescript-basics/code_examples/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ts-basics",
3 | "version": "1.0.0",
4 | "lockfileVersion": 3,
5 | "requires": true,
6 | "packages": {
7 | "": {
8 | "name": "ts-basics",
9 | "version": "1.0.0",
10 | "license": "MIT",
11 | "dependencies": {
12 | "typescript": "^5.3.3"
13 | }
14 | },
15 | "node_modules/typescript": {
16 | "version": "5.3.3",
17 | "license": "Apache-2.0",
18 | "bin": {
19 | "tsc": "bin/tsc",
20 | "tsserver": "bin/tsserver"
21 | },
22 | "engines": {
23 | "node": ">=14.17"
24 | }
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/lectures/25-testing/practice/react-example/my-app/src/components/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import * as serviceWorker from './serviceWorker';
6 | import ReactGA from 'react-ga';
7 |
8 | ReactGA.initialize('UA-64315802-4');
9 | ReactGA.pageview('/');
10 |
11 | ReactDOM.render(
16 |
20 | 17 | 18 |
19 |
7 |
8 | 
9 |
21 |
22 | );
23 | }
24 |
25 | export default App;
26 |
--------------------------------------------------------------------------------
/workshops/ui-libraries/README.md:
--------------------------------------------------------------------------------
1 | # UI Libraries
2 |
3 | - [Video](https://solvdportal-my.sharepoint.com/:v:/r/personal/laba_solvd_com/Documents/Recordings/Development-React.js-2025-01-20250620_140246-Meeting%20Recording.mp4?csf=1&web=1&e=VKcW32&nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJTdHJlYW1XZWJBcHAiLCJyZWZlcnJhbFZpZXciOiJTaGFyZURpYWxvZy1MaW5rIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXcifX0%3D)
4 | - [Presentation](https://solvdportal.sharepoint.com/:p:/s/GoogleDriveSolvdLABA/Eea4KuPEpdhJqSZpHhZSsxkBlnwTmePbCh7NV-t3SjZ6hw?e=MdDKn4)
5 |
6 | MUI docs - https://mui.com/
7 |
8 | Ant Design dcs - https://ant.design/
9 |
10 | Chakra UI docs - https://chakra-ui.com/
11 |
--------------------------------------------------------------------------------
/workshops/ui-libraries/material-ui-nextjs-pages-router-ts/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "jsxImportSource": "@emotion/react",
17 | "incremental": true
18 | },
19 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
20 | "exclude": ["node_modules"]
21 | }
22 |
--------------------------------------------------------------------------------
/lectures/22-nextjs-1/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 | /.pnp
6 | .pnp.*
7 | .yarn/*
8 | !.yarn/patches
9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 |
13 | # testing
14 | /coverage
15 |
16 | # next.js
17 | /.next/
18 | /out/
19 |
20 | # production
21 | /build
22 |
23 | # misc
24 | .DS_Store
25 | *.pem
26 |
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 |
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 |
36 | # vercel
37 | .vercel
38 |
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 |
43 | .next
44 |
--------------------------------------------------------------------------------
/workshops/state-management-react/rtk/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.*
7 | .yarn/*
8 | !.yarn/patches
9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 |
13 | # testing
14 | /coverage
15 |
16 | # next.js
17 | /.next/
18 | /out/
19 |
20 | # production
21 | /build
22 |
23 | # misc
24 | .DS_Store
25 | *.pem
26 |
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 |
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 |
36 | # vercel
37 | .vercel
38 |
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 |
--------------------------------------------------------------------------------
/lectures/18-react-basics/practice/example-1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
10 | Edit src/App.js and save to reload.
11 |
-
16 | {tasks.map((task) => (
17 |
-
18 |
19 |
{task.title}
20 |{task.description}
21 |{task.status}
22 |{task.date}
23 | 24 |
25 | ))}
26 |
18 |
21 | );
22 | };
23 |
24 | export default FetchApiApproach;
25 |
--------------------------------------------------------------------------------
/lectures/03-html-basics/task.md:
--------------------------------------------------------------------------------
1 | # HTML practice
2 |
3 | Create HTML page using provided [Figma Design](Tasks Without Cache
19 |
18 |
21 | );
22 | };
23 |
24 | export default FetchApiApproach;
25 |
--------------------------------------------------------------------------------
/workshops/ui-libraries/material-ui-nextjs-ts/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "plugins": [
18 | {
19 | "name": "next"
20 | }
21 | ],
22 | "baseUrl": ".",
23 | "paths": {
24 | "@/*": ["./src/*"]
25 | }
26 | },
27 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
28 | "exclude": ["node_modules"]
29 | }
30 |
--------------------------------------------------------------------------------
/workshops/ui-libraries/with-ant-design-app/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import type { Metadata } from "next";
3 | import { Inter } from "next/font/google";
4 | import StyledComponentsRegistry from "./AntdRegistry";
5 | import "./globals.css";
6 |
7 | const inter = Inter({ subsets: ["latin"] });
8 |
9 | export const metadata: Metadata = {
10 | title: "Create Next App",
11 | description: "Generated by create next app",
12 | };
13 |
14 | interface RootLayoutProps {
15 | children: React.ReactNode;
16 | }
17 |
18 | function RootLayout({ children }: RootLayoutProps) {
19 | return (
20 |
21 |
22 | Tasks With Cache
19 |
13 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/workshops/ui-libraries/material-ui-nextjs-pages-router-ts/src/ProTip.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Link from '@mui/material/Link';
3 | import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
4 | import Typography from '@mui/material/Typography';
5 |
6 | function LightBulbIcon(props: SvgIconProps) {
7 | return (
8 | 1 cell
14 | 2 cell
15 | 3 cell
16 | 4 cell
17 | 5 cell
18 | 6 cell
19 | 7 cell
20 | 8 cell
21 | 9 cell
22 | Changed position name
'; 29 | // console.log(userPosition.outerHTML); 30 | 31 | // console.log(userData.textContent); 32 | -------------------------------------------------------------------------------- /lectures/25-testing/practice/react-example/my-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "use-timeout": "^1.1.0", 13 | "web-vitals": "^2.1.4" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "test-with-coverage": "react-scripts test --coverage", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /lectures/17-patterns/practice/structural/3.facade.js: -------------------------------------------------------------------------------- 1 | class Bank { 2 | verify(amount) { 3 | return amount < 999; 4 | } 5 | } 6 | 7 | class CreditHistory { 8 | check(name) { 9 | return true; 10 | } 11 | } 12 | 13 | class Balance { 14 | check(name) { 15 | //to do api request 16 | return true; 17 | } 18 | } 19 | 20 | // facade 21 | class Credit { 22 | constructor(name) { 23 | this.name = name; 24 | } 25 | 26 | applyFor(amount) { 27 | const bankApproved = new Bank().verify(amount); 28 | const bankAnswer = bankApproved ? 'approved' : 'declined'; 29 | const isPositiveBalance = new Balance().check(this.name); 30 | const balance = isPositiveBalance ? 'positive balance' : 'negative balance'; 31 | const isGoodCreditHistory = new CreditHistory().check(this.name); 32 | const creditHistory = isGoodCreditHistory ? 'good' : 'poor'; 33 | 34 | return `${this.name} bank result: ${bankAnswer}, balance: ${balance}, credit history: ${creditHistory}`; 35 | } 36 | } 37 | 38 | const credit = new Credit('Misha'); 39 | const creditSmall = credit.applyFor(99); 40 | console.log(creditSmall); 41 | -------------------------------------------------------------------------------- /workshops/ui-libraries/material-ui-nextjs-ts/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Container from "@mui/material/Container"; 3 | import Typography from "@mui/material/Typography"; 4 | import Box from "@mui/material/Box"; 5 | import Link from "@mui/material/Link"; 6 | import NextLink from "next/link"; 7 | import ProTip from "@/components/ProTip"; 8 | import Copyright from "@/components/Copyright"; 9 | 10 | export default function Home() { 11 | return ( 12 |
17 |
18 | Clicked {count} time{count === 1 ? '' : 's'}
19 |
20 |
21 |
34 | );
35 | }
36 |
37 | export default Counter;
38 |
--------------------------------------------------------------------------------
/lectures/25-testing/practice/react-example/my-app/src/components/useAPI.js:
--------------------------------------------------------------------------------
1 | import {useState, useCallback} from 'react';
2 |
3 | const useAPI = (initialData = null) => {
4 | const initialState = {
5 | data: initialData,
6 | success: false,
7 | loading: false,
8 | error: null,
9 | };
10 |
11 | const [response, setResponse] = useState(initialState);
12 |
13 | const callAPI = async (URL, options = {method: 'GET'}) => {
14 | setResponse({...response, success: false, loading: true});
15 | try {
16 | const response = await fetch(URL, options);
17 | if (response.status < 200 || response.status >= 300)
18 | throw new Error('Failed to fetch');
19 | const json = await response.json();
20 | setResponse({
21 | data: json,
22 | success: true,
23 | loading: false,
24 | error: null,
25 | });
26 | } catch (e) {
27 | setResponse({
28 | data: initialData,
29 | success: false,
30 | loading: false,
31 | error: e.message,
32 | });
33 | }
34 | };
35 |
36 | return [response, useCallback(callAPI, [])];
37 | };
38 |
39 | export default useAPI;
40 |
--------------------------------------------------------------------------------
/lectures/04-css/practice/positioning/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 21 |
static:
12 | 13 |relative:
17 | 18 |absolute:
22 |
23 |
24 |
25 | fixed:
29 | 30 |sticky:
34 |
35 |
36 |
37 |
26 |
31 | );
32 | }
33 |
34 | /**
35 | * static version
36 | */
37 | export async function generateStaticParams() {
38 | const tasks = await fetch('http://localhost:3001/api/tasks?limit=1000');
39 | const data: Task[] = await tasks.json();
40 |
41 | return data.map((task) => ({ id: String(task.id) }));
42 | }
43 |
--------------------------------------------------------------------------------
/lectures/17-patterns/practice/structural/1.adapter.js:
--------------------------------------------------------------------------------
1 | class OldCalc {
2 | operations(value1, value2, operation) {
3 | switch (operation) {
4 | case 'add':
5 | return value1 + value2;
6 | case 'sub':
7 | return value1 - value2;
8 |
9 | default:
10 | return NaN;
11 | }
12 | }
13 | }
14 |
15 | class NewCalc {
16 | add(value1, value2) {
17 | return value1 + value2;
18 | }
19 |
20 | sub(value1, value2) {
21 | return value1 - value2;
22 | }
23 | }
24 |
25 | class CalcAdapter {
26 | constructor() {
27 | this.calc = new NewCalc();
28 | }
29 |
30 | operations(value1, value2, operation) {
31 | switch (operation) {
32 | case 'add':
33 | return this.calc.add(value1, value2);
34 | case 'sub':
35 | return this.calc.sub(value1, value2);
36 |
37 | default:
38 | return NaN;
39 | }
40 | }
41 | }
42 |
43 | const oldCalc = new OldCalc();
44 | console.log(oldCalc.operations(10, 5, 'add'));
45 |
46 | const newCalc = new NewCalc();
47 | console.log(newCalc.add(10, 5));
48 |
49 | const adapterCalc = new CalcAdapter();
50 | console.log(adapterCalc.operations(10, 5, 'add'));
51 | // console.log(adapterCalc.add(10, 5));
52 |
--------------------------------------------------------------------------------
/workshops/state-management-react/tanstack-query/src/app/get-query-client.ts:
--------------------------------------------------------------------------------
1 | import { QueryClient, defaultShouldDehydrateQuery, isServer } from '@tanstack/react-query';
2 |
3 | function makeQueryClient() {
4 | return new QueryClient({
5 | defaultOptions: {
6 | queries: {
7 | staleTime: Infinity,
8 | },
9 | dehydrate: {
10 | // include pending queries in dehydration
11 | shouldDehydrateQuery: (query) =>
12 | defaultShouldDehydrateQuery(query) || query.state.status === 'pending',
13 | },
14 | },
15 | });
16 | }
17 |
18 | let browserQueryClient: QueryClient | undefined = undefined;
19 |
20 | export function getQueryClient() {
21 | if (isServer) {
22 | // Server: always make a new query client
23 | return makeQueryClient();
24 | } else {
25 | // Browser: make a new query client if we don't already have one
26 | // This is very important, so we don't re-make a new client if React
27 | // suspends during the initial render. This may not be needed if we
28 | // have a suspense boundary BELOW the creation of the query client
29 | if (!browserQueryClient) browserQueryClient = makeQueryClient();
30 | return browserQueryClient;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/lectures/18-react-basics/practice/my-app/src/mock/people.js:
--------------------------------------------------------------------------------
1 | const people = [
2 | {
3 | id: 0, // Used in JSX as a key
4 | name: 'Creola Katherine Johnson',
5 | profession: 'mathematician',
6 | accomplishment: 'spaceflight calculations',
7 | imageId: 'MK3eW3A',
8 | },
9 | {
10 | id: 1, // Used in JSX as a key
11 | name: 'Mario José Molina-Pasquel Henríquez',
12 | profession: 'chemist',
13 | accomplishment: 'discovery of Arctic ozone hole',
14 | imageId: 'mynHUSa',
15 | },
16 | {
17 | id: 2, // Used in JSX as a key
18 | name: 'Mohammad Abdus Salam',
19 | profession: 'physicist',
20 | accomplishment: 'electromagnetism theory',
21 | imageId: 'bE7W1ji',
22 | },
23 | {
24 | id: 3, // Used in JSX as a key
25 | name: 'Percy Lavon Julian',
26 | profession: 'chemist',
27 | accomplishment:
28 | 'pioneering cortisone drugs, steroids and birth control pills',
29 | imageId: 'IOjWm71',
30 | },
31 | {
32 | id: 4, // Used in JSX as a key
33 | name: 'Subrahmanyan Chandrasekhar',
34 | profession: 'astrophysicist',
35 | accomplishment: 'white dwarf star mass calculations',
36 | imageId: 'lrWQx8l',
37 | },
38 | ];
39 |
40 | export {people};
41 |
--------------------------------------------------------------------------------
/workshops/state-management-react/tanstack-query/src/components/OrdersContainer/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { Orders } from '@/components';
4 | import { getOrders } from '@/services/orders';
5 | import { useInfiniteQuery } from '@tanstack/react-query';
6 |
7 | const OrdersContainer = () => {
8 | const { data, fetchNextPage, isLoading, isFetching, ...rest } = useInfiniteQuery({
9 | queryKey: ['orders'],
10 | enabled: false,
11 | initialPageParam: 0,
12 | queryFn: async ({ pageParam = 0 }) => await getOrders(pageParam),
13 | getPreviousPageParam: (_, allPages) => {
14 | return allPages.length - 1 || 0;
15 | },
16 | getNextPageParam: (_, allPages) => {
17 | return allPages.length || 0;
18 | },
19 | });
20 |
21 | console.log('rest', rest);
22 |
23 | return (
24 | {data.title}
27 |{data.description}
28 |{data.status}
29 |{data.date}
30 |1. Animation Name & @keyframes
10 | 11 | 12 |2. Animation Duration (3s)
13 | 14 | 15 |3. Animation Timing Function (ease-in-out)
16 | 17 | 18 |4. Animation Delay (1s)
19 | 20 | 21 |5. Animation Iteration Count (3)
22 | 23 | 24 |6. Animation Direction (alternate)
25 | 26 | 27 |7. Animation Fill Mode (forwards)
28 | 29 | 30 |8. Animation Play State (running/paused)
31 | 32 |Hover over the box to pause the animation.
33 | 34 |