feat: add delete project feature (#931)

* feat: add delete project feature * fix: fix disabled logic
geyserfund · Jun 20, 2023 · 778181d · 778181d
1 parent cbf234f
commit 778181d
Show file tree

Hide file tree

Showing 16 changed files with 656 additions and 420 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "@apollo/client": "^3.7.4",
     "@chakra-ui/icons": "^2.0.17",
     "@chakra-ui/media-query": "^3.2.11",
-    "@chakra-ui/react": "^2.4.9",
+    "@chakra-ui/react": "^2.7.0",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@giphy/js-fetch-api": "^4.7.1",

diff --git a/src/config/theme/alertTheme.ts b/src/config/theme/alertTheme.ts
@@ -0,0 +1,22 @@
+import { alertAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(alertAnatomy.keys)
+
+const baseStyle = definePartsStyle({
+  container: {
+    bg: 'neutral.100',
+  },
+  icon: {
+    color: 'neutral.300',
+  },
+  description: {
+    fontSize: '10px',
+    fontWeight: 600,
+    lineHeight: 1.4,
+    color: 'neutral.900',
+  },
+})
+
+export const alertTheme = defineMultiStyleConfig({ baseStyle })
diff --git a/src/config/theme/theme.ts b/src/config/theme/theme.ts
@@ -1,6 +1,7 @@
 import { StyleFunctionProps } from '@chakra-ui/react'
 
 import { fonts, lightModeColors } from '../../styles'
+import { alertTheme } from './alertTheme'
 import { drawerTheme } from './drawerTheme'
 import { menuTheme } from './menuTheme'
 import { modalTheme } from './modalTheme'
@@ -107,8 +108,20 @@ export const theme = {
           },
         }),
         danger: ({ theme }: StyleFunctionProps) => ({
-          backgroundColor: theme.colors.secondary.red,
-          color: theme.colors.neutral[0],
+          boxShadow: 'none',
+          outline: 'none',
+          border: `2px solid`,
+          borderColor: theme.colors.neutral[200],
+          color: theme.colors.secondary.red,
+          backgroundColor: theme.colors.neutral[50],
+          _hover: {
+            borderColor: theme.colors.secondary.red,
+          },
+          _active: {
+            borderColor: theme.colors.secondary.red,
+            backgroundColor: theme.colors.secondary.red,
+            color: theme.colors.neutral[50],
+          },
         }),
       },
     },
@@ -180,6 +193,7 @@ export const theme = {
         colorScheme: 'primary',
       },
     },
+    Alert: alertTheme,
     Menu: menuTheme,
     Modal: modalTheme,
     Drawer: drawerTheme,

diff --git a/...tCreate/components/FormInputContainer.tsx → src/forms/components/FieldContainer.tsx b/...tCreate/components/FormInputContainer.tsx → src/forms/components/FieldContainer.tsx
@@ -1,18 +1,18 @@
 import { StackProps, Text, VStack } from '@chakra-ui/react'
 import { PropsWithChildren, ReactNode } from 'react'
 
