17.03.2023 00:45

js/Project/project/src/App(my).js

@@ -0,0 +1,67 @@
+// import logo from './logo.svg';
+import './App.css';
+import React from 'react';
+import { Router, Route, Switch } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from './components/redux/index';
+import createHistory from "history/createBrowserHistory";
+
+// импорт страниц
+import { CUser } from './components/user';
+import { CFeed } from './components/feed';
+import { CComments } from './components/post';
+import { CreatePost } from './components/create_post';
+import Authorization from './components/auth_reg';
+// import Header from './components/structure/header';
+import { CHeader } from './components/structure/header';
+import Footer from './components/structure/footer';
+
+// url проекта
+export const url = 'http://hipstagram.node.ed.asmer.org.ua/graphql'
+
+
+const history = createHistory()
+
+const Registration = () =>
+    <div>
+        Регистрация
+    </div>
+
+const Page404 = () =>
+    <div>
+        NOT FOUND
+    </div>
+
+
+function App() {
+    return (
+        <Provider store={store}>
+            <Router history={history}>
+                <div className="wrapper">
+                    {/* <Header /> */}
+                    <CHeader />
+                    <main style={{ flexGrow: '1' }}>
+                        <Switch>
+                            <Route path="/" component={CFeed} exact />
+                            <Route path="/authorization" component={Authorization} />
+                            <Route path="/registration" component={Registration} />
+                            <Route path="/post/:postId" component={CComments} />
+                            <Route path="/user/:userId" component={CUser} />
+                            <Route path="/createpost" component={CreatePost} />
+                            {/* <Route path="/about" component={PageAbout} /> */}
+                            <Route path="*" component={Page404} />
+                            {/* <Page404 /> - это аналог записи выше */}
+                        </Switch>
+                    </main>
+                    <Footer />
+                </div>
+            </Router >
+        </Provider >
+    );
+}
+
+export default App;
+
+
+//прописывание редиректа
+//<Redirect from='/direct' to='/profile' />

js/Project/project/src/App.js

@@ -1,11 +1,12 @@
-// import logo from './logo.svg';
-import './App.css';
-import React from 'react';
-import { Router, Route, Switch } from 'react-router-dom';
+import React from 'react'
+import { Router, Route, Redirect, withRouter, Switch } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { store } from './components/redux/index';
 import createHistory from "history/createBrowserHistory";
 
+import './App.css';
+// import logo from './logo.svg';
+
 // импорт страниц
 import { CUser } from './components/user';
 import { CFeed } from './components/feed';
@@ -19,9 +20,40 @@ import Footer from './components/structure/footer';
 // url проекта
 export const url = 'http://hipstagram.node.ed.asmer.org.ua/graphql'
 
-
 const history = createHistory()
 
+
+
+{
+    // фейковый авторизатор
+    const fakeAuth = {
+        isAuthenticated: false,
+        authenticate(cb) {
+            this.isAuthenticated = true
+            setTimeout(cb, 100)
+        },
+        signout(cb) {
+            this.isAuthenticated = false
+            setTimeout(cb, 100)
+        }
+    }
+
+    // кнопка разлогина, которая рисуется, если залогинен
+    const AuthButton = withRouter(({ history }) => (
+        fakeAuth.isAuthenticated && (
+            <p>
+                Welcome! <button onClick={() => {
+                    fakeAuth.signout(() => history.push('/'))
+                }}>Sign out</button>
+            </p>
+        )
+    ))
+}
+
+
+
+
+
 const Registration = () =>
     <div>
         Регистрация
@@ -33,35 +65,42 @@ const Page404 = () =>
     </div>
 
 
