pull request #4
pull request #4
Conversation
react boiler plate and tooling is done
App.js
Outdated
| > | ||
| <MenuGroup> | ||
| <Flex> | ||
| <EachMenuItem |
There was a problem hiding this comment.
| <EachMenuItem | |
| <DropDown |
There was a problem hiding this comment.
Since Dropdown is the actual component
components/header.js
Outdated
| {props.leftIcon?(<Box as={props.leftIcon} pb={1} />):(<> </>)} | ||
| <MenuButton border="none" pr={8} fontSize={14}> | ||
| {props.menuItemName} | ||
| { props.TagNumber>0?(<Tag |
components/header.js
Outdated
| import indexOf from "lodash/indexOf"; | ||
| import remove from "lodash/remove"; | ||
| function DropDown(props) { | ||
| const DropDownArray = ["Apartment", "Corporate", "Floorplan", "Photo"]; |
There was a problem hiding this comment.
| const DropDownArray = ["Apartment", "Corporate", "Floorplan", "Photo"]; | |
| const dropDownArray = ["Apartment", "Corporate", "Floorplan", "Photo"]; |
components/header.js
Outdated
| function DropDown(props) { | ||
| const DropDownArray = ["Apartment", "Corporate", "Floorplan", "Photo"]; | ||
| const [selectedArray, setSelectedArray] = useState([]); | ||
| const CheckboxClicked = selectedItem => { |
There was a problem hiding this comment.
| const CheckboxClicked = selectedItem => { | |
| const checkboxClicked = selectedItem => { |
App.js
Outdated
| import DropDown from "./components/header.js"; | ||
| function App() { | ||
| const [offsetValue, setOffsetValue] = useState(0); | ||
| const [limitValue, setLimitValue] = useState(9); |
App.js
Outdated
| const [pageNumber, setPageNumber] = useState(1); | ||
| const paginationButtonClick = numberClicked => { | ||
| setOffsetValue(numberClicked * 9); | ||
| setLimitValue((numberClicked + 1) * 9); |
There was a problem hiding this comment.
This pattern of updating three useState effects for one single Callback will trigger 3 different renders. Use useReducer instead.
components/pagination.js
Outdated
| import { Image, Heading, Stack, Text, Box } from "@chakra-ui/core"; | ||
| import map from "lodash/map"; | ||
| import { TiLocationOutline } from "react-icons/ti"; | ||
| import Image1 from "../Images/Image1.jpeg"; |
There was a problem hiding this comment.
Pagination component shouldn't hold any data. It should get through props.
There was a problem hiding this comment.
totalCount: Total number of items that is passed (edited)
limit: limit for each page (edited)
maxStartRangeCount: how many to show at start (edited)
maxEndRangeCount: how many to show at end (edited)
initialStartPage (in this example should be between 0 - 13)
onPageClick based on this callback you can render new set of images
labelEdit would be a function which takes in the page number and whatever user returns will be the custom page number. For example if user wants 'A' 'B' 'C' ... this function will help in that.
for example if there are 125 total count and limit is 10 it will have 13 pages
if maxStartRangeCount is 3 and maxEndRangeCount it will show [1][2][3] .. CurrentPage ... [11][12][13]
react boiler plate and tooling is done