Skip to content

Commit 2512bb9

Browse files
w3bdesignw3bdesign
authored
Merge pull request #765 from w3bdesign/dev
Refactor code
2 parents b3f5126 + a7d2573 commit 2512bb9

25 files changed

+581
-641
lines changed

‎components/AlgoliaSearch/AlgoliaSearchBox.component.jsx

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -20,44 +20,42 @@ const AlgoliaSearchBox = () => {
2020
const [hasFocus, sethasFocus] = useState(false);
2121

2222
return (
23-
<>
24-
<div className="hidden mt-2 md:inline xl:inline">
25-
<div className="">
26-
<InstantSearch
27-
indexName={WOO_CONFIG.ALGOLIA_INDEX_NAME}
28-
searchClient={searchClient}
29-
>
30-
{/*We need to conditionally add a border because the element has position:fixed*/}
31-
<SearchBox
32-
aria-label="Søk her"
33-
translations={{
34-
submitTitle: 'Søk',
35-
resetTitle: 'Slett søketekst',
36-
placeholder: 'Søk etter produkter',
37-
}}
38-
className={`px-4 py-2 text-base bg-white border outline-none rounded ${
39-
hasFocus ? 'border-black' : 'border-gray-400'
40-
}`}
41-
onFocus={() => {
42-
sethasFocus(true);
43-
}}
44-
onBlur={() => {
45-
sethasFocus(false);
46-
}}
47-
onReset={() => {
48-
setSearch(null);
49-
}}
50-
onChange={(text) => {
51-
setSearch(text.target.value);
52-
}}
53-
/>
54-
{search && (
55-
<Hits className="absolute" hitComponent={SearchResults} />
56-
)}
57-
</InstantSearch>
58-
</div>
23+
<div className="hidden mt-2 md:inline xl:inline">
24+
<div className="">
25+
<InstantSearch
26+
indexName={WOO_CONFIG.ALGOLIA_INDEX_NAME}
27+
searchClient={searchClient}
28+
>
29+
{/*We need to conditionally add a border because the element has position:fixed*/}
30+
<SearchBox
31+
aria-label="Søk her"
32+
translations={{
33+
submitTitle: 'Søk',
34+
resetTitle: 'Slett søketekst',
35+
placeholder: 'Søk etter produkter',
36+
}}
37+
className={`px-4 py-2 text-base bg-white border outline-none rounded ${
38+
hasFocus ? 'border-black' : 'border-gray-400'
39+
}`}
40+
onFocus={() => {
41+
sethasFocus(true);
42+
}}
43+
onBlur={() => {
44+
sethasFocus(false);
45+
}}
46+
onReset={() => {
47+
setSearch(null);
48+
}}
49+
onChange={(text) => {
50+
setSearch(text.target.value);
51+
}}
52+
/>
53+
{search && (
54+
<Hits className="absolute" hitComponent={SearchResults} />
55+
)}
56+
</InstantSearch>
5957
</div>
60-
</>
58+
</div>
6159
);
6260
};
6361

‎components/AlgoliaSearch/MobileSearch.component.jsx

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -17,38 +17,36 @@ const MobileSearch = () => {
1717
const [search, setSearch] = useState(null);
1818
const [hasFocus, sethasFocus] = useState(false);
1919
return (
20-
<>
21-
<div className="inline mt-4">
22-
<InstantSearch
23-
indexName={WOO_CONFIG.ALGOLIA_INDEX_NAME}
24-
searchClient={searchClient}
25-
>
26-
<SearchBox
27-
translations={{
28-
submitTitle: 'Søk',
29-
resetTitle: 'Slett søketekst',
30-
placeholder: 'Søk etter produkter',
31-
}}
32-
className={`px-4 py-2 text-base bg-white border outline-none rounded ${
33-
hasFocus ? 'border-black' : 'border-gray-400'
34-
}`}
35-
onFocus={() => {
36-
sethasFocus(true);
37-
}}
38-
onBlur={() => {
39-
sethasFocus(false);
40-
}}
41-
onReset={() => {
42-
setSearch(null);
43-
}}
44-
onChange={(text) => {
45-
setSearch(text.target.value);
46-
}}
47-
/>
48-
{search && <Hits className="absolute" hitComponent={SearchResults} />}
49-
</InstantSearch>
50-
</div>
51-
</>
20+
<div className="inline mt-4">
21+
<InstantSearch
22+
indexName={WOO_CONFIG.ALGOLIA_INDEX_NAME}
23+
searchClient={searchClient}
24+
>
25+
<SearchBox
26+
translations={{
27+
submitTitle: 'Søk',
28+
resetTitle: 'Slett søketekst',
29+
placeholder: 'Søk etter produkter',
30+
}}
31+
className={`px-4 py-2 text-base bg-white border outline-none rounded ${
32+
hasFocus ? 'border-black' : 'border-gray-400'
33+
}`}
34+
onFocus={() => {
35+
sethasFocus(true);
36+
}}
37+
onBlur={() => {
38+
sethasFocus(false);
39+
}}
40+
onReset={() => {
41+
setSearch(null);
42+
}}
43+
onChange={(text) => {
44+
setSearch(text.target.value);
45+
}}
46+
/>
47+
{search && <Hits className="absolute" hitComponent={SearchResults} />}
48+
</InstantSearch>
49+
</div>
5250
);
5351
};
5452

