Fix/patched lockfile (#24)

.devcontainer/devcontainer.json

@@ -4,6 +4,6 @@
  "service": "app",
  "workspaceFolder": "/workspace",
  "forwardPorts": [5432],
- "postCreateCommand": "npm install && npm run db && npm run seed",
- "postAttachCommand": "npx turbo dev --parallel --filter=!@reubin/extension"
+ "postCreateCommand": "yarn install && yarn db && yarn seed",
+ "postAttachCommand": "yarn turbo dev --parallel --filter=!@reubin/extension"
 }

.github/workflows/build.yml

@@ -32,13 +32,13 @@ jobs:
  cache: "npm"
 
  - name: Install dependencies
- run: npm install
+ run: yarn install
 
  - name: Generate Types
- run: npm run generate && npx prisma generate --schema apps/graphql/prisma/schema.prisma
+ run: yarn generate && yarn prisma generate --schema apps/graphql/prisma/schema.prisma
 
  - name: Build
- run: npm run build
+ run: yarn build
 
  - name: Types
- run: npm run types
+ run: yarn types

.github/workflows/e2e.yml

@@ -15,15 +15,15 @@ jobs:
  node-version: 18
 
  - name: Install dependencies
- run: npm ci
+ run: yarn
  - name: Generate Types
- run: npm run generate && npx prisma generate --schema apps/graphql/prisma/schema.prisma
+ run: yarn generate && yarn prisma generate --schema apps/graphql/prisma/schema.prisma
  - name: Build
- run: npm run build
+ run: yarn build
  - name: Install Playwright Browsers
- run: npm run deps --workspace=@reubin/e2e
+ run: yarn workspace @reubin/e2e deps
  - name: Run Playwright tests
- run: npm test --workspace=@reubin/e2e
+ run: yarn workspace @reubin/e2e test
  - uses: actions/upload-artifact@v3
  if: always()
  with:

.github/workflows/test.yml

@@ -26,8 +26,8 @@ jobs:
  uses: actions/setup-node@v3
  with:
  node-version: ${{ matrix.node-version }}
- - name: npm Install
- run: npm install
+ - name: Install
+ run: yarn install
  - name: Setup DB
  run: npx prisma db push --schema apps/graphql/prisma/schema.prisma
  env:
@@ -39,9 +39,9 @@ jobs:
  POSTGRES_PORT: ${{ job.services.postgres.ports[5432] }}
  DATABASE_URL: postgresql:https://postgres:postgres@localhost:5432/ci_db_test
  - name: Build
- run: npm run build
+ run: yarn build
  - name: Test
- run: npm test
+ run: yarn test
  env:
  # The hostname used to communicate with the PostgreSQL service container
  POSTGRES_HOST: localhost

Dockerfile

@@ -10,11 +10,11 @@ RUN npm install -g turbo
 COPY package*.json ./
 COPY turbo.json ./
 
-RUN npm install
-RUN npm run build
+RUN yarn install
+RUN yarn build
 
 # Bundle app source
 COPY . .
 
 EXPOSE 4000
-CMD ["npm", "start"]
+CMD ["yarn", "start"]

README.md

@@ -14,10 +14,10 @@ brew install postgres@14 node
 
 ### Node
 
-Make sure you're using `18.x` because [Vercel](https://vercel.com/docs/runtimes#official-runtimes/node-js/node-js-version) currently lists their default runtime as that version. This project uses [npm workspaces](https://docs.npmjs.com/cli/v8/using-npm/workspaces) & [Turborepo](https://turborepo.org/) and setup is simple:
+Make sure you're using `18.x` because [Vercel](https://vercel.com/docs/runtimes#official-runtimes/node-js/node-js-version) currently lists their default runtime as that version. This project uses [yarn workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces/) & [Turborepo](https://turborepo.org/) and setup is simple:
 
 ```
-npm install
+yarn
 ```
 
 ### Database
@@ -47,21 +47,21 @@ DATABASE_URL="postgresql:https://reubinadmin:password@localhost:5432/reubindb?schema=p
 First push the db to setup the tables:
 
 ```
-npm run db
+yarn db
 ```
 
 #### Seeing the Project
 
 You can populate the project with data by running the seed command. This will populate the database with feeds, tags and a single user.
 
 ```
-npm run seed
+yarn seed
 ```
 
 The seed command can also be run with an `--email` flag:
 
 ```
-npm run seed -- --email='[email protected]'
+yarn seed -- --email='[email protected]'
 ```
 
 This will allow you to login to the app with:
@@ -77,14 +77,14 @@ _NOTE_: Running this command will also clear the database of all existing data.
 
 ### Commands
 
-| command  | description |
-| ------------------ | ---------------------------------------------------------------- |
-| `npm run build` | Runs build in each workspace |
-| `npm test`  | Executes the tests in each workspace |
-| `npm run clean` | Clears out specific cache directories |
-| `npm run generate` | Generates types from the GraphQL documents for server and client |
-| `npm run dev` | Run all projects in development mode |
-| `npm run e2e` | Kick of integration tests |
+| command | description |
+| --------------- | ---------------------------------------------------------------- |
+| `yarn build` | Runs build in each workspace |
+| `yarn test` | Executes the tests in each workspace |
+| `yarn clean` | Clears out specific cache directories |
+| `yarn generate` | Generates types from the GraphQL documents for server and client |
+| `yarn dev` | Run all projects in development mode |
+| `yarn e2e` | Kick of integration tests |
 
 ### Scripts
 

apps/graphql/package.json

@@ -5,8 +5,8 @@
  "private": true,
  "scripts": {
  "start": "node dist/server",
- "build": "npx prisma generate && npm run bundle",
- "dev": "npx prisma generate && npm run bundle -- -w",
+ "build": "yarn prisma generate && yarn bundle",
+ "dev": "yarn prisma generate && yarn bundle -w",
  "bundle": "rollup -c",
  "generate": "npx prisma generate",
  "types": "tsc --noEmit --pretty",

apps/ui/src/app/(auth)/login/page.tsx

@@ -1,7 +1,12 @@
+import type { Metadata } from "next";
 import Link from "next/link";
 import { LoginForm } from "../../../components/login-form";
 import { Card } from "../../../components/ui/card";
 
+export const metadata: Metadata = {
+ title: "Login | Reubin",
+};
+
 export default function LoginPage() {
  return (
  <div>

apps/ui/src/app/(auth)/register/page.tsx

@@ -1,7 +1,12 @@
+import type { Metadata } from "next";
 import Link from "next/link";
 import { RegisterForm } from "../../../components/register-form";
 import { Card } from "../../../components/ui/card";
 
+export const metadata: Metadata = {
+ title: "Sign up | Reubin",
+};
+
 export default function RegistrationPage() {
  return (
  <div>

apps/ui/src/app/(dashboard)/feeds/page.tsx

@@ -1,18 +1,19 @@
-import { use } from "react";
 import { cookies } from "next/headers";
 
-import { DashboardProvider } from "../../../hooks/useDashboard";
+import { DashboardProvider } from "../../../components/dashboard-wrapper";
 import { ConnectedEntryList } from "../../../components/entries-list";
 import { ConnectedEntryFull } from "../../../components/entry-full";
 import { FeedList } from "../../../components/feed-list";
-import { getFeeds } from "../../../lib/graphql";
-import { authorizeRequest } from "../../../lib/authorized-request";
+import { sdk } from "../../../lib/graphql";
+import { TOKEN_NAME } from "../../../lib/auth-token";
 
 export const runtime = "experimental-edge";
 
-export default function DashboardPage() {
+export default async function DashboardPage() {
  const nextCookies = cookies();
- const _ = use(authorizeRequest(nextCookies, getFeeds()));
+ const _ = await sdk.GetFeeds(undefined, {
+ Authorization: nextCookies.get(TOKEN_NAME)?.value ?? "",
+ });
 
  return (
  <DashboardProvider>

apps/ui/src/app/(dashboard)/layout.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { AddFeed } from "../../components/add-feed";
 import { AppHeader } from "../../components/app-header";
 import { SideNavigation } from "../../components/side-navigation";

apps/ui/src/app/(dashboard)/settings/page.tsx

@@ -18,7 +18,6 @@ export default function SettingsPage() {
  return (
  <section className="w-full flex-1 p-4">
  <h1 className="text-3xl font-bold tracking-tight ">Settings</h1>
- <pre>{JSON.stringify(__, null, 4)}</pre>
  <h2>Tags</h2>
  <div className="grid max-w-6xl grid-cols-12 gap-8">
  <div className="col-span-12 lg:col-span-6">

apps/ui/src/app/(marketing)/changelog/page.tsx

@@ -1,3 +1,9 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+ title: "Changelog | Reubin",
+};
+
 export default function ChangelogPage() {
  return <h1>Changelog</h1>;
 }

apps/ui/src/app/(marketing)/privacy/page.tsx

@@ -1,4 +1,9 @@
 /* eslint-disable react/no-unescaped-entities */
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+ title: "Privacy Policy | Reubin",
+};
 
 function Privacy() {
  return (

apps/ui/src/app/layout.tsx

@@ -1,5 +1,17 @@
+import type { Metadata } from "next";
 import "../components/styles.css";
 
+export const metadata: Metadata = {
+ title: "Reubin | An RSS Client for the Next Generation",
+ icons: [
+ {
+ type: "image/png",
+ rel: "icon",
+ url: "/favicon.png",
+ },
+ ],
+};
+
 export default function RootLayout({ children }: React.PropsWithChildren<{}>) {
  return (
  <html className="dark:bg-zinc-900 dark:text-white">

apps/ui/src/components/dashboard-wrapper.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useReducer } from "react";
+import { DashContext, dashboardReducer } from "../hooks/useDashboard";
+import { useEventCallback } from "../hooks/useEventCallback";
+
+export function DashboardProvider({ children }: { children?: React.ReactNode }) {
+ const [state, dispatch] = useReducer(dashboardReducer, { feed: null, entry: null });
+
+ const selectEntry = useEventCallback((id: string) => {
+ dispatch({ type: "SELECT_ENTRY", entryId: id });
+ });
+
+ const selectFeed = useEventCallback((id: string) => {
+ dispatch({ type: "SELECT_FEED", feed: id });
+ });
+
+ const unselectFeed = useEventCallback(() => {
+ dispatch({ type: "SELECT_FEED", feed: null });
+ });
+
+ return (
+ <DashContext.Provider value={[state, { selectEntry, selectFeed, unselectFeed }]}>
+ {children}
+ </DashContext.Provider>
+ );
+}

apps/ui/src/components/entries-list.tsx

@@ -62,7 +62,9 @@ export const EntryListItem = memo(_EntryItem, isEqual);
 EntryListItem.displayName = "EntryListItem";
 
 export function EntryList(props: EntryListProps) {
- const { data, mutate } = useSWR([props.id, props.filter], getEntriesFromFeed);
+ const { data, mutate } = useSWR([props.id, props.filter], ([id, filter]) =>
+ getEntriesFromFeed(id, filter)
+ );
 
  // const isLoading = !error && !data;
 
@@ -82,7 +84,7 @@ export function EntryList(props: EntryListProps) {
  }, [mutate, props.id]);
 
  return (
- <div className="absolute top-0 left-0 w-full">
+ <div className="absolute left-0 top-0 w-full">
  <FeedToolbar onRefresh={handleRefresh} />
 
  <ul>

apps/ui/src/components/entry-full.tsx

@@ -11,7 +11,7 @@ interface EntryFullProps {
 }
 
 export function EntryFull(props: EntryFullProps) {
- const { error, data, mutate } = useSWR(props.id, getEntry);
+ const { error, data, mutate } = useSWR([props.id], ([id]) => getEntry(id));
 
  const isLoading = !error && !data;
 
@@ -46,7 +46,7 @@ export function EntryFull(props: EntryFullProps) {
 
  if (data) {
  return (
- <div className="absolute top-0 left-0 right-0 bottom-0 w-full ">
+ <div className="absolute bottom-0 left-0 right-0 top-0 w-full ">
  <article className="mx-auto max-w-2xl px-8 pb-16">
  <header className="py-8">
  <h1 className="text-3xl font-bold">{data.entry?.title}</h1>

apps/ui/src/components/feed-settings.tsx

@@ -110,7 +110,7 @@ export function FeedSettings() {
  const [isOpen, setOpen] = useState(false);
 
  const [{ feed }, { unselectFeed }] = useDashboardContext();
- const { data } = useSWR(feed, getFeed);
+ const { data } = useSWR([feed], ([feed]) => getFeed(feed));
 
  const handleRemove = useCallback(() => {
  if (feed) {

apps/ui/src/components/side-navigation.tsx

@@ -1,3 +1,4 @@
+"use client";
 import Link from "next/link";
 import isEqual from "react-fast-compare";
 import { memo } from "react";