From cf78d3a29251e424251de0af52ea260cc3688a56 Mon Sep 17 00:00:00 2001 From: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com> Date: Mon, 27 Sep 2021 19:03:24 +0200 Subject: [PATCH 1/7] hotfix: Show variants on new product (#108) --- src/components/variant-grid/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/variant-grid/index.js b/src/components/variant-grid/index.js index 85ba82f293..aa18f13bf7 100644 --- a/src/components/variant-grid/index.js +++ b/src/components/variant-grid/index.js @@ -250,7 +250,7 @@ const VariantGrid = ({ product, variants, onChange, edit, onEdit, onCopy }) => { {variants.map( (v, row) => - v.id !== undefined && ( + (v.id !== undefined || !product) && ( {columns.map((c, col) => ( Date: Tue, 5 Oct 2021 15:29:48 +0200 Subject: [PATCH 2/7] began impl. topbar --- src/assets/svg/profile.svg | 8 ++ src/components/layout/elements.js | 18 ++- src/components/layout/index.js | 2 + src/components/layout/popover.js | 96 ++++++++++++++ src/components/layout/topbar.js | 208 ++++++++++++++++++++++++++++++ src/theme/shadows.js | 4 + 6 files changed, 335 insertions(+), 1 deletion(-) create mode 100644 src/assets/svg/profile.svg create mode 100644 src/components/layout/popover.js create mode 100644 src/components/layout/topbar.js diff --git a/src/assets/svg/profile.svg b/src/assets/svg/profile.svg new file mode 100644 index 0000000000..858f69e55a --- /dev/null +++ b/src/assets/svg/profile.svg @@ -0,0 +1,8 @@ + + + + + \ No newline at end of file diff --git a/src/components/layout/elements.js b/src/components/layout/elements.js index 9a0de23ba6..03cc41636a 100644 --- a/src/components/layout/elements.js +++ b/src/components/layout/elements.js @@ -1,7 +1,10 @@ import styled from "@emotion/styled" import { Flex, Box, Text } from "rebass" +import Input from "../input" + export const Container = styled(Flex)` + position: relative; flex-direction: column; min-height: 100vh; ` @@ -10,7 +13,6 @@ export const Main = styled(Box)` display: grid; grid-template-columns: 325px 1fr; grid-template-rows: 1fr; - min-height: 100vh; flex: 1; ` @@ -22,6 +24,8 @@ export const Body = styled(Box)` ` export const Content = styled(Flex)` + position: relative; + flex-direction: column; overflow-y: scroll; // overflow-x: hidden; height: 100vh; @@ -29,3 +33,15 @@ export const Content = styled(Flex)` box-shadow: rgba(0, 0, 0, 0.03) -1px 0px 99px 0px, rgba(0, 0, 0, 0.02) -1px 0px 2px 0px; ` + +export const SearchBar = styled(Input)` + margin-left: -8px; + input { + border: none !important; + box-shadow: none !important; + height: 42px; + border-radius: 0; + margin: auto; + max-width: 1200px; + } +` diff --git a/src/components/layout/index.js b/src/components/layout/index.js index 46b9ae7b10..f297e66808 100644 --- a/src/components/layout/index.js +++ b/src/components/layout/index.js @@ -3,6 +3,7 @@ import { useStaticQuery, graphql } from "gatsby" import PropTypes from "prop-types" import Sidebar from "../sidebar" +import TopBar from "./topbar" import { Container, Main, Content, Body } from "./elements" @@ -24,6 +25,7 @@ const Layout = ({ children }) => {
+ {children} diff --git a/src/components/layout/popover.js b/src/components/layout/popover.js new file mode 100644 index 0000000000..641fcf277f --- /dev/null +++ b/src/components/layout/popover.js @@ -0,0 +1,96 @@ +import styled from "@emotion/styled" +import React, { useRef } from "react" +import ReactTooltip from "react-tooltip" +import Typography from "../typography" + +const Tooltip = styled(ReactTooltip)` + ${Typography.Base}; + box-shadow: ${props => props.theme.shadows.popover} !important; + padding: 0 !important; + border: none !important; + overflow: hidden; + &.show { + opacity: 1 !important; + } + &.place-bottom::before { + border-bottom: 5.9px solid #e1e1e1 !important; + border-left-width: 9px !important; + border-right-width: 9px !important; + margin-left: -9px !important; + } + &.place-bottom::after { + border-bottom-width: 6px !important; + } +` + +const computePosition = (position, event, triggerElement, tooltipElement) => { + const id = triggerElement.getAttribute("aria-describedby") + console.log({ id }) + const arrowLeft = + triggerElement.getBoundingClientRect().left + triggerElement.offsetWidth / 2 + const arrowTop = + triggerElement.getBoundingClientRect().top + triggerElement.offsetHeight + 2 + const leftPosition = arrowLeft - (tooltipElement.clientWidth - 30) + + const oldSheet = document.getElementById(`tooltip-styles-${id}`) + if (oldSheet) document.body.removeChild(oldSheet) + + const sheet = document.createElement("style") + sheet.setAttribute("id", "tooltip-styles") + + sheet.innerHTML = ` + .__react_component_tooltip.${id}.place-bottom::after { + position: fixed; + top: ${arrowTop}px; + left: ${arrowLeft}px; + } + .__react_component_tooltip.${id}.place-bottom::before { + position: fixed; + top: ${arrowTop - 1}px; + left: ${arrowLeft}px; + } + ` + document.body.appendChild(sheet) + return { + top: position.top - 2, + left: leftPosition, + } +} + +const Popover = ({ children, id }) => { + const ref = useRef() + const forceClose = e => { + const current = ref.current + current.tooltipRef = null + ReactTooltip.hide() + } + + const rebuildPopover = e => { + ReactTooltip.rebuild() + } + + return ( + + {React.Children.map(children, child => { + if (React.isValidElement(child)) { + return React.cloneElement(child, { forceClose, rebuildPopover }) + } + return child + })} + + ) +} + +export default Popover diff --git a/src/components/layout/topbar.js b/src/components/layout/topbar.js new file mode 100644 index 0000000000..3b445ae473 --- /dev/null +++ b/src/components/layout/topbar.js @@ -0,0 +1,208 @@ +import styled from "@emotion/styled" +import { navigate } from "gatsby" +import React, { + useCallback, + useContext, + useEffect, + useRef, + useState, +} from "react" +import { useHotkeys } from "react-hotkeys-hook" +import { Box, Flex, Text } from "rebass" +import { ReactComponent as ProfileIcon } from "../../assets/svg/profile.svg" +import { InterfaceContext } from "../../context/interface" +import Spinner from "../spinner" +import { SearchBar } from "./elements" +import Popover from "./popover" +import Medusa from "../../services/api" + +const UnstyledButton = styled.button` + padding: 0; + color: inherit; + font-weight: 500; + font-size: 14px; + font-family: inherit; + font-style: inherit; + text-align: inherit; + text-decoration: none; + background-color: transparent; + border: 0; + outline: none; + cursor: pointer; + box-shadow: none; + line-height: 100%; + + &:hover { + box-shadow: none; + color: ${props => props.theme.colors["darkest"]}; + } +` + +const TopBar = () => { + const onSearch = () => ({}) //const { onSearch } = useContext(InterfaceContext) + const [focusing, setFocusing] = useState(false) + const [query, setQuery] = useState("") + const [showProfile, setShowProfile] = useState(false) + const searchRef = useRef(null) + + useHotkeys( + "/", + () => { + if (searchRef && searchRef.current) { + setFocusing(true) + searchRef.current.focus() + return false + } + }, + {}, + [searchRef] + ) + + const handleChange = e => { + if (focusing) { + setFocusing(false) + return + } else { + setQuery(e.target.value) + } + } + + const onKeyDown = useCallback( + event => { + switch (event.key) { + case "Enter": + event.preventDefault() + event.stopPropagation() + if (onSearch) { + onSearch(query) + } + searchRef.current.blur() + break + case "Esc": + case "Escape": + searchRef.current.blur() + break + default: + break + } + }, + [onSearch, query] + ) + + return ( + + + + + + + + + + + + + + + ) +} + +const ProfilePopover = () => { + const [loading, setLoading] = useState(true) + const [user, setUser] = useState(null) + + if (!user) { + Medusa.auth.session().then(response => { + setUser(response.data.user) + setLoading(false) + }) + } + + return ( + + + {loading ? ( + + ) : ( + + {user.first_name} {user.last_name} + + )} + + { + handleLogout() + navigate("/login") + }} + > + Sign out + + + + + ) +} + +export default TopBar diff --git a/src/theme/shadows.js b/src/theme/shadows.js index c9123cae53..ddf1314256 100644 --- a/src/theme/shadows.js +++ b/src/theme/shadows.js @@ -1,4 +1,8 @@ export default { + popover: ` + 0 0 0 1px hsla(0, 0%, 0%, 0.1), + 0 4px 11px hsla(0, 0%, 0%, 0.1) +`, pill: ` rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, From 29ec9eb8cfb1e2cd300868ed98bd362c3781a029 Mon Sep 17 00:00:00 2001 From: "Sebastian M. Nicolajsen" Date: Wed, 6 Oct 2021 17:40:06 +0200 Subject: [PATCH 3/7] styled and implemented logout in topbar --- gatsby-browser.js | 9 +- src/assets/svg/loop.svg | 10 ++ src/components/layout/elements.js | 4 + src/components/layout/popover.js | 2 +- src/components/layout/topbar.js | 220 ++++++++++++++++-------------- src/context/account.js | 3 +- src/context/interface.js | 43 ++++++ src/domain/customers/index.js | 42 ++---- src/domain/discounts/index.js | 50 ++----- src/domain/gift-cards/index.js | 44 ++---- src/domain/orders/index.js | 61 +++------ src/domain/products/index.js | 43 ++---- src/services/api.js | 5 +- src/services/request.js | 1 + src/theme/index.js | 2 + 15 files changed, 243 insertions(+), 296 deletions(-) create mode 100644 src/assets/svg/loop.svg diff --git a/gatsby-browser.js b/gatsby-browser.js index 5f2b83d809..1ceaae4103 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,6 +1,7 @@ import React from "react" import { CacheProvider } from "./src/context/cache" import { AccountProvider } from "./src/context/account" +import { InterfaceProvider } from "./src/context/interface" import { ThemeProvider as Provider } from "./src/theme" import { ToastProvider } from "react-toast-notifications" @@ -13,9 +14,11 @@ export const wrapPageElement = ({ element }) => { return ( - - {element} - + + + {element} + + ) diff --git a/src/assets/svg/loop.svg b/src/assets/svg/loop.svg new file mode 100644 index 0000000000..0aee5a4b1d --- /dev/null +++ b/src/assets/svg/loop.svg @@ -0,0 +1,10 @@ + + + Group + + + + + + + \ No newline at end of file diff --git a/src/components/layout/elements.js b/src/components/layout/elements.js index 03cc41636a..88c0093e92 100644 --- a/src/components/layout/elements.js +++ b/src/components/layout/elements.js @@ -43,5 +43,9 @@ export const SearchBar = styled(Input)` border-radius: 0; margin: auto; max-width: 1200px; + ::placeholder { + color: black; + font-weight: 400; + } } ` diff --git a/src/components/layout/popover.js b/src/components/layout/popover.js index 641fcf277f..d772459e92 100644 --- a/src/components/layout/popover.js +++ b/src/components/layout/popover.js @@ -25,7 +25,6 @@ const Tooltip = styled(ReactTooltip)` const computePosition = (position, event, triggerElement, tooltipElement) => { const id = triggerElement.getAttribute("aria-describedby") - console.log({ id }) const arrowLeft = triggerElement.getBoundingClientRect().left + triggerElement.offsetWidth / 2 const arrowTop = @@ -79,6 +78,7 @@ const Popover = ({ children, id }) => { effect="solid" clickable={true} globalEventOff={"click"} + isCapture={true} id={id} place="bottom" overridePosition={computePosition} diff --git a/src/components/layout/topbar.js b/src/components/layout/topbar.js index 3b445ae473..fa5d2a9c3a 100644 --- a/src/components/layout/topbar.js +++ b/src/components/layout/topbar.js @@ -9,54 +9,115 @@ import React, { } from "react" import { useHotkeys } from "react-hotkeys-hook" import { Box, Flex, Text } from "rebass" +import { Label } from "@rebass/forms" import { ReactComponent as ProfileIcon } from "../../assets/svg/profile.svg" +import { ReactComponent as LoopIcon } from "../../assets/svg/loop.svg" import { InterfaceContext } from "../../context/interface" +import { AccountContext } from "../../context/account" import Spinner from "../spinner" import { SearchBar } from "./elements" import Popover from "./popover" import Medusa from "../../services/api" +import Tooltip from "../tooltip" -const UnstyledButton = styled.button` - padding: 0; - color: inherit; +const StyledBox = styled(Box)` + background-color: #d9dfe8; + font-size: 12px; + color: white; font-weight: 500; - font-size: 14px; - font-family: inherit; - font-style: inherit; - text-align: inherit; - text-decoration: none; - background-color: transparent; - border: 0; - outline: none; - cursor: pointer; - box-shadow: none; - line-height: 100%; - - &:hover { - box-shadow: none; - color: ${props => props.theme.colors["darkest"]}; + line-height: 16px; + padding-left: 6px; + padding-right: 6px; + border-radius: 2px; + width: 17px; + height: 17px; + transition: fill 0.2s ease-in; + + :hover { + background-color: #454b54; } ` +const ProfilePopover = () => { + const [loading, setLoading] = useState(true) + const [user, setUser] = useState(null) + + const { handleLogout } = useContext(AccountContext) + + if (!user) { + Medusa.auth.session().then(response => { + setUser(response.data.user) + setLoading(false) + }) + } + + return ( + + + {loading ? ( + + ) : ( + + {user.first_name} {user.last_name} + + )} + + { + handleLogout() + navigate("/login") + }} + > + Sign out + + + + + ) +} + const TopBar = () => { - const onSearch = () => ({}) //const { onSearch } = useContext(InterfaceContext) + const { onSearch } = useContext(InterfaceContext) const [focusing, setFocusing] = useState(false) const [query, setQuery] = useState("") - const [showProfile, setShowProfile] = useState(false) + const searchRef = useRef(null) - useHotkeys( - "/", - () => { - if (searchRef && searchRef.current) { - setFocusing(true) - searchRef.current.focus() - return false - } - }, - {}, - [searchRef] - ) + useEffect(() => setQuery(""), [onSearch]) + + const hotKeyFocus = () => { + if (searchRef && searchRef.current) { + setFocusing(true) + searchRef.current.focus() + return false + } + } + + useHotkeys("shift+7", hotKeyFocus, {}, [searchRef]) + useHotkeys("/", hotKeyFocus, {}, [searchRef]) const handleChange = e => { if (focusing) { @@ -113,13 +174,28 @@ const TopBar = () => { width: "100%", }} > - + + + + + + + + / + + + + + { fill: "medusa", ":hover": { cursor: "pointer", - fill: "ui-100", + fill: "#89959C", }, }, }} @@ -138,11 +214,10 @@ const TopBar = () => { data-tip data-event="click" > - - - - - + + + + @@ -150,59 +225,4 @@ const TopBar = () => { ) } -const ProfilePopover = () => { - const [loading, setLoading] = useState(true) - const [user, setUser] = useState(null) - - if (!user) { - Medusa.auth.session().then(response => { - setUser(response.data.user) - setLoading(false) - }) - } - - return ( - - - {loading ? ( - - ) : ( - - {user.first_name} {user.last_name} - - )} - - { - handleLogout() - navigate("/login") - }} - > - Sign out - - - - - ) -} - export default TopBar diff --git a/src/context/account.js b/src/context/account.js index fe50007c54..d24e8b610d 100644 --- a/src/context/account.js +++ b/src/context/account.js @@ -31,7 +31,6 @@ const reducer = (state, action) => { id: action.payload._id, email: action.payload.email, } - break default: return state } @@ -54,7 +53,7 @@ export const AccountProvider = ({ children }) => { handleLogout: details => { return Medusa.auth.deauthenticate(details).then(() => { dispatch({ type: "userLoggedOut" }) - return data + return null }) }, diff --git a/src/context/interface.js b/src/context/interface.js index e69de29bb2..dae9c143e6 100644 --- a/src/context/interface.js +++ b/src/context/interface.js @@ -0,0 +1,43 @@ +import React, { useState, useReducer } from "react" + +export const defaultInterfaceContext = { + onSearch: () => {}, + setOnSearch: () => {}, +} + +export const InterfaceContext = React.createContext(defaultInterfaceContext) + +const reducer = (state, action) => { + switch (action.type) { + case "registerHandler": + return { + ...state, + onSearch: action.payload, + } + default: + return state + } +} + +export const InterfaceProvider = ({ children }) => { + const [searchHandler, setSearchHandler] = useState(() => () => {}) + + const setOnSearch = handler => { + if (handler) { + setSearchHandler(() => { + return handler + }) + } + } + + return ( + + {children} + + ) +} diff --git a/src/domain/customers/index.js b/src/domain/customers/index.js index 6bcff640f5..f593c53950 100644 --- a/src/domain/customers/index.js +++ b/src/domain/customers/index.js @@ -1,8 +1,9 @@ -import React, { useState, useCallback, useEffect } from "react" +import React, { useState, useCallback, useEffect, useContext } from "react" import { navigate } from "gatsby" import { Router } from "@reach/router" import { Input } from "@rebass/forms" import { Text, Flex, Box } from "rebass" +import { InterfaceContext } from "../../context/interface" import qs from "query-string" import Details from "./details" @@ -45,22 +46,13 @@ const CustomerIndex = () => { const [limit, setLimit] = useState(20) const [query, setQuery] = useState("") - const onKeyDown = event => { - // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event - if (event.key === "Enter") { - event.preventDefault() - event.stopPropagation() - searchQuery() - } - } - - const searchQuery = () => { + const searchQuery = q => { setOffset(0) const baseUrl = qs.parseUrl(window.location.href).url const prepared = qs.stringify( { - q: query, + q, offset: 0, limit, }, @@ -71,6 +63,11 @@ const CustomerIndex = () => { refresh({ search: `?${prepared}` }) } + const { setOnSearch } = useContext(InterfaceContext) + useEffect(() => { + setOnSearch(searchQuery) + }, []) + const handlePagination = direction => { const updatedOffset = direction === "next" ? offset + limit : offset - limit const baseUrl = qs.parseUrl(window.location.href).url @@ -100,27 +97,6 @@ const CustomerIndex = () => { Customers - - - setQuery(e.target.value)} - value={query} - /> - - - {isLoading ? ( { const filtersOnLoad = qs.parse(window.location.search) @@ -56,12 +57,12 @@ const DiscountIndex = () => { const searchRef = useRef(null) - const searchQuery = () => { + const searchQuery = q => { setOffset(0) const baseUrl = qs.parseUrl(window.location.href).url const queryParts = { - q: query, + q, offset: 0, limit: 20, } @@ -81,6 +82,11 @@ const DiscountIndex = () => { }) } + const { setOnSearch } = useContext(InterfaceContext) + useEffect(() => { + setOnSearch(searchQuery) + }, []) + useEffect(() => { handleCheckbox() }, [showDynamic, showDisabled]) @@ -141,22 +147,6 @@ const DiscountIndex = () => { }) } - const onKeyDown = event => { - switch (event.key) { - case "Enter": - event.preventDefault() - event.stopPropagation() - searchQuery() - break - case "Esc": - case "Escape": - searchRef.current.blur() - break - default: - break - } - } - const moreResults = discounts && discounts.length >= limit return ( @@ -171,28 +161,6 @@ const DiscountIndex = () => { - - setQuery(e.target.value)} - value={query} - /> - - diff --git a/src/domain/gift-cards/index.js b/src/domain/gift-cards/index.js index a5c7ee989f..5d44828bea 100644 --- a/src/domain/gift-cards/index.js +++ b/src/domain/gift-cards/index.js @@ -1,12 +1,12 @@ -import React, { useState, useEffect } from "react" +import React, { useState, useEffect, useContext } from "react" import { Router } from "@reach/router" import { navigate } from "gatsby" import qs from "query-string" import { Text, Flex, Box } from "rebass" -import { Input } from "@rebass/forms" import ReactTooltip from "react-tooltip" import moment from "moment" import { OrderNumCell } from "../orders" +import { InterfaceContext } from "../../context/interface" import ManageGiftCard from "./manage" import GiftCardDetail from "./detail" @@ -22,21 +22,19 @@ import { DefaultCellContent, } from "../../components/table" import Spinner from "../../components/spinner" -import Badge from "../../components/badge" import Button from "../../components/button" import useMedusa from "../../hooks/use-medusa" const Index = () => { const { gift_cards, isLoading, refresh } = useMedusa("giftCards") - const [query, setQuery] = useState("") - const searchQuery = () => { + const searchQuery = q => { const baseUrl = qs.parseUrl(window.location.href).url const search = { fields: "id,title,thumbnail", expand: "variants,variants.prices,collection", - q: query, + q, offset: 0, limit: 20, } @@ -50,14 +48,10 @@ const Index = () => { refresh({ search }) } - const onKeyDown = event => { - // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event - if (event.key === "Enter") { - event.preventDefault() - event.stopPropagation() - searchQuery() - } - } + const { setOnSearch } = useContext(InterfaceContext) + useEffect(() => { + setOnSearch(searchQuery) + }, []) return (
@@ -73,28 +67,6 @@ const Index = () => { Manage gift cards - - - setQuery(e.target.value)} - value={query} - /> - - - {isLoading ? ( { filtersOnLoad.limit = 20 } + const { setOnSearch } = useContext(InterfaceContext) + const { orders: allOrders, hasCache, @@ -277,6 +280,17 @@ const OrderIndex = ({}) => { ) } + const searchHandler = q => { + setOffset(0) + resetFilters() + setQuery(q) + handleTabClick("all", { q }) + } + + useEffect(() => { + setOnSearch(searchHandler) + }, []) + const [activeIndex, setActiveIndex] = useState(-1) useHotkeys( "/", @@ -335,22 +349,6 @@ const OrderIndex = ({}) => { setFilterTabs(savedTabs) }, []) - const onKeyDown = event => { - switch (event.key) { - case "Enter": - event.preventDefault() - event.stopPropagation() - searchQuery() - break - case "Esc": - case "Escape": - searchRef.current.blur() - break - default: - break - } - } - const searchQuery = () => { setOffset(0) resetFilters() @@ -391,7 +389,6 @@ const OrderIndex = ({}) => { let dateFormatted = formatDateFilter(dateFilter.filter) queryParts.created_at = dateFormatted } - if (query) { queryParts.q = query } @@ -468,19 +465,19 @@ const OrderIndex = ({}) => { switch (tab) { case "completed": - setQuery("") + //setQuery("") searchObject["fulfillment_status[]"] = "shipped" searchObject["payment_status[]"] = "captured" break case "incomplete": - setQuery("") + //setQuery("") searchObject["fulfillment_status[]"] = ["not_fulfilled", "fulfilled"] searchObject["payment_status[]"] = "awaiting" break case "all": break default: - setQuery("") + //setQuery("") const toSend = prepareSearchParams(tab.value, queryParts) if (!tab.value) { @@ -591,28 +588,6 @@ const OrderIndex = ({}) => { - - setQuery(e.target.value)} - value={query} - /> - - { const [selectedProduct, setSelectedProduct] = useState() const [copyingProduct, setCopyingProduct] = useState(false) - const onKeyDown = event => { - // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event - if (event.key === "Enter") { - event.preventDefault() - event.stopPropagation() - searchQuery() - } - } - - const searchQuery = () => { + const searchQuery = q => { setOffset(0) const baseUrl = qs.parseUrl(window.location.href).url const search = { - q: query, + q, offset: 0, limit: 20, } @@ -107,6 +97,11 @@ const ProductIndex = () => { refresh({ search }) } + const { setOnSearch } = useContext(InterfaceContext) + useEffect(() => { + setOnSearch(searchQuery) + }, []) + const handlePagination = direction => { const updatedOffset = direction === "next" ? offset + limit : offset - limit const baseUrl = qs.parseUrl(window.location.href).url @@ -225,26 +220,6 @@ const ProductIndex = () => { - - setQuery(e.target.value)} - value={query} - /> - - {selectedProduct && ( - {isLoading || isReloading || fetching ? ( { refresh({ search }) } - const { setOnSearch } = useContext(InterfaceContext) + const { setOnSearch, onUnmount } = useContext(InterfaceContext) + useEffect(onUnmount, []) useEffect(() => { setOnSearch(searchQuery) }, []) From 2976cd222f00842e4a03c7a8c060a5794b10cb8c Mon Sep 17 00:00:00 2001 From: olivermrbl Date: Fri, 15 Oct 2021 13:13:28 +0200 Subject: [PATCH 6/7] fix: Show in settings --- src/components/layout/topbar.js | 51 +++++++++++++++++---------------- 1 file changed, 26 insertions(+), 25 deletions(-) diff --git a/src/components/layout/topbar.js b/src/components/layout/topbar.js index b69defd171..b2195ecaf6 100644 --- a/src/components/layout/topbar.js +++ b/src/components/layout/topbar.js @@ -151,8 +151,6 @@ const TopBar = () => { [onSearch, query] ) - if (!display) return null - return ( { marginRight: "-32px", marginLeft: "-32px", borderBottom: "subtle", + minHeight: "43px", }} > - - - - - - - - / - - - - - + {display && ( + + + + + + + + / + + + + + + )} Date: Wed, 20 Oct 2021 11:18:04 +0200 Subject: [PATCH 7/7] align page titles with buttons --- src/domain/orders/draft-orders/index.js | 22 +++++---- src/domain/orders/index.js | 50 +++++++++---------- src/domain/orders/returns/index.js | 36 ++++---------- src/domain/products/index.js | 64 +++++++++++++------------ 4 files changed, 81 insertions(+), 91 deletions(-) diff --git a/src/domain/orders/draft-orders/index.js b/src/domain/orders/draft-orders/index.js index 2f24b36566..b04cbef749 100644 --- a/src/domain/orders/draft-orders/index.js +++ b/src/domain/orders/draft-orders/index.js @@ -40,16 +40,18 @@ const DraftOrderIndex = ({}) => { return ( - - - Draft orders - - - - - + + + + Draft orders + + + + + + {isLoading || isReloading ? ( { return ( - - - Orders - - - - - handleSaveTab(value)} - /> - + + + + Orders + + + + + handleSaveTab(value)} + /> + + { } } - const searchQuery = () => { + const searchQuery = query => { setOffset(0) const baseUrl = qs.parse(window.location.href).url @@ -97,6 +98,13 @@ const ReturnIndex = ({}) => { }) } + const { setOnSearch, onUnmount } = useContext(InterfaceContext) + useEffect(onUnmount, []) + + useEffect(() => { + setOnSearch(searchQuery) + }, []) + const handlePagination = direction => { const updatedOffset = direction === "next" @@ -129,30 +137,6 @@ const ReturnIndex = ({}) => { Returns - - - setQuery(e.target.value)} - value={query} - /> - - - {isLoading || isReloading || fetching ? ( { return ( - - - Products - - - - - - {selectedProduct && ( - + )} + - )} - + {(isLoading && !hasCache) || isReloading || copyingProduct ? (