-function App() {
+
+// Приватный роутинг
+const PrivateRoute = ({ component: Component, ...rest }) => (
+    <Route {...rest} render={(props) => (
+        typeof localStorage.authToken === 'string'
+            ? <Component {...props} />
+            : <Redirect to={{
+                pathname: '/authorization',
+                state: { from: props.location }
+            }} />
+    )} />
+)
+
+
+
+export default function App() {
     return (
         <Provider store={store}>
             <Router history={history}>
                 <div className="wrapper">
-                    {/* <Header /> */}
                     <CHeader />
                     <main style={{ flexGrow: '1' }}>
                         <Switch>
-                            <Route path="/" component={CFeed} exact />
+                            <PrivateRoute path="/" component={CFeed} exact />
                             <Route path="/authorization" component={Authorization} />
                             <Route path="/registration" component={Registration} />
                             <Route path="/post/:postId" component={CComments} />
                             <Route path="/user/:userId" component={CUser} />
                             <Route path="/createpost" component={CreatePost} />
-                            {/* <Route path="/about" component={PageAbout} /> */}
                             <Route path="*" component={Page404} />
-                            {/* <Page404 /> - это аналог записи выше */}
                         </Switch>
                     </main>
                     <Footer />
                 </div>
-            </Router >
-        </Provider >
-    );
-}
-
-export default App;
-
+            </Router>
+        </Provider>
 
-//прописывание редиректа
-//<Redirect from='/direct' to='/profile' />
+    )
+}

js/Project/project/src/App_test.js

@@ -1,257 +1,67 @@
-import logo from './logo.svg';
+// import logo from './logo.svg';
 import './App.css';
-import React, { useState, useEffect } from 'react';
-import { Router, Route, Link, Redirect, Switch, useParams } from 'react-router-dom';
-import { createStore, combineRedusers, applyMiddleware } from 'redux';
-import thunk from 'redux-thunk';
-import { Provider, connect, useDispatch, useSelector } from 'react-redux';
-import Feed from './components/feed';
-import User from './components/user';
-
-// импорт страниц
-import AsideMenu from './components/pages/structure/aside_menu';
-
+import React from 'react';
+import { Router, Route, Switch } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store } from './components/redux/index';
 import createHistory from "history/createBrowserHistory";
 
-// ==============================================================================
-// создание promiseReducer
-function promiseReducer(state = {}, { type, status, payload, error, nameOfPromise }) {
-  if (type === 'PROMISE') {
-    return {
-      ...state,
-      [nameOfPromise]: { status, payload, error }
-    }
-  }
-  return state
-}
-
-// акшоны для promiseReducer
-const actionPending = nameOfPromise => ({ nameOfPromise, type: 'PROMISE', status: 'PENDING' })
-
-const actionFulfilled = (nameOfPromise, payload) => ({ nameOfPromise, type: 'PROMISE', status: 'FULFILLED', payload })
-
-const actionRejected = (nameOfPromise, error) => ({ nameOfPromise, type: 'PROMISE', status: 'REJECTED', error })
-
-const actionPromise = (nameOfPromise, promise) =>
-  async dispatch => {
-    dispatch(actionPending(nameOfPromise)) //сигнализируем redux, что промис начался
-    try {
-      const payload = await promise //ожидаем промиса
-      dispatch(actionFulfilled(nameOfPromise, payload)) //сигнализируем redux, что промис успешно выполнен
-      return payload //в месте запуска store.dispatch с этим thunk можно так же получить результат промиса
-    }
-    catch (error) {
-      dispatch(actionRejected(nameOfPromise, error)) //в случае ошибки - сигнализируем redux, что промис несложился
-    }
-  }
-
-// =============================================================
-// функция getGql
-function getGql(endpoint) {
-  return async function gql(query, variables = {}) {
-
-    let headers = {
-      'Content-Type': 'application/json;charset=utf-8',
-      'Accept': 'application/json',
-    }
-    if (('authToken' in localStorage)) {
-      headers.Authorization = 'Bearer ' + localStorage.authToken
-    }
-
-    let result = await fetch(endpoint, {
-      method: 'POST',
-      headers,
-      body: JSON.stringify({
-        query,
-        variables
-      })
-    }).then(res => res.json())
-
-    if (('errors' in result) && !('data' in result)) {
-      throw new Error(JSON.stringify(result.errors))
-    }
-
-    result = Object.values(result.data)[0]
-
-    return result
-  }
-}
-
-const gql = getGql('http://hipstagram.node.ed.asmer.org.ua/graphql')
-
-// запрос на все посты (для ленты общей)
-const actionfindPosts = () => actionPromise('PostsFind', gql(`query AllPostsFind ($allPosts: String){
-  PostFind(query: $allPosts){
-    _id createdAt title text likesCount
-    images {
-      url
-    }
-    owner {
-      _id login nick
-    }
-    
-  }
-}`, {
-  allPosts: JSON.stringify([{}])
-}))
-
-// запрос на конкретный пост
-const actionFindPostOne = _id => actionPromise('PostFindOne', gql(`query OnePostFind ($postOne: String){
-  PostFindOne (query: $postOne) {
-    _id createdAt title text likesCount
-    images {
-      url
-    }
-    comments {
-      _id createdAt text answers {
-        _id createdAt text likes {
-          _id
-        }
-        likesCount owner {
-          _id login nick  avatar {
-            _id url
-          }
-        }
-      }
-      likesCount
-    }
-    owner {
-      _id login nick
-    }
-    
-  }
-}`, {
-  postOne: JSON.stringify([{ _id }])
-}))
-
-// запрос на конкретного юзера
-const actionFindUserOne = _id => actionPromise('UserFindOne', gql(`query OneUserFind ($userOne: String) {
-  UserFindOne(query: $userOne) {
-    _id createdAt login nick 
-    avatar {
-      _id url
-    } 
-     followers {
-      _id login nick avatar {_id url}
-    }
-    following {
-       _id login nick avatar {_id url}
-    }
-  }
-}`, {
-  userOne: JSON.stringify([{ _id }])
-}))
-
-const store = createStore(promiseReducer, applyMiddleware(thunk))
-store.subscribe(() => console.log(store.getState()))
+// импорт страниц
+import { CUser } from './components/user';
+import { CFeed } from './components/feed';
+import { CComments } from './components/post';
+import { CreatePost } from './components/create_post';
+import Authorization from './components/auth_reg';
+// import Header from './components/structure/header';
+import { CHeader } from './components/structure/header';
+import Footer from './components/structure/footer';
 
