publication CRUD and small tweaks

src/MainLayout/MainLayout.tsx

@@ -4,14 +4,16 @@ import { LayoutWrapper } from "./Layout.styles";
 import { StyledDistance } from "../components/shared/StyledDistance";
 import Header from "../components/Header/Header";
 import { AdminSidebar } from "../components/AdminSidebar/AdminSidebar";
+import { useAuth } from "../context/AuthContext";
 
 
 const MainLayout = () => {
+   const { user } = useAuth();
   return (
     <>
       <LayoutWrapper>
         <Header />
-        <AdminSidebar/>
+        {user && <AdminSidebar/>}
         <StyledDistance />
         <Outlet />
       </LayoutWrapper>

src/api/publications.ts

@@ -0,0 +1,123 @@
+import type { User } from "../components/shared/types/AuthTypes";
+import axiosInstance from "./axiosInstance";
+import type { CategoryType } from "./categories";
+
+export type PublicationType = {
+  pk: number;
+  image?: string;
+  video?: string;
+  content_type: "image" | "video";
+  status: "public" | "pending";
+  average_score: number;
+  description: string;
+  is_pinned: boolean;
+  user: number;
+  user_detail: User;
+  category: number;
+  category_detail: CategoryType;
+  time_created: string;
+  time_updated: string;
+};
+
+export type PublicationsResponse = {
+  count: number;
+  page_size: number;
+  page: number;
+  total_pages: number;
+  results: PublicationType[];
+};
+
+export type PublicationPayload = {
+  file: File;
+  content_type: "image" | "video";
+  status: "public" | "pending";
+  description: string;
+  is_pinned: boolean;
+  category: number;
+};
+
+export type UpdatePublicationPayload = {
+  file?: File;
+  content_type: "image" | "video";
+  status: "public" | "pending";
+  description: string;
+  is_pinned: boolean;
+  category: number;
+};
+
+export const getPublications = async (page: number) => {
+  const res = await axiosInstance.get<PublicationsResponse>(
+    "/api/admin/publications",
+    { params: { page } }
+  );
+  return res.data;
+};
+
+export const getPublicationById = async (id: number) => {
+  const res = await axiosInstance.get<PublicationType>(
+    `/api/admin/publications/${id}`
+  );
+  return res.data;
+};
+
+export const createPublication = async (payload: PublicationPayload) => {
+  const formData = new FormData();
+
+  if (payload.content_type === "image") {
+    formData.append("image", payload.file);
+  } else {
+    formData.append("video", payload.file);
+  }
+
+  formData.append("content_type", payload.content_type);
+  formData.append("status", payload.status);
+  formData.append("description", payload.description);
+  formData.append("is_pinned", String(payload.is_pinned));
+  formData.append("category", String(payload.category));
+
+  const res = await axiosInstance.post<PublicationType>(
+    "/api/admin/publications/",
+    formData,
+    {
+      headers: { "Content-Type": "multipart/form-data" },
+    }
+  );
+
+  return res.data;
+};
+
+export const updatePublication = async (
+  id: number,
+  payload: UpdatePublicationPayload
+) => {
+  const formData = new FormData();
+
+  if (payload.file) {
+    if (payload.content_type === "image") {
+      formData.append("image", payload.file);
+    } else {
+      formData.append("video", payload.file);
+    }
+  }
+
+  formData.append("content_type", payload.content_type);
+  formData.append("status", payload.status);
+  formData.append("description", payload.description);
+  formData.append("is_pinned", String(payload.is_pinned));
+  formData.append("category", String(payload.category));
+
+  const res = await axiosInstance.patch(
+    `/api/admin/publications/${id}`,
+    formData,
+    {
+      headers: { "Content-Type": "multipart/form-data" },
+    }
+  );
+
+  return res.data;
+};
+
+export const deletePublication = async (id: number) => {
+  const res = await axiosInstance.delete(`/api/admin/publications/${id}`);
+  return res.data;
+};

src/components/Header/Header.tsx

@@ -31,7 +31,6 @@ function Header() {
     setAnchorElNav(null);
   };
 
-  const goToAdmin = () => navigate("/admin");
 
   return (
     <AppBar sx={{ backgroundColor: appColors.primary }} position="static">
@@ -42,7 +41,7 @@ function Header() {
             variant="h6"
             noWrap
             component="a"
-            href="/"
+            href= {user ? "/publications": "/"}
             sx={{
               mr: 2,
               display: { xs: "none", md: "flex" },
@@ -100,16 +99,7 @@ function Header() {
                   </MenuItem>
                 )}
 
-                {user && user.is_superuser && (
-                  <MenuItem
-                    onClick={() => {
-                      handleCloseNavMenu();
-                      goToAdmin();
-                    }}
-                  >
-                    <Typography textAlign="center">Admin Dashboard</Typography>
-                  </MenuItem>
-                )}
+       
               </span>
             </Menu>
           </Box>
@@ -131,7 +121,7 @@ function Header() {
               textDecoration: "none",
             }}
           >
-            HoshiAI
+            Gallery
           </Typography>
 
           <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
@@ -153,14 +143,7 @@ function Header() {
               </Button>
             )}
 
-            {user?.is_superuser && (
-              <Button
-                onClick={goToAdmin}
-                sx={{ my: 2, color: "white", display: "block" }}
-              >
-                Admin Dashboard
-              </Button>
-            )}
+  
           </Box>
         </Toolbar>
       </Container>

src/context/AuthContext.tsx

@@ -34,7 +34,7 @@ export const AuthProvider = ({ children }: OnlyChildrenProps) => {
     localStorage.removeItem("access_token");
     queryClient.removeQueries({ queryKey: ["me"] });
     toast.info("Logged out");
-    window.location.href = "/login";
+    window.location.href = "/";
   };
 
   return (

src/hooks/publications/useCreatePublication.ts

@@ -0,0 +1,32 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  createPublication,
+  type PublicationPayload,
+} from "../../api/publications";
+import { toast } from "react-toastify";
+
+export const useCreatePublication = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (payload: PublicationPayload) => createPublication(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["publications"] });
+    },
+    onError: (error: any) => {
+      const data = error?.response?.data;
+
+      if (data?.image?.length) {
+        toast.error(data.image[0]);
+        return;
+      }
+
+      if (data?.video?.length) {
+        toast.error(data.video[0]);
+        return;
+      }
+
+      toast.error("Failed to create publication");
+    },
+  });
+};

