Content Feed New Post

packages/components/index.ts

@@ -0,0 +1,7 @@
+export * from './modules/__shared__'
+export * from './modules/comments'
+export * from './modules/messages'
+export * from './modules/navigations'
+export * from './modules/content-feed'
+export * from './modules/profiles'
+export * from './modules/notifications'

packages/components/modules/content-feed/common/graphql/mutations/ContentPostCreate.ts

@@ -0,0 +1,26 @@
+import { graphql, useMutation } from 'react-relay'
+
+import { ContentPostCreateMutation } from '../../../../../__generated__/ContentPostCreateMutation.graphql'
+
+export const ContentPostCreateMutationQuery = graphql`
+  mutation ContentPostCreateMutation($input: ContentPostCreateInput!) {
+    contentPostCreate(input: $input) {
+      contentPost {
+        node {
+          id
+          content
+          author {
+            email
+          }
+        }
+      }
+      errors {
+        field
+        messages
+      }
+    }
+  }
+`
+
+export const useContentPostCreateMutation = () =>
+  useMutation<ContentPostCreateMutation>(ContentPostCreateMutationQuery)

packages/components/modules/content-feed/common/index.ts

@@ -0,0 +1,3 @@
+// exports common content-feed code
+
+export * from './graphql/mutations/ContentPostCreate'

packages/components/modules/content-feed/web/ContentFeed/index.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { FC, useCallback } from 'react'
+
+import { Button, Typography } from '@mui/material'
+import { useRouter } from 'next/navigation'
+
+import { HeaderContainer, RootContainer } from './styled'
+import { IContentFeedProps } from './types'
+
+const ContentFeed: FC<IContentFeedProps> = () => {
+  const router = useRouter()
+
+  const onNewPost = useCallback(() => {
+    router.push('/new-post')
+  }, [router])
+
+  return (
+    <RootContainer>
+      <HeaderContainer>
+        <Typography component="h4" variant="h4">
+          Content Feed
+        </Typography>
+        <Button
+          variant="outlined"
+          color="inherit"
+          onClick={onNewPost}
+          disableRipple
+          sx={{ maxWidth: 'fit-content' }}
+        >
+          New Post
+        </Button>
+      </HeaderContainer>
+    </RootContainer>
+  )
+}
+
+export default ContentFeed

packages/components/modules/content-feed/web/ContentFeed/styled.tsx

@@ -0,0 +1,24 @@
+import { Box, styled } from '@mui/material'
+
+export const RootContainer = styled(Box)(() => ({
+  display: 'flex',
+  width: '600px',
+  alignSelf: 'center',
+  flexDirection: 'column',
+}))
+
+export const HeaderContainer = styled(Box)(() => ({
+  display: 'flex',
+  width: '100%',
+  alignSelf: 'center',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+}))
+
+export const ButtonContainer = styled(Box)(() => ({
+  display: 'flex',
+  width: 'fit-content',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  gap: '10px',
+}))

packages/components/modules/content-feed/web/ContentFeed/types.ts

@@ -0,0 +1,3 @@
+export interface IContentFeedProps {
+
+}

packages/components/modules/content-feed/web/ContentFeedImage/index.tsx