-store.dispatch(actionfindPosts())
-// store.dispatch(actionCategoryFind())
-// store.dispatch(actionFindUserOne())
+// url проекта
+export const url = 'http://hipstagram.node.ed.asmer.org.ua/graphql'
 
 
 const history = createHistory()
 
-const Autorization = () =>
-  <div>
-    Авторизация
-  </div>
-
 const Registration = () =>
   <div>
     Регистрация
   </div>
 
-const Direct = () =>
-  <div>
-    Direct
-  </div>
-
-const CreatePost = () =>
-  <div>
-    Страницв создания поста
-  </div>
-
-const PageAbout = () =>
-  <div>
-    Страница "О нас"
-  </div>
-
 const Page404 = () =>
   <div>
     NOT FOUND
   </div>
 
 
-// создаем компонент ленты на основе стандартного, который отслеживает все изменения state
-const ReduxFeed = connect(state => ({ posts: state.PostsFind.payload }))(Feed)
-
-// ==================================================
-// страница одного поста
-const CComments = connect(state => ({ post: state?.PostFindOne?.payload }), { loadPost: actionFindPostOne })(Comments)
-
-function Comments({ post = {}, loadPost }) {
-
-  const { postId } = useParams() // отслеживаем изменения в урле
-  // const post2 = useSelector(state => state?.CategoryGoodsAndSubCategoryGoods?.payload)
-  console.log(66, postId)
-
-  useEffect(() => { loadPost(postId) }, [postId]) // перезапускаем loadPost, если произошло изменение в урле
-
-  // console.log(post)
-
-  return (
-    <div>
-      {/* <div>{user} and {postId}</div> */}
-      тут будут отображаться все комментарии под постом
-      <h2>{post.createdAt}</h2>
-    </div>
-  )
-}
-
-// ==================================================
-// страница юзера
-const CUser = connect(state => ({ user: state?.UserFindOne?.payload }), { loadUser: actionFindUserOne })(User)
-
-// ====================================================
-
 function App() {
   return (
     <Provider store={store}>
       <Router history={history}>
-        <div className="wrapper" style={{ display: 'flex', minHeight: '100hv' }}>
-
-          <AsideMenu />
-          <section style={{ width: '50%', margin: '0 auto', minHeight: '100hv', display: 'flex', flexDirection: 'column' }}>
-            <header style={{ backgroundColor: '#dbffe7' }}>
-              Тут будут какие-то заголовки или что-то вроде этого
-            </header>
-            <main style={{ backgroundColor: '#dcdbff', flex: '1 1 auto' }}>
-              {/* прописывание редиректа */}
-              {/* <Redirect from='/direct' to='/profile' /> */}
-
-              <Switch>
-                <Route path="/autorization" component={Autorization} />
-                <Route path="/user/:userId" component={CUser} />
-
-                <Route path="/registration" component={Registration} />
-                <Route path="/" component={ReduxFeed} exact />
-                <Route path="/createpost" component={CreatePost} />
-                <Route path="/direct" component={Direct} />
-                <Route path="/about" component={PageAbout} />
-                <Route path="/post/:postId" component={CComments} />
-
-
-                <Route path="*" component={Page404} />
-                {/* <Page404 /> - это аналог записи выше */}
-              </Switch>
-            </main>
-            <footer style={{ backgroundColor: '#dbffe7' }}>Hipstagram from Volddemar4ik</footer>
-          </section>
+        <div className="wrapper">
+          {/* <Header /> */}
+          <CHeader />
+          <main style={{ flexGrow: '1' }}>
+            <Switch>
+              <Route path="/" component={CFeed} exact />
+              <Route path="/authorization" component={Authorization} />
+              <Route path="/registration" component={Registration} />
+              <Route path="/post/:postId" component={CComments} />
+              <Route path="/user/:userId" component={CUser} />
+              <Route path="/createpost" component={CreatePost} />
+              {/* <Route path="/about" component={PageAbout} /> */}
+              <Route path="*" component={Page404} />
+              {/* <Page404 /> - это аналог записи выше */}
+            </Switch>
+          </main>
+          <Footer />
         </div>
       </Router >
-    </Provider>
+    </Provider >
   );
 }
 
 export default App;