src/hooks/publications/useDeletePublication.ts

@@ -0,0 +1,17 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { deletePublication } from "../../api/publications";
+import { toast } from "react-toastify";
+
+export const useDeletePublication = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: number) => deletePublication(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["publications"] });
+      toast.success("Publication Deleted");
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+};

src/hooks/publications/useGetPublicationById.ts

@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
+import { getPublicationById } from "../../api/publications";
+
+export const useGetPublicationsById = (id?: number) => {
+  return useQuery({
+    queryKey: ["publication", id],
+    queryFn: () => getPublicationById(id!),
+    enabled: !!id,
+  });
+};

src/hooks/publications/useGetPublications.ts

@@ -0,0 +1,8 @@
+import { useQuery } from "@tanstack/react-query";
+import { getPublications } from "../../api/publications";
+
+export const useGetPublications = (page: number) =>
+  useQuery({
+    queryKey: ["publications", page],
+    queryFn: () => getPublications(page),
+  });

src/hooks/publications/useUpdatePublication.ts

@@ -0,0 +1,38 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  updatePublication,
+  type UpdatePublicationPayload,
+} from "../../api/publications";
+import { toast } from "react-toastify";
+
+export const useUpdatePublication = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      id,
+      payload,
+    }: {
+      id: number;
+      payload: UpdatePublicationPayload;
+    }) => updatePublication(id, payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["publications"] });
+    },
+    onError: (error: any) => {
+      const data = error?.response?.data;
+
+      if (data?.image?.length) {
+        toast.error(data.image[0]);
+        return;
+      }
+
+      if (data?.video?.length) {
+        toast.error(data.video[0]);
+        return;
+      }
+
+      toast.error("Failed to create publication");
+    },
+  });
+};

src/pages/IndexesPage/IndexesPage.tsx

