From 47ea97adaf394e56285f1133f2a46ab5f69e0021 Mon Sep 17 00:00:00 2001 From: Thiago Chaves Date: Wed, 13 Jul 2022 18:39:51 +0300 Subject: [PATCH] Mock data and add expression set selection page --- .../ExpressionSetCard.stories.tsx | 1 - .../ExpressionSetCard/ExpressionSetCard.tsx | 2 - src/components/Navigation/Navigation.tsx | 2 +- src/hooks/useExpressionData.ts | 14 ++ src/mock/index.ts | 1 + src/mock/mock-data.ts | 127 ++++++++++++++++++ src/model/Category.ts | 7 + src/model/Expression.ts | 7 + src/model/ExpressionSet.ts | 7 + src/model/Relationships.ts | 13 ++ src/model/index.ts | 4 + src/pages/expression-sets.tsx | 37 +++++ src/styles/components.css | 10 ++ 13 files changed, 228 insertions(+), 4 deletions(-) create mode 100644 src/hooks/useExpressionData.ts create mode 100644 src/mock/index.ts create mode 100644 src/mock/mock-data.ts create mode 100644 src/model/Category.ts create mode 100644 src/model/Expression.ts create mode 100644 src/model/ExpressionSet.ts create mode 100644 src/model/Relationships.ts create mode 100644 src/model/index.ts create mode 100644 src/pages/expression-sets.tsx diff --git a/src/components/ExpressionSetCard/ExpressionSetCard.stories.tsx b/src/components/ExpressionSetCard/ExpressionSetCard.stories.tsx index 42c7318..ec45ace 100644 --- a/src/components/ExpressionSetCard/ExpressionSetCard.stories.tsx +++ b/src/components/ExpressionSetCard/ExpressionSetCard.stories.tsx @@ -17,7 +17,6 @@ const Template: ComponentStory = (args) => ( export const Daily = Template.bind({}); Daily.args = { - id: 1, name: "Daily", description: "Words for daily practice", word_count: 11, diff --git a/src/components/ExpressionSetCard/ExpressionSetCard.tsx b/src/components/ExpressionSetCard/ExpressionSetCard.tsx index 4269641..c6f58d6 100644 --- a/src/components/ExpressionSetCard/ExpressionSetCard.tsx +++ b/src/components/ExpressionSetCard/ExpressionSetCard.tsx @@ -1,12 +1,10 @@ export interface ExpressionSetCardProps { - id: number; name: string; description: string; word_count: number; } export function ExpressionSetCard({ - id, name, description, word_count, diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx index 0072149..59868d7 100644 --- a/src/components/Navigation/Navigation.tsx +++ b/src/components/Navigation/Navigation.tsx @@ -7,7 +7,7 @@ export function Navigation() { ({ + prompt, + description, + category, + expression_set, +})); + +const RawExpressionSetData: RawExpressionSetItem[] = [ + ["daily", "New expressions and poorly remembered expressions"], + ["weekly", "Expressions to be reviewed at the end of the week"], + ["monthly", "Expressions to be reviewed at the end of the month"], + ["yearly", "Expressions to be reviewed at the end of the year"], + ["ancient", "Expressions here should be memorized by now"], +].map(([name, description]) => ({ name, description })); + +interface MockData { + // Tables + categories: Category[]; + expressions: Expression[]; + expression_sets: ExpressionSet[]; + + // Relationships + expression_to_category: ExpressionToCategory[]; + expression_to_expression_set: ExpressionToExpressionSet[]; +} + +export function parseRawData( + raw_expression_data: RawExpressionDataItem[], + raw_expression_set_data: RawExpressionSetItem[] +): MockData { + const category_names = new Set( + raw_expression_data.map((item) => item.category) + ); + const categories: Category[] = Array.from(category_names).map( + (name, index) => ({ + id: index + 1, + name, + description: name, + }) + ); + + const expressions: Expression[] = raw_expression_data.map( + ({ prompt, description }, index) => ({ + id: index + 1, + prompt, + description, + }) + ); + + const expression_sets: ExpressionSet[] = raw_expression_set_data.map( + ({ name, description }, index) => ({ + id: index + 1, + name, + description, + }) + ); + + const expression_to_category: ExpressionToCategory[] = + raw_expression_data.map((item, index) => + matchExpressionAndCategory(index + 1, item, categories) + ); + + const expression_to_expression_set: ExpressionToExpressionSet[] = + raw_expression_data.map((item, index) => + matchExpressionAndExpressionSet(index + 1, item, expression_sets) + ); + + return { + expressions, + expression_sets, + categories, + expression_to_category, + expression_to_expression_set, + }; +} + +function matchExpressionAndCategory( + expression_id: number, + { category }: RawExpressionDataItem, + categories: Category[] +): ExpressionToCategory { + const category_id = categories.find(({ name }) => name === category)?.id || 0; + return { + category_id, + expression_id, + }; +} + +function matchExpressionAndExpressionSet( + expression_id: number, + { expression_set }: RawExpressionDataItem, + expression_sets: ExpressionSet[] +): ExpressionToExpressionSet { + const expression_set_id = + expression_sets.find(({ name }) => name === expression_set)?.id || 0; + return { + expression_id, + expression_set_id, + }; +} + +export const MockData = parseRawData(RawExpressionData, RawExpressionSetData); diff --git a/src/model/Category.ts b/src/model/Category.ts new file mode 100644 index 0000000..3763809 --- /dev/null +++ b/src/model/Category.ts @@ -0,0 +1,7 @@ +export type CategoryId = number; + +export type Category = { + id: CategoryId; + name: string; + description: string; +}; diff --git a/src/model/Expression.ts b/src/model/Expression.ts new file mode 100644 index 0000000..e825318 --- /dev/null +++ b/src/model/Expression.ts @@ -0,0 +1,7 @@ +export type ExpressionId = number; + +export type Expression = { + id: ExpressionId; + prompt: string; + description: string; +}; diff --git a/src/model/ExpressionSet.ts b/src/model/ExpressionSet.ts new file mode 100644 index 0000000..be28790 --- /dev/null +++ b/src/model/ExpressionSet.ts @@ -0,0 +1,7 @@ +export type ExpressionSetId = number; + +export type ExpressionSet = { + id: ExpressionSetId; + name: string; + description: string; +}; diff --git a/src/model/Relationships.ts b/src/model/Relationships.ts new file mode 100644 index 0000000..8f21176 --- /dev/null +++ b/src/model/Relationships.ts @@ -0,0 +1,13 @@ +import { CategoryId } from "./Category"; +import { ExpressionId } from "./Expression"; +import { ExpressionSetId } from "./ExpressionSet"; + +export type ExpressionToCategory = { + expression_id: ExpressionId; + category_id: CategoryId; +}; + +export type ExpressionToExpressionSet = { + expression_id: ExpressionId; + expression_set_id: ExpressionSetId; +}; diff --git a/src/model/index.ts b/src/model/index.ts new file mode 100644 index 0000000..b3395e2 --- /dev/null +++ b/src/model/index.ts @@ -0,0 +1,4 @@ +export * from "./Category"; +export * from "./Expression"; +export * from "./ExpressionSet"; +export * from "./Relationships"; diff --git a/src/pages/expression-sets.tsx b/src/pages/expression-sets.tsx new file mode 100644 index 0000000..5b00981 --- /dev/null +++ b/src/pages/expression-sets.tsx @@ -0,0 +1,37 @@ +import type { NextPage } from "next"; +import Link from "next/link"; +import { ExpressionSetCard } from "../components/ExpressionSetCard"; +import { Page } from "../components/Page"; +import { useExpressionData } from "../hooks/useExpressionData"; + +const ExpressionSetsPage: NextPage = () => { + const { expression_sets, expression_to_expression_set } = useExpressionData(); + + return ( + +
+ {expression_sets.map(({ id, name, description }) => ( + + + item.expression_set_id === id + ).length + } + /> + + + ))} +
+ + ); +}; + +export default ExpressionSetsPage; diff --git a/src/styles/components.css b/src/styles/components.css index 452209f..efbab6d 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -19,6 +19,16 @@ display: block; flex: 1; position: relative; + + /* Will it conflict with overlays? Move elsewhere? */ + padding: 16px; + overflow-y: auto; +} + +.content-list { + display: grid; + grid-template-columns: 1fr; + grid-gap: 16px; } /* Navigation */