djkato/saleor-apps-redis_apl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve css and remove unused search components (#181)

Browse source
This commit is contained in:
Lukasz Ostrowski 2023-02-21 12:24:37 +01:00 committed by GitHub
parent cceacab272
commit ea850d34ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 47 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/tasty-items-build.md Normal file
View file

@ -0,0 +1,5 @@
---
"saleor-app-search": minor
---
Remove unused preview features and make CSS better

3
apps/search/src/components/ConfigurationView.tsx
View file

@ -17,8 +17,7 @@ const useStyles = makeStyles((theme) => ({
marginTop: 10, marginTop: 10,
}, },
wrapper: { wrapper: {
border: `1px solid ${theme.palette.grey.A100}`, minHeight: "100vh",
minHeight: "calc(100vh - 100px)",
paddingBottom: 50, paddingBottom: 50,
}, },
tabs: { marginLeft: 32, marginBottom: 32 }, tabs: { marginLeft: 32, marginBottom: 32 },

103
apps/search/src/pages/search/index.tsx
View file

@ -1,12 +1,6 @@
import algoliasearch from "algoliasearch"; import algoliasearch from "algoliasearch";
import { import { InstantSearch, Pagination } from "react-instantsearch-hooks-web";
InstantSearch, import { Card, CardContent, CardHeader, MenuItem, Select } from "@material-ui/core";
Pagination,
Breadcrumb,
HierarchicalMenu,
} from "react-instantsearch-hooks-web";
import { Card, CardContent, CardHeader, Typography } from "@material-ui/core";
import { RangeInput } from "react-instantsearch-hooks-web";
import "instantsearch.css/themes/reset.css"; import "instantsearch.css/themes/reset.css";
import "instantsearch.css/themes/satellite.css"; import "instantsearch.css/themes/satellite.css";
import styles from "../../styles/search.module.css"; import styles from "../../styles/search.module.css";
@ -18,17 +12,17 @@ import { useRouter } from "next/router";
import { useAppBridge } from "@saleor/app-sdk/app-bridge"; import { useAppBridge } from "@saleor/app-sdk/app-bridge";
import { useConfiguration } from "../../lib/configuration"; import { useConfiguration } from "../../lib/configuration";
import { useMemo, useState } from "react"; import { useMemo, useState } from "react";
import { Select, MenuItem } from "@material-ui/core";
import { useQuery } from "react-query"; import { useQuery } from "react-query";
import { SearchAppMainBar } from "../../components/SearchAppMainBar"; import { SearchAppMainBar } from "../../components/SearchAppMainBar";
import { AppColumnsLayout } from "../../components/AppColumnsLayout"; import { AppColumnsLayout } from "../../components/AppColumnsLayout";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
wrapper: { wrapper: {
border: `1px solid ${theme.palette.grey.A100}`,
minHeight: "calc(100vh - 100px)",
paddingBottom: 50, paddingBottom: 50,
}, },
content: {
padding: "0 50px",
},
})); }));
function Search() { function Search() {
@ -74,57 +68,42 @@ function Search() {
<PageTab label={"Preview"} value="search" /> <PageTab label={"Preview"} value="search" />
</PageTabs> </PageTabs>
{displayInterface ? ( <div className={classes.content}>
<InstantSearch searchClient={searchClient} indexName={indexName}> {displayInterface ? (
<AppColumnsLayout variant="1:2"> <InstantSearch searchClient={searchClient} indexName={indexName}>
<div className={styles.filterGrid}> <AppColumnsLayout variant="1:2">
<Card> <div className={styles.filterGrid}>
<CardHeader title={"Index"} /> <Card>
<CardContent> <CardHeader title={"Index"} />
<Select <CardContent>
labelId="index-select-label" <Select
id="index-select" labelId="index-select-label"
value={indexName} id="index-select"
onChange={(event) => setIndexName(event.target.value as string)} value={indexName}
> onChange={(event) => setIndexName(event.target.value as string)}
{availableIndices.map((name) => ( >
<MenuItem key={name} value={name}> {availableIndices.map((name) => (
{name} <MenuItem key={name} value={name}>
</MenuItem> {name}
))} </MenuItem>
</Select> ))}
</CardContent> </Select>
</Card> </CardContent>
</Card>
<Card> </div>
<CardHeader title={"Categories"} /> <div className={styles.contentWrapper}>
<CardContent> <SearchBox />
<HierarchicalMenu <Hits />
attributes={["categories.lvl0", "categories.lvl1", "categories.lvl1"]} <Pagination />
/> </div>
</CardContent> </AppColumnsLayout>
</Card> </InstantSearch>
) : (
<Card> <Card>
<CardHeader title={"Filters"} /> <CardHeader title="To preview indexes, ensure the App is configured" />
<CardContent> </Card>
<RangeInput attribute="grossPrice" /> )}
</CardContent> </div>
</Card>
</div>
<div className={styles.contentWrapper}>
<Breadcrumb attributes={["categories.lvl0", "categories.lvl1", "categories.lvl2"]} />
<SearchBox />
<Hits />
<Pagination />
</div>
</AppColumnsLayout>
</InstantSearch>
) : (
<Card>
<CardHeader title="To preview indexes, ensure app is configured" />
</Card>
)}
</div> </div>
); );
} }

1
apps/search/src/styles/globals.css
View file

@ -2,7 +2,6 @@ body {
font-family: Inter, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, font-family: Inter, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
color: #111; color: #111;
padding: 1rem 2rem;
} }
code { code {