Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix/search-fix #92

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix/search-fix #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e4b079b
fix/search-fix
maslakovSaveliy Oct 20, 2023
dd35421
fix/types-fix
maslakovSaveliy Oct 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions client/app/root/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,15 @@
},
"devDependencies": {
"@mui/material": "^5.14.12",
"@types/react": "^18.2.27"
"@types/react": "^18.2.27",
"react-router-dom": "^6.16.0"
},
"peerDependencies": {
"@emotion/react": "11",
"@emotion/styled": "11",
"@mui/material": "5",
"react": "18",
"react-dom": "18"
"react-dom": "18",
"react-router-dom": "6"
}
}
29 changes: 17 additions & 12 deletions client/app/root/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
import type { FC } from 'react'
import type { FC } from "react";

import { withProviders } from '@app/providers'
import { Routes } from '@app/routes'
import { Container } from '@ui/container'
import { Header } from '@ui/header'
import { withProviders } from "@app/providers";
import { Routes } from "@app/routes";
import { Container } from "@ui/container";
import { Header } from "@ui/header";
import { useParams } from "react-router-dom";

const App: FC = () => (
<Container>
<Header />
<Routes />
</Container>
)
const App: FC = () => {
const { wallet } = useParams();
console.log(wallet);
return (
<Container>
<Header />
<Routes />
</Container>
);
};

export default withProviders(App)
export default withProviders(App);
44 changes: 33 additions & 11 deletions client/shared/ui/header/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,39 @@
import { FC } from 'react'
import { useState } from 'react'
import { FC, KeyboardEvent } from "react";
import { useState, useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";

import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

import { Search } from '@ui/search'
import { Search } from "@ui/search";

export const Header: FC = () => {
const [wallet, setWallet] = useState<string>('')
const { pathname } = useLocation();
const searchParams = pathname.split("/")[2];
const navigate = useNavigate();

const [wallet, setWallet] = useState<string>("");

const handleSubmit = (e: KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") {
navigate(`/portfolio/${wallet}`);
}
};

useEffect(() => {
setWallet(searchParams ? searchParams : "");
}, [searchParams]);

return (
<Box width='100%' height='100px' display='flex' alignItems='center' justifyContent='space-between'>
<Typography variant='h6'>OrdiTracker</Typography>
<Search value={wallet} handleChange={setWallet} />
<Box
width="100%"
height="100px"
display="flex"
alignItems="center"
justifyContent="space-between"
>
<Typography variant="h6">OrdiTracker</Typography>
<Search value={wallet} handleChange={setWallet} handleSubmit={handleSubmit} />
</Box>
)
}
);
};
6 changes: 4 additions & 2 deletions client/shared/ui/search/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@
"type": "module",
"devDependencies": {
"@mui/material": "^5.14.12",
"@types/react": "^18.2.27"
"@types/react": "^18.2.27",
"react-router-dom": "^6.16.0"
},
"peerDependencies": {
"@emotion/react": "11",
"@emotion/styled": "11",
"@mui/material": "5",
"react": "18",
"react-dom": "18"
"react-dom": "18",
"react-router-dom": "6"
}
}
41 changes: 24 additions & 17 deletions client/shared/ui/search/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,43 @@
import { ChangeEvent } from 'react'
import { FC } from 'react'
import { ChangeEvent, KeyboardEvent } from "react";
import { FC } from "react";

import FormControl from '@mui/material/FormControl'
import Input from '@mui/material/Input'
import InputAdornment from '@mui/material/InputAdornment'
import FormControl from "@mui/material/FormControl";
import Input from "@mui/material/Input";
import InputAdornment from "@mui/material/InputAdornment";

export interface SearchProps {
value: string
handleChange: (e: string) => void
value: string;
handleChange: (e: string) => void;
handleSubmit?: (e: KeyboardEvent<HTMLInputElement>) => void;
}

