change directory structure, update readme

.env.example

@@ -0,0 +1,2 @@
+BASE_PATH=/hugin
+CATALOGUE_API_PATH=http://localhost:8087/bikube

README.md

@@ -1,36 +1,22 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+## Hugin
 
-## Getting Started
-
-First, run the development server:
+Hugin er en applikasjon for fysisk mottak av aviser.
 
+### Lokalt oppsett
+For å kjøre lokalt må du sette de nødvendige miljøvariablene:
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+cp .env.example .env.local
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
+| Variabelnavn       | Standardverdi                | Beskrivelse                                                                 |
+|--------------------|------------------------------|-----------------------------------------------------------------------------|
+| BASE_PATH          | /hugin                       | Base path for applikasjonen                                                 |
+| CATALOGUE_API_PATH | http://localhost:8087/bikube | Sti til [katalog APIet ](https://github.com/NationalLibraryOfNorway/bikube) |
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Deretter kan du kjøre følgende kommandoer:
+```bash
+npm install
+npm run dev
+```
+Applikasjonen finner du nå i nettleseren på [http://localhost:3000/hugin](http://localhost:3000/hugin).

next.config.mjs

@@ -1,12 +1,13 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     output: "standalone",
-    basePath: "/hugin",
+    basePath: process.env.BASE_PATH,
     async rewrites() {
         return [
             {
                 source: '/api/:path*',
-                destination: `${process.env.API_BASE_URL}/:path*`,
+                destination: `${process.env.CATALOGUE_API_PATH}/:path*`,
+                basePath: false
             },
         ];
     }

src/app/[id]/page.tsx

@@ -1,14 +1,14 @@
 'use client';
 
 import {useEffect, useState} from 'react';
+import {fetchNewspaperTitle} from '@/services/data';
+import {Title} from '@/models/Title';
 
 export default function Page({ params }: { params: { id: string } }) {
   const [title, setTitle] = useState<Title>();
 
   useEffect(() => {
-    void fetch(`/api/title?catalogueId=${params.id}&materialType=NEWSPAPER`)
-      .then(response => response.json())
-      .then((data: Title) => setTitle(data));
+    void fetchNewspaperTitle(params.id).then((data: Title) => setTitle(data));
   }, [params]);
 
   return (

src/app/globals.css

@@ -1,111 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-/*:root {*/
-/*  --max-width: 1100px;*/
-/*  --border-radius: 12px;*/
-/*  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",*/
-/*    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",*/
-/*    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;*/
-
-/*  --foreground-rgb: 0, 0, 0;*/
-/*  --background-start-rgb: 214, 219, 220;*/
-/*  --background-end-rgb: 255, 255, 255;*/
-
-/*  --primary-glow: conic-gradient(*/
-/*    from 180deg at 50% 50%,*/
-/*    #16abff33 0deg,*/
-/*    #0885ff33 55deg,*/
-/*    #54d6ff33 120deg,*/
-/*    #0071ff33 160deg,*/
-/*    transparent 360deg*/
-/*  );*/
-/*  --secondary-glow: radial-gradient(*/
-/*    rgba(255, 255, 255, 1),*/
-/*    rgba(255, 255, 255, 0)*/
-/*  );*/
-
-/*  --tile-start-rgb: 239, 245, 249;*/
-/*  --tile-end-rgb: 228, 232, 233;*/
-/*  --tile-border: conic-gradient(*/
-/*    #00000080,*/
-/*    #00000040,*/
-/*    #00000030,*/
-/*    #00000020,*/
-/*    #00000010,*/
-/*    #00000010,*/
-/*    #00000080*/
-/*  );*/
-
-/*  --callout-rgb: 238, 240, 241;*/
-/*  --callout-border-rgb: 172, 175, 176;*/
-/*  --card-rgb: 180, 185, 188;*/
-/*  --card-border-rgb: 131, 134, 135;*/
-/*}*/
-
-/*@media (prefers-color-scheme: dark) {*/
-/*  :root {*/
-/*    --foreground-rgb: 255, 255, 255;*/
-/*    --background-start-rgb: 0, 0, 0;*/
-/*    --background-end-rgb: 0, 0, 0;*/
-
-/*    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));*/
-/*    --secondary-glow: linear-gradient(*/
-/*      to bottom right,*/
-/*      rgba(1, 65, 255, 0),*/
-/*      rgba(1, 65, 255, 0),*/
-/*      rgba(1, 65, 255, 0.3)*/
-/*    );*/
-
-/*    --tile-start-rgb: 2, 13, 46;*/
-/*    --tile-end-rgb: 2, 5, 19;*/
-/*    --tile-border: conic-gradient(*/
-/*      #ffffff80,*/
-/*      #ffffff40,*/
-/*      #ffffff30,*/
-/*      #ffffff20,*/
-/*      #ffffff10,*/
-/*      #ffffff10,*/
-/*      #ffffff80*/
-/*    );*/
-
-/*    --callout-rgb: 20, 20, 20;*/
-/*    --callout-border-rgb: 108, 108, 108;*/
-/*    --card-rgb: 100, 100, 100;*/
-/*    --card-border-rgb: 200, 200, 200;*/
-/*  }*/
-/*}*/
-
-/** {*/
-/*  box-sizing: border-box;*/
-/*  padding: 0;*/
-/*  margin: 0;*/
-/*}*/
-
-/*html,*/
-/*body {*/
-/*  max-width: 100vw;*/
-/*  overflow-x: hidden;*/
-/*}*/
-
-/*body {*/
-/*  color: rgb(var(--foreground-rgb));*/
-/*  background: linear-gradient(*/
-/*      to bottom,*/
-/*      transparent,*/
-/*      rgb(var(--background-end-rgb))*/
-/*    )*/
-/*    rgb(var(--background-start-rgb));*/
-/*}*/
-
-/*a {*/
-/*  color: inherit;*/
-/*  text-decoration: none;*/
-/*}*/
-
-/*@media (prefers-color-scheme: dark) {*/
-/*  html {*/
-/*    color-scheme: dark;*/
-/*  }*/
-/*}*/

src/app/layout.tsx

@@ -1,11 +1,10 @@
 import type {Metadata} from 'next';
 import './globals.css';
 import {Providers} from '@/app/providers';
-import AppShell from '@/app/ui/AppShell';
+import AppShell from '@/components/AppShell';
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Hugin'
 };
 
 export default function RootLayout({

src/app/page.tsx

@@ -1,4 +1,4 @@
-import SearchBar from '@/app/ui/SearchBar';
+import SearchBar from '@/components/SearchBar';
 
 export default function Home() {
   return (

src/app/ui/AppShell.tsx → src/components/AppShell.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Header from '@/app/ui/Header';
+import Header from '@/components/Header';
 
 export default function AppShell({
   children,

src/app/ui/Header.tsx → src/components/Header.tsx

@@ -3,12 +3,15 @@
 import {Link, Navbar, NavbarBrand, NavbarContent, NavbarItem} from '@nextui-org/react';
 import React from 'react';
 import {Button} from '@nextui-org/button';
+import {useRouter} from 'next/navigation';
 
 export default function Header() {
+  const router = useRouter();
+
   return (
     <Navbar>
       <NavbarBrand>
-        <Link className="font-bold text-inherit" href="/">Hugin</Link>
+        <Link color="foreground" className="font-bold text-inherit" onClick={() => router.push('/')}>Hugin</Link>
       </NavbarBrand>
       <NavbarContent justify="end">
         <NavbarItem className="hidden lg:flex">

src/components/SearchBar.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import {Autocomplete, AutocompleteItem} from '@nextui-org/autocomplete';
+import {useAsyncList} from '@react-stately/data';
+import {useRouter} from 'next/navigation';
+import {Key} from 'react';
+import {searchNewspaperTitles} from '@/services/data';
+import {Title} from '@/models/Title';
+
+export default function SearchBar() {
+  const router = useRouter();
+
+  const titles = useAsyncList({
+    async load({signal, filterText}) {
+      if (!filterText) {
+        return {items: []};
+      }
+      const data = await searchNewspaperTitles(filterText, signal);
+      return {
+        items: data.map(title => ({id: title.catalogueId, name: title.name})),
+      };
+    }
+  });
+
+  const onSelectionChange = (key: Key) => {
+    router.push(`/${key.toString()}`);
+  };
+
+  return (
+    <Autocomplete
+      autoFocus={true}
+      radius="full"
+      inputValue={titles.filterText}
+      isLoading={titles.isLoading}
+      items={titles.items as Title[]}
+      size="lg"
+      variant="bordered"
+      label="Søk etter avistittel"
+      onSelectionChange={key => onSelectionChange(key)}
+      onInputChange={value => titles.setFilterText(value)}
+      selectorIcon={null}
+    >
+      {(title: Title) => <AutocompleteItem key={title.catalogueId} textValue={title.name}>
+        <div className="flex gap-2 items-center">
+          <div className="flex flex-col">
+            <span className="text-small">{title.name}</span>
+            <span className="text-tiny text-default-400">{title.startDate}</span>
+          </div>
+        </div>
+      </AutocompleteItem>}
+    </Autocomplete>
+  );
+}

src/app/Title.ts → src/models/Title.ts

@@ -1,4 +1,4 @@
-interface Title {
+export interface Title {
   catalogueId: string;
   name: string;
   startDate: string; // Could be Date

src/services/data.ts

@@ -0,0 +1,11 @@
+import {Title} from '@/models/Title';
+
+export async function searchNewspaperTitles(searchTerm: string, signal: AbortSignal): Promise<Title[]> {
+  const response = await fetch(`/api/title/search?searchTerm=${searchTerm}&materialType=NEWSPAPER`, {signal});
+  return await response.json() as Promise<Title[]>;
+}
+
+export async function fetchNewspaperTitle(id: string): Promise<Title> {
+  const response = await fetch(`/api/title?catalogueId=${id}&materialType=NEWSPAPER`);
+  return await response.json() as Promise<Title>;
+}