diff --git a/package.json b/package.json index 2b097dc1..1cc7b2bd 100755 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "@cypress/webpack-dev-server": "^1.8.4", "@mate-academy/cypress-tools": "^1.0.4", "@mate-academy/eslint-config-react-typescript": "^1.0.11", - "@mate-academy/scripts": "^1.2.3", + "@mate-academy/scripts": "^1.2.8", "@mate-academy/students-ts-config": "*", "@mate-academy/stylelint-config": "*", "@types/node": "^17.0.45", diff --git a/src/App.tsx b/src/App.tsx index f6361547..eeac0549 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,39 +1,291 @@ -import React from 'react'; +import { useState } from 'react'; +import classNames from 'classnames'; import '@fortawesome/fontawesome-free/css/all.css'; import 'bulma/css/bulma.css'; -import './App.scss'; import peopleFromServer from './people.json'; +import { Person } from './types/Person'; +import { Button } from './components/Button'; +import { SortLink } from './components/SortLink'; -export class App extends React.Component { - state = {}; - - render() { - return ( -
-

People table

- - - - - - - - - - - - {peopleFromServer.map(person => ( - - - - - - ))} - -
namesexborn
{person.name}{person.sex}{person.born}
-
+export const App = () => { + const [people, setPeople] = useState(peopleFromServer); + const [selectedPeople, setSelectedPeople] = useState([]); + const [sortField, setSortField] = useState(''); + const [isReversed, setReversed] = useState(false); + const [query, setQuery] = useState(''); + const [sex, setSex] = useState(''); + + if (people.length === 0) { + return

No people yet

; + } + + function isSelected({ slug }: Person) { + return selectedPeople.some(person => person.slug === slug); + } + + const sortBy = (field: keyof Person) => { + const isFirstClick = sortField !== field; + const isSecondClick = sortField === field && !isReversed; + + setSortField(isFirstClick || isSecondClick ? field : ''); + setReversed(isSecondClick); + }; + + const selectPerson = (personToAdd: Person) => { + setSelectedPeople(current => [...current, personToAdd]); + }; + + const unselectPerson = (personToDelete: Person) => { + setSelectedPeople(current => current.filter( + person => person.slug !== personToDelete.slug, + )); + }; + + const clearSelection = () => { + setSelectedPeople([]); + }; + + const moveUp = (personToMove: Person) => { + setPeople(currentPeople => { + const position = currentPeople.findIndex( + person => person.slug === personToMove.slug, + ); + + if (position === 0) { + return currentPeople; + } + + return [ + ...currentPeople.slice(0, position - 1), + currentPeople[position], + currentPeople[position - 1], + ...currentPeople.slice(position + 1), + ]; + }); + }; + + const moveDown = (personToMove: Person) => { + setPeople(curentPeople => { + const position = curentPeople.findIndex( + person => person.slug === personToMove.slug, + ); + + if (position === curentPeople.length - 1) { + return curentPeople; + } + + const updatedPeople = [...curentPeople]; + + updatedPeople[position] = curentPeople[position + 1]; + updatedPeople[position + 1] = curentPeople[position]; + + return updatedPeople; + }); + }; + + let visiblePeople = [...people]; + + if (sex) { + visiblePeople = visiblePeople.filter(person => person.sex === sex); + } + + if (query) { + const lowerQuery = query.toLocaleLowerCase(); + + visiblePeople = visiblePeople.filter(person => { + const stringToCheck = ` + ${person.name} + ${person.motherName || ''} + ${person.fatherName || ''} + `; + + return stringToCheck + .toLocaleLowerCase() + .includes(lowerQuery); + }); + } + + if (sortField) { + visiblePeople.sort( + (a, b) => { + switch (sortField) { + case 'name': + case 'sex': + case 'motherName': + case 'fatherName': { + const aValue = a[sortField] || ''; + const bValue = a[sortField] || ''; + + return aValue.localeCompare(bValue); + } + + case 'born': + return a.born - b.born; + + default: + return 0; + } + }, ); } -} + + if (isReversed) { + visiblePeople.reverse(); + } + + return ( + + + + + + + + + + + + + + + + + + + + + + {visiblePeople.map(person => ( + + + + + + + + + + + + + ))} + +
+

+ {selectedPeople.length === 0 ? '-' : ( + <> + {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */} +

+ name + sortBy('name')} + /> + + sex + sortBy('sex')} + /> + + born + sortBy('born')} + /> + + Mother + sortBy('motherName')} + /> + + Father + sortBy('fatherName')} + /> +
+ {isSelected(person) ? ( + + ) : ( + + )} + + {person.name} + {person.sex}{person.born}{person.motherName || ''}{person.fatherName || ''} + + + +
+ ); +}; diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx new file mode 100644 index 00000000..655f09a1 --- /dev/null +++ b/src/components/Button/Button.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +type Props = React.ButtonHTMLAttributes & { + children?: React.ReactNode; +}; + +export const Button: React.FC = ({ children, className, ...props }) => ( + +); diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts new file mode 100644 index 00000000..8b166a86 --- /dev/null +++ b/src/components/Button/index.ts @@ -0,0 +1 @@ +export * from './Button'; diff --git a/src/components/SortLink/SortLink.tsx b/src/components/SortLink/SortLink.tsx new file mode 100644 index 00000000..3bd0f63b --- /dev/null +++ b/src/components/SortLink/SortLink.tsx @@ -0,0 +1,24 @@ +import classNames from 'classnames'; +import React from 'react'; + +type Props = { + isActive: boolean; + isReversed: boolean; + onClick: () => void; +}; + +export const SortLink: React.FC = ({ + isActive, isReversed, onClick, +}) => ( + + + + + +); diff --git a/src/components/SortLink/index.ts b/src/components/SortLink/index.ts new file mode 100644 index 00000000..ac3e3f2a --- /dev/null +++ b/src/components/SortLink/index.ts @@ -0,0 +1 @@ +export * from './SortLink';