Makes it possible to create a review from the posts/create page

rebeccalim20 · Apr 13, 2023 · 7080ece · 7080ece
1 parent 7ffcd4a
commit 7080ece
Show file tree

Hide file tree

Showing 6 changed files with 195 additions and 89 deletions.
diff --git a/src/components/Image/AsPosts/ImagesAsPostsInfinite.tsx b/src/components/Image/AsPosts/ImagesAsPostsInfinite.tsx
@@ -1,34 +1,35 @@
-import { trpc } from '~/utils/trpc';
-import { createContext, useContext, useMemo, useState, useEffect } from 'react';
-import { useImageFilters } from '~/providers/FiltersProvider';
-import { removeEmpty } from '~/utils/object-helpers';
-import { ImagesAsPostsCard } from '~/components/Image/AsPosts/ImagesAsPostsCard';
 import {
-  Paper,
-  Stack,
-  Text,
-  LoadingOverlay,
   Button,
-  Group,
-  Title,
   Center,
+  Group,
   Loader,
+  LoadingOverlay,
+  Paper,
+  Stack,
+  Text,
   ThemeIcon,
+  Title,
 } from '@mantine/core';
-import { useIsMobile } from '~/hooks/useIsMobile';
-import { useInView } from 'react-intersection-observer';
-import { useRouter } from 'next/router';
-import { parseImagesQuery } from '~/components/Image/image.utils';
-import { MasonryProvider } from '~/components/MasonryColumns/MasonryProvider';
-import { MasonryContainer } from '~/components/MasonryColumns/MasonryContainer';
 import { NextLink } from '@mantine/next';
-import { IconPlus, IconCloudOff } from '@tabler/icons';
-import { SortFilter, PeriodFilter } from '~/components/Filters';
+import { IconCloudOff, IconPlus, IconStar } from '@tabler/icons';
+import { useRouter } from 'next/router';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
+
+import { PeriodFilter, SortFilter } from '~/components/Filters';
+import { ImagesAsPostsCard } from '~/components/Image/AsPosts/ImagesAsPostsCard';
 import { ImageCategories } from '~/components/Image/Infinite/ImageCategories';
+import { parseImagesQuery } from '~/components/Image/image.utils';
 import { LoginRedirect } from '~/components/LoginRedirect/LoginRedirect';
 import { MasonryColumns } from '~/components/MasonryColumns/MasonryColumns';
+import { MasonryContainer } from '~/components/MasonryColumns/MasonryContainer';
+import { MasonryProvider } from '~/components/MasonryColumns/MasonryProvider';
 import { useCurrentUser } from '~/hooks/useCurrentUser';
+import { useIsMobile } from '~/hooks/useIsMobile';
+import { useImageFilters } from '~/providers/FiltersProvider';
 import { constants } from '~/server/common/constants';