export const Search: FC<SearchProps> = ({ value, handleChange }) => (
export const Search: FC<SearchProps> = ({ value, handleChange, handleSubmit }) => (
<FormControl>
<Input
value={value}
// onChange={(e: ChangeEvent<HTMLInputElement>) => e.keyCode === 13 ? navigate(`/portfolio/${value}`) : handleChange(e.target.value)} .
onChange={(e: ChangeEvent<HTMLInputElement>) => handleChange(e.target.value)}
placeholder='Search'
onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => (handleSubmit ? handleSubmit(e) : null)}
placeholder="Search"
startAdornment={
<InputAdornment position='start'>
<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none'>
<InputAdornment position="start">
<svg
xmlns="http://www.w3.org/2000/svg"
width="15"
height="15"
viewBox="0 0 24 24"
fill="none"
>
<path
d='M11.5 21.75C5.85 21.75 1.25 17.15 1.25 11.5C1.25 5.85 5.85 1.25 11.5 1.25C17.15 1.25 21.75 5.85 21.75 11.5C21.75 17.15 17.15 21.75 11.5 21.75ZM11.5 2.75C6.67 2.75 2.75 6.68 2.75 11.5C2.75 16.32 6.67 20.25 11.5 20.25C16.33 20.25 20.25 16.32 20.25 11.5C20.25 6.68 16.33 2.75 11.5 2.75Z'
fill='#525F7A'
d="M11.5 21.75C5.85 21.75 1.25 17.15 1.25 11.5C1.25 5.85 5.85 1.25 11.5 1.25C17.15 1.25 21.75 5.85 21.75 11.5C21.75 17.15 17.15 21.75 11.5 21.75ZM11.5 2.75C6.67 2.75 2.75 6.68 2.75 11.5C2.75 16.32 6.67 20.25 11.5 20.25C16.33 20.25 20.25 16.32 20.25 11.5C20.25 6.68 16.33 2.75 11.5 2.75Z"
fill="#525F7A"
/>
<path
d='M22.0004 22.7499C21.8104 22.7499 21.6204 22.6799 21.4704 22.5299L19.4704 20.5299C19.1804 20.2399 19.1804 19.7599 19.4704 19.4699C19.7604 19.1799 20.2404 19.1799 20.5304 19.4699L22.5304 21.4699C22.8204 21.7599 22.8204 22.2399 22.5304 22.5299C22.3804 22.6799 22.1904 22.7499 22.0004 22.7499Z'
fill='#525F7A'
d="M22.0004 22.7499C21.8104 22.7499 21.6204 22.6799 21.4704 22.5299L19.4704 20.5299C19.1804 20.2399 19.1804 19.7599 19.4704 19.4699C19.7604 19.1799 20.2404 19.1799 20.5304 19.4699L22.5304 21.4699C22.8204 21.7599 22.8204 22.2399 22.5304 22.5299C22.3804 22.6799 22.1904 22.7499 22.0004 22.7499Z"
fill="#525F7A"
/>
</svg>
</InputAdornment>
}
/>
</FormControl>
)
);
4 changes: 4 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,12 +197,14 @@ __metadata:
"@types/react": "npm:^18.2.27"
"@ui/container": "workspace:^"
"@ui/header": "workspace:^"
react-router-dom: "npm:^6.16.0"
peerDependencies:
"@emotion/react": 11
"@emotion/styled": 11
"@mui/material": 5
react: 18
react-dom: 18
react-router-dom: 6
languageName: unknown
linkType: soft

Expand Down Expand Up @@ -2932,12 +2934,14 @@ __metadata:
dependencies:
"@mui/material": "npm:^5.14.12"
"@types/react": "npm:^18.2.27"
react-router-dom: "npm:^6.16.0"
peerDependencies:
"@emotion/react": 11
"@emotion/styled": 11
"@mui/material": 5
react: 18
react-dom: 18
react-router-dom: 6
languageName: unknown
linkType: soft

Expand Down