@@ -54,11 +54,7 @@ const IndexesPage = () => {
     <Container>
       <Box sx={{ display: "flex", justifyContent: "space-between", mb: 3 }}>
         <Typography variant="h4">Indexes</Typography>
-         <Button
-          variant="contained"
-          color="primary"
-          onClick={handleCreateIndex}
-        >
+        <Button variant="contained" color="primary" onClick={handleCreateIndex}>
           Create Index
         </Button>
       </Box>

src/pages/LoginPage/LoginPage.tsx

@@ -14,7 +14,7 @@ const LoginPage = () => {
 
   useEffect(() => {
     if (user) {
-      navigate("/");
+      navigate("/profile");
     }
   }, [user, navigate]);
 

src/pages/ProfilePage/ProfilePage.tsx

@@ -43,13 +43,6 @@ const ProfilePage = () => {
           Logout
         </Button>
 
-        <Button
-          sx={{ marginLeft: "10px", backgroundColor: appColors.secondary }}
-          variant="contained"
-          onClick={() => navigate("/admin")}
-        >
-          Admin Dashboard
-        </Button>
       </Box>
     </Container>
   );

src/pages/PublicationsForm/PublicationsForm.tsx

@@ -0,0 +1,254 @@
+import { useState, useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  TextField,
+  Typography,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  Checkbox,
+  FormControlLabel,
+} from "@mui/material";
+import { useGetPublicationsById } from "../../hooks/publications/useGetPublicationById";
+import { useCreatePublication } from "../../hooks/publications/useCreatePublication";
+import { useUpdatePublication } from "../../hooks/publications/useUpdatePublication";
+import type {
+  PublicationPayload,
+  UpdatePublicationPayload,
+} from "../../api/publications";
+import { useCategories } from "../../hooks/categories/useCategories";
+
+const PublicationForm = () => {
+  const { id } = useParams<{ id: string }>();
+  const isUpdate = Boolean(id);
+  const navigate = useNavigate();
+
+  const [file, setFile] = useState<File | null>(null);
+  const [contentType, setContentType] = useState<"image" | "video">("image");
+  const [status, setStatus] = useState<"public" | "pending">("public");
+  const [description, setDescription] = useState("");
+  const [isPinned, setIsPinned] = useState(false);
+  const [category, setCategory] = useState<number>(0);
+
+  const { data: publication, isLoading } = useGetPublicationsById(
+    id ? Number(id) : undefined
+  );
+  const { data: categories } = useCategories();
+  const createMutation = useCreatePublication();
+  const updateMutation = useUpdatePublication();
+  const previewUrl = file ? URL.createObjectURL(file) : null;
+
+  useEffect(() => {
+    return () => {
+      if (previewUrl) URL.revokeObjectURL(previewUrl);
+    };
+  }, [previewUrl]);
+
+  useEffect(() => {
+    if (publication) {
+      setContentType(publication.content_type);
+      setStatus(publication.status);
+      setDescription(publication.description);
+      setIsPinned(publication.is_pinned);
+      setCategory(publication.category);
+    }
+  }, [publication]);
+
+  if (isUpdate && isLoading) return <CircularProgress />;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (isUpdate && id) {
+      const payload: UpdatePublicationPayload = {
+        content_type: contentType,
+        status,
+        description,
+        is_pinned: isPinned,
+        category,
+        file: file ?? undefined,
+      };
+
+      updateMutation.mutate(
+        { id: Number(id), payload },
+        { onSuccess: () => navigate("/publications") }
+      );
+    } else {
+      if (!file) {
+        alert("File is required");
+        return;
+      }
+
+      const payload: PublicationPayload = {
+        file,
+        content_type: contentType,
+        status,
+        description,
+        is_pinned: isPinned,
+        category,
+      };
+
+      createMutation.mutate(payload, {
+        onSuccess: () => navigate("/publications"),
+      });
+    }
+  };
+
+  return (
+    <Box sx={{ maxWidth: 600, mx: "auto", mt: 5 }}>
+      <Typography variant="h5" mb={3}>
+        {isUpdate ? "Update Publication" : "Create Publication"}
+      </Typography>
+
+      <form onSubmit={handleSubmit}>
+        <FormControl fullWidth sx={{ mb: 3 }}>
+          <InputLabel>Content Type</InputLabel>
+          <Select
+            value={contentType}
+            label="Content Type"
+            onChange={(e) =>
+              setContentType(e.target.value as "image" | "video")
+            }
+          >
+            <MenuItem value="image">Image</MenuItem>
+            <MenuItem value="video">Video</MenuItem>
+          </Select>
+        </FormControl>
+
+        <Box sx={{ mb: 3, textAlign: "center" }}>
+          {file &&
+            (contentType === "image" ? (
+              <Box
+                component="img"
+                src={previewUrl!}
+                alt="New upload"
+                sx={{ maxWidth: "100%", maxHeight: 300, borderRadius: 2 }}
+              />
+            ) : (
+              <Box
+                component="video"
+                src={previewUrl!}
+                controls
+                sx={{ maxWidth: "100%", maxHeight: 300, borderRadius: 2 }}
+              />
+            ))}
+
+          {!file &&
+            isUpdate &&
+            publication &&
+            (contentType === publication.content_type ? (
+              publication.content_type === "image" && publication.image ? (
+                <Box
+                  component="img"
+                  src={publication.image}
+                  alt="Current publication"
+                  sx={{ maxWidth: "100%", maxHeight: 300, borderRadius: 2 }}
+                />
+              ) : publication.video ? (
+                <Box
+                  component="video"
+                  src={publication.video}
+                  controls
+                  sx={{ maxWidth: "100%", maxHeight: 300, borderRadius: 2 }}
+                />
+              ) : null
+            ) : (
+              <Typography
+                color="text.secondary"
+                sx={{
+                  height: 300,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  border: "1px dashed",
+                  borderColor: "divider",
+                  borderRadius: 2,
+                }}
+              >
+                Current publication is a {publication.content_type}.
+                <br />
+                Select a new {contentType} file to replace it.
+              </Typography>
+            ))}
+        </Box>
+
+        <Button variant="outlined" component="label" sx={{ mb: 3 }}>
+          {file
+            ? file.name
+            : isUpdate
+            ? "Change file"
+            : "Select file"}
+          <input
+            type="file"
+            hidden
+            accept={`${contentType}/*`}
+            onChange={(e) => e.target.files && setFile(e.target.files[0])}
+          />
+        </Button>
+
+        <TextField
+          label="Description"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          fullWidth
+          required
+          sx={{ mb: 3 }}
+        />
+
+        <FormControl fullWidth sx={{ mb: 3 }}>
+          <InputLabel>Status</InputLabel>
+          <Select
+            value={status}
+            label="Status"
+            onChange={(e) => setStatus(e.target.value as "public" | "pending")}
+          >
+            <MenuItem value="public">Public</MenuItem>
+            <MenuItem value="pending">Pending</MenuItem>
+          </Select>
+        </FormControl>
+
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={isPinned}
+              onChange={(e) => setIsPinned(e.target.checked)}
+            />
+          }
+          label="Pinned"
+          sx={{ mb: 3 }}
+        />
+
+        <TextField
+          select
+          label="Category"
+          value={category}
+          onChange={(e) => setCategory(Number(e.target.value))}
+          fullWidth
+          required
+          sx={{ mb: 3 }}
+        >
+          {categories?.map((cat) => (
+            <MenuItem key={cat.pk} value={cat.pk}>
+              {cat.name}
+            </MenuItem>
+          ))}
+        </TextField>
+
+        <Button
+          variant="contained"
+          color="primary"
+          type="submit"
+          disabled={createMutation.isPending || updateMutation.isPending}
+        >
+          {isUpdate ? "Update" : "Create"}
+        </Button>
+      </form>
+    </Box>
+  );
+};
+
+export default PublicationForm;

