chore(twpreviews): build ui

- cleanup unneeded styles
- cleanup console commands

wp-content/plugins/tw-previews/preview/ui/dist/bundle.js.LICENSE.txt

@@ -8,16 +8,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/**
- * @license React
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
 /**
  * @license React
  * react.production.min.js
@@ -37,20 +27,3 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-/**
- * A better abstraction over CSS.
- *
- * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
- * @website https://github.com/cssinjs/jss
- * @license MIT
- */
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

wp-content/plugins/tw-previews/preview/ui/src/App.tsx

@@ -1,7 +1,7 @@
 import type { ContentNode } from '@/types/api/graphql';
 import { type AppAction, type AppState } from '@/types/state/app';
 import React, { useEffect, useReducer, useRef } from 'react';
-import { CheckCircle, Loader } from 'lucide-react';
+import { CheckCircle, Loader2Icon } from 'lucide-react';
 import { AppContext, type AppContextValue } from '@/lib/contexts/AppContext';
 import { DocumentNode, gql, useQuery } from '@apollo/client';
 import { Toaster } from '@/components/ui/toaster';
@@ -58,18 +58,13 @@ function App() {
   };
   const { data, query, previewSource, revisionId } = state;
   const { data: revisionData, startPolling } = useQuery<{default: ContentNode}>(PREVIEW_REVISION_ID_QUERY, { variables: { id } });
-  const { data: queryData } = useQuery<{[k: string]: ContentNode}>(query, { variables: { id: revisionId }, skip: !revisionId });
-
-  console.log('DATA >> ', id, data);
-  console.log('QUERY >> ', id, queryData);
-  console.log('REVISION >> ', revisionId, revisionData);
+  const { data: queryData } = useQuery<{[k: string]: ContentNode}>(query, { variables: { id: revisionId }, skip: !revisionId, pollInterval: 5000 });
 
   useEffect(() => {
     function handlePostMessage(e: MessageEvent<{ query: DocumentNode }>) {
       const { query } = e.data;
 
       if (query) {
-        console.log('New query recieved...', query, e);
         dispatch({type: 'SET_QUERY', payload: {query, previewSource: e.source}} as AppAction<AppState>);
       }
     }
@@ -91,7 +86,7 @@ function App() {
     toast({
       title: 'Revision loaded.',
       action: <CheckCircle />,
-      duration: 8000
+      duration: 5000
     });
 
   }, [queryData, dispatch]);
@@ -108,15 +103,15 @@ function App() {
     if (revisionData?.default) {
       toast({
         title: 'New revision detected...',
-        action: <Loader />,
-        duration: 8000
+        action: <Loader2Icon className="animate-spin" />,
+        duration: 5000
       });
       dispatch({ type: 'SET_REVISION_ID', payload: revisionData.default.previewRevisionId || id } as AppAction<string>);
     }
   }, [id, revisionData, dispatch]);
 
   return (
-    <div className="w-screen h-screen">
+    <div className="w-screen h-screen dark">
       <AppContext.Provider value={contextValue}>
         <iframe ref={iframeRef} src={previewUrl} className="w-full h-full" />
       </AppContext.Provider>

wp-content/plugins/tw-previews/preview/ui/src/styles/global.scss

@@ -89,15 +89,3 @@
     text-wrap: balance;
   }
 }
-
-.rdp-dropdown_icon {
-  display: inline-block;
-}
-
-.rdp-caption_dropdowns {
-  @apply gap-2;
-  :has(.rdp-dropdown_icon) {
-    display: inline-flex;
-    align-items: center;
-  }
-}