Merge pull request #7 from TomPlum/dev

Newspaper, settings and landing page improvements

.github/workflows/nyuusu.yml

@@ -12,10 +12,15 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm install
       - name: Build
-        run: |
-          npm install
-          npm run-script build
+        run: npm run build
         env:
           VITE_NEWS_API_KEY: ${{ secrets.VITE_NEWS_API_KEY }}
       - name: Deploy

README.md

@@ -1,3 +1,7 @@
 # :newspaper: ニュース
 
 Practice reading real Japanese from news articles published in Japan.
+
+# Data Sources
+
+- The Newscatcher API is used to fetch news article information used in this application. See https://www.newscatcherapi.com/ for more info.

package.json

@@ -5,7 +5,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
@@ -20,19 +20,28 @@
     "@mui/icons-material": "^5.14.9",
     "@mui/material": "^5.14.10",
     "@tanstack/react-query": "^4.35.3",
+    "@uidotdev/usehooks": "^2.3.1",
     "axios": "^1.5.0",
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",
-    "hepburn": "^1.2.1",
+    "date-fns-tz": "^2.0.0",
     "i18next": "^23.5.1",
     "react": "^18.2.0",
+    "react-circle-flags": "^0.0.19",
     "react-dom": "^18.2.0",
-    "react-i18next": "^13.2.2"
+    "react-i18next": "^13.2.2",
+    "react-router-dom": "^6.16.0",
+    "recharts": "^2.8.0",
+    "rss-parser": "^3.13.0",
+    "stream-browserify": "^3.0.0",
+    "typewriter-effect": "^2.21.0",
+    "url": "^0.11.3"
   },
   "devDependencies": {
+    "@svgr/rollup": "^8.1.0",
+    "@tanstack/react-query-devtools": "^4.35.3",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
-    "@types/hepburn": "^1.2.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
@@ -50,6 +59,7 @@
     "sass": "^1.67.0",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
+    "vite-plugin-node-polyfills": "^0.14.1",
     "vitest": "^0.34.4"
   },
   "msw": {

src/NyuusuApplication.module.scss

@@ -1,16 +1,19 @@
+@import "styles/colours";
+
 .wrapper {
   padding: 0;
   margin: 0;
   width: 100%;
   height: 100%;
-  left: 0;
-  top: 0;
-  overflow-x: hidden;
 }
 
 .content {
-  padding: 50px;
   display: flex;
+  width: 100%;
+  height: 100%;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
+  justify-content: flex-start;
+  background-color: $newspaper;
+  overflow-y: auto;
 }

src/NyuusuApplication.tsx

@@ -1,37 +1,23 @@
 import styles from './NyuusuApplication.module.scss'
 import Footer from "components/Footer"
 import Header from "modules/Header/components/HeaderBar"
-import { useCallback } from "react"
-import useNewsContext from "context"
-import SingleHeadlineView from "views/SingleHeadlineView"
-import { View } from "modules/Header/components/ViewControls/types.ts"
-import CardsHeadlineView from "views/CardsHeadlineView"
+import SettingsDrawer from "modules/Settings/components/SettingsDrawer"
+import { Outlet } from "react-router-dom"
+import useCurrentRoute from "hooks/useCurrentRoute/useCurrentRoute.ts"
 
-const NyuusuApplication = () => {
-  const { view } = useNewsContext()
-
-  const SelectedView = useCallback(() => {
-    switch (view) {
-      case View.SINGLE: {
-        return <SingleHeadlineView />
-      }
-      case View.CARDS: {
-        return <CardsHeadlineView />
-      }
-    }
-  }, [view])
 
+const NyuusuApplication = () => {
+  const route = useCurrentRoute()
   return (
     <div className={styles.wrapper}>
-      <Header
-        loading={false}
-        articles={10} // TODO: Un-hardcode these
-      />
+      {route !== '/' && <Header />}
 
       <div className={styles.content}>
-        <SelectedView />
-        <Footer />
+        <Outlet />
+        <SettingsDrawer />
       </div>
+
+      <Footer />
     </div>
   )
 }

src/api/clients/useAnkiConnect/index.ts

@@ -0,0 +1 @@
+export { default } from './useAnkiConnect.ts'

src/api/clients/useAnkiConnect/types.ts

@@ -0,0 +1,16 @@
+export interface AnkiConnectResponse<Result> {
+    result: Result
+    error: string | null
+}
+
+export interface AnkiConnectRequest<Params> {
+    action: string
+    version: number
+    params?: Params
+}
+
+export type AnkiConnectAction = 'addNote' | 'deckNames' | 'createDeck'
+
+export interface AnkiConnectClient<Params, Result> {
+    call: (action: AnkiConnectAction, params?: Params) => Promise<AnkiConnectResponse<Result>>
+}

src/api/clients/useAnkiConnect/useAnkiConnect.ts

@@ -0,0 +1,41 @@
+import useClient from "api/clients/useClient"
+import { hosts } from "api/hosts.ts"
+import {
+  AnkiConnectAction,
+  AnkiConnectClient,
+  AnkiConnectRequest,
+  AnkiConnectResponse
+} from "api/clients/useAnkiConnect/types.ts"
+import { useCallback } from "react"
+import { AxiosResponse } from "axios"
+
+const useAnkiConnect = <Params, Result>(): AnkiConnectClient<Params, Result> => {
+  const client = useClient({
+    host: hosts[import.meta.env.MODE].anki,
+    contextRoot: ''
+  })
+
+  const call = useCallback(async (action: AnkiConnectAction, params?: unknown) => {
+    const { data } = await client.post<
+      object,
+      AxiosResponse<AnkiConnectResponse<Result>>,
+      AnkiConnectRequest<unknown>
+    >('', {
+      action,
+      version: 6,
+      params: params
+    })
+
+    if (data.error) {
+      throw new Error(data.error)
+    }
+
+    return data
+  }, [client])
+
+  return {
+    call
+  }
+}
+
+export default useAnkiConnect

src/api/clients/useAsahiRss/index.ts

@@ -0,0 +1 @@
+export { default } from './useAsahiRss.ts'

src/api/clients/useAsahiRss/types.ts

@@ -0,0 +1,21 @@
+export interface AsahiRssFeed {
+    title: string
+    link: string
+    description: string
+    'dc:language': string
+    'dc:rights': string
+    'dc:creator': string
+    'dc:date': string
+    'dc:publisher': string
+    'syn:updatePeriod': string
+    'syn:updateFrequency': string
+    'syn:updateBase': string
+}
+
+export interface AsahiRssItem {
+    title: string
+    link: string
+    description: string
+    'dc:date': string
+    'dc:subject': string
+}

src/api/clients/useAsahiRss/useAsahiRss.ts

@@ -0,0 +1,17 @@
+import Parser from "rss-parser"
+import { hosts } from "api/hosts.ts"
+import { AsahiRssFeed, AsahiRssItem } from "api/clients/useAsahiRss/types.ts"
+
+const useAsahiRss = () => {
+  return new Parser<AsahiRssFeed, AsahiRssItem>({
+    customFields: {
+      item: ['dc:subject'],
+      feed: ['dc:publisher', 'dc:language', 'dc:rights']
+    },
+    requestOptions: {
+      host: hosts[import.meta.env.MODE].asahi,
+    }
+  })
+}
+
+export default useAsahiRss

src/api/clients/useMainichiRss/index.ts

@@ -0,0 +1 @@
+export { default } from './useMainichiRss.ts'

src/api/clients/useMainichiRss/types.ts

@@ -0,0 +1,20 @@
+export interface MainichiRssFeed {
+    title: string
+    link: string
+    description: string
+    'dc:language': string
+    'dc:rights': string
+    'dc:date': string
+    'dc:publisher': string
+    'dc:creator': string
+}
+
+export interface MainichiRssItem {
+    title: string
+    link: string
+    'dc:subject': string
+    'dc:date': string
+    date: string
+    isoDate: string
+    'rdf:about': string
+}

src/api/clients/useMainichiRss/useMainichiRss.ts

@@ -0,0 +1,17 @@
+import Parser from "rss-parser"
+import { hosts } from "api/hosts.ts"
+import { MainichiRssFeed, MainichiRssItem } from "./types.ts"
+
+const useMainichiRss = () => {
+  return new Parser<MainichiRssFeed, MainichiRssItem>({
+    customFields: {
+      item: ['dc:subject'],
+      feed: ['dc:publisher', 'dc:language', 'dc:rights']
+    },
+    requestOptions: {
+      host: hosts[import.meta.env.MODE].mainichiRss,
+    }
+  })
+}
+
+export default useMainichiRss

src/api/clients/useNewsCatcherApi/index.ts

@@ -0,0 +1 @@
+export { default } from './useNewsCatcherAPI.ts'

src/api/clients/useNewsCatcherApi/useNewsCatcherAPI.ts

@@ -0,0 +1,11 @@
+import useClient from "api/clients/useClient"
+import { hosts } from "api/hosts.ts"
+
+const useNewsCatcherAPI = () => {
+  return useClient({
+    host:  hosts[import.meta.env.MODE].newsCatcherApi,
+    contextRoot: 'default'
+  })
+}
+
+export default useNewsCatcherAPI

src/api/hooks/useCreateAnkiCard/index.ts

@@ -0,0 +1 @@
+export { default } from './useCreateAnkiCard.ts'

src/api/hooks/useCreateAnkiCard/types.ts

@@ -0,0 +1,11 @@
+export interface CreateAnkiCardParams {
+    note: {
+        deckName: string,
+        modelName: string,
+        fields: {
+            Front: Record<string, string>,
+            Back: Record<string, string>
+        },
+        tags: string[],
+    }
+}

src/api/hooks/useCreateAnkiCard/useCreateAnkiCard.ts

@@ -0,0 +1,23 @@
+import useAnkiConnect from "api/clients/useAnkiConnect"
+import { useCallback } from "react"
+import { CreateAnkiCardParams } from "api/hooks/useCreateAnkiCard/types.ts"
+import { queryKeys } from "api/queryKeys.ts"
+import { useMutation } from "@tanstack/react-query"
+
+export const useCreateAnkiCardMutationKey = () => {
+  return [queryKeys.createAnkiCard]
+}
+
+const useCreateAnkiCard = () => {
+  const client = useAnkiConnect<CreateAnkiCardParams, string>()
+
+  const addCard = useCallback(async (params: CreateAnkiCardParams) => {
+    return await client.call('addNote', params)
+  }, [client])
+
+  const queryKey = useCreateAnkiCardMutationKey()
+
+  return useMutation(queryKey, addCard)
+}
+
+export default useCreateAnkiCard

src/api/hooks/useCreateAnkiDeck/index.ts

@@ -0,0 +1 @@
+export { default } from './useCreateAnkiDeck.ts'

src/api/hooks/useCreateAnkiDeck/types.ts

@@ -0,0 +1,3 @@
+export interface CreateAnkiDeckParams {
+    deck: string
+}

src/api/hooks/useCreateAnkiDeck/useCreateAnkiDeck.ts

@@ -0,0 +1,24 @@
+import useAnkiConnect from "api/clients/useAnkiConnect"
+import { useCallback } from "react"
+import { CreateAnkiDeckParams } from "api/hooks/useCreateAnkiDeck/types.ts"
+import { queryKeys } from "api/queryKeys.ts"
+import { useMutation } from "@tanstack/react-query"
+
+export const useCreateAnkiDeckMutationKey = () => {
+  return [queryKeys.createAnkiDeck]
+}
+
+const useCreateAnkiDeck = () => {
+  const client = useAnkiConnect<CreateAnkiDeckParams, string>()
+
+  const createDeck = useCallback(async (params: CreateAnkiDeckParams) => {
+    const { result } = await client.call('createDeck', params)
+    return result
+  }, [client])
+
+  const mutationKey = useCreateAnkiDeckMutationKey()
+
+  return useMutation(mutationKey, createDeck)
+}
+
+export default useCreateAnkiDeck

src/api/hooks/useGetAnkiDecks/index.ts

@@ -0,0 +1 @@
+export { default } from './useGetAnkiDecks.ts'