+import { removeEmpty } from '~/utils/object-helpers';
+import { trpc } from '~/utils/trpc';
 
 type ModelVersionsProps = { id: number; name: string };
 type ImagesAsPostsInfiniteState = {
@@ -89,6 +90,9 @@ export default function ImagesAsPostsInfinite({
   // #endregion
 
   const isMuted = currentUser?.muted ?? false;
+  const addPostLink = `/posts/create?modelId=${modelId}${
+    selectedVersionId ? `&modelVersionId=${selectedVersionId}` : ''
+  }&returnUrl=${router.asPath}`;
 
   return (
     <ImagesAsPostsInfiniteContext.Provider value={{ modelId, username, modelVersions }}>
@@ -102,19 +106,30 @@ export default function ImagesAsPostsInfinite({
             <Group spacing="xs" align="flex-end">
               <Title order={2}>Gallery</Title>
               {!isMuted && (
-                <LoginRedirect reason="create-review">
-                  <Button
-                    component={NextLink}
-                    variant="outline"
-                    size="xs"
-                    leftIcon={<IconPlus size={16} />}
-                    href={`/posts/create?modelId=${modelId}${
-                      selectedVersionId ? `&modelVersionId=${selectedVersionId}` : ''
-                    }&returnUrl=${router.asPath}`}
-                  >
-                    Add Post
-                  </Button>
-                </LoginRedirect>
+                <Group>
+                  <LoginRedirect reason="create-review">
+                    <Button
+                      component={NextLink}
+                      variant="outline"
+                      size="xs"
+                      leftIcon={<IconPlus size={16} />}
+                      href={addPostLink}
+                    >
+                      Add Post
+                    </Button>
+                  </LoginRedirect>
+                  <LoginRedirect reason="create-review">
+                    <Button
+                      component={NextLink}
+                      leftIcon={<IconStar size={16} />}
+                      href={addPostLink + '&reviewing=true'}
+                      variant="outline"
+                      size="xs"
+                    >
+                      Add Review
+                    </Button>
+                  </LoginRedirect>
+                </Group>
               )}
             </Group>
             {/* IMAGES */}

diff --git a/src/components/Model/ModelVersions/ModelVersionDetails.tsx b/src/components/Model/ModelVersions/ModelVersionDetails.tsx
@@ -13,18 +13,11 @@ import {
   Stack,
   Text,
   Tooltip,
-  UnstyledButton,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { NextLink } from '@mantine/next';
 import { ModelStatus } from '@prisma/client';
-import {
-  IconChevronDown,
-  IconDownload,
-  IconHeart,
-  IconLicense,
-  IconMessageCircle2,
-} from '@tabler/icons';
+import { IconDownload, IconHeart, IconLicense, IconMessageCircle2 } from '@tabler/icons';
 import { TRPCClientErrorBase } from '@trpc/client';
 import { DefaultErrorShape } from '@trpc/server';
 import { startCase } from 'lodash';
@@ -75,6 +68,7 @@ export function ModelVersionDetails({
   onBrowseClick,
 }: Props) {
   const { connected: civitaiLinked } = useCivitaiLink();
+  const router = useRouter();
   const queryUtils = trpc.useContext();
 
   // TODO.manuel: use control ref to display the show more button
@@ -509,17 +503,29 @@ export function ModelVersionDetails({
                         rating={version.rank?.ratingAllTime}
                         count={version.rank?.ratingCountAllTime}
                       />
-                      <Text
-                        component={NextLink}
-                        href={`/models/${model.id}/reviews?modelVersionId=${version.id}`}
-                        variant="link"
-                        size="sm"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                        }}
-                      >
-                        See Reviews
-                      </Text>
+                      <Stack spacing={4}>
+                        <Button
+                          component={NextLink}
+                          variant="outline"
+                          size="xs"
+                          href={`/posts/create?modelId=${model.id}&modelVersionId=${version.id}&reviewing=true&returnUrl=${router.asPath}`}
+                          onClick={(e) => e.stopPropagation()}
+                          compact
+                        >
+                          Add Review
+                        </Button>
+                        <Text
+                          component={NextLink}
+                          href={`/models/${model.id}/reviews?modelVersionId=${version.id}`}
+                          variant="link"
+                          size="sm"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                          }}
+                        >
+                          See Reviews
+                        </Text>
+                      </Stack>
                     </Group>
                   </Accordion.Control>
                   <Accordion.Panel px="sm" pb="sm">

diff --git a/src/components/ResourceReview/EditUserResourceReview.tsx b/src/components/ResourceReview/EditUserResourceReview.tsx
@@ -19,13 +19,15 @@ export function EditUserResourceReview({
   modelId,
   modelName,
   modelVersionId,
+  openedCommentBox = false,
 }: {
   resourceReview?: ResourceReviewModel;
   modelId: number;
   modelName?: string;
   modelVersionId: number;
+  openedCommentBox?: boolean;
 }) {
-  const [editDetail, setEditDetail] = useState(false);
+  const [editDetail, setEditDetail] = useState(openedCommentBox);
   const toggleEditDetail = () => setEditDetail((state) => !state);
 
   const createMutation = useCreateResourceReview({ modelId, modelVersionId });

diff --git a/src/pages/posts/[postId]/edit.tsx b/src/pages/posts/[postId]/edit.tsx
@@ -1,5 +1,8 @@
 import { Container, Grid, Stack, Title, Group, Badge } from '@mantine/core';
+import { IconExclamationCircle } from '@tabler/icons';
 import { useIsMutating } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+import { DismissibleAlert } from '~/components/DismissibleAlert/DismissibleAlert';
 import { EditPostControls } from '~/components/Post/Edit/EditPostControls';
 import { EditPostDetail } from '~/components/Post/Edit/EditPostDetail';
 import { EditPostImages } from '~/components/Post/Edit/EditPostImages';
@@ -10,12 +13,28 @@ import { PostEditLayout } from '~/components/Post/Edit/PostEditLayout';
 import { ReorderImages } from '~/components/Post/Edit/ReorderImages';
 
 export default function PostEdit() {
-  const reorder = useEditPostContext((state) => state.reorder);
-
   const mutating = useIsMutating();
+  const router = useRouter();
+  const reviewing = router.query.reviewing ? router.query.reviewing === 'true' : undefined;
+
+  const reorder = useEditPostContext((state) => state.reorder);
+  const tags = useEditPostContext((state) => state.tags);
 
   return (
     <Container>
+      {reviewing && !tags.length && (
+        <DismissibleAlert
+          id="complete-review"
+          title="Complete your review"
+          mx="auto"
+          maw={400}
+          mb="xl"
+          size="md"
+          color="blue"
+          emoji="⭐️"
+          content="To complete your review give your post a tag and hit publish."
+        />
+      )}
       <Grid gutter={30}>
         <Grid.Col md={4} sm={6} orderSm={2}>
           <Stack>