@@ -0,0 +1,186 @@
+'use client'
+
+import { ChangeEventHandler, FC, useRef, useState } from 'react'
+
+import { useNotification } from '@baseapp-frontend/utils'
+
+import {AddRounded as AddRoundedIcon} from '@mui/icons-material'
+import {CloseRounded as CloseRoundedIcon} from '@mui/icons-material'
+import {InsertPhotoOutlined as InsertPhotoOutlinedIcon} from '@mui/icons-material'
+import { Box, Typography } from '@mui/material'
+import Image from 'next/image'
+import { Controller } from 'react-hook-form'
+
+import {
+  AddFileButton,
+  AddFileWrapper,
+  ContentFeedImageContainer,
+  DropFilesContainer,
+  MiniatureFileWrapper,
+  RemoveFileButton,
+} from './styled'
+import { IContentFeedImageProps } from './types'
+
+const ContentFeedImage: FC<IContentFeedImageProps> = ({ form }) => {
+  const [selectedUploadedFile, setSelectedUploadedFiles] = useState<File>()
+  const [isDragging, setIsDragging] = useState(false)
+
+  const DEFAULT_IMAGE_FORMATS = 'image/png, image/gif, image/jpeg'
+  const DEFAULT_IMAGE_MAX_SIZE = 10 * 1024 * 1024
+
+  const fileRef = useRef<HTMLInputElement>(null)
+  const { sendToast } = useNotification()
+
+  const { control, watch } = form
+
+  const formFiles: File[] = watch('images')
+
+  const handleRemoveFile = (fileIndex: number) => {
+    const updatedFiles = formFiles?.filter((_, index) => index !== fileIndex)
+    form.setValue('images', updatedFiles as never, { shouldValidate: true })
+  }
+
+  const handleDragEnter = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(true)
+  }
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+      setIsDragging(false)
+    }
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(false)
+
+    const { files } = e.dataTransfer
+    if (files.length) {
+      form.setValue('images', [...(formFiles as never[]), ...(files as unknown as never[])])
+    }
+  }
+
+  return (
+    <Box
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      {selectedUploadedFile && !isDragging && (
+        <Box width="100%" position="relative" height="500px" mb="24px">
+          <Image
+            src={URL.createObjectURL(selectedUploadedFile)}
+            alt={selectedUploadedFile.name}
+            fill
+            style={{ objectFit: 'cover', borderRadius: '8px', height: '100%', width: '100%' }}
+            onLoad={() => URL.revokeObjectURL(URL.createObjectURL(selectedUploadedFile))}
+          />
+        </Box>
+      )}
+
+      {(isDragging || !formFiles?.length) && (
+        <DropFilesContainer onClick={() => fileRef?.current?.click()}>
+          <InsertPhotoOutlinedIcon
+            sx={{ width: '36px', height: '36px', marginBottom: '4px', color: 'text.secondary' }}
+          />
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            Click to browse or drag and drop images and videos.
+          </Typography>
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            Max. File Size: 15MB
+          </Typography>
+        </DropFilesContainer>
+      )}
+
+      <ContentFeedImageContainer gap={0.75}>
+        {!!formFiles?.length && (
+          <AddFileWrapper>
+            <AddFileButton color="inherit" onClick={() => fileRef?.current?.click()} disableRipple>
+              <AddRoundedIcon sx={{ width: '28px', height: '28px', color: 'text.primary' }} />
+            </AddFileButton>
+          </AddFileWrapper>
+        )}
+        <Controller
+          name="images"
+          control={control}
+          render={({ field }) => {
+            const handleOnChange: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> = (
+              event,
+            ) => {
+              const { files } = event.target as HTMLInputElement
+
+              if (files) {
+                // Convert FileList to an array of File objects
+                const filesArray = Array.from(files)
+
+                // Filter and process valid files
+                const validFiles = filesArray.filter((file) => {
+                  if (file.size > DEFAULT_IMAGE_MAX_SIZE) {
+                    // Notify the user if the file is too large
+                    sendToast(
+                      `This file is too large (max ${DEFAULT_IMAGE_MAX_SIZE / 1024 / 1024}MB).`,
+                      {
+                        type: 'error',
+                      },
+                    )
+                    return false // Exclude this file
+                  }
+                  return true // Include this file
+                })
+
+                // Update the form field with the valid files
+                if (validFiles.length > 0) {
+                  field.onChange([...formFiles, ...validFiles])
+                }
+              }
+            }
+            return (
+              <input
+                onChange={handleOnChange}
+                type="file"
+                multiple
+                ref={fileRef}
+                accept={DEFAULT_IMAGE_FORMATS}
+                style={{ display: 'none' }}
+              />
+            )
+          }}
+        />
+        {formFiles?.map((file, index) => (
+          <MiniatureFileWrapper key={`${file.name}`}>
+            <button
+              style={{ height: '100%' }}
+              type="button"
+              onClick={() => setSelectedUploadedFiles(file)}
+            >
+              <Image
+                src={URL.createObjectURL(file)}
+                alt={file.name}
+                width={72}
+                height={72}
+                style={{ objectFit: 'cover', borderRadius: '8px', height: '100%' }}
+                onLoad={() => URL.revokeObjectURL(URL.createObjectURL(file))}
+              />
+            </button>
+            <RemoveFileButton onClick={() => handleRemoveFile(index)}>
+              <CloseRoundedIcon sx={{ color: 'white', width: '20px', height: '20px' }} />
+            </RemoveFileButton>
+          </MiniatureFileWrapper>
+        ))}
+      </ContentFeedImageContainer>
+    </Box>
+  )
+}
+
+export default ContentFeedImage