-export const FormInputContainer = ({
+export const FieldContainer = ({
   title,
   subtitle,
   children,
   error = null,
   ...props
 }: PropsWithChildren<
   {
-    title?: string
+    title?: ReactNode
     subtitle?: ReactNode
     error?: ReactNode
-  } & StackProps
+  } & Omit<StackProps, 'title'>
 >) => {
   return (
     <VStack spacing={1} alignItems="start" w="100%" {...props}>

diff --git a/src/forms/components/ImageField.tsx b/src/forms/components/ImageField.tsx
@@ -1,12 +1,12 @@
-import { FormControl, InputProps, Text } from '@chakra-ui/react'
+import { FormControl } from '@chakra-ui/react'
 import { Control, Controller, FieldValue } from 'react-hook-form'
 
 import { FileUpload } from '../../components/molecules'
 import { UploadBox } from '../../components/ui'
+import { FieldContainer } from './FieldContainer'
 
-export type ImageFieldProps = InputProps & {
+export type ImageFieldProps = {
   name: string
-  placeholder?: string
   caption?: string
   label?: string
   required?: boolean
@@ -16,40 +16,44 @@ export type ImageFieldProps = InputProps & {
 export const ImageField = ({
   control,
   name,
-  placeholder,
   caption,
   required,
   label,
-  ...props
 }: ImageFieldProps) => {
   return (
     <Controller
       name={name}
       control={control}
       render={({ field, fieldState }) => (
         <FormControl>
-          <Text mb={2}>
-            {label || name}
-            {required ? '*' : ''}
-          </Text>
-          <FileUpload
-            showcase
-            caption={caption}
-            src={field.value}
-            onUploadComplete={field.onChange}
-            onDeleteClick={() => field.onChange('')}
-            childrenOnLoading={<UploadBox loading />}
+          <FieldContainer
+            title={
+              <>
+                {label || name}
+                {required ? '*' : ''}
+              </>
+            }
+            subtitle={caption}
+            error={
+              fieldState.error
+                ? fieldState.error.message?.toString() || ''
+                : null
+            }
           >
-            <UploadBox
-              h={10}
-              title={field.value ? 'Change image' : undefined}
-            />
-          </FileUpload>
-          {fieldState.error && (
-            <Text mt={4} color="secondary.red">
-              {fieldState.error.message?.toString() || ''}
-            </Text>
-          )}
+            <FileUpload
+              showcase
+              caption={caption}
+              src={field.value}
+              onUploadComplete={field.onChange}
+              onDeleteClick={() => field.onChange('')}
+              childrenOnLoading={<UploadBox loading />}
+            >
+              <UploadBox
+                h={10}
+                title={field.value ? 'Change image' : undefined}
+              />
+            </FileUpload>
+          </FieldContainer>
         </FormControl>
       )}
     />

diff --git a/src/forms/components/TextField.tsx b/src/forms/components/TextField.tsx
@@ -1,10 +1,13 @@
-import { FormControl, Input, InputProps, Text } from '@chakra-ui/react'
+import { FormControl, Input, InputProps } from '@chakra-ui/react'
 import { Control, Controller, FieldValue } from 'react-hook-form'
 
+import { FieldContainer } from './FieldContainer'
+
 export type TextFieldProps = InputProps & {
   name: string
   placeholder?: string
   label?: string
+  caption?: string
   required?: boolean
   control: Control<FieldValue<any>, any>
 }
@@ -15,6 +18,7 @@ export const TextField = ({
   placeholder,
   required,
   label,
+  caption,
   ...props
 }: TextFieldProps) => {
   return (
@@ -23,21 +27,27 @@ export const TextField = ({
       control={control}
       render={({ field, fieldState }) => (
         <FormControl>
-          <Text mb={2}>
-            {label || name}
-            {required ? '*' : ''}
-          </Text>
-          <Input
-            type="text"
-            placeholder={placeholder || 'Type here'}
-            {...props}
-            {...field}
-          />
-          {fieldState.error && (
-            <Text mt={4} color="secondary.red">
-              {fieldState.error.message?.toString() || ''}
-            </Text>
-          )}
+          <FieldContainer
+            title={
+              <>
+                {label || name}
+                {required ? '*' : ''}
+              </>
+            }
+            subtitle={caption}
+            error={
+              fieldState.error
+                ? fieldState.error.message?.toString() || ''
+                : null
+            }
+          >
+            <Input
+              type="text"
+              placeholder={placeholder || 'Type here'}
+              {...props}
+              {...field}
+            />
+          </FieldContainer>
         </FormControl>
       )}
     />

diff --git a/src/graphql/mutations/project.ts b/src/graphql/mutations/project.ts
@@ -120,3 +120,12 @@ export const MUTATION_UNFOLLOW_PROJECT = gql`
     projectUnfollow(input: $input)
   }
 `
+
+export const MUTATION_DELETE_PROJECT = gql`
+  mutation ProjectDelete($input: DeleteProjectInput!) {
+    projectDelete(input: $input) {
+      message
+      success
+    }
+  }
+`
diff --git a/src/pages/projectCreate/components/ProjectForm.tsx b/src/pages/projectCreate/components/ProjectForm.tsx
@@ -15,10 +15,10 @@ import { FileUpload } from '../../../components/molecules'
 import { TextArea, TextInputBox, UploadBox } from '../../../components/ui'
 import { ProjectValidations } from '../../../constants'
 import { useAuthContext } from '../../../context'
+import { FieldContainer } from '../../../forms/components/FieldContainer'
 import { QUERY_PROJECT_BY_NAME_OR_ID } from '../../../graphql'
 import { toMediumImageUrl, validLightningAddress } from '../../../utils'
 import { ProjectCreationVariables } from '../types'
-import { FormInputContainer } from './FormInputContainer'
 import { ProjectFundraisingDeadline } from './ProjectFundraisingDeadline'
 
 const MIN_LENGTH_TO_QUERY_PROJECT = 3
@@ -105,7 +105,7 @@ export const ProjectForm = ({ form, isEdit }: ProjectFormProps) => {
 
   return (
     <VStack spacing={6}>
-      <FormInputContainer
+      <FieldContainer
         title="Title"
         subtitle="A few words that make your project stand out"
       >
@@ -116,9 +116,9 @@ export const ProjectForm = ({ form, isEdit }: ProjectFormProps) => {
           error={formState.errors.title?.message}
           onBlur={handleProjectFetch}
         />
-      </FormInputContainer>
+      </FieldContainer>
 
-      <FormInputContainer
+      <FieldContainer
         title="Lightning Address Preview"
         subtitle="This is the lightning address for your project. Funds sent to this lightning address will show in your project activity"
         error={FormErrorIcon.name}
@@ -135,9 +135,9 @@ export const ProjectForm = ({ form, isEdit }: ProjectFormProps) => {
           />
           <InputRightAddon>@geyser.fund</InputRightAddon>
         </InputGroup>
-      </FormInputContainer>
+      </FieldContainer>
 
-      <FormInputContainer
+      <FieldContainer
         title="Objective"
         subtitle="Add 'one liner' a simple descriptions of what your project is about"
       >
@@ -158,9 +158,9 @@ export const ProjectForm = ({ form, isEdit }: ProjectFormProps) => {
             }/${ProjectValidations.shortDescription.maxLength}`}</Text>
           </HStack>
         )}
-      </FormInputContainer>
+      </FieldContainer>
 
-      <FormInputContainer
+      <FieldContainer
         title="Image"
         subtitle="Add the main project image that will be displayed in all thumbnails"
       >
@@ -177,9 +177,9 @@ export const ProjectForm = ({ form, isEdit }: ProjectFormProps) => {
             title={watch('image') ? 'Change image' : undefined}
           />
         </FileUpload>
-      </FormInputContainer>
+      </FieldContainer>
 
-      <FormInputContainer
+      <FieldContainer
         title="Header"
         subtitle="Add a header with a video link or by uploading an image to help bring your project to life"
       >
@@ -198,16 +198,16 @@ export const ProjectForm = ({ form, isEdit }: ProjectFormProps) => {
             title={watch('image') ? 'Change header' : undefined}
           />
         </FileUpload>
-      </FormInputContainer>
+      </FieldContainer>
 
-      <FormInputContainer
+      <FieldContainer
         title="Fundraising deadline"
         subtitle="Add a deadline to your project if you have one, or just keep it as ongoing."
       >
         <ProjectFundraisingDeadline setValue={setValue} watch={watch} />
-      </FormInputContainer>
+      </FieldContainer>
 
-      <FormInputContainer
+      <FieldContainer
         title="Email"
         subtitle="Project notifications will be sent to your profile email, which you can edit in Profile Settings. Make sure to verify your email to keep your wallet secure."
       >
@@ -218,7 +218,7 @@ export const ProjectForm = ({ form, isEdit }: ProjectFormProps) => {
           error={formState.errors.email?.message}
           isDisabled={Boolean(user.email)}
         />
-      </FormInputContainer>
+      </FieldContainer>
     </VStack>
   )
 }
diff --git a/src/pages/projectCreate/components/ProjectLinks.tsx b/src/pages/projectCreate/components/ProjectLinks.tsx
@@ -2,9 +2,9 @@ import { Button, VStack } from '@chakra-ui/react'
 import { useEffect } from 'react'
 
 import { ProjectLinkInput } from '../../../components/inputs'
+import { FieldContainer } from '../../../forms/components/FieldContainer'
 import { getIconForLink } from '../../../helpers/getIconForLinks'
 import { Maybe } from '../../../types'
-import { FormInputContainer } from './FormInputContainer'
 
 interface ProjectLinksProps {
   links: string[]
@@ -49,7 +49,7 @@ export const ProjectLinks = ({
   }
 
   return (
-    <FormInputContainer
+    <FieldContainer
       title="Project links"
       subtitle="Connect your sites so viewers can see more proof of your work"
     >
@@ -77,6 +77,6 @@ export const ProjectLinks = ({
           Add Project Link
         </Button>
       </VStack>
-    </FormInputContainer>
+    </FieldContainer>
   )
 }