shiny-url-input-box 1.1.1 → 1.3.0

package/src/ShinyUrlUrls.tsx

@@ -0,0 +1,239 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Box,
+  Typography,
+  TextField,
+  Paper,
+  CircularProgress
+} from '@mui/material';
+import {
+  DataGrid,
+  GridColDef,
+  GridActionsCellItem,
+  GridToolbar,
+  GridRowParams,
+  GridPaginationModel
+} from '@mui/x-data-grid';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { ShinyUrlDetailsModal } from './ShinyUrlDetailsModal';
+import { getDefaultApiBaseUrl } from './shortener';
+
+export interface ShinyUrlUrlsProps {
+  apiKey: string;
+  apiBaseUrl?: string;
+  className?: string;
+}
+
+export const ShinyUrlUrls: React.FC<ShinyUrlUrlsProps> = ({
+  apiKey,
+  apiBaseUrl,
+  className = ''
+}) => {
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+  const [search, setSearch] = useState('');
+  const [selectedUrlId, setSelectedUrlId] = useState<string | null>(null);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [rows, setRows] = useState<any[]>([]);
+  const [total, setTotal] = useState(0);
+
+  const baseUrl = apiBaseUrl || getDefaultApiBaseUrl();
+
+  const fetchUrls = useCallback(async () => {
+    if (!apiKey) return;
+    setLoading(true);
+    try {
+      const queryParams = new URLSearchParams({
+        page: (page + 1).toString(),
+        limit: pageSize.toString(),
+        search: search
+      });
+      const response = await fetch(`${baseUrl}/api/admin/urls?${queryParams}`, {
+        headers: {
+          'Authorization': `Bearer ${apiKey}`
+        }
+      });
+      const result = await response.json();
+      if (result.success) {
+        setRows(result.data || []);
+        setTotal(result.pagination?.total || 0);
+      }
+    } catch (error) {
+      console.error('Failed to fetch URLs', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [apiKey, baseUrl, page, pageSize, search]);
+
+  // Debounce search
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      fetchUrls();
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [fetchUrls]);
+
+  const handleDelete = async (id: string) => {
+    if (window.confirm('Are you sure you want to delete this URL?')) {
+      try {
+        const response = await fetch(`${baseUrl}/api/urls/${id}`, {
+          method: 'DELETE',
+          headers: {
+            'Authorization': `Bearer ${apiKey}`
+          }
+        });
+        if (response.ok) {
+           fetchUrls(); // Refresh
+        }
+      } catch (error) {
+        console.error('Failed to delete URL', error);
+      }
+    }
+  };
+
+  const handleRowClick = (params: GridRowParams) => {
+    setSelectedUrlId(params.id as string);
+    setModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setModalOpen(false);
+    setSelectedUrlId(null);
+  };
+
+  const columns: GridColDef[] = [
+    {
+      field: 'shortCode',
+      headerName: 'Short Code',
+      width: 150,
+      renderCell: (params: any) => {
+        // Add referer as query parameter as fallback if browser doesn't send referer header
+        // For component usage, we might not know the exact "admin panel url", but we can use window.location
+        const currentUrl = typeof window !== 'undefined' ? window.location.href : '';
+        const shortUrl = `${baseUrl}/${params.value}?ref=${encodeURIComponent(currentUrl)}`;
+        return (
+          <Typography
+            component="a"
+            href={shortUrl}
+            target="_blank"
+            rel="noopener"
+            variant="body2"
+            sx={{
+              fontFamily: 'monospace',
+              bgcolor: 'action.hover',
+              px: 1,
+              py: 0.5,
+              borderRadius: 1,
+              color: 'primary.main',
+              textDecoration: 'none',
+              cursor: 'pointer',
+              '&:hover': {
+                textDecoration: 'underline',
+                bgcolor: 'action.selected',
+              },
+            }}
+            onClick={(e: React.MouseEvent) => {
+              e.stopPropagation(); // Prevent row click when clicking the link
+            }}
+          >
+            {params.value}
+          </Typography>
+        );
+      },
+    },
+    {
+      field: 'originalUrl',
+      headerName: 'Original URL',
+      flex: 1,
+      minWidth: 300,
+    },
+    {
+      field: 'clicks',
+      headerName: 'Clicks',
+      width: 100,
+      type: 'number',
+    },
+    {
+      field: 'createdAt',
+      headerName: 'Created At',
+      width: 180,
+      valueFormatter: (params: any) => {
+        if (!params.value) return '';
+        return new Date(params.value).toLocaleString();
+      },
+    },
+    {
+      field: 'actions',
+      type: 'actions',
+      headerName: 'Actions',
+      width: 100,
+      getActions: (params: GridRowParams) => [
+        <GridActionsCellItem
+          icon={<DeleteIcon />}
+          label="Delete"
+          onClick={() => handleDelete(params.id as string)}
+          color="error"
+        />,
+      ],
+    },
+  ];
+
+  if (!apiKey) {
+      return <Typography color="error">Authentication required</Typography>;
+  }
+
+  return (
+    <Box className={className}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 3 }}>
+        <Typography variant="h4">URLs Management</Typography>
+        <Box sx={{ display: 'flex', gap: 2 }}>
+          <TextField
+            size="small"
+            placeholder="Search URLs..."
+            value={search}
+            onChange={(e) => {
+                setSearch(e.target.value);
+                setPage(0); // Reset page on search
+            }}
+            sx={{ width: 300 }}
+          />
+        </Box>
+      </Box>
+
+      <Paper sx={{ height: 600, width: '100%' }}>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          loading={loading}
+          pagination
+          paginationModel={{ page, pageSize }}
+          onPaginationModelChange={(model: GridPaginationModel) => {
+            setPage(model.page);
+            setPageSize(model.pageSize);
+          }}
+          paginationMode="server"
+          rowCount={total}
+          slots={{
+            toolbar: GridToolbar,
+          }}
+          getRowId={(row: any) => row._id}
+          onRowClick={handleRowClick}
+          sx={{
+            '& .MuiDataGrid-row': {
+              cursor: 'pointer',
+            },
+          }}
+        />
+      </Paper>
+
+      <ShinyUrlDetailsModal
+        open={modalOpen}
+        urlId={selectedUrlId}
+        onClose={handleCloseModal}
+        apiKey={apiKey}
+        apiBaseUrl={baseUrl}
+      />
+    </Box>
+  );
+};

package/src/index.ts

@@ -3,4 +3,10 @@ export type { ShinyUrlInputProps } from './ShinyUrlInput';
 export * from './shortener';
 export { ShinyUrlDashboard } from './ShinyUrlDashboard';
 export type { ShinyUrlDashboardProps } from './ShinyUrlDashboard';
+export { ShinyUrlApiKeys } from './ShinyUrlApiKeys';
+export type { ShinyUrlApiKeysProps } from './ShinyUrlApiKeys';
+export { ShinyUrlUrls } from './ShinyUrlUrls';
+export type { ShinyUrlUrlsProps } from './ShinyUrlUrls';
+export { ShinyUrlDetailsModal } from './ShinyUrlDetailsModal';
+export type { ShinyUrlDetailsModalProps } from './ShinyUrlDetailsModal';