packages/components/modules/content-feed/web/ContentFeedImage/styled.tsx

@@ -0,0 +1,83 @@
+import { Box, Button, styled } from '@mui/material'
+
+export const ContentFeedImageContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  marginBottom: '16px',
+  overflow: 'auto',
+  paddingBottom: '6px',
+  '::-webkit-scrollbar': {
+    height: '6px',
+  },
+  '::-webkit-scrollbar-track': {
+    boxShadow: `inset 0 0 1px ${theme.palette.grey[400]}`,
+    borderRadius: '10px',
+  },
+  '::-webkit-scrollbar-thumb': {
+    background: theme.palette.grey[400],
+    borderRadius: '10px',
+  },
+  '::-webkit-scrollbar-thumb:hover': {
+    background: theme.palette.grey[600],
+  },
+}))
+
+export const AddFileButton = styled(Button)(({ theme }) => ({
+  width: '72px',
+  height: '72px',
+  backgroundColor: theme.palette.grey[200],
+  borderRadius: '8px',
+  '&:hover': {
+    backgroundColor: theme.palette.grey[300],
+  },
+}))
+
+export const AddFileWrapper = styled(Box)(({ theme }) => ({
+  border: `2px dashed ${theme.palette.grey[200]}`,
+  borderRadius: '12px',
+  padding: '4px',
+  display: 'inline-block',
+  flexShrink: 0,
+}))
+
+export const MiniatureFileWrapper = styled(Box)(({ theme }) => ({
+  position: 'relative',
+  flexShrink: 0,
+  width: '80px',
+  height: '80px',
+  border: `2px solid ${theme.palette.grey[200]}`,
+  borderRadius: '12px',
+  padding: '4px',
+  display: 'inline-block',
+  '&:hover': {
+    border: `2px solid black`,
+  },
+}))
+
+export const RemoveFileButton = styled('button')(({ theme }) => ({
+  position: 'absolute',
+  top: '4px',
+  right: '4px',
+  width: '28px',
+  height: '28px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '0 6px 0 6px',
+  backgroundColor: theme.palette.grey[800],
+  '&:hover': {
+    backgroundColor: theme.palette.grey[800],
+  },
+}))
+
+export const DropFilesContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column',
+  border: `1px dashed ${theme.palette.grey[400]}`,
+  borderImageSlice: 1,
+  width: '100%',
+  height: '144px',
+  borderRadius: '8px',
+  marginBottom: '8px',
+}))

packages/components/modules/content-feed/web/ContentFeedImage/types.ts

@@ -0,0 +1,12 @@
+import { UseFormReturn } from "react-hook-form"
+
+export interface IContentFeedImageProps {
+  form: UseFormReturn<
+    {
+      content: string
+      images: never[]
+    },
+    any,
+    undefined
+  >
+}