{array.length > 0 ? <div>content</div> : <div>empty</div>}import { configureStore } from "@reduxjs/toolkit";
import blog from "./slices/blogSlice";
const rootReducer = combineReducers({
blog: blog
})
export const store = configureStore({
reducer: rootReducer
});function App() {
const [userNickName, setUserNickName] = useState('');
const [userProfile, setUserProfile] = useState('')
const [repos, setRepos] = useState([])
const [inputValue, setinputValue] = useState('')
async function findUser() {
setUserNickName(inputValue);
let RespUserRepos = await (await axios.get('https://api.github.com/users/'+inputValue+'/repos')).data;
let RespUser = await (await axios.get('https://api.github.com/users/'+inputValue)).data;
setRepos(RespUserRepos);
setUserProfile(RespUser)
}
return (
<div>
<Header findUser={findUser} setInputValue={setInputValue} />
<Main>
<Profile
avatar={userProfile.avatar_url}
name={userProfile.name}
userNamel={userProfile.userName}
followers={userProfile.followers}
following={userProfile.following}
/>
<ReposInfo title = {'Repositories'} reposNumber = {repos.length}>
{repos.map((card) => <Card name={card.name} description={card.description} key = {card.name}/>)}
</ReposInfo>
</Main>
</div>
);
}const Header = ({ findUser, setInputValue }) => {
return (
<header>
<button onClick={() => findUser()}>click me</button>
<input onChange={event => setinputValue(event.target.value)} />
</header>
)
}const Component = () => {
const fileReader = (e) => {
let reader = new FileReader();
const file = e.target.files[0]
reader.readAsDataURL(file);
reader.onload = () => {
console.log(reader.result)
// здесь инициализируем отправку изображения на сервер
};
}
return (
<div>
<input type="file" accept='image/*' onChange={fileReader} />
</div>
)
}
const webpack = require('webpack');
const path = require('path');
const config = {
entry: [
'react-hot-loader/patch',
path.resolve(__dirname, 'src', 'index.js')
],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.svg$/,
use: 'file-loader'
},
{
test: /\.png$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
}
]
}
]
},
resolve: {
extensions: [
'.js',
'.jsx'
],
alias: {
'react-dom': '@hot-loader/react-dom'
}
},
devServer: {
historyApiFallback: true,
contentBase: path.resolve(__dirname, './dist'),
open: true,
hot: true,
compress: true,
}
};
module.exports = config;<!DOCTYPE html>
<html>
<head>
<title>example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
<script src='../bundle.js'></script>
</body>
</html>import React, { useState } from "react";
export default function App() {
const [state, setState] = useState([
{ id: 0, status: true },
{ id: 1, status: false }
]);
const chooseItem = (id) => {
const newArr = state.map((item) =>
item.id === id ? { ...item, status: true } : { ...item, status: false }
);
setState(newArr);
};
return (
<div className="App">
{state.map((item) => (
<div style={{ border: item.status ? "3px solid tomato" : "none" }}>
<div>TABLE {item.id}</div>
<button onClick={() => chooseItem(item.id)}>CLICK</button>
</div>
))}
</div>
);
}- const onMouseKidsEnter = () => {
- setIsOpen('kids')
- }
- const onMouseWomenEnter = () => {
- setIsOpen('women')
- }
- const onMouseMenEnter = () => {
- setIsOpen('men')
- }
+ const onMouseParamEnter = (param) => {
+ setIsOpen(param);
+ }<LeftBar>
- <LeftBarItem onMouseEnter={onMouseKidsEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'kids'}>
+ <LeftBarItem onMouseEnter={() => onMouseParamEnter('kids')} onMouseLeave={onMouseLeave} isOpen={isOpen === 'kids'}>
<span>Kids</span>
<IoIosArrowBack />
</LeftBarItem>
- <LeftBarItem onMouseEnter={onMouseWomenEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'women'}>
+ <LeftBarItem onMouseEnter={() => onMouseParamEnter('women')} onMouseLeave={onMouseLeave} isOpen={isOpen === 'women'}>
<span>Women</span>
<IoIosArrowBack />
</LeftBarItem>
- <LeftBarItem onMouseEnter={onMouseMenEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'men'}>
+ <LeftBarItem onMouseEnter={() => onMouseParamEnter('men')} onMouseLeave={onMouseLeave} isOpen={isOpen === 'men'}>
<span>Men</span>
<IoIosArrowBack />
</LeftBarItem>
</LeftBar><LeftBarItem> вынести в отдельный компонент и передавать туда нужный props с параметром kids/women/men import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Home from './pages/Home';
const App = () => {
const dispatch = useDispatch();
const { data } = useSelector((store) => store);
const [allowScroll, setAllowScroll] = useState(true);
const scrolling = () => {
const height = Math.max(
document.body.clientHeight,
document.documentElement.clientHeight
);
if (
window.pageYOffset > height * 0.75 ||
window.pageYOffset > height - 2000
) {
if (allowScroll) {
setAllowScroll(() => false);
setTimeout(() => {
setAllowScroll(() => true);
}, 2000);
dispatch({
type: 'DISPATCH',
});
}
}
};
return (
<div onWheel={scrolling}>
<Home />
</div>
);
};
export default App;curl 'https://identitytoolkit.googleapis.com/v1/accounts:update?key=[API_KEY]' \
-H 'Content-Type: application/json' \
--data-binary '{"idToken":"[FIREBASE_ID_TOKEN]","deleteProvider":["[facebook.com]"]}'Вопрос: Говнокод ли вот эта колбаса?
import React, { useState, useEffect } from "react";
import Search from "./components/Search";
import ReactPaginate from "react-paginate";
import axios from "axios";
import "./styles.css";
const PER_PAGE = 4;
const App = () => {
const [user, setUser] = useState(null);
const [currentPage, setCurrentPage] = useState(0);
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
async function getUser(login) {
let result0;
result0 = (await axios.get(`https://api.github.com/users/${login}`)).data;
setUser(result0);
}
useEffect(() => {
if (user) {
setLoading(true);
fetch(
`//api.github.com/users/${user.login}/repos?page=${currentPage}&per_page=${PER_PAGE}`
)
.then((res) => res.json())
.then(setData).then(() => setLoading(false));
}
}, [user, currentPage]);
console.log(loading);
function handlePageClick({ selected: selectedPage }) {
setCurrentPage(selectedPage + 1);
}
/* const offset = currentPage * PER_PAGE;*/
const currentPageData = data
/* .slice(offset, offset + PER_PAGE)*/
.map((post, i) => <p key={i}>{post.full_name}</p>);
if (loading) {
return <div class="loader">Loading...</div>;
}
if (user === null) {
return (
<div>
<Search onSearch={getUser} />
<div id="start">
Start with searching
<br />a GitHub user
</div>
</div>
);
} else if (user) {
return (
<div>
<Search onSearch={getUser} />
<ReactPaginate
previousLabel={"← Previous"}
nextLabel={"Next →"}
pageCount={Math.ceil(user.public_repos / PER_PAGE)}
onPageChange={handlePageClick}
containerClassName={"paginatio"}
previousLinkClassName={"paginatio__link"}
nextLinkClassName={"paginatio__link"}
disabledClassName={"paginatio__link--disabled"}
activeClassName={"paginatio__link--active"}
/>
<div id="cpd">{currentPageData}</div>
<span id="repositories">Repositories({user.public_repos})</span>
</div>
);
}
};
export default App;