+
+
+//прописывание редиректа
+//<Redirect from='/direct' to='/profile' />

js/Project/project/src/components/auth_reg/index(copy).js

@@ -0,0 +1,148 @@
+import { store } from '../redux';
+import { useState } from "react";
+import { Link, Redirect, useHistory } from "react-router-dom";
+import { actionFullLogin } from "../redux/action";
+
+import { Paper, Box, Typography, Button, Stack, OutlinedInput, IconButton, InputLabel, InputAdornment, FormControl } from "@mui/material";
+
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+
+// поля логин/пароль/кнопка входа
+const LoginForm = ({ onLogin }) => {
+    // отслеживаем введение данных в полях логин/пароль
+    const [login, setLogin] = useState('')
+    const [pass, setPass] = useState('')
+
+    // включаем,выклюаем отображение пароля
+    const [showPassword, setShowPassword] = useState(false);
+    const handleClickShowPassword = () => setShowPassword((show) => !show);
+    const handleMouseDownPassword = (event) => {
+        event.preventDefault();
+    };
+
+
+
+    return (
+        <Box sx={{ width: '100%' }}>
+            <Stack spacing={2}>
+                <FormControl variant="outlined">
+                    <InputLabel htmlFor="outlined-adornment-password">Имя пользователя</InputLabel>
+                    <OutlinedInput
+                        id="login"
+                        label="Имя пользователя"
+                        type="text"
+                        size="small"
+                        value={login}
+                        onChange={e => setLogin(e.target.value)}
+                    />
+                </FormControl>
+
+                <FormControl variant="outlined">
+                    <InputLabel htmlFor="outlined-adornment-password">Пароль</InputLabel>
+                    <OutlinedInput
+                        id="password"
+                        label="Пароль"
+                        size="small"
+                        type={showPassword ? 'text' : 'password'}
+                        value={pass}
+                        onChange={e => setPass(e.target.value)}
+
+                        endAdornment={
+                            <InputAdornment position="end">
+                                <IconButton
+                                    aria-label="toggle password visibility"
+                                    onClick={handleClickShowPassword}
+                                    onMouseDown={handleMouseDownPassword}
+                                    edge="end"
+                                >
+                                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                                </IconButton>
+                            </InputAdornment>
+                        }
+                    />
+                </FormControl>
+
+                <Button
+                    variant="contained"
+                    disabled={((login == '') || (pass == '')) || false}
+                    onClick={() => onLogin(login, pass)}
+                >
+                    Войти
+                </Button>
+            </Stack>
+        </Box>
+    )
+}
+
+// Вся страница формы
+export default function Authorization() {
+    const history = useHistory();
+
+    return (
+        <Box sx={{
+            display: 'grid',
+            height: '80vh',
+            justifyContent: 'center',
+            alignItems: 'center'
+        }}>
+            <Paper elevation={3}
+                sx={{
+                    padding: '5px',
+                    width: '400px',
+                    height: '500px',
+                    display: 'grid',
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                }}>
+                <Typography
+                    variant="h4"
+                    noWrap
+                    sx={{
+                        display: 'grid',
+                        fontFamily: 'monospace',
+                        fontWeight: 700,
+                        letterSpacing: '.3rem',
+                        color: 'inherit',
+                        textDecoration: 'none',
+                        flexGrow: '1',
+                        marginTop: '20px',
+                        justifyContent: 'center'
+                    }} >
+                    Hipstagram
+                </Typography>
+
+                <Box
+                    sx={{
+                        display: 'grid',
+                        alignSelf: 'start'
+                    }}>
+                    <LoginForm
+                        onLogin={async (login, pass) => {
+                            await store.dispatch(actionFullLogin(login, pass))
+
+                            if ((Object.keys(store.getState().auth)).length) {
+                                history.push('/')
+                            }
+                        }}
+                    />
+                </Box>
+
+
+                <Typography
+                    variant="subtitle1"
+                    sx={{
+                        display: 'grid',
+                        alignSelf: 'end',
+                        justifyContent: 'center',
+                    }}>
+                    <Link
+                        color="inherit"
+                        to='/registration'
+                    >
+                        Зарегистрироваться
+                    </Link>
+                </Typography>
+            </Paper>
+        </Box >
+    )
+}

