Skip to content

L
lesson_67
Commit b57df59f authored by Pavel Mishakov's avatar Pavel Mishakov
Browse files
Options

67 done

parent e1c3a3a8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 794 additions and 264 deletions
package-lock.json
View file @ b57df59f
This diff is collapsed.
package.json
View file @ b57df59f
......@@ -9,14 +9,18 @@
"lint": "next lint"
},
"dependencies": {
"@reduxjs/toolkit": "^2.8.2",
"axios": "^1.10.0",
"next": "15.3.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "15.3.4"
"react-redux": "^9.2.0"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19"
"@types/react-dom": "^19",
"@types/react-redux": "^7.1.34",
"typescript": "^5"
}
}
redux-test.js 0 → 100644
View file @ b57df59f
const redux = require('@reduxjs/toolkit')
const initialState = {
count: 0,
user: {}
}
const rootReducer = (state = initialState, action) => {
switch(action.type) {
case 'INC_COUNT':
return {...state, count: state.count + 1}
case 'ADD_COUNT':
return {...state, count: state.count + action.value}
default:
return state
}
}
const store = redux.configureStore({reducer: rootReducer})
store.subscribe(() => {
console.log('[SUBSCRIPTION]: ', store.getState())
})
console.log(store.getState())
store.dispatch({type: 'INC_COUNT'})
store.dispatch({type: 'ADD_COUNT', value: 10})
console.log(store.getState())
src/api/countApi.ts 0 → 100644
View file @ b57df59f
import { axiosInstance } from "@/axios/axios";
import { AxiosInstance } from "axios";
class CountApi {
instance: AxiosInstance = axiosInstance
getCount = async () => {
try {
const response = await this.instance.get('count.json')
return response.data
} catch (err) {
console.log(err)
}
}
putCount = async (num: number) => {
try {
await this.instance.put('count.json', num)
} catch (err) {
console.log(err)
}
}
}
export const countApi = new CountApi()
\ No newline at end of file
src/app/StoreProvider.tsx 0 → 100644
View file @ b57df59f
'use client'
import store, { AppStore } from "@/store/store"
import { useRef } from "react"
import { Provider } from "react-redux"
type Props = {
children: React.ReactNode
}
const StoreProvider = ({children}: Props) => {
const storeRef = useRef<AppStore | null>(null)
if (!storeRef.current) {
storeRef.current = store
}
return (
<Provider store={storeRef.current}>
{children}
</Provider>
)
}
export default StoreProvider
\ No newline at end of file
src/app/layout.tsx
View file @ b57df59f
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import StoreProvider from "./StoreProvider";
const geistSans = Geist({
variable: "--font-geist-sans",
......@@ -22,10 +23,13 @@ export default function RootLayout({
}: Readonly<{
children: React.ReactNode;
}>) {
console.log('RERENDER Layout')
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable}`}>
{children}
<StoreProvider>
{children}
</StoreProvider>
</body>
</html>
);
......
src/app/page.module.css deleted 100644 → 0
View file @ e1c3a3a8
.page {
--gray-rgb: 0, 0, 0;
--gray-alpha-200: rgba(var(--gray-rgb), 0.08);
--gray-alpha-100: rgba(var(--gray-rgb), 0.05);
--button-primary-hover: #383838;
--button-secondary-hover: #f2f2f2;
display: grid;
grid-template-rows: 20px 1fr 20px;
align-items: center;
justify-items: center;
min-height: 100svh;
padding: 80px;
gap: 64px;
font-family: var(--font-geist-sans);
}
@media (prefers-color-scheme: dark) {
.page {
--gray-rgb: 255, 255, 255;
--gray-alpha-200: rgba(var(--gray-rgb), 0.145);
--gray-alpha-100: rgba(var(--gray-rgb), 0.06);
--button-primary-hover: #ccc;
--button-secondary-hover: #1a1a1a;
}
}
.main {
display: flex;
flex-direction: column;
gap: 32px;
grid-row-start: 2;
}
.main ol {
font-family: var(--font-geist-mono);
padding-left: 0;
margin: 0;
font-size: 14px;
line-height: 24px;
letter-spacing: -0.01em;
list-style-position: inside;
}
.main li:not(:last-of-type) {
margin-bottom: 8px;
}
.main code {
font-family: inherit;
background: var(--gray-alpha-100);
padding: 2px 4px;
border-radius: 4px;
font-weight: 600;
}
.ctas {
display: flex;
gap: 16px;
}
.ctas a {
appearance: none;
border-radius: 128px;
height: 48px;
padding: 0 20px;
border: none;
border: 1px solid transparent;
transition:
background 0.2s,
color 0.2s,
border-color 0.2s;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 20px;
font-weight: 500;
}
a.primary {
background: var(--foreground);
color: var(--background);
gap: 8px;
}
a.secondary {
border-color: var(--gray-alpha-200);
min-width: 158px;
}
.footer {
grid-row-start: 3;
display: flex;
gap: 24px;
}
.footer a {
display: flex;
align-items: center;
gap: 8px;
}
.footer img {
flex-shrink: 0;
}
/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
a.primary:hover {
background: var(--button-primary-hover);
border-color: transparent;
}
a.secondary:hover {
background: var(--button-secondary-hover);
border-color: transparent;
}
.footer a:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
}
@media (max-width: 600px) {
.page {
padding: 32px;
padding-bottom: 80px;
}
.main {
align-items: center;
}
.main ol {
text-align: center;
}
.ctas {
flex-direction: column;
}
.ctas a {
font-size: 14px;
height: 40px;
padding: 0 16px;
}
a.secondary {
min-width: auto;
}
.footer {
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
}
@media (prefers-color-scheme: dark) {
.logo {
filter: invert();
}
}
src/app/page.tsx
View file @ b57df59f
import Image from "next/image";
import styles from "./page.module.css";
import Count from "@/components/Count/Count";
export default function Home() {
console.log('RERENDER Page')
return (
<div className={styles.page}>
<main className={styles.main}>
<Image
className={styles.logo}
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol>
<li>
Get started by editing <code>src/app/page.tsx</code>.
</li>
<li>Save and see your changes instantly.</li>
</ol>
<div className={styles.ctas}>
<a
className={styles.primary}
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className={styles.logo}
src="/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
className={styles.secondary}
>
Read our docs
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
<div>
<Count />
</div>
);
}
src/axios/axios.ts 0 → 100644
View file @ b57df59f
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/Count/Count.module.css 0 → 100644
View file @ b57df59f
.Count {
text-align: center;
}
.Count button {
margin: 5px;
}
\ No newline at end of file
src/components/Count/Count.tsx 0 → 100644
View file @ b57df59f
'use client'
import { useAppSelector } from '@/hooks/useAppSelector';
import styles from './Count.module.css'
import { useAppDispatch } from '@/hooks/useAppDispatch';
import { decreaseCount, getCount, increaseCount, minusCount, putCount, plusCount } from '@/store/count/count.slice';
import Temp from '../Temp/Temp';
import { useEffect, useState } from 'react';
import Spinner from '../UI/Spinner/Spinner';
const Count = () => {
const {count, loading} = useAppSelector(state => state.count)
const dispatch = useAppDispatch()
const [isMounted, setIsMounted] = useState<boolean>(false)
useEffect(() => {
dispatch(getCount())
}, [])
useEffect(() => {
if (isMounted) {
dispatch(putCount(count))
} else {
setIsMounted(true)
}
}, [count])
console.log('RERENDER Count')
return (
<div className={styles.Count}>
{loading
?
<Spinner />
: <h1>{count}</h1>}
<Temp />
<button onClick={() => dispatch(increaseCount())}>Increase</button>
<button onClick={() => dispatch(decreaseCount())}>Decrease</button>
<button onClick={() => dispatch(plusCount(5))}>Increase by 5</button>
<button onClick={() => dispatch(minusCount(5))}>Decrease by 5</button>
</div>
);
}
export default Count
\ No newline at end of file
src/components/Temp/Temp.tsx 0 → 100644
View file @ b57df59f
'use client'
import { memo } from "react"
const Temp = memo(() => {
console.log('RERENDER Temp')
return (
<h1>TEMP COMPONENT</h1>
)
})
export default Temp
\ No newline at end of file
src/components/UI/Spinner/Spinner.module.css 0 → 100644
View file @ b57df59f
.Spinner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: #000;
}
.wave {
width: 5px;
height: 100px;
background: linear-gradient(45deg, cyan, #fff);
margin: 10px;
animation: wave 1s linear infinite;
border-radius: 20px;
}
.wave:nth-child(2) {
animation-delay: 0.1s;
}
.wave:nth-child(3) {
animation-delay: 0.2s;
}
.wave:nth-child(4) {
animation-delay: 0.3s;
}
.wave:nth-child(5) {
animation-delay: 0.4s;
}
.wave:nth-child(6) {
animation-delay: 0.5s;
}
.wave:nth-child(7) {
animation-delay: 0.6s;
}
.wave:nth-child(8) {
animation-delay: 0.7s;
}
.wave:nth-child(9) {
animation-delay: 0.8s;
}
.wave:nth-child(10) {
animation-delay: 0.9s;
}
@keyframes wave {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
\ No newline at end of file
src/components/UI/Spinner/Spinner.tsx 0 → 100644
View file @ b57df59f
import styles from './Spinner.module.css';
const Spinner = () => {
return (
<div className={styles.Spinner}>
<div className={styles.wave}></div>
<div className={styles.wave}></div>
<div className={styles.wave}></div>
<div className={styles.wave}></div>
<div className={styles.wave}></div>
<div className={styles.wave}></div>
<div className={styles.wave}></div>
<div className={styles.wave}></div>
<div className={styles.wave}></div>
<div className={styles.wave}></div>
</div>
)
}
export default Spinner;
\ No newline at end of file
src/hooks/useAppDispatch.ts 0 → 100644
View file @ b57df59f
import { AppDispatch } from "@/store/store";
import { useDispatch } from "react-redux";
export const useAppDispatch: () => AppDispatch = useDispatch
// export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
\ No newline at end of file
src/hooks/useAppSelector.ts 0 → 100644
View file @ b57df59f
import { RootState } from "@/store/store";
import { TypedUseSelectorHook, useSelector } from "react-redux";
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
\ No newline at end of file
src/store/count/count.slice.ts 0 → 100644
View file @ b57df59f
import { countApi } from "@/api/countApi"
import { axiosInstance } from "@/axios/axios"
import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit"
type State = {
count: number
loading: boolean
error: Error | undefined
}
const namespace = 'count'
const initialState: State = {
count: 0,
loading: false,
error: undefined
}
export const getCount = createAsyncThunk(
`${namespace}/getCount`,
async () => {
return await countApi.getCount()
}
)
export const putCount = createAsyncThunk(
`${namespace}/putCount`,
async (num: number) => {
await countApi.putCount(num)
}
)
const countSlice = createSlice({
name: namespace,
initialState,
reducers: {
increaseCount: (state) => {
state.count += 1
},
decreaseCount: (state) => {
state.count -= 1
},
plusCount: (state, action: PayloadAction<number>) => {
state.count += action.payload
},
minusCount: (state, action: PayloadAction<number>) => {
state.count -= action.payload
},
},
extraReducers: (builder) => {
builder
.addCase(getCount.pending, (state) => {
state.loading = true
state.error = undefined
})
.addCase(getCount.rejected, (state, action) => {
state.loading = false
state.error = action.error as Error
})
.addCase(getCount.fulfilled, (state, action) => {
state.loading = false
state.count = action.payload
state.error = undefined
})
.addCase(putCount.pending, (state) => {
state.loading = true
state.error = undefined
})
.addCase(putCount.rejected, (state) => {
state.loading = false
state.error = {message: 'Patch failed'} as Error
})
.addCase(putCount.fulfilled, (state) => {
state.loading = false
state.error = undefined
})
}
})
export const {
decreaseCount,
increaseCount,
minusCount,
plusCount,
} = countSlice.actions
export default countSlice.reducer
\ No newline at end of file
src/store/store.tsx 0 → 100644
View file @ b57df59f
import { configureStore } from "@reduxjs/toolkit";
import countReducer from './count/count.slice'
const store = configureStore({
reducer: {
count: countReducer,
}
})
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
export type AppStore = typeof store
export default store
\ No newline at end of file
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