diff --git a/.prettierrc.json b/.prettierrc.json
index ebd8881..46f15e9 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -2,5 +2,6 @@
"singleQuote": true,
"semi": true,
"trailingComma": "all",
- "printWidth": 80
+ "printWidth": 80,
+ "endOfLine": "auto"
}
diff --git a/backend/src/index.ts b/backend/src/index.ts
index b4956dd..1a7054c 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -10,18 +10,66 @@ function readPaging(args: { limit?: number; offset?: number }) {
const offset = args.offset ?? 0;
if (!Number.isInteger(limit) || limit < 1 || limit > MAX_LIMIT) {
- throw new GraphQLError(`limit må være mellom 1 og ${MAX_LIMIT}`, {
+ throw new GraphQLError(`limit must be between 1 and ${MAX_LIMIT}`, {
extensions: { code: 'BAD_USER_INPUT' },
});
}
if (!Number.isInteger(offset) || offset < 0) {
- throw new GraphQLError('offset kan ikke være negativ', {
+ throw new GraphQLError('offset cannot be negative', {
extensions: { code: 'BAD_USER_INPUT' },
});
}
return { limit, offset };
}
+// Smakskartet viser prikker, ikke sider, så det får en egen grense.
+// Flere enn ca. 300 prikker blir uleselig og tungt å tegne.
+const TASTE_MAP_MAX = 300;
+
+type TasteFilter = {
+ type?: string | null;
+ grape?: string | null;
+ country?: string | null;
+ year?: number | null;
+ minRating?: number | null;
+ minRatingCount?: number | null;
+};
+
+/**
+ * Lager WHERE-delen for smakskartet ut fra filtrene.
+ * Verdiene sendes alltid som parametere ($1, $2, ...), aldri rett inn i SQL,
+ * så brukerinput kan ikke endre spørringen (SQL-injeksjon).
+ */
+function tasteWhere(filter: TasteFilter = {}) {
+ const where = ['w.body IS NOT NULL', 'w.acidity IS NOT NULL'];
+ const params: unknown[] = [];
+ const add = (sql: string, value: unknown) => {
+ params.push(value);
+ where.push(sql.replace('?', `$${params.length}`));
+ };
+
+ if (filter.type) add('w.type = ?', filter.type);
+ if (filter.country) add('c.name = ?', filter.country);
+ if (filter.grape) {
+ add(
+ `EXISTS (
+ SELECT 1 FROM wine_grapes wg
+ JOIN grapes g ON g.id = wg.grape_id
+ WHERE wg.wine_id = w.id AND g.name = ?
+ )`,
+ filter.grape,
+ );
+ }
+ // @> bruker GIN-indeksen wines_vintages_idx
+ if (filter.year != null) add('w.vintages @> ARRAY[?]::int[]', filter.year);
+ if (filter.minRating != null) add('w.avg_rating >= ?', filter.minRating);
+ if (filter.minRatingCount != null) {
+ add('w.rating_count >= ?', filter.minRatingCount);
+ }
+
+ return { sql: where.join(' AND '), params };
+}
+
const typeDefs = `#graphql
type Wine {
@@ -67,6 +115,24 @@ const typeDefs = `#graphql
wineCount: Int!
}
+ # Filtre for Explore by taste. Alle er valgfrie; det som mangler, filtreres ikke på.
+ input TasteFilter {
+ type: String
+ grape: String
+ country: String
+ year: Int
+ minRating: Float
+ minRatingCount: Int
+ }
+
+ # Verdiene til nedtrekksmenyene i filterpanelet på Explore by taste
+ type TasteOptions {
+ types: [String!]!
+ countries: [String!]!
+ grapes: [String!]!
+ years: [Int!]!
+ }
+
type Query {
health: String!
@@ -85,6 +151,11 @@ const typeDefs = `#graphql
limit: Int = 20
offset: Int = 0
): WinePage!
+
+ # Viner til smakskartet. Bare viner med både fylde og syre kommer med.
+ tasteMap(filter: TasteFilter, limit: Int = 150): WinePage!
+
+ tasteOptions: TasteOptions!
}
`;
@@ -273,6 +344,93 @@ const resolvers = {
totalCount: countResult.rows[0].count,
};
},
+
+ tasteMap: async (
+ _: unknown,
+ args: { filter?: TasteFilter | null; limit?: number },
+ ) => {
+ const limit = args.limit ?? 150;
+ if (!Number.isInteger(limit) || limit < 1 || limit > TASTE_MAP_MAX) {
+ throw new GraphQLError(`limit must be between 1 and ${TASTE_MAP_MAX}`, {
+ extensions: { code: 'BAD_USER_INPUT' },
+ });
+ }
+
+ const { sql, params } = tasteWhere(args.filter ?? {});
+
+ // Vi viser de vinene flest har vurdert, så kartet fylles med kjente
+ // viner i stedet for viner med én enkelt vurdering på 5.0.
+ const winesResult = await pool.query(
+ `
+ SELECT
+ w.id,
+ w.name,
+ w.type,
+ w.abv::float AS abv,
+ w.body,
+ w.acidity,
+ wi.name AS winery,
+ r.name AS region,
+ c.name AS country,
+ w.avg_rating::float AS "avgRating",
+ w.rating_count AS "ratingCount"
+ FROM wines w
+ JOIN wineries wi ON w.winery_id = wi.id
+ JOIN regions r ON w.region_id = r.id
+ JOIN countries c ON w.country_code = c.code
+ WHERE ${sql}
+ ORDER BY w.rating_count DESC, w.id
+ LIMIT $${params.length + 1}
+ `,
+ [...params, limit],
+ );
+
+ // Totalen telles med de samme filtrene, så "X wines found" viser alle
+ // vinene som passer, selv om kartet bare tegner de første `limit`.
+ const countResult = await pool.query(
+ `
+ SELECT count(*)::int AS count
+ FROM wines w
+ JOIN countries c ON w.country_code = c.code
+ WHERE ${sql}
+ `,
+ params,
+ );
+
+ return {
+ items: winesResult.rows,
+ totalCount: countResult.rows[0].count,
+ };
+ },
+
+ tasteOptions: async () => {
+ // Fire små spørringer i parallell. Druer begrenses til de 60 vanligste,
+ // ellers blir nedtrekksmenyen for lang til å være nyttig.
+ const [types, countries, grapes, years] = await Promise.all([
+ pool.query(`SELECT DISTINCT type FROM wines ORDER BY type`),
+ pool.query(`SELECT name FROM countries ORDER BY name`),
+ pool.query(`
+ SELECT g.name
+ FROM grapes g
+ JOIN wine_grapes wg ON wg.grape_id = g.id
+ GROUP BY g.name
+ ORDER BY count(*) DESC
+ LIMIT 60
+ `),
+ pool.query(`
+ SELECT DISTINCT unnest(vintages) AS year
+ FROM wines
+ ORDER BY year DESC
+ `),
+ ]);
+
+ return {
+ types: types.rows.map((r) => r.type),
+ countries: countries.rows.map((r) => r.name),
+ grapes: grapes.rows.map((r) => r.name).sort(),
+ years: years.rows.map((r) => r.year),
+ };
+ },
},
};
diff --git a/client/index.html b/client/index.html
index cb93dc2..f7693cd 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,5 +1,5 @@
-
+
diff --git a/client/src/App.tsx b/client/src/App.tsx
index ec50821..1249a83 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,17 +1,52 @@
+import { Link, Route, Routes, useParams } from 'react-router';
+import SiteHeader from './components/SiteHeader';
+import ExploreByTaste from './components/ExploreByTaste';
import WineCatalog from './components/WineCatalog';
+/**
+ * NB: Temporary placeholder. The detail page is not built yet.
+ * "View wine details" on Explore by taste links here, so the link
+ * already works. Replace this with the real detail page component.
+ */
+function WineDetailsPlaceholder() {
+ const { id } = useParams();
+ return (
+
+
Wine details
+
The detail page for wine {id} is not built yet.
+ ← Back to Explore by taste
+
+ );
+}
+
/**
* Root component for Wine not?
*
- * marks the page's main content, so screen reader and keyboard users
- * can jump straight to it. The page has one
, and WineList uses
,
- * so the heading hierarchy is correct.
+ * SiteHeader is shown on every page. Routes picks the page from the URL:
+ * - / Explore by taste (front page)
+ * - /wines the wine catalog
+ * - /wines/:id detail page (placeholder for now)
+ *
+ * Each page has its own and one
, so the heading hierarchy is
+ * correct on every page.
*/
export default function App() {
return (
-
-