refactor: collocate common ui components into separate directories

PHILLIPS71 · May 8, 2024 · f572f5a · f572f5a
1 parent ad31e1f
commit f572f5a
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 68 deletions.
diff --git a/app/src/components/interfaces/dashboard/encode-dialog/EncodeDialog.tsx b/app/src/components/interfaces/dashboard/encode-dialog/EncodeDialog.tsx
@@ -5,11 +5,11 @@ import { IconX } from '@tabler/icons-react'
 import React from 'react'
 import { graphql, useFragment, useSubscription } from 'react-relay'
 
-import EncodeDialogScript from '@/components/interfaces/dashboard/encode-dialog/EncodeDialogScript'
 import EncodeDialogSidebar from '@/components/interfaces/dashboard/encode-dialog/EncodeDialogSidebar'
+import EncodeDialogScript from '@/components/interfaces/dashboard/encode-dialog/panels/EncodeScriptPanel'
 import {
   EncodeDialogContext,
-  EncodeDialogPage,
+  EncodeDialogPanel,
   useEncodeDialog,
 } from '@/components/interfaces/dashboard/encode-dialog/use-encode-dialog.hook'
 import EncodeStatusBadge from '@/components/ui/encode-badges/EncodeStatusBadge'
@@ -25,7 +25,7 @@ const FRAGMENT = graphql`
       }
     }
     ...EncodeStatusBadgeFragment
-    ...EncodeDialogScriptFragment
+    ...EncodeScriptPanelFragment
   }
 `
 