‎components/AlgoliaSearch/SearchResults.component.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const SearchResults = ({
3333
<Link
3434
href="/produkt/[post]"
3535
as={`/produkt/${trimmedProductName}?id=${objectID}`}
36+
passHref
3637
>
3738
<div className="flex p-6 bg-white">
3839
<header className="hit-image-container">

‎components/Cart/CartPage/CartItemsContainer.component.jsx

Lines changed: 48 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -74,59 +74,57 @@ const CartItemsContainer = () => {
7474

7575
useEffect(() => {
7676
refetch();
77-
}, []);
77+
}, [refetch]);
7878

7979
return (
80-
<>
81-
<section className="py-8 bg-white">
82-
<div className="container flex flex-wrap items-center mx-auto">
83-
{requestError && <div className="p-6 mx-auto mt-5">Error ... </div>}
84-
{cart ? (
85-
<div className="p-6 mx-auto mt-5">
86-
<RegularCart
87-
cart={cart}
88-
updateCartProcessing={updateCartProcessing}
89-
handleRemoveProductClick={handleRemoveProductClick}
90-
updateCart={updateCart}
91-
/>
92-
<MobileCart
93-
cart={cart}
94-
updateCartProcessing={updateCartProcessing}
95-
handleRemoveProductClick={handleRemoveProductClick}
96-
updateCart={updateCart}
97-
/>
98-
<div className="mt-4">
99-
<Link href="/kasse">
100-
<button className="px-4 py-2 font-bold bg-white border border-gray-400 border-solid rounded hover:bg-gray-400">
101-
GÅ TIL KASSE
102-
</button>
103-
</Link>
104-
</div>
105-
{updateCartProcessing && (
106-
<>
107-
<div className="mt-4 text-xl text-center">
108-
Oppdaterer antall, vennligst vent ...
109-
<br />
110-
</div>
111-
<div>
112-
<LoadingSpinner />
113-
</div>
114-
</>
115-
)}
80+
<section className="py-8 bg-white">
81+
<div className="container flex flex-wrap items-center mx-auto">
82+
{requestError && <div className="p-6 mx-auto mt-5">Error ... </div>}
83+
{cart ? (
84+
<div className="p-6 mx-auto mt-5">
85+
<RegularCart
86+
cart={cart}
87+
updateCartProcessing={updateCartProcessing}
88+
handleRemoveProductClick={handleRemoveProductClick}
89+
updateCart={updateCart}
90+
/>
91+
<MobileCart
92+
cart={cart}
93+
updateCartProcessing={updateCartProcessing}
94+
handleRemoveProductClick={handleRemoveProductClick}
95+
updateCart={updateCart}
96+
/>
97+
<div className="mt-4">
98+
<Link href="/kasse" passHref>
99+
<button className="px-4 py-2 font-bold bg-white border border-gray-400 border-solid rounded hover:bg-gray-400">
100+
GÅ TIL KASSE
101+
</button>
102+
</Link>
116103
</div>
117-
) : (
118-
<div className="p-6 mx-auto mt-5">
119-
<h2 className="text-lg">Ingen varer i handlekurven</h2>
120-
<button className="px-4 py-2 m-4 font-bold uppercase bg-white border border-gray-400 border-solid rounded hover:bg-gray-400">
121-
<Link href="/produkter">
122-
<a>Legg til varer</a>
123-
</Link>
124-
</button>
125-
</div>
126-
)}
127-
</div>
128-
</section>
129-
</>
104+
{updateCartProcessing && (
105+
<>
106+
<div className="mt-4 text-xl text-center">
107+
Oppdaterer antall, vennligst vent ...
108+
<br />
109+
</div>
110+
<div>
111+
<LoadingSpinner />
112+
</div>
113+
</>
114+
)}
115+
</div>
116+
) : (
117+
<div className="p-6 mx-auto mt-5">
118+
<h2 className="text-lg">Ingen varer i handlekurven</h2>
119+
<button className="px-4 py-2 m-4 font-bold uppercase bg-white border border-gray-400 border-solid rounded hover:bg-gray-400">
120+
<Link href="/produkter">
121+
<a>Legg til varer</a>
122+
</Link>
123+
</button>
124+
</div>
125+
)}
126+
</div>
127+
</section>
130128
);
131129
};
132130