src/pages/PublicationsPage/PublicationsPage.tsx

@@ -0,0 +1,157 @@
+import { useState } from "react";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+  Pagination,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+} from "@mui/material";
+import { useNavigate } from "react-router-dom";
+
+import Container from "../../components/shared/Container/Container";
+import { useGetPublications } from "../../hooks/publications/useGetPublications";
+import { useDeletePublication } from "../../hooks/publications/useDeletePublication";
+import type { PublicationType } from "../../api/publications";
+
+const PublicationsPage = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [deletePublicationId, setDeletePublicationId] = useState<number | null>(
+    null
+  );
+
+  const { data, isLoading, isError } = useGetPublications(currentPage);
+  const deleteMutation = useDeletePublication();
+  const navigate = useNavigate();
+
+  const handleCreatePublication = () => {
+    navigate("/publications/create");
+  };
+
+  const handleUpdate = (id: number) => {
+    navigate(`/publications/${id}/update`);
+  };
+
+  const handleDelete = () => {
+    if (deletePublicationId !== null) {
+      deleteMutation.mutate(deletePublicationId, {
+        onSuccess: () => setDeletePublicationId(null),
+      });
+    }
+  };
+
+  if (isLoading) return <CircularProgress />;
+  if (isError)
+    return <Typography color="error">Error loading publications.</Typography>;
+
+  return (
+    <Container>
+      <Box sx={{ display: "flex", justifyContent: "space-between", mb: 3 }}>
+        <Typography variant="h4">Publications</Typography>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={handleCreatePublication}
+        >
+          Create Publication
+        </Button>
+      </Box>
+
+      <TableContainer component={Paper}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>ID</TableCell>
+              <TableCell>Type</TableCell>
+              <TableCell>Description</TableCell>
+              <TableCell>Status</TableCell>
+              <TableCell>Average Score</TableCell>
+              <TableCell>Pinned</TableCell>
+              <TableCell>Category</TableCell>
+              <TableCell>User</TableCell>
+              <TableCell>Created</TableCell>
+              <TableCell>Actions</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody>
+            {data?.results.map((pub: PublicationType) => (
+              <TableRow key={pub.pk}>
+                <TableCell>{pub.pk}</TableCell>
+                <TableCell>{pub.content_type}</TableCell>
+                <TableCell>{pub.description}</TableCell>
+                <TableCell>{pub.status}</TableCell>
+                <TableCell>{pub.average_score}</TableCell>
+                <TableCell>{pub.is_pinned ? "Yes" : "No"}</TableCell>
+                <TableCell>{pub.category_detail.name}</TableCell>
+                <TableCell>{pub.user_detail.username}</TableCell>
+                <TableCell>
+                  {new Date(pub.time_created).toLocaleDateString()}
+                </TableCell>
+                <TableCell >
+                  <Button
+                    variant="outlined"
+                    size="small"
+                    sx={{ mr: 1 }}
+                    onClick={() => handleUpdate(pub.pk)}
+                  >
+                    Update
+                  </Button>
+                  <Button
+                    variant="outlined"
+                    color="error"
+                    size="small"
+                    onClick={() => setDeletePublicationId(pub.pk)}
+                  >
+                    Delete
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      <Pagination
+        color="primary"
+        shape="rounded"
+        count={data?.total_pages ?? 1}
+        page={currentPage}
+        onChange={(_, value) => setCurrentPage(value)}
+        sx={{ mt: 3, mb: 3, display: "flex", justifyContent: "center" }}
+      />
+
+      <Dialog
+        open={deletePublicationId !== null}
+        onClose={() => setDeletePublicationId(null)}
+      >
+        <DialogTitle>Confirm Delete</DialogTitle>
+        <DialogContent>
+          Are you sure you want to delete this publication?
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDeletePublicationId(null)}>Cancel</Button>
+          <Button
+            color="error"
+            onClick={handleDelete}
+            disabled={deleteMutation.isPending}
+          >
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Container>
+  );
+};
+
+export default PublicationsPage;

src/router/router.tsx

@@ -1,6 +1,5 @@
 import { createBrowserRouter } from "react-router-dom";
 import MainLayout from "../MainLayout/MainLayout";
-import { Container } from "@mui/material";
 import LoginPage from "../pages/LoginPage/LoginPage";
 import ProfilePage from "../pages/ProfilePage/ProfilePage";
 import UsersPage from "../pages/UsersPage/UsersPage";
@@ -9,6 +8,8 @@ import IndexesPage from "../pages/IndexesPage/IndexesPage";
 import IndexForm from "../pages/IndexForm/IndexForm";
 import CategoriesPage from "../pages/CategoriesPage/CategoriesPage";
 import CategoryForm from "../pages/CategoryForm/CategoryForm";
+import  PublicationsPage from "../pages/PublicationsPage/PublicationsPage";
+import PublicationForm from "../pages/PublicationsForm/PublicationsForm";
 
 const router = createBrowserRouter([
   {
@@ -17,10 +18,6 @@ const router = createBrowserRouter([
     children: [
       {
         index: true,
-        element: <Container>index page</Container>,
-      },
-      {
-        path: "/login",
         element: <LoginPage />,
       },
       {
@@ -44,7 +41,11 @@ const router = createBrowserRouter([
       },
       {
         path: "/publications",
-        element: <Container>Publications Page</Container>,
+        children: [
+          { index: true, element: <PublicationsPage /> },
+          { path: "create", element: <PublicationForm /> },
+          { path: ":id/update", element: <PublicationForm /> },
+        ],
       },
       {
         path: "/categories",