Qu embed

.env

@@ -1,3 +1,4 @@
 VITE_API_HOST=https://kitsu.io/
+# VITE_API_HOST=https://staging.kitsu.io/
 VITE_CLIENT_ID=it_PexBnH20XBIwTrIPTFX74ZdLHibtYBK7uDdAtznI
 VITE_MAL_CLIENT_ID=d4452b64fc5fc36c1a9f8785b63d44df

apollo.config.js

@@ -2,6 +2,7 @@ module.exports = {
   client: {
     service: {
       name: 'kitsu',
+      // url: 'https://staging.kitsu.io/api/graphql',
       url: 'https://kitsu.io/api/graphql',
     },
   },

package.json

@@ -54,6 +54,7 @@
     "date-fns": "^2.28.0",
     "graphql": "^16.8.1",
     "graphql-scalars": "^1.14.1",
+    "idb": "^7.1.1",
     "lodash-es": "^4.17.21",
     "preferred-locale": "^1.0.10",
     "react": "^18.0.0",

src/QUEmbedApp.tsx

@@ -0,0 +1,32 @@
+import React, { Suspense } from 'react';
+
+import 'app/initializers';
+import 'app/styles/index.css';
+
+import QURouter from 'app/QURouter';
+import Header from 'app/components/QUEmbed/Header';
+import { AccountContextProvider } from 'app/contexts/AccountContext';
+import IntlProvider from 'app/contexts/IntlContext';
+import { SessionContextProvider } from 'app/contexts/SessionContext';
+import UrqlContextProvider from 'app/contexts/UrqlContext';
+
+const QUEmbedApp: React.FC = function ({ children = <QURouter /> }) {
+  return (
+    <React.StrictMode>
+      <Suspense fallback={null}>
+        <SessionContextProvider>
+          <UrqlContextProvider>
+            <IntlProvider>
+              <AccountContextProvider>
+                <Header />
+                {children}
+              </AccountContextProvider>
+            </IntlProvider>
+          </UrqlContextProvider>
+        </SessionContextProvider>
+      </Suspense>
+    </React.StrictMode>
+  );
+};
+
+export default QUEmbedApp;

src/QURouter.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+
+import ForgotPasswordModal from './pages/Auth/ForgotPassword';
+// import 'app/styles/index.css';
+
+// import NotFoundPage from './pages/Errors/NotFound';
+import AuthLayout from './pages/Auth/Layout';
+import SignInModal from './pages/Auth/SignIn';
+import SignUpModal from './pages/Auth/SignUp';
+
+import HomePage from './pages/QUEmbed/Home';
+import MediaPage from './pages/QUEmbed/MediaPage';
+import SearchPage from './pages/QUEmbed/SearchPage';
+import { UserRoute } from './utils/user_route';
+
+export default function QURouter() {
+  return (
+    <>
+      <Routes>
+      <Route path="auth" element={<AuthLayout displayMode="modal" />}>
+          <Route path="sign-in" element={<SignInModal />} />
+          <Route path="sign-up" element={<SignUpModal />} />
+          <Route path="forgot-password" element={<ForgotPasswordModal />} />
+        </Route>
+        {/* NOTE: is there a way to declare which query params are allowed? */}
+        <Route
+          path="/search"
+          element={
+            <UserRoute>
+              <SearchPage />
+            </UserRoute>
+          }
+        />
+        <Route
+          path="/"
+          element={
+            <UserRoute>
+              <MediaPage />
+            </UserRoute>
+          }
+        />
+      </Routes>
+    </>
+  );
+}

src/components/QUEmbed/ChosenMedia/Header/index.tsx

@@ -0,0 +1,36 @@
+import React, { ReactElement } from 'react';
+
+import { ActiveTabs } from 'app/pages/QUEmbed/MediaPage';
+
+import styles from './styles.module.css';
+
+interface Props {
+  onClickUnlink: (e: any) => void;
+  onClickActiveTab: (tab: ActiveTabs) => void;
+}
+
+export default function ChosenMediaHeader({
+  onClickUnlink,
+  onClickActiveTab,
+}: Props): ReactElement {
+  return (
+    <nav className={styles.headers}>
+      <li
+        className={styles.chosenMedia}
+        onClick={() => onClickActiveTab('media')}>
+        {'Media'}
+      </li>
+      <li
+        className={styles.reaction}
+        onClick={() => onClickActiveTab('reaction')}>
+        {'Reaction'}
+      </li>
+      <li className={styles.rating} onClick={() => onClickActiveTab('rating')}>
+        {'Rating'}
+      </li>
+      <li className={styles.unlink}>
+        <button onClick={onClickUnlink}>{'Unlink'}</button>
+      </li>
+    </nav>
+  );
+}

src/components/QUEmbed/ChosenMedia/Header/styles.module.css

@@ -0,0 +1,25 @@
+.headers {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 0.5fr;
+  grid-template-rows: 1fr;
+  gap: 0px 0px;
+  grid-template-areas:
+    "chosenMedia reaction rating unlink";
+  grid-area: headers;
+}
+
+.chosenMedia {
+  grid-area: chosenMedia;
+}
+
+.reaction {
+  grid-area: reaction;
+}
+
+.rating {
+  grid-area: rating;
+}
+
+.unlink {
+  grid-area: unlink;
+}

src/components/QUEmbed/ChosenMedia/index.tsx

@@ -0,0 +1,136 @@
+import React, { ReactElement } from 'react';
+
+import BannerImage from 'app/components/content/BannerImage';
+import ImageSource from 'app/components/content/Image';
+import {
+  LibraryEntryUpdateProgressByMediaInput,
+  PostCreateInput,
+} from 'app/graphql/types';
+import { formattedMediaType } from 'app/pages/QUEmbed/MediaPage';
+
+import { MediaDataFragment } from '../findMediaByIdAndType-gql';
+import { useQuickUpdateMutation } from './quickUpdate-gql';
+import { useQuickUpdateNoPostMutation } from './quickUpdateNoPost-gql';
+import styles from './styles.module.css';
+
+interface QUEmbedProps {
+  record: MediaDataFragment;
+}
+
+export default function ChosenMedia({ record }: QUEmbedProps): ReactElement {
+  const unitType = record.myLibraryEntry?.nextUnit?.__typename;
+  const unitPrefix = unitType === 'Episode' ? 'Watching' : 'Reading';
+  const [unitId, setUnitId] = React.useState<string | undefined>(
+    record.myLibraryEntry?.nextUnit?.id
+  );
+  const [unitNumber, setUnitNumber] = React.useState<number>(
+    record.myLibraryEntry?.nextUnit?.number || 1
+  );
+
+  const [post, setPost] = React.useState<string>('');
+  const kitsuUrl = `https://kitsu.io/${record.type.toLowerCase()}/${
+    record.slug
+  }`;
+  const background = record.bannerImage as ImageSource;
+
+  const [, createQuickUpdate] = useQuickUpdateMutation();
+  const [, createQuickUpdateNoPost] = useQuickUpdateNoPostMutation();
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    console.log('progress', unitNumber);
+    console.log('post', post);
+
+    const libraryEntryInput: LibraryEntryUpdateProgressByMediaInput = {
+      mediaId: record.id,
+      mediaType: formattedMediaType(record.type),
+      progress: unitNumber,
+    };
+
+    if (post === '' || post === null) {
+      const request = createQuickUpdateNoPost({
+        libraryEntryInput,
+      });
+
+      request.then((res) => {
+        if (res.data?.libraryEntry?.updateProgressByMedia?.errors) {
+          console.log('Error updating Library Entry Progress', res);
+        } else {
+          console.log('Success', res);
+          setUnitId(
+            res.data?.libraryEntry?.updateProgressByMedia?.libraryEntry
+              ?.nextUnit?.id
+          );
+          setUnitNumber(
+            res.data?.libraryEntry?.updateProgressByMedia?.libraryEntry
+              ?.nextUnit?.number || unitNumber + 1
+          );
+          setPost('');
+        }
+      });
+    } else {
+      const sfw = record.sfw;
+      const postInput: PostCreateInput = {
+        content: post,
+        mediaId: record.id,
+        mediaType: formattedMediaType(record.type),
+        isSpoiler: true,
+        isNsfw: !sfw,
+        spoiledUnitId: unitId,
+        spoiledUnitType: unitType,
+      };
+
+      const request = createQuickUpdate({
+        libraryEntryInput,
+        postInput,
+      });
+
+      request.then((res) => {
+        if (res.data?.libraryEntry?.updateProgressByMedia?.errors) {
+          console.log('Error updating Library Entry Progress', res);
+        } else if (res.data?.post?.create?.errors) {
+          console.log('Error creating Post', res);
+        } else {
+          console.log('Success', res);
+          setUnitId(
+            res.data?.libraryEntry?.updateProgressByMedia?.libraryEntry
+              ?.nextUnit?.id
+          );
+          setUnitNumber(
+            res.data?.libraryEntry?.updateProgressByMedia?.libraryEntry
+              ?.nextUnit?.number || unitNumber + 1
+          );
+          setPost('');
+        }
+      });
+    }
+  };
+
+  return (
+    <>
+      <div className={styles.banner}>
+        <BannerImage className={styles.mainImage} background={background}>
+          <h1 className={styles.title}>
+            <a href={kitsuUrl} target="_blank" rel="noreferrer">
+              {record.titles.preferred}
+            </a>
+          </h1>
+        </BannerImage>
+      </div>
+      <div className={styles.post}>
+        <textarea
+          className={styles.postBody}
+          value={post}
+          onChange={(e) => setPost(e.target.value)}
+        />
+
+        <button
+          className={styles.submitPost}
+          onClick={
+            handleSubmit
+          }>{`Completed ${unitPrefix} ${unitNumber}`}</button>
+      </div>
+    </>
+  );
+}