@@ -43,25 +43,25 @@ type EncodeDialogProps = React.PropsWithChildren & {
 
 const EncodeDialog: React.FC<EncodeDialogProps> = ({ children, $key }) => {
   const data = useFragment(FRAGMENT, $key)
-  const context = useEncodeDialog({ page: EncodeDialogPage.SCRIPT })
+  const context = useEncodeDialog({ panel: EncodeDialogPanel.SCRIPT })
 
   useSubscription({
     subscription: OUTPUTTED_SUBSCRIPTION,
     variables: {},
   })
 
   const content = React.useCallback(() => {
-    switch (context.page) {
-      case EncodeDialogPage.SCRIPT:
+    switch (context.panel) {
+      case EncodeDialogPanel.SCRIPT:
         return <EncodeDialogScript $key={data} />
 
-      case EncodeDialogPage.ANALYTICS:
+      case EncodeDialogPanel.ANALYTICS:
         return <EncodeDialogScript $key={data} />
 
       default:
-        throw new Error(`unexpected value ${context.page} was provided.`)
+        throw new Error(`unexpected panel value ${context.panel} was provided.`)
     }
-  }, [context.page, data])
+  }, [context.panel, data])
 
   return (
     <Dialog placement="right">

diff --git a/app/src/components/interfaces/dashboard/encode-dialog/EncodeDialogCommand.tsx b/app/src/components/interfaces/dashboard/encode-dialog/EncodeDialogCommand.tsx
diff --git a/app/src/components/interfaces/dashboard/encode-dialog/EncodeDialogSidebar.tsx b/app/src/components/interfaces/dashboard/encode-dialog/EncodeDialogSidebar.tsx
@@ -2,25 +2,25 @@ import { Navigation } from '@giantnodes/react'
 import { IconReportAnalytics, IconScript } from '@tabler/icons-react'
 
 import {
-  EncodeDialogPage,
+  EncodeDialogPanel,
   useEncodeDialogContext,
 } from '@/components/interfaces/dashboard/encode-dialog/use-encode-dialog.hook'
 
 const EncodeDialogSidebar = () => {
-  const { page, setPage } = useEncodeDialogContext()
+  const { panel, setPanel } = useEncodeDialogContext()
 
   return (
     <Navigation orientation="vertical" size="sm">
       <Navigation.Segment>
-        <Navigation.Item onClick={() => setPage(EncodeDialogPage.SCRIPT)}>
-          <Navigation.Link href="/" isSelected={page === EncodeDialogPage.SCRIPT}>
-            <IconScript href="/" strokeWidth={1.5} />
+        <Navigation.Item onClick={() => setPanel(EncodeDialogPanel.SCRIPT)}>
+          <Navigation.Link href="/" isSelected={panel === EncodeDialogPanel.SCRIPT}>
+            <IconScript strokeWidth={1.5} />
           </Navigation.Link>
         </Navigation.Item>
 
-        <Navigation.Item onClick={() => setPage(EncodeDialogPage.ANALYTICS)}>
-          <Navigation.Link href="/" isSelected={page === EncodeDialogPage.ANALYTICS}>
-            <IconReportAnalytics href="/" strokeWidth={1.5} />
+        <Navigation.Item onClick={() => setPanel(EncodeDialogPanel.ANALYTICS)}>
+          <Navigation.Link href="/" isSelected={panel === EncodeDialogPanel.ANALYTICS}>
+            <IconReportAnalytics strokeWidth={1.5} />
           </Navigation.Link>
         </Navigation.Item>
       </Navigation.Segment>

diff --git a/...oard/encode-dialog/EncodeDialogScript.tsx → ...ncode-dialog/panels/EncodeScriptPanel.tsx b/...oard/encode-dialog/EncodeDialogScript.tsx → ...ncode-dialog/panels/EncodeScriptPanel.tsx
@@ -1,23 +1,23 @@
-import type { EncodeDialogScriptFragment$key } from '@/__generated__/EncodeDialogScriptFragment.graphql'
+import type { EncodeScriptPanelFragment$key } from '@/__generated__/EncodeScriptPanelFragment.graphql'
 
 import { Card } from '@giantnodes/react'
 import { graphql, useFragment } from 'react-relay'
 
-import EncodeDialogCommand from '@/components/interfaces/dashboard/encode-dialog/EncodeDialogCommand'
-import EncodeDialogLog from '@/components/interfaces/dashboard/encode-dialog/EncodeDialogLog'
+import EncodeDialogCommand from '@/components/interfaces/dashboard/encode-dialog/widgets/EncodeCommandWidget'
+import EncodeDialogLog from '@/components/interfaces/dashboard/encode-dialog/widgets/EncodeOutputWidget'
 
 const FRAGMENT = graphql`
-  fragment EncodeDialogScriptFragment on Encode {
-    ...EncodeDialogCommandFragment
-    ...EncodeDialogLogFragment
+  fragment EncodeScriptPanelFragment on Encode {
+    ...EncodeCommandWidgetFragment
+    ...EncodeOutputWidgetFragment
   }
 `
 
-type EncodeDialogScriptProps = {
-  $key: EncodeDialogScriptFragment$key
+type EncodeScriptPanelProps = {
+  $key: EncodeScriptPanelFragment$key
 }
 
-const EncodeDialogScript: React.FC<EncodeDialogScriptProps> = ({ $key }) => {
+const EncodeScriptPanel: React.FC<EncodeScriptPanelProps> = ({ $key }) => {
   const data = useFragment(FRAGMENT, $key)
 
   return (
@@ -31,7 +31,7 @@ const EncodeDialogScript: React.FC<EncodeDialogScriptProps> = ({ $key }) => {
       </Card>
 
       <Card className="shrink">
-        <Card.Header>Logs</Card.Header>
+        <Card.Header>Output</Card.Header>
 
         <Card.Body className="overflow-y-auto">
           <EncodeDialogLog $key={data} />
@@ -41,4 +41,4 @@ const EncodeDialogScript: React.FC<EncodeDialogScriptProps> = ({ $key }) => {
   )
 }
 
-export default EncodeDialogScript
+export default EncodeScriptPanel
diff --git a/app/src/components/interfaces/dashboard/encode-dialog/use-encode-dialog.hook.ts b/app/src/components/interfaces/dashboard/encode-dialog/use-encode-dialog.hook.ts
@@ -2,23 +2,23 @@ import React from 'react'
 
 import { createContext } from '@/utilities/context'
 
-export enum EncodeDialogPage {
+export enum EncodeDialogPanel {
   SCRIPT,
   ANALYTICS,
 }
 
 type UseEncodeDialogReturn = ReturnType<typeof useEncodeDialog>
 
 type UseEncodeDialogProps = {
-  page: EncodeDialogPage
+  panel: EncodeDialogPanel
 }
 
 export const useEncodeDialog = (props: UseEncodeDialogProps) => {
-  const [page, setPage] = React.useState<EncodeDialogPage>(props.page)
+  const [panel, setPanel] = React.useState<EncodeDialogPanel>(props.panel)
 
   return {
-    page,
-    setPage,
+    panel,
+    setPanel,
   }
 }
 

diff --git a/app/src/components/interfaces/dashboard/encode-dialog/widgets/EncodeCommandWidget.tsx b/app/src/components/interfaces/dashboard/encode-dialog/widgets/EncodeCommandWidget.tsx
@@ -0,0 +1,23 @@
+import type { EncodeCommandWidgetFragment$key } from '@/__generated__/EncodeCommandWidgetFragment.graphql'
+
+import { graphql, useFragment } from 'react-relay'
+
+import CodeBlock from '@/components/ui/code-block/CodeBlock'
+
+const FRAGMENT = graphql`
+  fragment EncodeCommandWidgetFragment on Encode {
+    command
+  }
+`
+
+type EncodeCommandWidgetProps = {
+  $key: EncodeCommandWidgetFragment$key
+}
+
+const EncodeCommandWidget: React.FC<EncodeCommandWidgetProps> = ({ $key }) => {
+  const data = useFragment(FRAGMENT, $key)
+
+  return <CodeBlock language="powershell">{data.command}</CodeBlock>
+}
+
+export default EncodeCommandWidget
diff --git a/...shboard/encode-dialog/EncodeDialogLog.tsx → ...ode-dialog/widgets/EncodeOutputWidget.tsx b/...shboard/encode-dialog/EncodeDialogLog.tsx → ...ode-dialog/widgets/EncodeOutputWidget.tsx
@@ -1,34 +1,34 @@
-import type { EncodeDialogLogFragment$key } from '@/__generated__/EncodeDialogLogFragment.graphql'
-import type { EncodeDialogLogSubscription } from '@/__generated__/EncodeDialogLogSubscription.graphql'
+import type { EncodeOutputWidgetFragment$key } from '@/__generated__/EncodeOutputWidgetFragment.graphql'
+import type { EncodeOutputWidgetSubscription } from '@/__generated__/EncodeOutputWidgetSubscription.graphql'
 
 import { graphql, useFragment, useSubscription } from 'react-relay'
 
 import CodeBlock from '@/components/ui/code-block/CodeBlock'
 import ScrollAnchor from '@/components/ui/ScrollAnchor'
 
 const FRAGMENT = graphql`
-  fragment EncodeDialogLogFragment on Encode {
+  fragment EncodeOutputWidgetFragment on Encode {
     id
     output
   }
 `
 
 const SUBSCRIPTION = graphql`
-  subscription EncodeDialogLogSubscription($where: EncodeFilterInput) {
+  subscription EncodeOutputWidgetSubscription($where: EncodeFilterInput) {
     encode_outputted(where: $where) {
-      ...EncodeDialogLogFragment
+      ...EncodeOutputWidgetFragment
     }
   }
 `
 
-type EncodeDialogLogProps = {
-  $key: EncodeDialogLogFragment$key
+type EncodeOutputWidgetProps = {
+  $key: EncodeOutputWidgetFragment$key
 }
 
-const EncodeDialogLog: React.FC<EncodeDialogLogProps> = ({ $key }) => {
+const EncodeOutputWidget: React.FC<EncodeOutputWidgetProps> = ({ $key }) => {
   const data = useFragment(FRAGMENT, $key)
 
-  useSubscription<EncodeDialogLogSubscription>({
+  useSubscription<EncodeOutputWidgetSubscription>({
     subscription: SUBSCRIPTION,
     variables: {
       where: {
@@ -46,4 +46,4 @@ const EncodeDialogLog: React.FC<EncodeDialogLogProps> = ({ $key }) => {
   )
 }
 
-export default EncodeDialogLog
+export default EncodeOutputWidget
diff --git a/app/src/components/tables/encoded/EncodedTable.tsx b/app/src/components/tables/encoded/EncodedTable.tsx
@@ -63,7 +63,7 @@ const EncodedTable: React.FC<EncodedTableProps> = ({ $key }) => {
             <Table.Row id={item.node.id}>
               <Table.Cell>
                 <EncodeDialog $key={item.node}>
-                  <Button as={Link} color="transparent">
+                  <Button as={Link} className="p-0" color="transparent">
                     {item.node.file.path_info.name}
                   </Button>
                 </EncodeDialog>

diff --git a/app/src/components/tables/encoding/EncodingTable.tsx b/app/src/components/tables/encoding/EncodingTable.tsx
@@ -133,7 +133,7 @@ const EncodingTable: React.FC<EncodingTableProps> = ({ $key }) => {
             <Table.Row id={item.node.id}>
               <Table.Cell>
                 <EncodeDialog $key={item.node}>
-                  <Button as={Link} color="transparent">
+                  <Button as={Link} className="p-0" color="transparent">
                     {item.node.file.path_info.name}
                   </Button>
                 </EncodeDialog>