js/Project/project/src/components/auth_reg/index.js

@@ -1,6 +1,7 @@
+import React from 'react'
 import { store } from '../redux';
 import { useState } from "react";
-import { Link, Redirect, useHistory } from "react-router-dom";
+import { Link, Redirect } from "react-router-dom";
 import { actionFullLogin } from "../redux/action";
 
 import { Paper, Box, Typography, Button, Stack, OutlinedInput, IconButton, InputLabel, InputAdornment, FormControl } from "@mui/material";
@@ -74,75 +75,90 @@ const LoginForm = ({ onLogin }) => {
     )
 }
 
-// Вся страница формы
-export default function Authorization() {
-    const history = useHistory();
-
-    return (
-        <Box sx={{
-            display: 'grid',
-            height: '80vh',
-            justifyContent: 'center',
-            alignItems: 'center'
-        }}>
-            <Paper elevation={3}
-                sx={{
-                    padding: '5px',
-                    width: '400px',
-                    height: '500px',
-                    display: 'grid',
-                    justifyContent: 'center',
-                    alignItems: 'center'
-                }}>
-                <Typography
-                    variant="h4"
-                    noWrap
-                    sx={{
-                        display: 'grid',
-                        fontFamily: 'monospace',
-                        fontWeight: 700,
-                        letterSpacing: '.3rem',
-                        color: 'inherit',
-                        textDecoration: 'none',
-                        flexGrow: '1',
-                        marginTop: '20px',
-                        justifyContent: 'center'
-                    }} >
-                    Hipstagram
-                </Typography>
-
-                <Box
+class Authorization extends React.Component {
+
+    state = {
+        redirectToReferrer: false
+    }
+    login = () => {
+        this.setState(() => ({
+            redirectToReferrer: true
+        }))
+    }
+    render() {
+        const { from } = this.props.location.state || { from: { pathname: '/' } }
+        const { redirectToReferrer } = this.state
+
+        if (redirectToReferrer === true) {
+            return <Redirect to={from} />
+        }
+
+        return (
+            <Box sx={{
+                display: 'grid',
+                height: '80vh',
+                justifyContent: 'center',
+                alignItems: 'center'
+            }}>
+                <Paper elevation={3}
                     sx={{
+                        padding: '5px',
+                        width: '400px',
+                        height: '500px',
                         display: 'grid',
-                        alignSelf: 'start'
-                    }}>
-                    <LoginForm
-                        onLogin={async (login, pass) => {
-                            await store.dispatch(actionFullLogin(login, pass))
-
-                            if ((Object.keys(store.getState().auth)).length) {
-                                history.push('/')
-                            }
-                        }}
-                    />
-                </Box>
-
-
-                <Typography
-                    variant="subtitle1"
-                    sx={{
-                        display: 'grid',
-                        alignSelf: 'end',
                         justifyContent: 'center',
+                        alignItems: 'center'
                     }}>
-                    <Link
-                        color="inherit"
-                        to='/registration'
-                    >
-                        Зарегистрироваться
-                    </Link>
-                </Typography>
-            </Paper>
-        </Box >
-    )
-}
+                    <Typography
+                        variant="h4"
+                        noWrap
+                        sx={{
+                            display: 'grid',
+                            fontFamily: 'monospace',
+                            fontWeight: 700,
+                            letterSpacing: '.3rem',
+                            color: 'inherit',
+                            textDecoration: 'none',
+                            flexGrow: '1',
+                            marginTop: '20px',
+                            justifyContent: 'center'
+                        }} >
+                        Hipstagram
+                    </Typography>
+
+                    <Box
+                        sx={{
+                            display: 'grid',
+                            alignSelf: 'start'
+                        }}>
+                        <LoginForm
+                            onLogin={async (login, pass) => {
+                                await store.dispatch(actionFullLogin(login, pass))
+
+                                this.login()
+                            }}
+
+                        />
+                    </Box>
+
+                    <Typography
+                        variant="subtitle1"
+                        sx={{
+                            display: 'grid',
+                            alignSelf: 'end',
+                            justifyContent: 'center',
+                        }}>
+                        <Link
+                            color="inherit"
+                            to='/registration'
+                        >
+                            Зарегистрироваться
+                        </Link>
+                    </Typography>
+                </Paper>
+            </Box >
+        )
+    }
+}
+
+export default Authorization

