Movie app practice nini

.env

@@ -1 +1,2 @@
-SKIP_PREFLIGHT_CHECK=true
+SITE_BASE_URI=http://localhost:5509
+GRAPHQL_PATH=/pairing/graphql

apps/film-and-tv-ratings/project.json

@@ -11,7 +11,7 @@
         "compiler": "babel",
         "outputPath": "dist/apps/film-and-tv-ratings",
         "index": "apps/film-and-tv-ratings/src/index.html",
-        "baseHref": "/",
+        "baseHref": "/_apps/film-and-tv-reviews/",
         "main": "apps/film-and-tv-ratings/src/main.tsx",
         "tsConfig": "apps/film-and-tv-ratings/tsconfig.app.json",
         "assets": [

apps/film-and-tv-ratings/src/common.tsx

@@ -0,0 +1,33 @@
+import { Card, Image, ImageProps, Text, Paper, Button } from '@mantine/core';
+import RichTextEditor from '@mantine/rte';
+import axios from 'axios';
+
+export const api_key = '99fdc21a0b0ef55c0cbc002c0ae96fd6';
+
+export function PosterImage({
+  posterPath,
+  imageProps,
+}: {
+  posterPath?: string | null;
+  imageProps?: ImageProps;
+}) {
+  return (
+    <Image
+      height={180}
+      {...imageProps}
+      src={`https://image.tmdb.org/t/p/original/${posterPath}`}
+      alt="Movie poster"
+    />
+  );
+}
+
+export const client = axios.create({
+  baseURL: 'https://api.themoviedb.org',
+  timeout: 1000,
+  headers: {
+    'Content-Type': 'application/json',
+    Accept: 'application/json',
+  },
+});
+
+export const devMode = window.location.hostname === 'localhost';

apps/film-and-tv-ratings/src/components/Card.tsx

@@ -0,0 +1,129 @@
+import {
+  TvFilmReview,
+  TvFilmReviewInput,
+  UpsertReviewMutationVariables,
+} from '@juxt-home/site';
+import { Card, Button, Text, Title, Group, Badge } from '@mantine/core';
+import { RichTextEditor } from '@mantine/rte';
+import { Id } from 'react-toastify';
+import { PosterImage } from '../common';
+
+export function TvFilmCard({
+  title,
+  posterPath,
+  overview,
+  badge1,
+  badge2,
+  badge3,
+}: {
+  title: string | null;
+  posterPath: string | null;
+  overview: string | null;
+  badge1?: string | number | null;
+  badge2?: string | number | null;
+  badge3?: string | number | null;
+}) {
+  return (
+    <Card
+      shadow="lg"
+      p="xl"
+      my="md"
+      sx={(theme) => ({
+        border: '0.5px solid #e7e8e7',
+      })}>
+      <Title order={2}>{title}</Title>
+
+      <Card.Section
+        sx={(theme) => ({
+          margin: '10px 0 20px 0',
+        })}>
+        <PosterImage posterPath={posterPath} imageProps={{ height: 650 }} />
+      </Card.Section>
+
+      <Text size="sm">{overview}</Text>
+
+      <Group
+        style={{
+          marginTop: 15,
+          borderTop: '0.5px solid lightgray',
+          paddingTop: 20,
+        }}>
+        <Badge color="orange" variant="light">
+          {badge1}
+        </Badge>
+        <Badge color="orange" variant="light">
+          {badge2}
+        </Badge>
+        <Badge color="orange" variant="light">
+          {badge3}
+        </Badge>
+      </Group>
+    </Card>
+  );
+}
+
+export function ReviewCard({
+  review,
+  devMode,
+  username,
+  handleDeleteFunction,
+  handleEditFunction,
+}: {
+  review: TvFilmReview;
+  devMode?: boolean;
+  username?: string | null;
+  handleDeleteFunction?: (id: string) => Promise<void>;
+  handleEditFunction?: ({
+    reviewHTML,
+    score,
+  }: Partial<TvFilmReviewInput>) => Promise<void>;
+}) {
+  const score = review?.score;
+  const id = review?.id;
+  return (
+    <Card
+      shadow="lg"
+      p="xl"
+      sx={(theme) => ({
+        border: '0.5px solid #e7e8e7',
+      })}>
+      <Text weight={700} my="md">
+        Review by {review?._siteSubject || 'admin'}:
+      </Text>
+      {review?.reviewHTML && (
+        <RichTextEditor
+          readOnly
+          my="md"
+          value={review?.reviewHTML}
+          id="review"
+          onChange={() => null}
+        />
+      )}
+      <Text>Score: {score}</Text>
+      {/* <Text>Recommended: {review.recommended ? 'true' : 'false'}</Text> */}
+
+      {(devMode || review?._siteSubject === username) && handleDeleteFunction && (
+        <Group position="right">
+          {handleEditFunction && (
+            <Button
+              onClick={() =>
+                handleEditFunction({ reviewHTML: review?.reviewHTML, score })
+              }
+              color="orange"
+              variant="light"
+              mt="sm">
+              Edit
+            </Button>
+          )}
+          <Button
+            onClick={() => handleDeleteFunction(id)}
+            color="orange"
+            variant="light"
+            mt="sm">
+            Delete
+          </Button>
+        </Group>
+      )}
+    </Card>
+  );
+}

apps/film-and-tv-ratings/src/hooks.ts

@@ -1,5 +1,8 @@
 import { useReviewByIdQuery } from '@juxt-home/site';
 
-export function useReviews(imdb_id?: string) {
-  return useReviewByIdQuery({ imdb_id: imdb_id || '' }, { enabled: !!imdb_id });
+export function useReviews(tmdb_id_unique?: string, type = 'movie') {
+  return useReviewByIdQuery(
+    { tmdb_id_unique: `${tmdb_id_unique}` },
+    { enabled: !!tmdb_id_unique },
+  );
 }

apps/film-and-tv-ratings/src/index.html

@@ -2,11 +2,12 @@
 <html lang="en" class="h-full bg-gray-100">
   <head>
     <meta charset="utf-8" />
-    <title>JUXT TV/Film Guild</title>
-    <base href="/" />
-
+    <title>JUXT Film App</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="assets/images/film-app-logo-icon.png" />
   </head>
   <body class="h-full">
     <div id="root"></div>

apps/film-and-tv-ratings/src/main.tsx

@@ -15,6 +15,7 @@ import { Box } from '@mantine/core';
 import 'regenerator-runtime/runtime.js';
 import { RecentReviews } from './pages/RecentReviews';
 import { newReactLocation } from '@juxt-home/utils';
+import { Group } from '@mantine/core';
 
 const reactLocation = newReactLocation();
 
@@ -38,13 +39,14 @@ ReactDOM.render(
     <QueryClientProvider client={queryClient}>
       <Router<NavStructure>
         location={reactLocation}
+        basepath="/_apps/film-and-tv-reviews/app"
         routes={[
           {
-            path: '/',
+            path: 'home',
             element: <RecentReviews />,
           },
           {
-            path: '/search/:searchType',
+            path: 'search/:searchType',
             element: <SearchResults />,
             children: [
               {
@@ -55,7 +57,7 @@ ReactDOM.render(
                       case 'movie':
                         return <Movie itemId={itemId} />;
                       case 'tv':
-                        return <TvShow />;
+                        return <TvShow itemId={itemId} />;
                       default:
                         return <Movie itemId={itemId} />;
                     }
@@ -71,15 +73,18 @@ ReactDOM.render(
             element: <h1>TV page</h1>,
           },
           {
-            path: '/*',
+            path: '*',
             element: <p> not found </p>,
           },
         ]}>
-        <Box sx={{ margin: '3em' }}>
+        <Box sx={{ marginTop: '3em', height: '100vh' }}>
           <Home />
-          <Outlet />
+          <Box sx={{ margin: '8.5em 3em', height: '100vh' }}>
+            <Outlet />
+          </Box>
         </Box>
       </Router>
+
       <ToastContainer
         position="bottom-center"
         autoClose={3000}

apps/film-and-tv-ratings/src/pages/Home.tsx

@@ -1,10 +1,11 @@
 import { notEmpty } from '@juxt-home/utils';
 import { useState } from 'react';
-import { useNavigate } from '@tanstack/react-location';
+import { Link, useNavigate } from '@tanstack/react-location';
 import { SearchBar, useSearchQuery } from '../components/Search';
 import { NavStructure, TSearchResults, TSearchType } from '../types';
 import { api_key, client } from '../common';
 import { useQuery } from 'react-query';
+import { Button, createStyles, Header, Group, Image } from '@mantine/core';
 
 async function fetchSuggestions(query: string) {
   const response = await client.get<TSearchResults>(
@@ -23,36 +24,72 @@ function useSuggestions(query = '') {
   );
 }
 
+const useStyles = createStyles((theme) => ({
+  header: {
+    paddingLeft: theme.spacing.md,
+    paddingRight: theme.spacing.md,
+    position: 'fixed',
+  },
+
+  inner: {
+    height: 120,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+}));
+
 export function Home() {
+  const { classes } = useStyles();
+
   const navigate = useNavigate<NavStructure>();
   const [searchType, setSearchType] = useState('movie');
 
   const handleChangeType = (type: TSearchType) => {
     setSearchType(type);
-    navigate({ to: `/search/${type}` });
+    navigate({ to: `search/${type}` });
   };
   const handleSubmit = () => {
     navigate({
-      to: `/search/${searchType}`,
+      to: `search/${searchType}`,
     });
   };
   const [search, setSearch] = useSearchQuery();
 
   return (
-    <>
-      <h1>Welcome to the film app</h1>
-      <button onClick={() => handleChangeType('tv')}>tv</button>
-      <button onClick={() => handleChangeType('movie')}>movie</button>
-      <SearchBar
-        textProps={{
-          value: search,
-          data: [],
-          onChange: setSearch,
-          placeholder: `Searching for type: ${searchType}`,
-        }}
-        handleSubmit={handleSubmit}
-      />
-    </>
+    <div>
+      <Header height={120} className={classes.header} mb={120}>
+        <div className={classes.inner}>
+          <Link to={'home'}>
+            <Image height={100} src={'./assets/images/film-app-logo.png'} />
+          </Link>
+          <Group>
+            <Button
+              color="orange"
+              variant="light"
+              onClick={() => handleChangeType('tv')}>
+              TV
+            </Button>
+            <Button
+              color="orange"
+              variant="light"
+              onClick={() => handleChangeType('movie')}>
+              Movie
+            </Button>
+            <SearchBar
+              textProps={{
+                value: search,
+                data: [],
+                onChange: setSearch,
+                placeholder: `Searching for type: ${searchType}`,
+              }}
+              buttonProps={{ color: 'orange' }}
+              handleSubmit={handleSubmit}
+            />
+          </Group>
+        </div>
+      </Header>
+    </div>
   );
 }