‎components/Cart/CartPage/MobileCart.component.jsx

Lines changed: 36 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,42 @@ import { v4 as uuidv4 } from 'uuid';
22

33
import MobileCartItem from './MobileCartItem.component';
44

5-
const MobileCart = ({ cart, handleRemoveProductClick, updateCart }) => {
6-
return (
7-
<section className="bg-white md:hidden lg:hidden xl:hidden">
8-
<div className="flex items-center justify-center">
9-
<div className="container">
10-
<table className="flex flex-row flex-no-wrap mx-auto my-5 overflow-hidden ">
11-
<thead className="text-black">
12-
{cart.products.length &&
13-
cart.products.map(() => (
14-
<tr
15-
key={uuidv4()}
16-
className="flex flex-col mb-2 bg-white border border-gray-300 rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0"
17-
>
18-
<th className="p-3 text-left">Fjern</th>
19-
<th className="p-3 text-left">Navn</th>
20-
<th className="p-3 text-left">Pris</th>
21-
<th className="p-3 text-left">Antall</th>
22-
<th className="p-3 text-left">Totalpris</th>
23-
</tr>
24-
))}
25-
</thead>
26-
<tbody className="flex-1 sm:flex-none">
27-
{cart.products.length &&
28-
cart.products.map((item) => (
29-
<MobileCartItem
30-
key={uuidv4()}
31-
item={item}
32-
products={cart.products}
33-
handleRemoveProductClick={handleRemoveProductClick}
34-
updateCart={updateCart}
35-
/>
36-
))}
37-
</tbody>
38-
</table>
39-
</div>
5+
const MobileCart = ({ cart, handleRemoveProductClick, updateCart }) => (
6+
<section className="bg-white md:hidden lg:hidden xl:hidden">
7+
<div className="flex items-center justify-center">
8+
<div className="container">
9+
<table className="flex flex-row flex-no-wrap mx-auto my-5 overflow-hidden ">
10+
<thead className="text-black">
11+
{cart.products.length &&
12+
cart.products.map(() => (
13+
<tr
14+
key={uuidv4()}
15+
className="flex flex-col mb-2 bg-white border border-gray-300 rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0"
16+
>
17+
<th className="p-3 text-left">Fjern</th>
18+
<th className="p-3 text-left">Navn</th>
19+
<th className="p-3 text-left">Pris</th>
20+
<th className="p-3 text-left">Antall</th>
21+
<th className="p-3 text-left">Totalpris</th>
22+
</tr>
23+
))}
24+
</thead>
25+
<tbody className="flex-1 sm:flex-none">
26+
{cart.products.length &&
27+
cart.products.map((item) => (
28+
<MobileCartItem
29+
key={uuidv4()}
30+
item={item}
31+
products={cart.products}
32+
handleRemoveProductClick={handleRemoveProductClick}
33+
updateCart={updateCart}
34+
/>
35+
))}
36+
</tbody>
37+
</table>
4038
</div>
41-
</section>
42-
);
43-
};
39+
</div>
40+
</section>
41+
);
4442

4543
export default MobileCart;

0 commit comments

Comments
 (0)