js/Project/project/src/components/structure/header.js

@@ -3,11 +3,95 @@ import { useHistory } from 'react-router-dom';
 import { connect, useDispatch } from 'react-redux';
 
 import { AppBar, Box, Toolbar, Typography, Menu, Container, Avatar, Tooltip, MenuItem, IconButton, Stack } from '@mui/material'
-import { Instagram, AddAPhotoRounded } from '@mui/icons-material';
+import { Instagram, AddAPhotoRounded, SearchRounded } from '@mui/icons-material';
 import { actionFullLogout } from '../redux/action';
 
+
+
+
+
+
+
+
+
+
+
+
+import { styled, alpha } from '@mui/material/styles';
+import SearchIcon from '@mui/icons-material/Search';
+import InputBase from '@mui/material/InputBase';
+
+
+
+
+
+
+
+
+
+
 import { url } from '../../App';
 
+function SearchField() {
+    const Search = styled('div')(({ theme }) => ({
+        position: 'relative',
+        borderRadius: theme.shape.borderRadius,
+        backgroundColor: alpha(theme.palette.common.white, 0.15),
+        '&:hover': {
+            backgroundColor: alpha(theme.palette.common.white, 0.25),
+        },
+        marginLeft: 0,
+        width: '100%',
+        [theme.breakpoints.up('sm')]: {
+            marginLeft: theme.spacing(1),
+            width: 'auto',
+        },
+    }));
+
+    const SearchIconWrapper = styled('div')(({ theme }) => ({
+        padding: theme.spacing(0, 2),
+        height: '100%',
+        position: 'absolute',
+        pointerEvents: 'none',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    }));
+
+    const StyledInputBase = styled(InputBase)(({ theme }) => ({
+        color: 'inherit',
+        '& .MuiInputBase-input': {
+            padding: theme.spacing(1, 1, 1, 0),
+            // vertical padding + font size from searchIcon
+            paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+            transition: theme.transitions.create('width'),
+            width: '100%',
+            [theme.breakpoints.up('sm')]: {
+                width: '12ch',
+                '&:focus': {
+                    width: '20ch',
+                },
+            },
+        },
+    }));
+
+
+
+    return (
+        <Search>
+            <SearchIconWrapper>
+                <SearchIcon />
+            </SearchIconWrapper>
+            <StyledInputBase
+                placeholder="Search…"
+                inputProps={{ 'aria-label': 'search' }}
+            />
+        </Search>
+    )
+}
+
+
+
 
 function UserMenu({ login }) {
     let history = useHistory()
@@ -35,6 +119,9 @@ function UserMenu({ login }) {
         <Stack
             direction='row'
         >
+
+            <SearchField />
+
             <IconButton
                 sx={{
                     color: '#000'