diff --git a/.github/workflows/docker-build.yaml b/.github/workflows/docker-build.yaml index 3c65113..9b5a350 100644 --- a/.github/workflows/docker-build.yaml +++ b/.github/workflows/docker-build.yaml @@ -13,7 +13,7 @@ jobs: runs-on: ubuntu-latest steps: - uses: docker/setup-qemu-action@v2 - if: github.event_name != 'pull_request' + if: github.ref == 'refs/heads/main' && github.event_name != 'pull_request' - uses: docker/setup-buildx-action@v2 - uses: docker/metadata-action@v4 id: meta @@ -31,7 +31,7 @@ jobs: - uses: docker/build-push-action@v4 with: context: . - platforms: ${{ github.event_name == 'pull_request' && 'linux/amd64' || 'linux/amd64,linux/arm64' }} + platforms: ${{ github.ref == 'refs/heads/main' && github.event_name != 'pull_request' && 'linux/amd64,linux/arm64' || 'linux/amd64' }} push: ${{ startsWith(github.ref, 'refs/tags/v') }} cache-to: type=gha,scope=docker cache-from: type=gha,scope=docker,mode=max diff --git a/frontend/package.json b/frontend/package.json index ed73670..913e769 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "@heroicons/react": "^2.0.18", + "jotai": "^2.8.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.48.2", diff --git a/frontend/src/components/Images.tsx b/frontend/src/components/Images.tsx new file mode 100644 index 0000000..db23405 --- /dev/null +++ b/frontend/src/components/Images.tsx @@ -0,0 +1,42 @@ +import { useState } from "react"; +import z from "zod"; + +import { File } from "../dto"; + +interface propsType { + files: z.infer[]; +} + +const Images = ({ files }: propsType) => { + const [clicked, setClicked] = useState(false); + const [url, setUrl] = useState(""); + + const handleImageClick = (url: string) => { + setClicked(!clicked); + setUrl(url); + }; + + return ( +
+ {files && + files.map((file) => ( + handleImageClick(file.url)} + /> + ))} + {clicked && ( +
setClicked(!clicked)} + > + +
+ )} +
+ ); +}; + +export default Images; diff --git a/frontend/src/components/NewChirp/BottomNewChirp.tsx b/frontend/src/components/NewChirp/BottomNewChirp.tsx new file mode 100644 index 0000000..52cb532 --- /dev/null +++ b/frontend/src/components/NewChirp/BottomNewChirp.tsx @@ -0,0 +1,100 @@ +import { TrashIcon } from "@heroicons/react/24/outline"; +import { useAtomValue, useSetAtom } from "jotai"; +import { useEffect } from "react"; +import { SubmitHandler, useForm } from "react-hook-form"; +import z from "zod"; + +import { CreatePost } from "../../dto"; +import { usePostNoteMutation } from "../../queries/note"; +import { pictureUrl } from "../../states/states"; +import BottomUpload from "./BottomUpload"; + +export default function BottomNewChirp() { + const { register, handleSubmit, setValue, reset } = + useForm>(); + const { + mutate: postNote, + isLoading, + error, + } = usePostNoteMutation(() => { + reset(); + }); + const pictureUrlArr = useAtomValue(pictureUrl); + const deleteUrl = useSetAtom(pictureUrl); + + const onSubmit: SubmitHandler> = (data) => { + postNote(data); + deletePicture(); + }; + + const deletePicture = () => { + deleteUrl(() => []); + }; + + useEffect(() => { + const ulid: string[] = pictureUrlArr.map((el: string) => + el.substring(el.length - 26, el.length), + ); + setValue("files", ulid); + }, [pictureUrlArr, setValue]); + + return ( + <> +
+ +
+
+ +
+ {pictureUrlArr.length > 0 && ( +
+ {pictureUrlArr.map((value, i) => ( +
+ + pictureurl + +
+ ))} +
+ )} + + +
+
+
+
+ +
+ {error &&
{error.message}
} +
+ + ); +} diff --git a/frontend/src/components/NewChirp/BottomUpload.tsx b/frontend/src/components/NewChirp/BottomUpload.tsx new file mode 100644 index 0000000..23033e1 --- /dev/null +++ b/frontend/src/components/NewChirp/BottomUpload.tsx @@ -0,0 +1,59 @@ +import { ArrowUpTrayIcon } from "@heroicons/react/24/outline"; +import { useSetAtom } from "jotai"; +import { Fragment, useRef } from "react"; + +import { useLocalFiles } from "../../queries/file"; +import { pictureUrl } from "../../states/states"; + +export default function BottomUpload() { + const modalRef = useRef(null); + const setUrl = useSetAtom(pictureUrl); + + const { data } = useLocalFiles(); + + const handlePictureClick = (url: string) => { + setUrl((el) => [...el, url]); + + modalRef?.current?.close(); + }; + + return ( + <> +
modalRef?.current?.showModal()} + className="mr-4 rounded-lg p-1 hover:bg-slate-50 hover:bg-opacity-10 active:bg-slate-700" + > + +
+ +
+ {(data?.pages ?? []).map((page, i) => ( +
+ + {page.length !== 0 ? ( +
+ {page.map((file) => ( +
+ {file.alt handlePictureClick(file.url)} + /> +
+ ))} +
+ ) : ( + no items + )} + +
+ ))} +
+
+ +
+ + + ); +} diff --git a/frontend/src/components/RightNavUpload.tsx b/frontend/src/components/RightNavUpload.tsx index fed74ed..9744ccf 100644 --- a/frontend/src/components/RightNavUpload.tsx +++ b/frontend/src/components/RightNavUpload.tsx @@ -1,5 +1,5 @@ -import { PlusIcon } from "@heroicons/react/24/outline"; -import { useRef } from "react"; +import { PlusIcon, PhotoIcon } from "@heroicons/react/24/outline"; +import { useEffect, useRef, useState } from "react"; import { SubmitHandler, useForm } from "react-hook-form"; import { useLocalFileUploadMutation } from "../queries/file"; @@ -13,7 +13,8 @@ interface UploadForm { export default function RightNavUpload() { const modalRef = useRef(null); - const { register, handleSubmit, reset } = useForm(); + const [imagePreview, setImagePreview] = useState(""); + const { register, handleSubmit, reset, watch } = useForm(); const { mutate: upload, isLoading, @@ -22,6 +23,7 @@ export default function RightNavUpload() { reset(); modalRef.current?.close(); }); + const image = watch("files"); const onSubmit: SubmitHandler = (data) => { if (!data.files) { @@ -32,6 +34,15 @@ export default function RightNavUpload() { upload({ file, mediaType: file.type, alt: data.alt }); }; + useEffect(() => { + if (image && image.length > 0) { + const file = image[0]; + setImagePreview(URL.createObjectURL(file)); + } else { + setImagePreview(""); + } + }, [image]); + return ( <>