diff --git a/codegen.yml b/codegen.yml index b2c805d..867507a 100644 --- a/codegen.yml +++ b/codegen.yml @@ -1,5 +1,5 @@ overwrite: true -schema: "http://localhost:8888/dev/graphql" +schema: "https://api.baseql.com/airtable/graphql/app7wOLbDNm617R18" documents: "./src/**/*.{ts,graphql}" generates: src/graphql/index.tsx: diff --git a/src/App.tsx b/src/App.tsx index 158ca8f..76ef2eb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,35 +5,33 @@ import { Wallet_Service } from "./services"; import { Navigate, Route, Routes } from "react-router-dom"; import { useWrapperSetup } from "./utils/Wrapper"; import LoadingPage from "./Components/LoadingPage/LoadingPage"; -import { useMeQuery } from "./graphql"; -import { setUser } from "./redux/features/user.slice"; +// import { setUser } from "./redux/features/user.slice"; import ProtectedRoute from "./Components/ProtectedRoute/ProtectedRoute"; import { Helmet } from "react-helmet"; import { NavbarLayout } from "./utils/routing/layouts"; import { Loadable, PAGES_ROUTES } from "./utils/routing"; -import ListProjectPage from "./features/Projects/pages/ListProjectPage/ListProjectPage"; // Pages -const FeedPage = Loadable(React.lazy(() => import( /* webpackChunkName: "feed_page" */ "./features/Posts/pages/FeedPage/FeedPage"))) -const PostDetailsPage = Loadable(React.lazy(() => import( /* webpackChunkName: "post_details_page" */ "./features/Posts/pages/PostDetailsPage/PostDetailsPage"))) -const CreatePostPage = Loadable(React.lazy(() => import( /* webpackChunkName: "create_post_page" */ "./features/Posts/pages/CreatePostPage/CreatePostPage"))) +// const FeedPage = Loadable(React.lazy(() => import( /* webpackChunkName: "feed_page" */ "./features/Posts/pages/FeedPage/FeedPage"))) +// const PostDetailsPage = Loadable(React.lazy(() => import( /* webpackChunkName: "post_details_page" */ "./features/Posts/pages/PostDetailsPage/PostDetailsPage"))) +// const CreatePostPage = Loadable(React.lazy(() => import( /* webpackChunkName: "create_post_page" */ "./features/Posts/pages/CreatePostPage/CreatePostPage"))) -const HottestPage = Loadable(React.lazy(() => import( /* webpackChunkName: "hottest_page" */ "src/features/Projects/pages/HottestPage/HottestPage"))) -const CategoryPage = Loadable(React.lazy(() => import( /* webpackChunkName: "category_page" */ "src/features/Projects/pages/CategoryPage/CategoryPage"))) -const ExplorePage = Loadable(React.lazy(() => import( /* webpackChunkName: "explore_page" */ "src/features/Projects/pages/ExplorePage"))) -const ProjectPage = Loadable(React.lazy(() => import( /* webpackChunkName: "explore_page" */ "src/features/Projects/pages/ProjectPage/ProjectPage"))) +// const HottestPage = Loadable(React.lazy(() => import( /* webpackChunkName: "hottest_page" */ "src/features/Projects/pages/HottestPage/HottestPage"))) +// const CategoryPage = Loadable(React.lazy(() => import( /* webpackChunkName: "category_page" */ "src/features/Projects/pages/CategoryPage/CategoryPage"))) +// const ProjectPage = Loadable(React.lazy(() => import( /* webpackChunkName: "explore_page" */ "src/features/Projects/pages/ProjectPage/ProjectPage"))) -const HackathonsPage = Loadable(React.lazy(() => import( /* webpackChunkName: "hackathons_page" */ "./features/Hackathons/pages/HackathonsPage/HackathonsPage"))) +// const HackathonsPage = Loadable(React.lazy(() => import( /* webpackChunkName: "hackathons_page" */ "./features/Hackathons/pages/HackathonsPage/HackathonsPage"))) -const TournamentDetailsPage = Loadable(React.lazy(() => import( /* webpackChunkName: "hackathons_page" */ "./features/Tournaments/pages/TournamentDetailsPage/TournamentDetailsPage"))) +// const TournamentDetailsPage = Loadable(React.lazy(() => import( /* webpackChunkName: "hackathons_page" */ "./features/Tournaments/pages/TournamentDetailsPage/TournamentDetailsPage"))) -const DonatePage = Loadable(React.lazy(() => import( /* webpackChunkName: "donate_page" */ "./features/Donations/pages/DonatePage/DonatePage"))) -const LoginPage = Loadable(React.lazy(() => import( /* webpackChunkName: "login_page" */ "./features/Auth/pages/LoginPage/LoginPage"))) -const LogoutPage = Loadable(React.lazy(() => import( /* webpackChunkName: "logout_page" */ "./features/Auth/pages/LogoutPage/LogoutPage"))) -const ProfilePage = Loadable(React.lazy(() => import( /* webpackChunkName: "profile_page" */ "./features/Profiles/pages/ProfilePage/ProfilePage"))) -const EditProfilePage = Loadable(React.lazy(() => import( /* webpackChunkName: "edit_profile_page" */ "./features/Profiles/pages/EditProfilePage/EditProfilePage"))) +// const DonatePage = Loadable(React.lazy(() => import( /* webpackChunkName: "donate_page" */ "./features/Donations/pages/DonatePage/DonatePage"))) +// const LoginPage = Loadable(React.lazy(() => import( /* webpackChunkName: "login_page" */ "./features/Auth/pages/LoginPage/LoginPage"))) +// const LogoutPage = Loadable(React.lazy(() => import( /* webpackChunkName: "logout_page" */ "./features/Auth/pages/LogoutPage/LogoutPage"))) +// const ProfilePage = Loadable(React.lazy(() => import( /* webpackChunkName: "profile_page" */ "./features/Profiles/pages/ProfilePage/ProfilePage"))) +// const EditProfilePage = Loadable(React.lazy(() => import( /* webpackChunkName: "edit_profile_page" */ "./features/Profiles/pages/EditProfilePage/EditProfilePage"))) +const ExplorePage = Loadable(React.lazy(() => import( /* webpackChunkName: "explore_page" */ "src/features/Projects/pages/ExplorePage/ExplorePage"))) @@ -45,14 +43,14 @@ function App() { const dispatch = useAppDispatch(); useWrapperSetup() - useMeQuery({ - onCompleted: (data) => { - dispatch(setUser(data.me)) - }, - onError: (error) => { - dispatch(setUser(null)) - }, - }); + // useMeQuery({ + // onCompleted: (data) => { + // dispatch(setUser(data.me)) + // }, + // onError: (error) => { + // dispatch(setUser(null)) + // }, + // }); useEffect(() => { // if (typeof window.webln != "undefined") { @@ -93,12 +91,12 @@ function App() { }> - } /> + {/* } /> */} }> - } /> + {/* } /> } /> - } /> + } /> } /> } /> @@ -117,9 +115,9 @@ function App() { } /> } /> - } /> - - } /> + } /> */} + } /> + } /> diff --git a/src/features/Profiles/Components/Avatar/Avatar.stories.tsx b/src/Components/Avatar/Avatar.stories.tsx similarity index 100% rename from src/features/Profiles/Components/Avatar/Avatar.stories.tsx rename to src/Components/Avatar/Avatar.stories.tsx diff --git a/src/features/Profiles/Components/Avatar/Avatar.tsx b/src/Components/Avatar/Avatar.tsx similarity index 100% rename from src/features/Profiles/Components/Avatar/Avatar.tsx rename to src/Components/Avatar/Avatar.tsx diff --git a/src/Components/Inputs/FilesInputs/AvatarInput/AvatarInput.stories.tsx b/src/Components/Inputs/FilesInputs/AvatarInput/AvatarInput.stories.tsx deleted file mode 100644 index 73f451e..0000000 --- a/src/Components/Inputs/FilesInputs/AvatarInput/AvatarInput.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react' -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import AvatarInput from './AvatarInput'; -import { WrapFormController } from 'src/utils/storybook/decorators'; -import { ImageType } from '../SingleImageUploadInput/SingleImageUploadInput'; - -export default { - title: 'Shared/Inputs/Files Inputs/Avatar ', - component: AvatarInput, - decorators: [ - WrapFormController<{ avatar: ImageType | null }>({ - logValues: true, - name: "avatar", - defaultValues: { - avatar: null - } - })] -} as ComponentMeta; - -const Template: ComponentStory = (args, context) => { - - return - -} - - -export const Default = Template.bind({}); -Default.args = { -} \ No newline at end of file diff --git a/src/Components/Inputs/FilesInputs/AvatarInput/AvatarInput.tsx b/src/Components/Inputs/FilesInputs/AvatarInput/AvatarInput.tsx deleted file mode 100644 index e912eca..0000000 --- a/src/Components/Inputs/FilesInputs/AvatarInput/AvatarInput.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { motion } from 'framer-motion'; -import React, { ComponentProps, useRef } from 'react' -import { AiOutlineCloudUpload } from 'react-icons/ai'; -import { CgArrowsExchangeV } from 'react-icons/cg'; -import { FiCamera } from 'react-icons/fi'; -import { IoMdClose } from 'react-icons/io'; -import { RotatingLines } from 'react-loader-spinner'; -import { Nullable } from 'remirror'; -import { useIsDraggingOnElement } from 'src/utils/hooks'; -import SingleImageUploadInput from '../SingleImageUploadInput/SingleImageUploadInput' - -type Value = ComponentProps['value'] - -interface Props { - width?: number; - isRemovable?: boolean - value: Value; - onChange: (new_value: Nullable) => void -} - -export default function AvatarInput(props: Props) { - - const dropAreaRef = useRef(null!) - const isDragging = useIsDraggingOnElement({ ref: dropAreaRef }); - - return ( -
- -
- {!img && -
-

-
- Add Image -
-
} - {img && - <> - - {!isUploading && -
- - {props.isRemovable && } -
- } - } - {isUploading && -
- -
- } - {isDraggingOnWindow && -
- - - - -
- } -
} - /> -
- - ) -} diff --git a/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.stories.tsx b/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.stories.tsx deleted file mode 100644 index 9bedfe5..0000000 --- a/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.stories.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react' -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { WrapFormController } from 'src/utils/storybook/decorators'; -import { ImageType } from '../SingleImageUploadInput/SingleImageUploadInput'; -import CoverImageInput from './CoverImageInput'; - -export default { - title: 'Shared/Inputs/Files Inputs/Cover Image ', - component: CoverImageInput, - decorators: [ - WrapFormController<{ thumbnail: ImageType | null }>({ - logValues: true, - name: "thumbnail", - defaultValues: { - thumbnail: null - } - })] -} as ComponentMeta; - -const Template: ComponentStory = (args, context) => { - - return
- -
- -} - - -export const Default = Template.bind({}); -Default.args = { -} \ No newline at end of file diff --git a/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.tsx b/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.tsx deleted file mode 100644 index 98e0a5b..0000000 --- a/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import React, { ComponentProps, useEffect, useRef, useState } from 'react' -import { FaImage } from 'react-icons/fa'; -import { CgArrowsExchangeV } from 'react-icons/cg'; -import { IoMdClose } from 'react-icons/io'; -import { RotatingLines } from 'react-loader-spinner'; -import { Nullable } from 'remirror'; -import SingleImageUploadInput from '../SingleImageUploadInput/SingleImageUploadInput' -import { motion } from 'framer-motion'; -import { AiOutlineCloudUpload } from 'react-icons/ai'; -import { useIsDraggingOnElement } from 'src/utils/hooks'; - -type Value = ComponentProps['value'] - -interface Props { - value: Value; - rounded?: string; - onChange: (new_value: Nullable) => void -} - -export default function CoverImageInput(props: Props) { - - const dropAreaRef = useRef(null!) - const isDragging = useIsDraggingOnElement({ ref: dropAreaRef }); - - - return ( -
- -
- {!img &&
-

-
- Drop a COVER IMAGE here or
Click to browse -
-
} - {img && <> - - {!isUploading && -
- - - -
- } - } - {isUploading && -
- -
- } - {isDraggingOnWindow && -
- - - -
- Drop here to upload - -
- } -
} - /> -
- - ) -} diff --git a/src/Components/Inputs/FilesInputs/FileUploadInput/FileUploadInput.stories.tsx b/src/Components/Inputs/FilesInputs/FileUploadInput/FileUploadInput.stories.tsx deleted file mode 100644 index 2e5b4dd..0000000 --- a/src/Components/Inputs/FilesInputs/FileUploadInput/FileUploadInput.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import FileUploadInput from './FileUploadInput'; - -export default { - title: 'Shared/Inputs/Files Inputs/Basic', - component: FileUploadInput, - -} as ComponentMeta; - -const Template: ComponentStory = (args) => - - -export const DefaultButton = Template.bind({}); -DefaultButton.args = { -} \ No newline at end of file diff --git a/src/Components/Inputs/FilesInputs/FileUploadInput/FileUploadInput.tsx b/src/Components/Inputs/FilesInputs/FileUploadInput/FileUploadInput.tsx deleted file mode 100644 index ebfef3c..0000000 --- a/src/Components/Inputs/FilesInputs/FileUploadInput/FileUploadInput.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import Uploady, { useUploady, useRequestPreSend, UPLOADER_EVENTS, } from "@rpldy/uploady"; -import { asUploadButton } from "@rpldy/upload-button"; -import Button from "src/Components/Button/Button"; -import { fetchUploadUrl } from "../fetch-upload-img-url"; -import ImagePreviews from "./ImagePreviews"; -import { FaImage } from "react-icons/fa"; -import UploadDropZone from "@rpldy/upload-drop-zone"; -import { forwardRef, useCallback } from "react"; -import styles from './styles.module.scss' -import { MdFileUpload } from "react-icons/md"; -import { AiOutlineCloudUpload } from "react-icons/ai"; -import { motion } from "framer-motion"; - -interface Props { - url: string; -} - -const UploadBtn = asUploadButton((props: any) => { - - useRequestPreSend(async (data) => { - - const filename = data.items?.[0].file.name ?? '' - - const url = await fetchUploadUrl({ filename }); - return { - options: { - destination: { - url - } - } - } - }) - - // const handleClick = async () => { - // // Make a request to get the url - // try { - // var bodyFormData = new FormData(); - // bodyFormData.append('requireSignedURLs', "false"); - // const res = await axios({ - // url: 'https://cors-anywhere.herokuapp.com/https://api.cloudflare.com/client/v4/accounts/783da4f06e5fdb9012c0632959a6f5b3/images/v2/direct_upload', - // method: 'POST', - // data: bodyFormData, - // headers: { - // "Authorization": "Bearer Xx2-CdsTliYkq6Ayz-1GX4CZubdQVxMwOSDbajP0", - // } - // }) - // uploady.upload(res.data.result.uploadUrl, { - // destination: res.data.result.uploadUrl - // }) - // } catch (error) { - // console.log(error); - - // } - - - // // make the request with the files - // // uploady.upload() - // } - - return -}); - - -const DropZone = forwardRef((props, ref) => { - const { onClick, ...buttonProps } = props; - - useRequestPreSend(async (data) => { - - const filename = data.items?.[0].file.name ?? '' - - const url = await fetchUploadUrl({ filename }); - return { - options: { - destination: { - url - } - } - } - }) - - const onZoneClick = useCallback( - (e: any) => { - if (onClick) { - onClick(e); - } - }, - [onClick] - ); - - return -
- Drop your IMAGES here or -
- - - Drop it to upload - - -}) - -const DropZoneButton = asUploadButton(DropZone); - - -export default function FileUploadInput(props: Props) { - return ( - { - const { id, filename, variants } = item?.uploadResponse?.data?.result ?? {} - if (id) { - console.log(id, filename, variants); - } - } - }} - > - - {/* */} - - - ) -} diff --git a/src/Components/Inputs/FilesInputs/FileUploadInput/ImagePreviews.tsx b/src/Components/Inputs/FilesInputs/FileUploadInput/ImagePreviews.tsx deleted file mode 100644 index e28b375..0000000 --- a/src/Components/Inputs/FilesInputs/FileUploadInput/ImagePreviews.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import UploadPreview, { PreviewComponentProps, PreviewMethods } from '@rpldy/upload-preview' -import { useAbortItem, useItemAbortListener, useItemCancelListener, useItemErrorListener, useItemProgressListener } from '@rpldy/uploady'; -import React, { useState } from 'react' -import { RotatingLines } from 'react-loader-spinner'; - -export default function ImagePreviews() { - return ( -
- -
- ) -} - -function CustomImagePreview({ id, url }: PreviewComponentProps) { - - const [progress, setProgress] = useState(0); - const [itemState, setItemState] = useState(STATES.PROGRESS); - - - useItemProgressListener(item => { - if (item.completed > progress) { - setProgress(() => item.completed); - - if (item.completed === 100) { - setItemState(STATES.DONE) - } else { - setItemState(STATES.PROGRESS) - } - } - }, id); - - - - useItemAbortListener(item => { - setItemState(STATES.CANCELLED); - }, id); - - - useItemCancelListener(item => { - setItemState(STATES.CANCELLED); - }, id); - - useItemErrorListener(item => { - setItemState(STATES.ERROR); - }, id); - - return
- -
-
- {itemState === STATES.PROGRESS && -
- -
} - {itemState === STATES.ERROR && -
- Failed... -
} - {itemState === STATES.CANCELLED && -
- Cancelled -
} -
; -}; - -const STATES = { - PROGRESS: "PROGRESS", - DONE: "DONE", - CANCELLED: "CANCELLED", - ERROR: "ERROR" -}; - -const STATE_COLORS = { - [STATES.PROGRESS]: "#f4e4a4", - [STATES.DONE]: "#a5f7b3", - [STATES.CANCELLED]: "#f7cdcd", - [STATES.ERROR]: "#ee4c4c" -}; \ No newline at end of file diff --git a/src/Components/Inputs/FilesInputs/FileUploadInput/styles.module.scss b/src/Components/Inputs/FilesInputs/FileUploadInput/styles.module.scss deleted file mode 100644 index 217ca39..0000000 --- a/src/Components/Inputs/FilesInputs/FileUploadInput/styles.module.scss +++ /dev/null @@ -1,25 +0,0 @@ -.zone { - background-color: #f2f4f7; - border-color: #e4e7ec; - - .active_content { - display: none; - } - - .idle_content { - display: block; - } - - &.active { - background-color: #b3a0ff; - border-color: #9e88ff; - - .active_content { - display: block; - } - - .idle_content { - display: none; - } - } -} diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ImagePreviews.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ImagePreviews.tsx deleted file mode 100644 index 2917436..0000000 --- a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ImagePreviews.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import UploadPreview, { PreviewComponentProps, PreviewMethods } from '@rpldy/upload-preview' -import { useAbortItem, useItemAbortListener, useItemCancelListener, useItemErrorListener, useItemFinishListener, useItemProgressListener } from '@rpldy/uploady'; -import { useState } from 'react' -import ScreenShotsThumbnail from './ScreenshotThumbnail' - -export default function ImagePreviews() { - return ( - - ) -} - -function CustomImagePreview({ id, url }: PreviewComponentProps) { - - const [progress, setProgress] = useState(0); - const [itemState, setItemState] = useState(STATES.PROGRESS); - - const abortItem = useAbortItem(); - - - useItemProgressListener(item => { - if (item.completed > progress) { - setProgress(() => item.completed); - } - }, id); - - useItemFinishListener(() => setItemState(STATES.DONE), id) - - - - useItemAbortListener(item => { - setItemState(STATES.CANCELLED); - }, id); - - - useItemCancelListener(item => { - setItemState(STATES.CANCELLED); - }, id); - - useItemErrorListener(item => { - console.log(item); - - setItemState(STATES.ERROR); - setTimeout(() => setItemState(STATES.CANCELLED), 2000) - }, id); - - if (itemState === STATES.DONE || itemState === STATES.CANCELLED) - return null - - return { - abortItem(id) - }} - /> - - // return
- // - //
- //
- // {itemState === STATES.PROGRESS && - //
- // - //
} - // {itemState === STATES.ERROR && - //
- // Failed... - //
} - // {itemState === STATES.CANCELLED && - //
- // Cancelled - //
} - //
; -}; - -const STATES = { - PROGRESS: "PROGRESS", - DONE: "DONE", - CANCELLED: "CANCELLED", - ERROR: "ERROR" -}; diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotThumbnail.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotThumbnail.tsx deleted file mode 100644 index 5f64ac6..0000000 --- a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotThumbnail.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react' -import { FaTimes } from 'react-icons/fa'; -import { RotatingLines } from 'react-loader-spinner'; - -interface Props { - url?: string, - isLoading?: boolean; - isError?: boolean; - onCancel?: () => void; - -} - -export default function ScreenshotThumbnail({ url, isLoading, isError, onCancel }: Props) { - - const isEmpty = !url; - - return ( -
- {!isEmpty && } -
-
- {isLoading && -
- -
} - {isError && -
- Failed... -
} - {!isEmpty && - - } -
- ) -} diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.stories.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.stories.tsx deleted file mode 100644 index e308f85..0000000 --- a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.stories.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react' -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import ScreenshotsInput from './ScreenshotsInput'; -import { WrapForm, WrapFormController } from 'src/utils/storybook/decorators'; -import { ImageInput } from 'src/graphql'; - -export default { - title: 'Shared/Inputs/Files Inputs/Screenshots', - component: ScreenshotsInput, - decorators: [ - WrapFormController<{ screenshots: Array }>({ - logValues: true, - name: "screenshots", - defaultValues: { - screenshots: [] - } - })] -} as ComponentMeta; - -const Template: ComponentStory = (args, context) => { - - return - -} - - -export const Empty = Template.bind({}); -Empty.args = { -} - -export const WithValues = Template.bind({}); -WithValues.decorators = [ - WrapFormController<{ screenshots: Array }>({ - logValues: true, - name: "screenshots", - defaultValues: { - screenshots: [{ - id: '123', - name: 'tree', - url: "https://picsum.photos/id/1021/800/800.jpg" - }, - { - id: '555', - name: 'whatever', - url: "https://picsum.photos/id/600/800/800.jpg" - },] - } - }) as any -]; -WithValues.args = { -} - -export const Full = Template.bind({}); -Full.decorators = [ - WrapFormController<{ screenshots: Array }>({ - logValues: true, - name: "screenshots", - defaultValues: { - screenshots: [ - { - id: '123', - name: 'tree', - url: "https://picsum.photos/id/1021/800/800.jpg" - }, - { - id: '555', - name: 'whatever', - url: "https://picsum.photos/id/600/800/800.jpg" - }, - { - id: '562', - name: 'Moon', - url: "https://picsum.photos/id/32/800/800.jpg" - }, - { - id: '342', - name: 'Sun', - url: "https://picsum.photos/id/523/800/800.jpg" - }, - ] - } - }) as any -]; -Full.args = { -} \ No newline at end of file diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx deleted file mode 100644 index c1b8aa2..0000000 --- a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import Uploady, { useRequestPreSend, UPLOADER_EVENTS } from "@rpldy/uploady"; -import { asUploadButton } from "@rpldy/upload-button"; -// import { fetchUploadUrl } from "./fetch-upload-img-url"; -import ImagePreviews from "./ImagePreviews"; -import UploadDropZone from "@rpldy/upload-drop-zone"; -import { forwardRef, useCallback, useState } from "react"; -import styles from './styles.module.scss' -import { AiOutlineCloudUpload } from "react-icons/ai"; -import { motion } from "framer-motion"; -import { getMockSenderEnhancer } from "@rpldy/mock-sender"; -import ScreenshotThumbnail from "./ScreenshotThumbnail"; -import { FiCamera } from "react-icons/fi"; -import { Control, Path, useController } from "react-hook-form"; -import { ImageInput } from "src/graphql"; -import { fetchUploadImageUrl } from "src/api/uploading"; -import { removeArrayItemAtIndex } from "src/utils/helperFunctions"; - - - -const mockSenderEnhancer = getMockSenderEnhancer({ - delay: 1500, -}); - -const MAX_UPLOAD_COUNT = 4 as const; - - -interface Image extends ImageInput { - local_id?: string -} - -interface Props { - value: Image[], - onChange: (new_value: Image[]) => void -} - - -export default function ScreenshotsInput(props: Props) { - - const { value: uploadedFiles, onChange } = props; - - - const [uploadingCount, setUploadingCount] = useState(0) - - - const canUploadMore = uploadingCount + uploadedFiles.length < MAX_UPLOAD_COUNT; - const placeholdersCount = (MAX_UPLOAD_COUNT - (uploadingCount + uploadedFiles.length + 1)); - - - return ( - { - setUploadingCount(v => v + batch.items.length) - }, - [UPLOADER_EVENTS.ITEM_FINALIZE]: () => setUploadingCount(v => v - 1), - [UPLOADER_EVENTS.ITEM_FINISH]: (item) => { - - const { id, filename, variants } = item?.uploadResponse?.data?.result; - const url = (variants as string[]).find(v => v.includes('public')); - if (id && url) { - onChange([...uploadedFiles, { id, local_id: id, name: filename, url: url }].slice(-MAX_UPLOAD_COUNT)) - } - } - }} - > - -
- - {uploadedFiles.map((f, idx) => { - onChange(removeArrayItemAtIndex(uploadedFiles, idx)) - }} />)} - - {(placeholdersCount > 0) && - Array(placeholdersCount).fill(0).map((_, idx) => )} -
- - ) -} - -const DropZone = forwardRef((props, ref) => { - const { canUploadMore, onClick, ...buttonProps } = props; - - - useRequestPreSend(async (data) => { - const filename = data.items?.[0].file.name ?? '' - - const res = await fetchUploadImageUrl({ filename }); - - return { - options: { - destination: { - url: res.uploadURL - }, - } - } - - }) - - const onZoneClick = useCallback( - (e: any) => { - if (onClick) { - onClick(e); - } - }, - [onClick] - ); - - if (!canUploadMore) return null - - return -
-

-
- Browse images or
drop - them here -
-
- - - Drop to upload
- - -}) - -const DropZoneButton = asUploadButton(DropZone); diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/styles.module.scss b/src/Components/Inputs/FilesInputs/ScreenshotsInput/styles.module.scss deleted file mode 100644 index 217ca39..0000000 --- a/src/Components/Inputs/FilesInputs/ScreenshotsInput/styles.module.scss +++ /dev/null @@ -1,25 +0,0 @@ -.zone { - background-color: #f2f4f7; - border-color: #e4e7ec; - - .active_content { - display: none; - } - - .idle_content { - display: block; - } - - &.active { - background-color: #b3a0ff; - border-color: #9e88ff; - - .active_content { - display: block; - } - - .idle_content { - display: none; - } - } -} diff --git a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/ImagePreviews.tsx b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/ImagePreviews.tsx deleted file mode 100644 index 74d4d64..0000000 --- a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/ImagePreviews.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import UploadPreview, { PreviewComponentProps, PreviewMethods } from '@rpldy/upload-preview' -import { useAbortItem, useItemAbortListener, useItemCancelListener, useItemErrorListener, useItemProgressListener } from '@rpldy/uploady'; -import { useState } from 'react' -import ScreenShotsThumbnail from './ScreenshotThumbnail' - -export default function ImagePreviews() { - return ( - - ) -} - -function CustomImagePreview({ id, url }: PreviewComponentProps) { - - const [progress, setProgress] = useState(0); - const [itemState, setItemState] = useState(STATES.PROGRESS); - - const abortItem = useAbortItem(); - - - useItemProgressListener(item => { - if (item.completed > progress) { - setProgress(() => item.completed); - - if (item.completed === 100) { - setItemState(STATES.DONE) - } else { - setItemState(STATES.PROGRESS) - } - } - }, id); - - - - useItemAbortListener(item => { - setItemState(STATES.CANCELLED); - }, id); - - - useItemCancelListener(item => { - setItemState(STATES.CANCELLED); - }, id); - - useItemErrorListener(item => { - setItemState(STATES.ERROR); - }, id); - - if (itemState === STATES.DONE || itemState === STATES.CANCELLED) - return null - - return { - abortItem(id) - }} - /> - - // return
- // - //
- //
- // {itemState === STATES.PROGRESS && - //
- // - //
} - // {itemState === STATES.ERROR && - //
- // Failed... - //
} - // {itemState === STATES.CANCELLED && - //
- // Cancelled - //
} - //
; -}; - -const STATES = { - PROGRESS: "PROGRESS", - DONE: "DONE", - CANCELLED: "CANCELLED", - ERROR: "ERROR" -}; diff --git a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/ScreenshotThumbnail.tsx b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/ScreenshotThumbnail.tsx deleted file mode 100644 index 0003c43..0000000 --- a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/ScreenshotThumbnail.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react' -import { FaTimes } from 'react-icons/fa'; -import { RotatingLines } from 'react-loader-spinner'; - -interface Props { - url?: string, - isLoading?: boolean; - isError?: boolean; - onCancel?: () => void; - -} - -export default function ScreenshotThumbnail({ url, isLoading, isError, onCancel }: Props) { - - const isEmpty = !url; - - return ( -
- {!isEmpty && } -
-
- {isLoading && -
- -
} - {isError && -
- Failed... -
} - {!isEmpty && - - } -
- ) -} diff --git a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/SingleImageUploadInput.stories.tsx b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/SingleImageUploadInput.stories.tsx deleted file mode 100644 index 06e9fe5..0000000 --- a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/SingleImageUploadInput.stories.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react' -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import SingleImageUploadInput, { ImageType } from './SingleImageUploadInput'; -import { WrapFormController } from 'src/utils/storybook/decorators'; -import { RotatingLines } from 'react-loader-spinner'; -import { FiCamera, } from 'react-icons/fi'; -import { FaExchangeAlt, FaImage } from 'react-icons/fa'; - -export default { - title: 'Shared/Inputs/Files Inputs/Single Image Upload ', - component: SingleImageUploadInput, - decorators: [ - WrapFormController<{ avatar: ImageType | null }>({ - logValues: true, - name: "avatar", - defaultValues: { - avatar: null - } - })] -} as ComponentMeta; - -const Template: ComponentStory = (args, context) => { - - return - -} - - diff --git a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/SingleImageUploadInput.tsx b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/SingleImageUploadInput.tsx deleted file mode 100644 index 44b7ce0..0000000 --- a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/SingleImageUploadInput.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import Uploady, { useRequestPreSend, UPLOADER_EVENTS, useAbortAll } from "@rpldy/uploady"; -import { asUploadButton } from "@rpldy/upload-button"; -// import { fetchUploadUrl } from "./fetch-upload-img-url"; -import UploadDropZone from "@rpldy/upload-drop-zone"; -import { forwardRef, ReactElement, useCallback, useState } from "react"; -import styles from './styles.module.scss' -import { getMockSenderEnhancer } from "@rpldy/mock-sender"; -import { NotificationsService } from "src/services"; -import { useIsDraggingOnElement } from 'src/utils/hooks'; -import { fetchUploadImageUrl } from "src/api/uploading"; - - - -const mockSenderEnhancer = getMockSenderEnhancer({ - delay: 1500, - -}); - - -export interface ImageType { - id?: string | null, - name?: string | null, - url: string; -} - -type RenderPropArgs = { - isUploading?: boolean; - img: ImageType | null, - onAbort: () => void, - isDraggingOnWindow?: boolean -} - -interface Props { - value: ImageType | null | undefined, - onChange: (new_value: ImageType | null) => void; - wrapperClass?: string; - render: (args: RenderPropArgs) => ReactElement; -} - - -export default function SingleImageUploadInput(props: Props) { - - const { value, onChange, render } = props; - - - const [currentlyUploadingItem, setCurrentlyUploadingItem] = useState(null) - - - return ( - { - onChange(null) - - setCurrentlyUploadingItem({ - id: item.id, - url: URL.createObjectURL(item.file), - name: item.file.name, - }) - }, - [UPLOADER_EVENTS.ITEM_ERROR]: (item) => { - NotificationsService.error("An error happened while uploading. Please try again.") - }, - [UPLOADER_EVENTS.ITEM_FINALIZE]: () => setCurrentlyUploadingItem(null), - [UPLOADER_EVENTS.ITEM_FINISH]: (item) => { - - const { id, filename, variants } = item?.uploadResponse?.data?.result; - const url = (variants as string[]).find(v => v.includes('public')); - - if (id && url) { - onChange({ id, name: filename, url, }) - } - } - }} - > - - - ) -} - - -const DropZone = forwardRef((props, ref) => { - const { onClick, children, renderProps, ...buttonProps } = props; - - const isDraggingOnWindow = useIsDraggingOnElement() - - useRequestPreSend(async (data) => { - - const filename = data.items?.[0].file.name ?? '' - - const res = await fetchUploadImageUrl({ filename }); - - return { - options: { - destination: { - url: res.uploadURL - }, - } - } - }) - - const onZoneClick = useCallback( - (e: any) => { - if (onClick) { - onClick(e); - } - }, - [onClick] - ); - - return - - {renderProps.render({ - img: renderProps.img, - isUploading: renderProps.isUploading, - isDraggingOnWindow, - })} - -}) - -const DropZoneButton = asUploadButton(DropZone); diff --git a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/styles.module.scss b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/styles.module.scss deleted file mode 100644 index 217ca39..0000000 --- a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/styles.module.scss +++ /dev/null @@ -1,25 +0,0 @@ -.zone { - background-color: #f2f4f7; - border-color: #e4e7ec; - - .active_content { - display: none; - } - - .idle_content { - display: block; - } - - &.active { - background-color: #b3a0ff; - border-color: #9e88ff; - - .active_content { - display: block; - } - - .idle_content { - display: none; - } - } -} diff --git a/src/Components/Inputs/FilesInputs/ThumbnailInput/ThumbnailInput.stories.tsx b/src/Components/Inputs/FilesInputs/ThumbnailInput/ThumbnailInput.stories.tsx deleted file mode 100644 index a7ad6b3..0000000 --- a/src/Components/Inputs/FilesInputs/ThumbnailInput/ThumbnailInput.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react' -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import ThumbnailInput from './ThumbnailInput'; -import { WrapFormController } from 'src/utils/storybook/decorators'; -import { ImageType } from '../SingleImageUploadInput/SingleImageUploadInput'; - -export default { - title: 'Shared/Inputs/Files Inputs/Thumbnail ', - component: ThumbnailInput, - decorators: [ - WrapFormController<{ thumbnail: ImageType | null }>({ - logValues: true, - name: "thumbnail", - defaultValues: { - thumbnail: null - } - })] -} as ComponentMeta; - -const Template: ComponentStory = (args, context) => { - - return - -} - - -export const Default = Template.bind({}); -Default.args = { -} \ No newline at end of file diff --git a/src/Components/Inputs/FilesInputs/ThumbnailInput/ThumbnailInput.tsx b/src/Components/Inputs/FilesInputs/ThumbnailInput/ThumbnailInput.tsx deleted file mode 100644 index 1b677fa..0000000 --- a/src/Components/Inputs/FilesInputs/ThumbnailInput/ThumbnailInput.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React, { ComponentProps } from 'react' -import { FiCamera } from 'react-icons/fi'; -import { RotatingLines } from 'react-loader-spinner'; -import { Nullable } from 'remirror'; -import SingleImageUploadInput from '../SingleImageUploadInput/SingleImageUploadInput' - -type Value = ComponentProps['value'] - -interface Props { - width?: number - value: Value; - onChange: (new_value: Nullable) => void -} - -export default function ThumbnailInput(props: Props) { - return ( -
-
- {img && } - {!img && - <> -

-
- Add Image -
- } - {isUploading && -
- -
- } -
} - /> -
- - ) -} diff --git a/src/Components/Inputs/FilesInputs/fetch-upload-img-url.tsx b/src/Components/Inputs/FilesInputs/fetch-upload-img-url.tsx deleted file mode 100644 index e2c9b19..0000000 --- a/src/Components/Inputs/FilesInputs/fetch-upload-img-url.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import axios from "axios"; -import { NotificationsService } from "src/services"; - -export async function fetchUploadUrl(options?: Partial<{ filename: string }>) { - - const { filename } = options ?? {} - - try { - const bodyFormData = new FormData(); - bodyFormData.append('requireSignedURLs', "false"); - const res = await axios({ - url: 'https://cors-anywhere.herokuapp.com/https://api.cloudflare.com/client/v4/accounts/783da4f06e5fdb9012c0632959a6f5b3/images/v2/direct_upload', - method: 'POST', - data: bodyFormData, - headers: { - "Authorization": "Bearer XXX", - } - }) - return res.data.result.uploadURL as string; - } catch (error) { - console.log(error); - NotificationsService.error("A network error happened.") - return "couldnt fetch upload url"; - } -} \ No newline at end of file diff --git a/src/Components/Inputs/TagsInput/TagsInput.stories.tsx b/src/Components/Inputs/TagsInput/TagsInput.stories.tsx deleted file mode 100644 index 8caa038..0000000 --- a/src/Components/Inputs/TagsInput/TagsInput.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { WrapForm } from 'src/utils/storybook/decorators'; - -import TagsInput from './TagsInput'; - -export default { - title: 'Shared/Inputs/Tags Input', - component: TagsInput, - argTypes: { - backgroundColor: { control: 'color' }, - }, - decorators: [WrapForm({ - defaultValues: { - tags: [{ - title: "Webln" - }] - } - })] -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
-

- Enter Tags: -

- -
- -export const Default = Template.bind({}); diff --git a/src/Components/Inputs/TagsInput/TagsInput.tsx b/src/Components/Inputs/TagsInput/TagsInput.tsx deleted file mode 100644 index da897db..0000000 --- a/src/Components/Inputs/TagsInput/TagsInput.tsx +++ /dev/null @@ -1,181 +0,0 @@ - -import { useController } from "react-hook-form"; -// import CreatableSelect from 'react-select/creatable'; -import Select from 'react-select' -import { OnChangeValue, StylesConfig, components, OptionProps, } from "react-select"; -import { OfficialTagsQuery, useOfficialTagsQuery } from "src/graphql"; -import React from "react"; - -interface Option { - readonly label: string; - readonly value: string; - readonly icon: string | null - readonly description: string | null -} - - -type Tag = Omit -type Value = { title: Tag['title'] } - -interface Props { - classes?: { - container?: string - input?: string - } - placeholder?: string - max?: number; - value: Value[]; - onChange?: (new_value: Value[]) => void; - onBlur?: () => void; - [k: string]: any -} - - - -export default function TagsInput({ - classes, - placeholder = 'Write some tags', - max = 5, - value, - onChange, - onBlur, - ...props }: Props) { - - const officalTags = useOfficialTagsQuery(); - - - const handleChange = (newValue: OnChangeValue,) => { - onChange?.([...newValue.map(transformer.optionToTag)]); - onBlur?.(); - } - - - - const maxReached = value.length >= max; - const currentPlaceholder = props.placeholder ??
- {maxReached ? '' : value.length > 0 ? "Add Another..." : placeholder}
- - - const tagsOptions = !maxReached ? (officalTags.data?.officialTags ?? []).filter(t => !value.some((v) => v.title === t.title)).map(transformer.tagToOption) : []; - - return ( -
- setUrlInput(e.target.value)} - placeholder='https://images.com/my-image' - /> -
- -
-

- Alt Text -

-
- setAltInput(e.target.value)} - placeholder='' - /> -
-
- -
- {urlInput && {altInput}} -
*/} -
- {img && <> - - {!isUploading && - } - } - {!img && - <> -

-
- Drop an IMAGE here or
Click to browse -
- } - {isUploading && -
- -
- } - {isDraggingOnWindow && -
- - - -
- Drop here to upload - -
- } -
} - /> -
-

- Alternative Text -

-
- setAltInput(e.target.value)} - placeholder='A description for the content of this image' - /> -
-
-
- - -
- - - - ) -} diff --git a/src/Components/Modals/InsertImageModal/index.tsx b/src/Components/Modals/InsertImageModal/index.tsx deleted file mode 100644 index 5656e18..0000000 --- a/src/Components/Modals/InsertImageModal/index.tsx +++ /dev/null @@ -1,4 +0,0 @@ - -import { lazyModal } from 'src/utils/helperFunctions'; - -export const { LazyComponent: InsertImageModal } = lazyModal(() => import('./InsertImageModal')) \ No newline at end of file diff --git a/src/Components/Navbar/CategoriesList/CategoriesList.stories.tsx b/src/Components/Navbar/CategoriesList/CategoriesList.stories.tsx deleted file mode 100644 index 7ba9297..0000000 --- a/src/Components/Navbar/CategoriesList/CategoriesList.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { Menu, MenuButton } from '@szhsin/react-menu'; -import Button from 'src/Components/Button/Button'; - -import CategoriesList from './CategoriesList'; - -export default { - title: 'Shared/Navbar/CategoriesList', - component: CategoriesList, - -} as ComponentMeta; - -const Template: ComponentStory = (args) => Open Categories Menu}> - -; - -export const Default = Template.bind({}); -Default.args = { -} - diff --git a/src/Components/Navbar/CategoriesList/CategoriesList.tsx b/src/Components/Navbar/CategoriesList/CategoriesList.tsx deleted file mode 100644 index b682f6f..0000000 --- a/src/Components/Navbar/CategoriesList/CategoriesList.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { - MenuItem, -} from '@szhsin/react-menu' -import Skeleton from 'react-loading-skeleton' -import { Link, useNavigate } from 'react-router-dom' -import { useNavCategoriesQuery } from 'src/graphql' -import { numberFormatter } from 'src/utils/helperFunctions' - -interface Props { - // categories: Pick[] - classes?: Partial<{ item: string }> - onClick?: (categoryId: number) => void -} - -; - - -export default function CategoriesList({ classes = {}, onClick }: Props) { - - const { data, loading } = useNavCategoriesQuery() - const navigate = useNavigate() - - if (loading) - return <> - {Array(5).fill(0).map((_, idx) => -
  • - -
    • - )} - - - return ( - <> - {data?.allCategories.map(category => - { - e.syntheticEvent.preventDefault(); - onClick?.(category.id) - navigate(`/products/category/${category.id}`) - }} - > - {category.icon} {category.title} {numberFormatter(category.votes_sum)} - - )} - - ) -} diff --git a/src/Components/Navbar/CategoriesList/navCategories.graphql b/src/Components/Navbar/CategoriesList/navCategories.graphql deleted file mode 100644 index 4aa6b73..0000000 --- a/src/Components/Navbar/CategoriesList/navCategories.graphql +++ /dev/null @@ -1,8 +0,0 @@ -query NavCategories { - allCategories { - id - title - icon - votes_sum - } -} diff --git a/src/Components/Navbar/NavDesktop.tsx b/src/Components/Navbar/NavDesktop.tsx index e45b46a..dbac04e 100644 --- a/src/Components/Navbar/NavDesktop.tsx +++ b/src/Components/Navbar/NavDesktop.tsx @@ -2,7 +2,6 @@ import { BsSearch } from "react-icons/bs"; import { motion } from "framer-motion"; import { useAppSelector, useCurrentSection } from "src/utils/hooks"; import ASSETS from "src/assets"; -import Search from "./Search/Search"; import IconButton from "../IconButton/IconButton"; import { Link, useNavigate } from "react-router-dom"; import { useState } from "react"; @@ -13,7 +12,6 @@ import { } from '@szhsin/react-menu'; import '@szhsin/react-menu/dist/index.css'; import { FiChevronDown } from "react-icons/fi"; -import Avatar from "src/features/Profiles/Components/Avatar/Avatar"; import { createRoute, PAGES_ROUTES } from "src/utils/routing"; import Button from "../Button/Button"; @@ -24,7 +22,7 @@ export default function NavDesktop() { const { curUser } = useAppSelector((state) => ({ - curUser: state.user.me, + curUser: null, })); @@ -164,83 +162,8 @@ export default function NavDesktop() { : } */} - {currentSection === 'apps' && - - } - {curUser !== undefined && - (curUser ? - }> - { - e.syntheticEvent.preventDefault(); - navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name })); - }} - className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12' - > - 👾 Profile - - { - e.syntheticEvent.preventDefault(); - navigate("/edit-profile"); - }} - className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12' - > - ⚙️ Settings - - { - e.syntheticEvent.preventDefault(); - navigate("/logout"); - }} - className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12' - > - 👋 Logout - - - : - - ) - } -
    - - setSearchOpen(false)} - onResultClick={() => setSearchOpen(false)} - /> - -
    diff --git a/src/Components/Navbar/NavMobile.tsx b/src/Components/Navbar/NavMobile.tsx index b775ea0..6cbcd5d 100644 --- a/src/Components/Navbar/NavMobile.tsx +++ b/src/Components/Navbar/NavMobile.tsx @@ -4,7 +4,6 @@ import { BsChevronDown } from "react-icons/bs"; import { GrClose } from "react-icons/gr"; import Button from "../Button/Button"; import ASSETS from "src/assets"; -import Search from "./Search/Search"; import IconButton from "../IconButton/IconButton"; import { useAppSelector } from "src/utils/hooks"; import { FiMenu, } from "react-icons/fi"; @@ -13,8 +12,8 @@ import { useToggle } from "@react-hookz/web"; import styles from './styles.module.css' import '@szhsin/react-menu/dist/index.css'; import { Menu, MenuButton, MenuItem } from "@szhsin/react-menu"; -import Avatar from "src/features/Profiles/Components/Avatar/Avatar"; import { createRoute, PAGES_ROUTES } from "src/utils/routing"; +import Avatar from "../Avatar/Avatar"; const navBtnVariant = { menuHide: { rotate: 90, opacity: 0 }, @@ -59,7 +58,7 @@ export default function NavMobile() { const [communityOpen, toggleCommunityOpen] = useToggle(false) const { curUser } = useAppSelector((state) => ({ - curUser: state.user.me, + curUser: null, })); const navigate = useNavigate() @@ -90,7 +89,7 @@ export default function NavMobile() { -
    + {/*
    {curUser ? - }
    + }
    */} @@ -154,7 +153,7 @@ export default function NavMobile() { animate={drawerOpen ? "show" : "hide"} >
    - toggleDrawerOpen(false)} /> + {/* toggleDrawerOpen(false)} /> */}
      diff --git a/src/Components/Navbar/Search/Search.tsx b/src/Components/Navbar/Search/Search.tsx deleted file mode 100644 index cd99081..0000000 --- a/src/Components/Navbar/Search/Search.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import React, { FormEvent, useRef, useState } from 'react' -import { motion } from 'framer-motion' -import { BsSearch } from 'react-icons/bs'; -import { useClickOutside, useThrottledCallback, useUpdateEffect } from '@react-hookz/web' -import SearchResults from './SearchResults/SearchResults' -import { SearchProjectsQuery, useSearchProjectsLazyQuery } from 'src/graphql'; - -interface Props { - height?: number | string; - width?: number | string; - onClose?: () => void; - onResultClick?: () => void; - isOpen?: boolean; -} - -export type ProjectSearchItem = SearchProjectsQuery['searchProjects'][number]; - -const SearchResultsListVariants = { - hidden: { - opacity: 0, - y: 300, - display: 'none' - }, - visible: { - opacity: 1, - y: 16, - display: 'block' - } -} - - -export default function Search({ - width, - height, - onClose, - onResultClick, - isOpen -}: Props) { - - const inputRef = useRef(null); - const [searchInput, setSearchInput] = useState(""); - const containerRef = useRef(null) - - // const { isOpen } = useAppSelector(state => ({ - // isOpen: state.ui.isSearchOpen - // })) - // const dispatch = useAppDispatch() - - useClickOutside(containerRef, () => { - onClose?.() - }) - - - const [executeQuery, { data, loading }] = useSearchProjectsLazyQuery() - - const throttledExecuteQuery = useThrottledCallback((search: string) => { - executeQuery({ - variables: { - search - } - }) - }, [executeQuery], 500) - - const handleChange = (e: React.ChangeEvent) => { - setSearchInput(e.target.value); - throttledExecuteQuery(e.target.value) - } - - - - const handleSubmit = (e: FormEvent) => { - e.preventDefault(); - throttledExecuteQuery(searchInput) - // Make Search Request - // onSearch(searchInput); - }; - - useUpdateEffect(() => { - if (isOpen) - inputRef.current?.focus(); - else { - setSearchInput('') - } - - }, [isOpen]) - - - return ( -
      - {
      -
      - - { - if (e.key === 'Escape') onClose?.() - - }} - /> -
      - 0 ? 'visible' : 'hidden' - } - className="absolute top-full translate-y-8 w-full left-0"> - - -
      } -
      - ) -} diff --git a/src/Components/Navbar/Search/SearchProjectCard/SearchProjectCard.Skeleton.tsx b/src/Components/Navbar/Search/SearchProjectCard/SearchProjectCard.Skeleton.tsx deleted file mode 100644 index 8d35bc3..0000000 --- a/src/Components/Navbar/Search/SearchProjectCard/SearchProjectCard.Skeleton.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import Skeleton from 'react-loading-skeleton' - -export default function SearchProjectCardSkeleton() { - return
      - -
      -

      -

      -
      - -
      -} diff --git a/src/Components/Navbar/Search/SearchProjectCard/SearchProjectCard.stories.tsx b/src/Components/Navbar/Search/SearchProjectCard/SearchProjectCard.stories.tsx deleted file mode 100644 index 70af12c..0000000 --- a/src/Components/Navbar/Search/SearchProjectCard/SearchProjectCard.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { MOCK_DATA } from 'src/mocks/data'; - -import SearchProjectCard from './SearchProjectCard'; - -export default { - title: 'Shared/Navbar/Search/Result Project Card', - component: SearchProjectCard, - -} as ComponentMeta; - -const Template: ComponentStory = (args) =>
      - -
      ; - -export const Default = Template.bind({}); -Default.args = { - project: MOCK_DATA['projects'][0] -} - -export const Loading = Template.bind({}); -Loading.args = { - loading: true -} - diff --git a/src/Components/Navbar/Search/SearchProjectCard/SearchProjectCard.tsx b/src/Components/Navbar/Search/SearchProjectCard/SearchProjectCard.tsx deleted file mode 100644 index db422ea..0000000 --- a/src/Components/Navbar/Search/SearchProjectCard/SearchProjectCard.tsx +++ /dev/null @@ -1,35 +0,0 @@ - -import SearchProjectCardSkeleton from './SearchProjectCard.Skeleton' -import { ProjectSearchItem } from '../Search'; - -type Props = - { - loading: true - } - | - { - loading?: false - project: ProjectSearchItem - onClick: (projectId: number) => void; - } - -export default function SearchProjectCard(props: Props) { - - if (props.loading) - return - - - return ( -
      props.onClick(props.project.id)} - > - {props.project.title} -
      -

      {props.project.title}

      -

      {props.project.category.title}

      -
      - -
      - ) -} diff --git a/src/Components/Navbar/Search/SearchResults/SearchResults.stories.tsx b/src/Components/Navbar/Search/SearchResults/SearchResults.stories.tsx deleted file mode 100644 index 3d7666a..0000000 --- a/src/Components/Navbar/Search/SearchResults/SearchResults.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { MOCK_DATA } from 'src/mocks/data'; - -import SearchResults from './SearchResults'; - -export default { - title: 'Shared/Navbar/Search/Results List', - component: SearchResults, - -} as ComponentMeta; - -const Template: ComponentStory = (args) =>
      - -
      ; - -export const HasData = Template.bind({}); -HasData.args = { - projects: MOCK_DATA['projects'] -} - -export const Loading = Template.bind({}); -Loading.args = { - isLoading: true -} - diff --git a/src/Components/Navbar/Search/SearchResults/SearchResults.tsx b/src/Components/Navbar/Search/SearchResults/SearchResults.tsx deleted file mode 100644 index be42762..0000000 --- a/src/Components/Navbar/Search/SearchResults/SearchResults.tsx +++ /dev/null @@ -1,44 +0,0 @@ - -import { openModal } from 'src/redux/features/modals.slice'; -import { useAppDispatch } from 'src/utils/hooks'; -import { ProjectSearchItem } from '../Search'; -import SearchProjectCard from '../SearchProjectCard/SearchProjectCard'; -import styles from './styles.module.css' - -interface Props { - isLoading?: boolean; - projects: ProjectSearchItem[] | undefined, - onResultClick?: () => void -} - -export default function SearchResults({ projects, isLoading, onResultClick }: Props) { - - const dispatch = useAppDispatch(); - - const handleOpenProject = (projectId: number) => { - onResultClick?.() - dispatch(openModal({ Modal: "ProjectDetailsCard", props: { projectId } })) - } - - return ( -
      - { - isLoading && !projects ? - Array(3).fill(0).map((_, idx) => ) - : - <> -

      - {projects?.length} search results -

      - { - projects?.map(project => ) - } - - } - -
      - ) -} diff --git a/src/Components/Navbar/Search/SearchResults/styles.module.css b/src/Components/Navbar/Search/SearchResults/styles.module.css deleted file mode 100644 index 42ad1fa..0000000 --- a/src/Components/Navbar/Search/SearchResults/styles.module.css +++ /dev/null @@ -1,20 +0,0 @@ -/* width */ -.search-results::-webkit-scrollbar { - width: 4px; -} - -/* Track */ -.search-results::-webkit-scrollbar-track { - background: transparent; -} - -/* Handle */ -.search-results::-webkit-scrollbar-thumb { - border-radius: 10px; - background-color: #aaa; -} - -/* Handle on hover */ -.search-results::-webkit-scrollbar-thumb:hover { - background-color: #999; -} diff --git a/src/Components/Navbar/Search/searchQuery.graphql b/src/Components/Navbar/Search/searchQuery.graphql deleted file mode 100644 index 308356e..0000000 --- a/src/Components/Navbar/Search/searchQuery.graphql +++ /dev/null @@ -1,11 +0,0 @@ -query SearchProjects($search: String!) { - searchProjects(search: $search) { - id - thumbnail_image - title - category { - title - id - } - } -} diff --git a/src/Components/ProtectedRoute/ProtectedRoute.tsx b/src/Components/ProtectedRoute/ProtectedRoute.tsx index 0235323..ca7ff83 100644 --- a/src/Components/ProtectedRoute/ProtectedRoute.tsx +++ b/src/Components/ProtectedRoute/ProtectedRoute.tsx @@ -15,7 +15,8 @@ export default function ProtectedRoute({ children, }: PropsWithChildren) { - const user = useAppSelector(state => state.user.me); + // const user = useAppSelector(state => state.user.me); + const user = null; const location = useLocation(); diff --git a/src/Components/VoteButton/VoteButton.stories.tsx b/src/Components/VoteButton/VoteButton.stories.tsx deleted file mode 100644 index 827dd59..0000000 --- a/src/Components/VoteButton/VoteButton.stories.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { centerDecorator } from 'src/utils/storybook/decorators'; -import { ComponentProps } from 'react' - -import VoteButton from './VoteButton'; - -export default { - title: 'Shared/Vote Button', - component: VoteButton, - decorators: [ - centerDecorator - ] - -} as ComponentMeta; - -const Template: ComponentStory = (args) => ; - -const onVoteHandler: ComponentProps['onVote'] = (a, c) => { - setTimeout(() => { - c?.onSuccess?.(10); - c?.onSetteled?.(); - }, 2000) -} - -export const Default = Template.bind({}); -Default.args = { - votes: 540, - onVote: onVoteHandler -} - -export const Vertical = Template.bind({}); -Vertical.args = { - votes: 540, - onVote: onVoteHandler, - direction: 'vertical' -} - -export const Dense = Template.bind({}); -Dense.args = { - votes: 540, - onVote: onVoteHandler, - dense: true -} - -export const FillTypeUpdown = Template.bind({}); -FillTypeUpdown.args = { - votes: 540, - onVote: onVoteHandler, - fillType: 'upDown' -} - -export const FillTypeBackground = Template.bind({}); -FillTypeBackground.args = { - votes: 540, - onVote: onVoteHandler, - fillType: 'background' -} - -export const FillTypeRadial = Template.bind({}); -FillTypeRadial.args = { - votes: 540, - onVote: onVoteHandler, - fillType: 'radial' -} - -export const NoCounter = Template.bind({}); -NoCounter.args = { - votes: 540, - onVote: onVoteHandler, - disableCounter: true, -} - -export const CounterReset = Template.bind({}); -CounterReset.args = { - votes: 540, - onVote: onVoteHandler, - resetCounterOnRelease: true -} - -export const NoShake = Template.bind({}); -NoShake.args = { - votes: 540, - onVote: onVoteHandler, - disableShake: true, -} \ No newline at end of file diff --git a/src/Components/VoteButton/VoteButton.tsx b/src/Components/VoteButton/VoteButton.tsx deleted file mode 100644 index 8efe5b8..0000000 --- a/src/Components/VoteButton/VoteButton.tsx +++ /dev/null @@ -1,338 +0,0 @@ -import { MdLocalFireDepartment } from 'react-icons/md' -import Button from 'src/Components/Button/Button' -import { useAppSelector, usePressHolder, useResizeListener, useVote } from 'src/utils/hooks' -import { ComponentProps, SyntheticEvent, useRef, useState, useEffect } from 'react' -import styles from './styles.module.scss' -import { random, randomItem, numberFormatter } from 'src/utils/helperFunctions' -import { useDebouncedCallback, useMountEffect, useThrottledCallback } from '@react-hookz/web' -import { UnionToObjectKeys } from 'src/utils/types/utils' -import { Portal } from '../Portal/Portal' -import { ThreeDots } from 'react-loader-spinner' -import { AnimatePresence, motion } from 'framer-motion' - - - -interface Particle { - id: string, - offsetX: number, - offsetY: number, - color: string - animation: 'fly-spark-1' | 'fly-spark-2', - animationSpeed: number, - scale: number -} - -type VoteFunction = ReturnType['vote'] - -type Props = { - votes: number, - onVote?: VoteFunction, - onSuccess?: (amount: number) => void - fillType?: 'leftRight' | 'upDown' | "background" | 'radial', - direction?: 'horizontal' | 'vertical' - disableCounter?: boolean - disableShake?: boolean - hideVotesCoun?: boolean - dense?: boolean - size?: 'sm' | 'md' - resetCounterOnRelease?: boolean -} & Omit, 'children'> - - -const btnPadding: UnionToObjectKeys = { - horizontal: { - sm: '', - md: '', - } as UnionToObjectKeys, - vertical: { - sm: 'p-8', - md: '', - } as UnionToObjectKeys -} - -type BtnState = 'ready' | 'voting' | 'loading' | "success" | "fail"; - -export default function VoteButton({ - votes, - onVote = () => { }, - fillType = 'background', - direction = 'horizontal', - disableCounter = false, - disableShake = true, - hideVotesCoun = false, - dense = false, - resetCounterOnRelease = true, - onSuccess, - ...props }: Props) { - const [voteCnt, setVoteCnt] = useState(0) - const voteCntRef = useRef(0); - const btnContainerRef = useRef(null!!) - const [btnShakeClass, setBtnShakeClass] = useState('') - const [sparks, setSparks] = useState([]); - const [incrementsCount, setIncrementsCount] = useState(0); - const totalIncrementsCountRef = useRef(0) - const currentIncrementsCountRef = useRef(0); - const [increments, setIncrements] = useState>([]); - const [btnPosition, setBtnPosition] = useState<{ top: number, left: number, width: number, height: number }>(); - const [btnState, setBtnState] = useState('ready'); - - - const doVote = useDebouncedCallback(() => { - setBtnState('loading'); - const amount = voteCntRef.current; - onVote(amount, { - onSuccess: (amount) => { - setBtnState("success"); - spawnSparks(10); - onSuccess?.(amount); - }, - onError: () => setBtnState('fail'), - onSetteled: () => { - setVoteCnt(v => v - amount); - setTimeout(() => { - setBtnState("ready") - if (resetCounterOnRelease) { - setIncrementsCount(0); - totalIncrementsCountRef.current = 0; - currentIncrementsCountRef.current = 0; - } - voteCntRef.current = 0; - }, 2000); - } - }); - - }, [], 1500); - - const spawnSparks = (cnt = 5) => { - const newSparks = Array(cnt).fill(0).map((_, idx) => ({ - id: (Math.random() + 1).toString(), - offsetX: random(-10, 99), - offsetY: random(10, 90), - animation: randomItem(styles.fly_spark_1, styles.fly_spark_1) as any, - animationSpeed: randomItem(1, 1.5, 2), - color: `hsl(0deg 86% ${random(50, 63)}%)`, - scale: random(1, 1.5) - } as const)) - - // if on mobile screen, reduce number of sparks particles to 60% - setSparks(oldSparks => [...oldSparks, ...newSparks]) - setTimeout(() => { - setSparks(s => { - return s.filter(spark => !newSparks.some(newSpark => newSpark.id === spark.id)) - }) - - }, 2 * 1000) - } - - const clickIncrement = () => { - if (!disableShake) - setBtnShakeClass(s => s === styles.clicked_2 ? styles.clicked_1 : styles.clicked_2) - - - const _incStep = Math.ceil((currentIncrementsCountRef.current + 1) / 5); - - currentIncrementsCountRef.current += 1; - totalIncrementsCountRef.current += 1; - - setIncrementsCount(v => totalIncrementsCountRef.current); - - if (!disableCounter) - setIncrements(v => { - const genId = Math.random().toString(); - setTimeout(() => { - setIncrements(v => v.filter(e => e.id !== genId)) - }, 500) - return [...v, { id: genId, value: _incStep }] - }); - - setVoteCnt(s => { - const newValue = s + _incStep; - voteCntRef.current = newValue; - return newValue; - }) - - // Each time the button make 5 increments, spawn some flames - if (totalIncrementsCountRef.current && totalIncrementsCountRef.current % 5 === 0) - spawnSparks(5); - - - doVote(); - } - - const onHold = useThrottledCallback(clickIncrement, [], 150) - - const { onPressDown, onPressUp } = usePressHolder(onHold, 200); - - const handlePressDown = () => { - if (btnState !== 'ready' && btnState !== 'voting') return; - - setBtnState('voting'); - onPressDown(); - } - - const handlePressUp = (event?: SyntheticEvent) => { - if (btnState !== 'voting') return; - - if (event?.preventDefault) event.preventDefault(); - - onPressUp(); - onHold(); - } - - const updateParticlesContainerPos = useDebouncedCallback( - () => { - const bodyRect = document.body.getBoundingClientRect(); - const btnRect = btnContainerRef.current.getBoundingClientRect() - setBtnPosition({ - top: btnRect.top - bodyRect.top, - left: btnRect.left - bodyRect.left, - width: btnRect.width, - height: btnRect.height - }); - }, - [], - 300 - ) - - - useEffect(() => { - updateParticlesContainerPos(); - document.addEventListener('scroll', updateParticlesContainerPos) - document.addEventListener('resize', updateParticlesContainerPos) - - return () => { - - document.removeEventListener('scroll', updateParticlesContainerPos) - document.removeEventListener('resize', updateParticlesContainerPos) - } - }, [updateParticlesContainerPos]) - - // useResizeListener(() => { - // const bodyRect = document.body.getBoundingClientRect(); - // const btnRect = btnContainerRef.current.getBoundingClientRect() - // setBtnPosition({ - // top: btnRect.top - bodyRect.top, - // left: btnRect.left - bodyRect.left, - // width: btnRect.width, - // height: btnRect.height - // }); - // }, { debounce: 300 }) - - return ( - - - ) -} diff --git a/src/Components/VoteButton/styles.module.scss b/src/Components/VoteButton/styles.module.scss deleted file mode 100644 index 6c4f42b..0000000 --- a/src/Components/VoteButton/styles.module.scss +++ /dev/null @@ -1,219 +0,0 @@ -.vote_button { - --scale: 0; - --increments: 0; - --offset: 0; - --bg-color: hsl(0deg 86% max(calc((93 - var(--increments) / 3) * 1%), 68%)); - /* transition: background-color 1s; */ - /* background-color: hsl(25, 100%, max(calc((95 - var(--scale) / 4) * 1%), 63%)); */ - - transition: transform 0.1s ease-out; - &:active { - transform: scale(0.9); - } -} - -.btn_content.clicked_1 { - animation: shake_1 0.14s 1 ease-in-out; -} -/* Same animation, two classes so that the animation restarts between clicks */ -.btn_content.clicked_2 { - animation: shake_2 0.14s 1 ease-in-out; -} - -@keyframes shake_1 { - 0% { - transform: rotate(0deg); - } - - 33% { - transform: rotate(calc(clamp(5, var(--increments) / 3, 20) * 1deg)); - } - - 66% { - transform: rotate(calc(-1 * clamp(5, var(--increments) / 2, 20) * 1deg)); - } - - 100% { - transform: rotate(0deg); - } -} - -@keyframes shake_2 { - 0% { - transform: rotate(0deg); - } - - 33% { - transform: rotate(calc(clamp(10, var(--increments) / 2, 30) * 1deg)); - } - - 66% { - transform: rotate(calc(-1 * clamp(10, var(--increments) / 2, 30) * 1deg)); - } - - 100% { - transform: rotate(0deg); - } -} - -.vote_counter { - position: absolute; - left: 50%; - bottom: 100%; - color: #ff2727; - font-weight: bold; - font-size: 21px; - will-change: transform; - transform: translate(-50%, 0) scale(0.5); - animation: fly_value 0.5s 1 ease-out; -} - -.color_overlay { - position: absolute; - border-radius: inherit; - inset: 0; - overflow: hidden; - transition: all 0.1s; -} - -.color_overlay > div { - content: ""; - background: var(--bg-color); - width: 100%; - height: 100%; - position: absolute; -} - -.color_overlay__background > div { - top: 0; - right: 0; -} - -.color_overlay__leftRight > div { - top: 0; - right: 100%; - transform: translateX(var(--offset)); -} - -.color_overlay__upDown > div { - top: 100%; - right: 0; - transform: translateY(calc(-1 * var(--offset))); -} - -.color_overlay__radial > div { - top: 0; - right: 0; - background: radial-gradient( - circle at center, - var(--bg-color) var(--offset), - transparent calc(var(--offset) * 1.1) - ); -} - -.loading { - pointer-events: none; - position: absolute; - border-radius: inherit; - - inset: 0; - display: flex; - justify-content: center; - align-items: center; - background-color: #f9f6f6; - font-size: 14px; - color: #dc2626; - z-index: 10; -} - -.success { - pointer-events: none; - position: absolute; - border-radius: inherit; - - inset: 0; - display: flex; - justify-content: center; - align-items: center; - background-color: #f9f6f6; - font-weight: 600; - font-size: 14px; - color: #dc2626; - outline: 1px solid #ef4444; - z-index: 11; -} - -@keyframes fly_value { - 0% { - transform: translate(-50%, 0) scale(0.5); - opacity: 1; - } - - 66% { - transform: translate(-50%, -26px) scale(1.2); - opacity: 0.6; - } - - 100% { - transform: translate(-50%, -38px) scale(0.8); - opacity: 0; - } -} - -.spark { - position: absolute; - bottom: calc(var(--offsetY) * 1%); - left: calc(var(--offsetX) * 1%); - transform: scale(var(--scale)); - opacity: 0; - will-change: transform; - z-index: 3000; - - animation-name: fly-spark-1; - animation-duration: calc(var(--animationSpeed) * 1s); - animation-timing-function: linear; - animation-iteration-count: 1; - animation-fill-mode: forwards; -} - -@keyframes fly_spark_1 { - 0% { - transform: translate(0, 0) scale(var(--scale)); - opacity: 1; - } - - 33% { - transform: translate(12px, -70px) scale(var(--scale)); - } - - 66% { - transform: translate(0, -140px) scale(var(--scale)); - opacity: 0.6; - } - - 100% { - transform: translate(6px, -200px) scale(var(--scale)); - opacity: 0; - } -} - -@keyframes fly_spark_2 { - 0% { - transform: translate(0, 0) scale(var(--scale)); - opacity: 1; - } - - 50% { - transform: translate(-10px, -80px) scale(var(--scale)); - } - - 80% { - transform: translate(-4px, -140px) scale(var(--scale)); - opacity: 0.6; - } - - 100% { - transform: translate(-6px, -160px) scale(var(--scale)); - opacity: 0; - } -} diff --git a/src/features/Auth/pages/LoginPage/LoginPage.tsx b/src/features/Auth/pages/LoginPage/LoginPage.tsx deleted file mode 100644 index 8840b32..0000000 --- a/src/features/Auth/pages/LoginPage/LoginPage.tsx +++ /dev/null @@ -1,207 +0,0 @@ -import { useCallback, useEffect, useRef, useState } from "react" -import { Helmet } from "react-helmet"; -import { Grid } from "react-loader-spinner"; -import { useNavigate, useLocation } from "react-router-dom"; -import { useMeQuery } from "src/graphql" -import { CONSTS } from "src/utils"; -import { QRCodeSVG } from 'qrcode.react'; -import { IoRocketOutline } from "react-icons/io5"; -import Button from "src/Components/Button/Button"; -import { FiCopy } from "react-icons/fi"; -import useCopyToClipboard from "src/utils/hooks/useCopyToClipboard"; -import { getPropertyFromUnknown, trimText, } from "src/utils/helperFunctions"; -import { fetchIsLoggedIn, fetchLnurlAuth } from "src/api/auth"; -import { useErrorHandler } from 'react-error-boundary'; - - - - - -export const useLnurlQuery = () => { - const [loading, setLoading] = useState(true) - const [error, setError] = useState(null); - const [data, setData] = useState<{ lnurl: string, session_token: string }>({ lnurl: '', session_token: '' }) - - - useEffect(() => { - - let timeOut: NodeJS.Timeout; - const doFetch = async () => { - const res = await fetchLnurlAuth(); - if (!res?.encoded) - setError(new Error("Response doesn't contain data")) - else { - setLoading(false); - setData({ - lnurl: res.encoded, - session_token: res.session_token - }); - timeOut = setTimeout(doFetch, 1000 * 60 * 2) - } - } - doFetch().catch(err => setError(err)); - - return () => clearTimeout(timeOut) - }, []) - - return { - loadingLnurl: loading, - error, - data - } -} - - -export default function LoginPage() { - const [isLoggedIn, setIsLoggedIn] = useState(false); - const navigate = useNavigate(); - const location = useLocation(); - const [copied, setCopied] = useState(false); - - const canFetchIsLogged = useRef(true) - const { loadingLnurl, data: { lnurl, session_token }, error } = useLnurlQuery(); - - useErrorHandler(error) - const clipboard = useCopyToClipboard() - - - useEffect(() => { - setCopied(false); - }, [lnurl]) - - const meQuery = useMeQuery({ - onCompleted: (data) => { - if (data.me) { - setIsLoggedIn(true); - meQuery.stopPolling(); - setTimeout(() => { - const cameFrom = getPropertyFromUnknown(location.state, 'from'); - const navigateTo = cameFrom ? cameFrom : '/' - - navigate(navigateTo) - }, 2000) - } - - } - }); - - const copyToClipboard = () => { - setCopied(true); - clipboard(lnurl); - } - - const refetch = meQuery.refetch; - const startPolling = useCallback( - () => { - const interval = setInterval(() => { - if (canFetchIsLogged.current === false) return; - - canFetchIsLogged.current = false; - fetchIsLoggedIn(session_token) - .then(is_logged_in => { - if (is_logged_in) { - clearInterval(interval) - refetch(); - } - }) - .catch() - .finally(() => { - canFetchIsLogged.current = true; - }) - }, 2000); - - return interval; - } - , [refetch, session_token], - ) - - - - useEffect(() => { - let interval: NodeJS.Timer; - if (lnurl) - interval = startPolling(); - - return () => { - canFetchIsLogged.current = true; - clearInterval(interval) - } - }, [lnurl, startPolling]) - - - - - let content = <> - - if (error) - content =
      -

      Something wrong happened...

      - Refresh the page -
      - - else if (loadingLnurl) - content =
      - -

      Fetching Lnurl-Auth...

      -
      - - else if (isLoggedIn) - content =
      -

      - Hello: @{trimText(meQuery.data?.me?.name, 10)} -

      - -
      - - else - content =
      -

      Login with lightning ⚡

      - - - -

      - Scan this code or copy + paste it to your lightning wallet. Or click to login with your browser's wallet. -

      -
      - Click to connect - - What is a lightning wallet? -
      - -
      ; - - - - return ( - <> - - {`makers.bolt.fun`} - - -
      -
      - {content} -
      -
      - - ) -} diff --git a/src/features/Auth/pages/LogoutPage/LogoutPage.tsx b/src/features/Auth/pages/LogoutPage/LogoutPage.tsx deleted file mode 100644 index 2414a93..0000000 --- a/src/features/Auth/pages/LogoutPage/LogoutPage.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { useEffect } from "react" -import { LineWave } from "react-loader-spinner"; -import { useNavigate } from "react-router-dom"; -import { CONSTS } from "src/utils"; - - -export default function LoginPage() { - - const navigate = useNavigate(); - - useEffect(() => { - fetch(CONSTS.apiEndpoint + '/logout', { - method: "GET", - 'credentials': "include" - }) - .then(() => { - window.location.pathname = '/' - }) - .catch(() => { - window.location.pathname = '/' - }) - }, [navigate]) - - - return ( -
      -

      - Logging you out... -

      - -
      - ) -} diff --git a/src/features/Auth/pages/me.graphql b/src/features/Auth/pages/me.graphql deleted file mode 100644 index 8153621..0000000 --- a/src/features/Auth/pages/me.graphql +++ /dev/null @@ -1,10 +0,0 @@ -query Me { - me { - id - name - avatar - join_date - jobTitle - bio - } -} diff --git a/src/features/Donations/components/DonateCard/DonateCard.stories.tsx b/src/features/Donations/components/DonateCard/DonateCard.stories.tsx deleted file mode 100644 index 9d21db7..0000000 --- a/src/features/Donations/components/DonateCard/DonateCard.stories.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import DonateCard from './DonateCard'; - - -export default { - title: 'Donations/Componets/Donate Card', - component: DonateCard, -} as ComponentMeta; - -const Template: ComponentStory = (args) =>
      ; - -export const Default = Template.bind({}); - diff --git a/src/features/Donations/components/DonateCard/DonateCard.tsx b/src/features/Donations/components/DonateCard/DonateCard.tsx deleted file mode 100644 index 757313e..0000000 --- a/src/features/Donations/components/DonateCard/DonateCard.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import React, { FormEvent, useState } from 'react'; -import { PaymentStatus, } from 'src/utils/hooks'; -import Confetti from "react-confetti"; -import { useWindowSize } from '@react-hookz/web'; -import { useDonate } from './useDonate'; - -const defaultOptions = [ - { text: '500', value: 500 }, - { text: '1,000', value: 1000 }, - { text: '5,000', value: 5000 }, - { text: '25,000', value: 25000 }, -] - - -export default function DonateCard() { - - const size = useWindowSize(); - const [donationAmount, setDonationAmount] = useState(""); - - const { donate, paymentStatus, isLoading } = useDonate() - - const onChangeInput = (event: React.ChangeEvent) => { - setDonationAmount(event.target.value); - }; - - const onSelectOption = (idx: number) => { - setDonationAmount(defaultOptions[idx].value.toString()); - } - - const requestPayment = (e: FormEvent) => { - e.preventDefault(); - if (Number(donationAmount)) - donate(Number(donationAmount), { - onSuccess: () => { - setTimeout(() => { - setDonationAmount(""); - }, 4000); - }, - onError: () => { - setTimeout(() => { - setDonationAmount(""); - }, 4000); - } - }); - } - - return ( -
      -

      Donate to BOLT🔩FUN

      -
      -
      - -

      - sats -

      -
      -
      - {defaultOptions.map((option, idx) => - - )} -
      - -
      - {paymentStatus === PaymentStatus.FETCHING_PAYMENT_DETAILS &&

      Please wait while we fetch payment details.

      } - {paymentStatus === PaymentStatus.NOT_PAID &&

      You did not confirm the payment. Please try again.

      } - {paymentStatus === PaymentStatus.CANCELED &&

      Payment canceled by user.

      } - {paymentStatus === PaymentStatus.NETWORK_ERROR &&

      A network error happened while fetching data.

      } - {paymentStatus === PaymentStatus.PAID &&

      The invoice was paid! Please wait while we confirm it.

      } - {paymentStatus === PaymentStatus.AWAITING_PAYMENT &&

      Waiting for your payment...

      } - {paymentStatus === PaymentStatus.PAYMENT_CONFIRMED &&

      Thanks for your vote

      } -
      -
      - {paymentStatus === PaymentStatus.PAYMENT_CONFIRMED && } - -
      - ) -} diff --git a/src/features/Donations/components/DonateCard/useDonate.tsx b/src/features/Donations/components/DonateCard/useDonate.tsx deleted file mode 100644 index 5598619..0000000 --- a/src/features/Donations/components/DonateCard/useDonate.tsx +++ /dev/null @@ -1,88 +0,0 @@ - -import { useCallback, useState } from 'react'; -import { useConfirmDonationMutation, useDonateMutation } from 'src/graphql'; -import { Wallet_Service } from 'src/services'; -import { PaymentStatus } from 'src/utils/hooks'; - - - -export const useDonate = () => { - - const [paymentStatus, setPaymentStatus] = useState(PaymentStatus.DEFAULT); - const [donateMutation] = useDonateMutation(); - const [confirmDonation] = useConfirmDonationMutation(); - - const donate = useCallback((amount: number, config?: Partial<{ - onSuccess: () => void, - onError: (error: any) => void, - onSetteled: () => void - }>) => { - Wallet_Service.getWebln() - .then(webln => { - if (!webln) { - config?.onError?.(new Error('No WebLN Detetcted')) - config?.onSetteled?.() - return - } - - setPaymentStatus(PaymentStatus.FETCHING_PAYMENT_DETAILS) - donateMutation({ - variables: { - amountInSat: amount - }, - onCompleted: async (donationData) => { - try { - setPaymentStatus(PaymentStatus.AWAITING_PAYMENT); - const paymentResponse = await webln.sendPayment(donationData.donate.payment_request); - setPaymentStatus(PaymentStatus.PAID); - - //Confirm Voting payment - confirmDonation({ - variables: { - paymentRequest: donationData.donate.payment_request, - preimage: paymentResponse.preimage - }, - onCompleted: () => { - setPaymentStatus(PaymentStatus.PAYMENT_CONFIRMED); - config?.onSuccess?.(); - config?.onSetteled?.() - }, - onError: (error) => { - console.log(error) - setPaymentStatus(PaymentStatus.NETWORK_ERROR); - config?.onError?.(error); - config?.onSetteled?.(); - alert("A network error happened while confirming the payment...") - }, - refetchQueries: [ - 'DonationsStats' - ] - }) - } catch (error) { - setPaymentStatus(PaymentStatus.CANCELED); - config?.onError?.(error); - config?.onSetteled?.(); - alert("Payment rejected by user") - } - - }, - onError: (error) => { - console.log(error); - setPaymentStatus(PaymentStatus.NETWORK_ERROR); - config?.onError?.(error); - config?.onSetteled?.(); - alert("A network error happened...") - } - }) - }) - - }, [confirmDonation, donateMutation]); - - const isLoading = paymentStatus !== PaymentStatus.DEFAULT && paymentStatus !== PaymentStatus.PAYMENT_CONFIRMED && paymentStatus !== PaymentStatus.NOT_PAID && paymentStatus !== PaymentStatus.NETWORK_ERROR && paymentStatus !== PaymentStatus.CANCELED - - return { - paymentStatus, - donate, - isLoading - } -} \ No newline at end of file diff --git a/src/features/Donations/index.tsx b/src/features/Donations/index.tsx deleted file mode 100644 index 1b71f83..0000000 --- a/src/features/Donations/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './pages/DonatePage/DonatePage' \ No newline at end of file diff --git a/src/features/Donations/pages/DonatePage/DonatePage.stories.tsx b/src/features/Donations/pages/DonatePage/DonatePage.stories.tsx deleted file mode 100644 index bb7b0ea..0000000 --- a/src/features/Donations/pages/DonatePage/DonatePage.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; - -import DonatePage from './DonatePage'; - -export default { - title: 'Donations/Donate Page/Page', - component: DonatePage, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) => - -export const Default = Template.bind({}); -Default.args = { -} - - diff --git a/src/features/Donations/pages/DonatePage/DonatePage.tsx b/src/features/Donations/pages/DonatePage/DonatePage.tsx deleted file mode 100644 index eea753f..0000000 --- a/src/features/Donations/pages/DonatePage/DonatePage.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { Helmet } from "react-helmet"; -import Accordion from "src/Components/Accordion/Accordion"; -import Header from "./Header/Header"; -import styles from './styles.module.scss' - -export default function DonatePage() { - - return ( - <> - - {'Donate To Bolt.Fun'} - - -
      -
      -
      -
      -

      - FAQs -

      - - Donations that are sent to us directly via our Donate page are used to help fund the design and development of BOLT🔩FUN's Makers platform, as well as helping to fund our tournament and hackathon prize pools. -

      - }, - { - heading: "Who is working on BOLT🔩FUN?", - content:

      - BOLT🔩FUN is an open-source project, so technically anyone can work on the platform's features & upgrades. That being said, the project was started by a core team of designers and developers from Peak Shift, a bitcoin only product design and development studio. -
      -
      - If you are interested in helping contribute to BOLT🔩FUN, feel free to hop into our Discord and let us know how you'd like to help. -

      - }, - { - heading: "How can makers win prizes?", - content:

      - Makers can win prizes through one of BOLT🔩FUN's online #ShockTheWeb ⚡️ hackathons. These hackathons provide an opportunity for makers to get hands on experience learning to build lightning enabled web applications in a fun, collaborative, and supportive environment. -
      -
      - Later on, we'd like to create ongoing monthly tournaments & prizes for makers who regularly submit standup reporting (plans, problems, and progress) on their current projects, as well as being active on our platform through Stories, Discussions, and voting. -

      - }, - { - heading: "How can I donate?", - content:

      - Currently we are only accepting lightning donations through WebLN. To do this, you will first need to install the Alby extension on your browser. Once you've finished setting up your wallet, you can send us some sats using our donation widget, you'll have to confirm the transaction within your Alby extension. -

      - }, - ]} - /> -
      -
      -
      - ) -} diff --git a/src/features/Donations/pages/DonatePage/DonationStats/DonationStats.tsx b/src/features/Donations/pages/DonatePage/DonationStats/DonationStats.tsx deleted file mode 100644 index f51b4b4..0000000 --- a/src/features/Donations/pages/DonatePage/DonationStats/DonationStats.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { BiCoinStack } from "react-icons/bi"; -import { FiAward, FiGrid } from "react-icons/fi"; -import { IoMedalOutline, IoRocketOutline } from "react-icons/io5"; -import { useDonationsStatsQuery } from "src/graphql"; -import { generateList, numberFormatter } from "src/utils/helperFunctions"; -import StatCard from "../StatCard/StatCard"; -import StatCardSkeleton from "../StatCard/StatCard.Skeleton"; - - -export default function DonationStats() { - - const donationsStatQuery = useDonationsStatsQuery(); - - - - return ( -
      - - {donationsStatQuery.loading && generateList(, 4)} - - {!donationsStatQuery.loading && - <> - Donations} - value={<>{numberFormatter(Number(donationsStatQuery.data?.getDonationsStats.donations))} < span className="text-body4">Sats} - /> - Tournaments} - value={donationsStatQuery.data?.getDonationsStats.touranments} - /> - Prizes} - value={donationsStatQuery.data?.getDonationsStats.prizes} - /> - Applications} - value={donationsStatQuery.data?.getDonationsStats.applications} - /> - - } -
      - ) -} diff --git a/src/features/Donations/pages/DonatePage/DonationStats/StatCard.stories.tsx b/src/features/Donations/pages/DonatePage/DonationStats/StatCard.stories.tsx deleted file mode 100644 index e05f3d6..0000000 --- a/src/features/Donations/pages/DonatePage/DonationStats/StatCard.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { FiGrid } from 'react-icons/fi' -import DonationStats from './DonationStats'; - -export default { - title: 'Donations/Donate Page/DonationStats', - component: DonationStats, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { -} - - diff --git a/src/features/Donations/pages/DonatePage/DonationStats/donationStats.graphql b/src/features/Donations/pages/DonatePage/DonationStats/donationStats.graphql deleted file mode 100644 index c36f05d..0000000 --- a/src/features/Donations/pages/DonatePage/DonationStats/donationStats.graphql +++ /dev/null @@ -1,8 +0,0 @@ -query DonationsStats { - getDonationsStats { - prizes - touranments - donations - applications - } -} diff --git a/src/features/Donations/pages/DonatePage/Header/Header.stories.tsx b/src/features/Donations/pages/DonatePage/Header/Header.stories.tsx deleted file mode 100644 index 067943f..0000000 --- a/src/features/Donations/pages/DonatePage/Header/Header.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; - -import Header from './Header'; - -export default { - title: 'Donations/Donate Page/Header', - component: Header, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { -} - - diff --git a/src/features/Donations/pages/DonatePage/Header/Header.tsx b/src/features/Donations/pages/DonatePage/Header/Header.tsx deleted file mode 100644 index 549565b..0000000 --- a/src/features/Donations/pages/DonatePage/Header/Header.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { BiCoinStack } from 'react-icons/bi' -import DonateCard from 'src/features/Donations/components/DonateCard/DonateCard' -import DonationStats from '../DonationStats/DonationStats' -import styles from './styles.module.scss' - -export default function Header() { - return ( -
      -
      -
      -
      -

      - Donate -

      -

      - Help fund BOLT🔩FUN, as well as other Makers working on lightning apps through tournaments and prize pools -

      -
      -
      - -
      -
      -
      - -
      -
      -
      - ) -} diff --git a/src/features/Donations/pages/DonatePage/Header/styles.module.scss b/src/features/Donations/pages/DonatePage/Header/styles.module.scss deleted file mode 100644 index d088f33..0000000 --- a/src/features/Donations/pages/DonatePage/Header/styles.module.scss +++ /dev/null @@ -1,30 +0,0 @@ -@import "/src/styles/mixins"; - -.header { - padding: 56px 0; - min-height: calc(min(1080px, 90vh)); - background: #ffecf9; - background: linear-gradient(40deg, white 7%, #ffdadaa3 62%, #d0f6ff5c 96%); - background-size: 120% 120%; - - animation: Animation 3s ease infinite; - display: grid; - grid-template-areas: ". content ."; - grid-template-columns: minmax(16px, 1fr) minmax(auto, 910px) minmax(16px, 1fr); - - & > div { - grid-area: content; - } -} - -@keyframes Animation { - 0% { - background-position: 0% 20%; - } - 50% { - background-position: 20% 0%; - } - 100% { - background-position: 0% 20%; - } -} diff --git a/src/features/Donations/pages/DonatePage/StatCard/StatCard.Skeleton.tsx b/src/features/Donations/pages/DonatePage/StatCard/StatCard.Skeleton.tsx deleted file mode 100644 index 0750a79..0000000 --- a/src/features/Donations/pages/DonatePage/StatCard/StatCard.Skeleton.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import Skeleton from 'react-loading-skeleton' - - -export default function StatCardSkeleton() { - return ( -
      -

      - -

      -

      - -

      -
      - ) -} diff --git a/src/features/Donations/pages/DonatePage/StatCard/StatCard.stories.tsx b/src/features/Donations/pages/DonatePage/StatCard/StatCard.stories.tsx deleted file mode 100644 index 5c7379b..0000000 --- a/src/features/Donations/pages/DonatePage/StatCard/StatCard.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { FiGrid } from 'react-icons/fi' -import StatCard from './StatCard'; -import StatCardSkeleton from './StatCard.Skeleton'; - -export default { - title: 'Donations/Donate Page/StatCard', - component: StatCard, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { - color: "#3B82F6", - label: <> Applications, - value: '36' -} - -const LoadingTemplate: ComponentStory = (args) =>
      - -export const Loading = LoadingTemplate.bind({}); -Loading.args = { -} - diff --git a/src/features/Donations/pages/DonatePage/StatCard/StatCard.tsx b/src/features/Donations/pages/DonatePage/StatCard/StatCard.tsx deleted file mode 100644 index a7183ea..0000000 --- a/src/features/Donations/pages/DonatePage/StatCard/StatCard.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { ReactNode } from 'react' - -interface Props { - label: ReactNode, - value: ReactNode, - color: string -} - -export default function StatCard(props: Props) { - return ( -
      -

      - {props.label} -

      -

      - {props.value} -

      -
      - ) -} diff --git a/src/features/Donations/pages/DonatePage/donate.graphql b/src/features/Donations/pages/DonatePage/donate.graphql deleted file mode 100644 index 4bb2d4f..0000000 --- a/src/features/Donations/pages/DonatePage/donate.graphql +++ /dev/null @@ -1,16 +0,0 @@ -mutation Donate($amountInSat: Int!) { - donate(amount_in_sat: $amountInSat) { - id - amount - payment_request - payment_hash - } -} - -mutation ConfirmDonation($paymentRequest: String!, $preimage: String!) { - confirmDonation(payment_request: $paymentRequest, preimage: $preimage) { - id - amount - paid - } -} diff --git a/src/features/Donations/pages/DonatePage/styles.module.scss b/src/features/Donations/pages/DonatePage/styles.module.scss deleted file mode 100644 index 5505976..0000000 --- a/src/features/Donations/pages/DonatePage/styles.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -@import "/src/styles/mixins"; - -.faq { - padding: 40px 0; - display: grid; - grid-template-areas: ". content ."; - grid-template-columns: minmax(16px, 1fr) minmax(auto, 910px) minmax(16px, 1fr); - - & > div { - grid-area: content; - } - - @include gt-md { - padding: 80px 0; - } -} diff --git a/src/features/Hackathons/Components/HackathonCard/HackathonCard.Skeleton.tsx b/src/features/Hackathons/Components/HackathonCard/HackathonCard.Skeleton.tsx deleted file mode 100644 index 0f2fb11..0000000 --- a/src/features/Hackathons/Components/HackathonCard/HackathonCard.Skeleton.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { Hackathon } from "src/features/Hackathons/types" -import { IoLocationOutline } from 'react-icons/io5' -import Button from "src/Components/Button/Button" -import Skeleton from "react-loading-skeleton" - - -export default function HackathonCardSkeleton() { - return ( -
      -
      -
      -
      -

      - -

      -

      - -

      -

      - -

      -

      - - -

      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      - ) -} diff --git a/src/features/Hackathons/Components/HackathonCard/HackathonCard.stories.tsx b/src/features/Hackathons/Components/HackathonCard/HackathonCard.stories.tsx deleted file mode 100644 index c80cc89..0000000 --- a/src/features/Hackathons/Components/HackathonCard/HackathonCard.stories.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { MOCK_DATA } from 'src/mocks/data'; - -import HackathonCard from './HackathonCard'; -import HackathonCardSkeleton from './HackathonCard.Skeleton'; - -export default { - title: 'Hackathons/Components/Hackathon Card', - component: HackathonCard, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { - hackathon: MOCK_DATA['hackathons'][0] -} - - - - -const LoadingTemplate: ComponentStory = (args) =>
      - -export const Loading = LoadingTemplate.bind({}); -Loading.args = { - -} \ No newline at end of file diff --git a/src/features/Hackathons/Components/HackathonCard/HackathonCard.tsx b/src/features/Hackathons/Components/HackathonCard/HackathonCard.tsx deleted file mode 100644 index a8067a2..0000000 --- a/src/features/Hackathons/Components/HackathonCard/HackathonCard.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { Hackathon } from "src/features/Hackathons/types" -import { IoLocationOutline } from 'react-icons/io5' -import Button from "src/Components/Button/Button" -import dayjs from "dayjs"; -import advancedFormat from 'dayjs/plugin/advancedFormat' -import { trimText } from "src/utils/helperFunctions"; -import { Override } from "src/utils/interfaces"; -import { Tag } from "src/graphql"; -dayjs.extend(advancedFormat) - -export type HackathonCardType = Override[] - } ->; - -interface Props { - hackathon: HackathonCardType -} - -export default function HackathonCard({ hackathon }: Props) { - return ( -
      - -
      -
      -

      - {hackathon.title} -

      -

      - {`${dayjs(hackathon.start_date).format('Do')} - ${dayjs(hackathon.end_date).format('Do MMMM, YYYY')}`} -

      -

      - {hackathon.location} -

      -

      - {trimText(hackathon.description, 110)} -

      -
      -
      - {hackathon.tags.map(tag =>
      {tag.icon} {tag.title}
      )} -
      -
      - -
      -
      - ) -} diff --git a/src/features/Hackathons/Components/HackathonsList/HackathonsList.stories.tsx b/src/features/Hackathons/Components/HackathonsList/HackathonsList.stories.tsx deleted file mode 100644 index f8c9a98..0000000 --- a/src/features/Hackathons/Components/HackathonsList/HackathonsList.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { MOCK_DATA } from 'src/mocks/data'; - -import HackathonsList from './HackathonsList'; - -export default { - title: 'Hackathons/Components/HackathonsList', - component: HackathonsList, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) => - -export const Default = Template.bind({}); -Default.args = { - items: MOCK_DATA['hackathons'] -} - - diff --git a/src/features/Hackathons/Components/HackathonsList/HackathonsList.tsx b/src/features/Hackathons/Components/HackathonsList/HackathonsList.tsx deleted file mode 100644 index 27c6832..0000000 --- a/src/features/Hackathons/Components/HackathonsList/HackathonsList.tsx +++ /dev/null @@ -1,41 +0,0 @@ - -import { useReachedBottom } from "src/utils/hooks/useReachedBottom" -import { ListComponentProps } from "src/utils/interfaces" -import HackathonCard, { HackathonCardType } from "../HackathonCard/HackathonCard" -import HackathonCardSkeleton from "../HackathonCard/HackathonCard.Skeleton" - - -type Props = ListComponentProps & { - currentFilter: null | string; -} - -export default function HackathonsList(props: Props) { - - const { ref } = useReachedBottom(props.onReachedBottom) - - if (props.isLoading) - return
      - {<> - - - - - - } -
      - - if (props.items?.length === 0) - return
      - No {props.currentFilter ? props.currentFilter : ""} Hackathons Currently... - {/*
      */} -
      - - return ( -
      - { - props.items?.map(hackathon => ) - } - {props.isFetching && } -
      - ) -} diff --git a/src/features/Hackathons/Components/SortByFilter/SortByFilter.stories.tsx b/src/features/Hackathons/Components/SortByFilter/SortByFilter.stories.tsx deleted file mode 100644 index 03d3f85..0000000 --- a/src/features/Hackathons/Components/SortByFilter/SortByFilter.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; - -import SortBy from './SortByFilter'; - -export default { - title: 'Hackathons/Components/Filters/Sort By', - component: SortBy, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { -} - - diff --git a/src/features/Hackathons/Components/SortByFilter/SortByFilter.tsx b/src/features/Hackathons/Components/SortByFilter/SortByFilter.tsx deleted file mode 100644 index 7f3eb4d..0000000 --- a/src/features/Hackathons/Components/SortByFilter/SortByFilter.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React, { useState } from 'react' -import { useMediaQuery } from 'src/utils/hooks'; -import { MEDIA_QUERIES } from 'src/utils/theme'; - -const filters = [ - { - text: "All", - value: null - }, - { - text: "Upcoming", - value: 'Upcoming' - }, { - text: "Live", - value: 'Live' - }, { - text: "Finished", - value: 'Finished' - }, -] - -interface Props { - filterChanged?: (newFilter: string | null) => void -} - -export default function SortByFilter({ filterChanged }: Props) { - - const [selected, setSelected] = useState(null); - - const filterClicked = (_newValue: string | null) => { - const newValue = selected !== _newValue ? _newValue : null; - setSelected(newValue); - filterChanged?.(newValue); - } - const isMdScreen = useMediaQuery(MEDIA_QUERIES.isMedium) - - - - return ( -
        - {filters.map((f, idx) =>
      • filterClicked(f.value)} - role='button' - > - {f.text} -
        • )} -
      - - ) -} diff --git a/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.stories.tsx b/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.stories.tsx deleted file mode 100644 index c60f938..0000000 --- a/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; - -import HackathonsPage from './HackathonsPage'; - -export default { - title: 'Hackathons/Hackathons Page/Page', - component: HackathonsPage, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) => - -export const Default = Template.bind({}); -Default.args = { -} - - diff --git a/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx b/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx deleted file mode 100644 index e572057..0000000 --- a/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx +++ /dev/null @@ -1,86 +0,0 @@ - -import { useState } from 'react' -import Button from 'src/Components/Button/Button' -import { useGetHackathonsQuery } from 'src/graphql' -import HackathonsList from '../../Components/HackathonsList/HackathonsList' -import SortByFilter from '../../Components/SortByFilter/SortByFilter' -import styles from './styles.module.scss' -import { Helmet } from 'react-helmet' -import { Fulgur } from 'src/Components/Ads/Fulgur' -import { IoLocationOutline } from 'react-icons/io5' -import { Link } from 'react-router-dom' -import { createRoute } from 'src/utils/routing' -import { bannerData } from 'src/features/Projects/pages/ExplorePage/Header/Header' - - -export default function HackathonsPage() { - - const [sortByFilter, setSortByFilter] = useState(null) - const [tagFilter, setTagFilter] = useState(null) - - const hackathonsQuery = useGetHackathonsQuery({ - variables: { - sortBy: sortByFilter, - tag: Number(tagFilter) - }, - }) - - return ( - <> - - {'Hackathons'} - - -
      -
      - -
      - -
      -
      - {bannerData.title} -
      -
      - -
      -

      {sortByFilter ? sortByFilter : "All"} Events

      -
      -
      -
      - {/* */} -
      - -
      -
      -
      - ) -} diff --git a/src/features/Hackathons/pages/HackathonsPage/allHackathons.graphql b/src/features/Hackathons/pages/HackathonsPage/allHackathons.graphql deleted file mode 100644 index 622a0a5..0000000 --- a/src/features/Hackathons/pages/HackathonsPage/allHackathons.graphql +++ /dev/null @@ -1,17 +0,0 @@ -query getHackathons($sortBy: String, $tag: Int) { - getAllHackathons(sortBy: $sortBy, tag: $tag) { - id - title - description - cover_image - start_date - end_date - location - website - tags { - id - title - icon - } - } -} diff --git a/src/features/Hackathons/pages/HackathonsPage/styles.module.scss b/src/features/Hackathons/pages/HackathonsPage/styles.module.scss deleted file mode 100644 index 576848a..0000000 --- a/src/features/Hackathons/pages/HackathonsPage/styles.module.scss +++ /dev/null @@ -1,13 +0,0 @@ -.grid { - display: grid; - grid-template-columns: 100%; - gap: 24px; - - @media screen and (min-width: 768px) { - grid-template-columns: repeat(4, 1fr); - gap: 24px; - > main { - grid-column: 2/5; - } - } -} diff --git a/src/features/Hackathons/types/hackathons.interface.ts b/src/features/Hackathons/types/hackathons.interface.ts deleted file mode 100644 index fb12fff..0000000 --- a/src/features/Hackathons/types/hackathons.interface.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Hackathon as ApiHackathon, } from "src/graphql" - -export type Hackathon = ApiHackathon \ No newline at end of file diff --git a/src/features/Hackathons/types/index.ts b/src/features/Hackathons/types/index.ts deleted file mode 100644 index 7994227..0000000 --- a/src/features/Hackathons/types/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './hackathons.interface' \ No newline at end of file diff --git a/src/features/Posts/Components/Comments/AddComment/AddComment.stories.tsx b/src/features/Posts/Components/Comments/AddComment/AddComment.stories.tsx deleted file mode 100644 index ec2ccbd..0000000 --- a/src/features/Posts/Components/Comments/AddComment/AddComment.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; - -import AddComment from './AddComment'; - -export default { - title: 'Posts/Components/Comments/Add Comment', - component: AddComment, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { - placeholder: "Leave a comment...", - avatar: "https://i.pravatar.cc/150?img=8" -} - - diff --git a/src/features/Posts/Components/Comments/AddComment/AddComment.tsx b/src/features/Posts/Components/Comments/AddComment/AddComment.tsx deleted file mode 100644 index ffaa4d8..0000000 --- a/src/features/Posts/Components/Comments/AddComment/AddComment.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import 'remirror/styles/all.css'; -import styles from './styles.module.scss' - -import javascript from 'refractor/lang/javascript'; -import typescript from 'refractor/lang/typescript'; -import { - BoldExtension, - CodeBlockExtension, - CodeExtension, - HardBreakExtension, - ImageExtension, - LinkExtension, - MarkdownExtension, - PlaceholderExtension, -} from 'remirror/extensions'; -import { EditorComponent, Remirror, useRemirror } from '@remirror/react'; -import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'; -import Toolbar from './Toolbar'; -import Button from 'src/Components/Button/Button'; -import { InvalidContentHandler } from 'remirror'; - - -interface Props { - initialContent?: string; - placeholder?: string; - avatar: string; - autoFocus?: boolean - onSubmit?: (comment: string) => Promise; -} - - -export default function AddComment({ initialContent, placeholder, avatar, autoFocus, onSubmit }: Props) { - - const containerRef = useRef(null) - const linkExtension = useMemo(() => { - const extension = new LinkExtension({ autoLink: true }); - extension.addHandler('onClick', (_, data) => { - window.open(data.href, '_blank')?.focus(); - return true; - }); - return extension; - }, []); - const [isLoading, setIsLoading] = useState(false) - const valueRef = useRef(""); - - - const extensions = useCallback( - () => [ - new PlaceholderExtension({ placeholder }), - linkExtension, - new BoldExtension(), - new CodeExtension(), - new CodeBlockExtension({ - supportedLanguages: [javascript, typescript] - }), - new ImageExtension({ enableResizing: true }), - new MarkdownExtension({ copyAsMarkdown: false }), - /** - * `HardBreakExtension` allows us to create a newline inside paragraphs. - * e.g. in a list item - */ - new HardBreakExtension(), - ], - [linkExtension, placeholder], - ); - - - - const onError: InvalidContentHandler = useCallback(({ json, invalidContent, transformers }) => { - // Automatically remove all invalid nodes and marks. - return transformers.remove(json, invalidContent); - }, []); - - const { manager, state, onChange, } = useRemirror({ - extensions, - stringHandler: 'markdown', - content: initialContent ?? '', - onError, - }); - - useEffect(() => { - if (autoFocus) - containerRef.current?.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" }); - }, [autoFocus]) - - - const submitComment = async () => { - setIsLoading(true); - const isSuccess = await onSubmit?.(valueRef.current); - if (isSuccess) - manager.view.updateState(manager.createState({ content: manager.createEmptyDoc() })) - setIsLoading(false); - - } - - - return ( -
      - { - const md = e.helpers.getMarkdown(e.state) - valueRef.current = md; - onChange(e); - }} - autoFocus={autoFocus} - > -
      -
      -
      - -
      -
      -
      - - -
      -       -
      - ); -} diff --git a/src/features/Posts/Components/Comments/AddComment/Toolbar.tsx b/src/features/Posts/Components/Comments/AddComment/Toolbar.tsx deleted file mode 100644 index 1128a70..0000000 --- a/src/features/Posts/Components/Comments/AddComment/Toolbar.tsx +++ /dev/null @@ -1,36 +0,0 @@ - -import TextEditorComponents from 'src/Components/Inputs/TextEditor'; - -interface Props { -} - -export default function Toolbar() { - - return ( -
      -
      - - - -
      -
      - ) -} diff --git a/src/features/Posts/Components/Comments/AddComment/styles.module.scss b/src/features/Posts/Components/Comments/AddComment/styles.module.scss deleted file mode 100644 index 8a3fbc9..0000000 --- a/src/features/Posts/Components/Comments/AddComment/styles.module.scss +++ /dev/null @@ -1,29 +0,0 @@ -.wrapper { - - :global{ - - .ProseMirror { - overflow: hidden; - border-bottom-left-radius: inherit; - border-bottom-right-radius: inherit; - min-height: var(--rmr-space-5); - - - a{ - color: rgb(54, 139, 236); - - &:hover{ - text-decoration: underline; - cursor: pointer; - } - } - } - - .ProseMirror, - .ProseMirror:active, - .ProseMirror:focus{ - box-shadow: none; - } - } - -} \ No newline at end of file diff --git a/src/features/Posts/Components/Comments/Comment/Comment.stories.tsx b/src/features/Posts/Components/Comments/Comment/Comment.stories.tsx deleted file mode 100644 index 62d8b12..0000000 --- a/src/features/Posts/Components/Comments/Comment/Comment.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { MOCK_DATA } from 'src/mocks/data'; - -import Comment from './Comment'; - -export default { - title: 'Posts/Components/Comments/Comment with Replies', - component: Comment, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { - comment: { - ...MOCK_DATA.generatePostComments(1)[0], - created_at: Date.now(), - replies: [ - { ...MOCK_DATA.generatePostComments(1)[0], replies: [], created_at: Date.now() }, - { ...MOCK_DATA.generatePostComments(1)[0], replies: [], created_at: Date.now() } - ] - } -} - - diff --git a/src/features/Posts/Components/Comments/Comment/Comment.tsx b/src/features/Posts/Components/Comments/Comment/Comment.tsx deleted file mode 100644 index 3b44f23..0000000 --- a/src/features/Posts/Components/Comments/Comment/Comment.tsx +++ /dev/null @@ -1,95 +0,0 @@ - -import { useToggle } from "@react-hookz/web"; -import { useEffect, useRef, useState } from "react"; -import { FaChevronDown, FaChevronUp } from "react-icons/fa"; -import Button from "src/Components/Button/Button"; -import { useAppSelector } from "src/utils/hooks"; -import AddComment from "../AddComment/AddComment"; -import CommentCard from "../CommentCard/CommentCard"; -import { CommentWithReplies } from "../types"; - - -interface Props { - comment: CommentWithReplies - isRoot?: boolean; - canReply: boolean; - onClickedReply?: () => void; - onReply?: (text: string) => void -} - -export default function Comment({ comment, canReply, isRoot, onClickedReply, onReply }: Props) { - - const [replyOpen, setReplyOpen] = useState(false); - const [repliesCollapsed, toggleRepliesCollapsed] = useToggle(true) - const [scrollToLatestReply, setScrollToLatestReply] = useState(true); - const repliesContainer = useRef(null!) - const user = useAppSelector(s => s.user.me); - - - useEffect(() => { - if (repliesCollapsed) - setReplyOpen(false); - }, [repliesCollapsed]) - - useEffect(() => { - if (scrollToLatestReply) { - repliesContainer.current?.querySelector(`:scope > div:nth-child(${comment.replies.length})`)?.scrollIntoView({ behavior: 'smooth', block: "center" }) - setScrollToLatestReply(false); - } - }, [comment.replies.length, scrollToLatestReply]) - - const clickReply = () => { - if (isRoot) - setReplyOpen(true); - else - onClickedReply?.() - } - - const handleReply = async (text: string) => { - try { - await onReply?.(text); - toggleRepliesCollapsed(false); - setReplyOpen(false); - setScrollToLatestReply(true) - return true; - } catch (error) { - return false; - } - } - - return ( -
      - - {(comment.replies.length > 0 || replyOpen) &&
      -
      -
      - {comment.replies.length > 0 && - } -
      - {!repliesCollapsed && comment.replies.map(reply => )} - {replyOpen && } -
      -
      -
      } -
      - ) -} diff --git a/src/features/Posts/Components/Comments/CommentCard/CommentCard.stories.tsx b/src/features/Posts/Components/Comments/CommentCard/CommentCard.stories.tsx deleted file mode 100644 index 228e12b..0000000 --- a/src/features/Posts/Components/Comments/CommentCard/CommentCard.stories.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { MOCK_DATA } from 'src/mocks/data'; - -import CommentCard from './CommentCard'; - -export default { - title: 'Posts/Components/Comments/CommentCard', - component: CommentCard, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { - comment: MOCK_DATA.generatePostComments(1)[0] - -} - - diff --git a/src/features/Posts/Components/Comments/CommentCard/CommentCard.tsx b/src/features/Posts/Components/Comments/CommentCard/CommentCard.tsx deleted file mode 100644 index 30055a9..0000000 --- a/src/features/Posts/Components/Comments/CommentCard/CommentCard.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { marked } from "marked"; -import { BiComment } from "react-icons/bi"; -import VoteButton from "src/Components/VoteButton/VoteButton"; -import Header from "src/features/Posts/Components/PostCard/Header/Header"; -import { Comment } from "../types"; -import DOMPurify from 'dompurify'; -import { Vote_Item_Type } from "src/graphql"; -import { useVote } from "src/utils/hooks"; -import { useState } from "react"; -import Card from "src/Components/Card/Card"; - - -interface Props { - comment: Comment - canReply?: boolean; - onReply?: () => void -} - -export default function CommentCard({ comment, canReply, onReply }: Props) { - - const [votesCount, setVotesCount] = useState(comment.votes_count); - - const { vote } = useVote({ - itemId: comment.id, - itemType: Vote_Item_Type.PostComment, - }); - - return ( - -
      -
      -
      -
      - setVotesCount(s => s + amount)} - /> - {canReply && } -
      - - ) -} diff --git a/src/features/Posts/Components/Comments/CommentsSection/CommentsSection.stories.tsx b/src/features/Posts/Components/Comments/CommentsSection/CommentsSection.stories.tsx deleted file mode 100644 index 8ddfe69..0000000 --- a/src/features/Posts/Components/Comments/CommentsSection/CommentsSection.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { MOCK_DATA } from 'src/mocks/data'; - -import CommentsSection from './CommentsSection'; - -export default { - title: 'Posts/Components/Comments/CommentsSection', - component: CommentsSection, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { -} - - diff --git a/src/features/Posts/Components/Comments/CommentsSection/CommentsSection.tsx b/src/features/Posts/Components/Comments/CommentsSection/CommentsSection.tsx deleted file mode 100644 index f35d36b..0000000 --- a/src/features/Posts/Components/Comments/CommentsSection/CommentsSection.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import { useState } from 'react' -import CommentRoot from '../Comment/Comment' -import AddComment from '../AddComment/AddComment' -import { useAppSelector } from "src/utils/hooks"; - -import { Post_Type } from 'src/graphql' -import useComments from './useComments' -import IconButton from 'src/Components/IconButton/IconButton' -import { AiOutlineClose } from 'react-icons/ai' -import { Link, useLocation } from 'react-router-dom' -import { createRoute, PAGES_ROUTES } from 'src/utils/routing' -import Preferences from 'src/services/preferences.service' -import Card from 'src/Components/Card/Card'; - -// const createWorker = createWorkerFactory(() => import('./comments.worker')); - - -interface Props { - type: Post_Type, - id: number | string -}; - - -export default function CommentsSection({ type, id }: Props) { - - const user = useAppSelector(state => state.user.me); - const [showTooltip, setShowTooltip] = useState(Preferences.get('showNostrCommentsTooltip')); - const location = useLocation() - - const { commentsTree, postComment, connectionStatus } = useComments({ type, id }) - - const handleNewComment = async (content: string, parentId?: string) => { - try { - await postComment({ content, parentId }); - return true; - } catch (error) { - return false - } - } - - const closeTooltip = () => { - Preferences.update('showNostrCommentsTooltip', false); - setShowTooltip(false); - } - - - return ( - -
      -
      Discussion
      - {connectionStatus.status === 'Connected' &&
      • Connected to {connectionStatus.connectedRelaysCount} relays 📡
      } - {connectionStatus.status === 'Connecting' &&
      • Connecting to relays ⌛
      } - {connectionStatus.status === 'Not Connected' &&
      • Not connected 📡
      } -
      - - {showTooltip &&
      - 💬 -

      Learn about how your data is stored with Nostr comments and relays

      - -
      } - - {
      -
      - handleNewComment(content)} - avatar={user?.avatar ?? 'https://avatars.dicebear.com/api/bottts/Default.svg'} - /> -
      - {!user &&
      - Connect with ⚡ to comment -
      } -
      } - -
      - {commentsTree.map(comment => - handleNewComment(content, comment.nostr_id.toString())} - />)} -
      -       - ) -} diff --git a/src/features/Posts/Components/Comments/CommentsSection/comments.worker.ts b/src/features/Posts/Components/Comments/CommentsSection/comments.worker.ts deleted file mode 100644 index 4cf3e50..0000000 --- a/src/features/Posts/Components/Comments/CommentsSection/comments.worker.ts +++ /dev/null @@ -1,246 +0,0 @@ -import debounce from 'lodash.debounce'; -import { relayPool } from 'nostr-tools' -import { Nullable } from 'remirror'; -import { CONSTS } from 'src/utils'; -import { Comment } from '../types'; - - -const pool = relayPool(); - - - -export function connect() { - CONSTS.DEFAULT_RELAYS.forEach(url => { - pool.addRelay(url, { read: true, write: true }) - }) - pool.onNotice((notice: string, relay: any) => { - console.log(`${relay.url} says: ${notice}`) - }) -}; - -let events: Record> = {}; - -export function sub(filter: string, cb: (data: Comment[]) => void) { - - const reconstructTree = debounce(async () => { - const newComments = await constructTree(); - cb(newComments) - }, 1000) - - - let sub = pool.sub({ - filter: { - "#r": [filter] - }, - cb: async (event: Required) => { - //Got a new event - if (!event.id) return; - - if (event.id in events) return; - - events[event.id] = event - reconstructTree() - - document.dispatchEvent( - new CustomEvent('nostr-event', { - detail: event - }) - ) - } - }); - - return () => { - sub.unsub(); - events = {}; - }; -} - -async function signEvent(event: any) { - const res = await fetch(CONSTS.apiEndpoint + '/nostr-sign-event', { - method: "post", - body: JSON.stringify({ event }), - credentials: 'include', - headers: { - 'Content-Type': 'application/json' - }, - }); - const data = await res.json() - return data.event; -} - -async function confirmPublishingEvent(event: any) { - const res = await fetch(CONSTS.apiEndpoint + '/nostr-confirm-event', { - method: "post", - body: JSON.stringify({ event }), - credentials: 'include', - headers: { - 'Content-Type': 'application/json' - }, - }); - const data = await res.json() - return data.event; -} - - -async function getCommentsExtraData(ids: string[]) { - const res = await fetch(CONSTS.apiEndpoint + '/nostr-events-extra-data', { - method: "post", - body: JSON.stringify({ ids }), - credentials: 'include', - headers: { - 'Content-Type': 'application/json' - }, - }); - - type EventExtraData = { - id: number - nostr_id: string - votes_count: number - user: { - id: number, - avatar: string, - name: string, - } - } - - const data = await res.json() as EventExtraData[]; - - const map = new Map() - data.forEach(item => { - map.set(item.nostr_id, item) - }); - return map; -} - - - -export async function post({ content, filter, parentId }: { - content: string, - filter: string, - parentId?: string -}) { - - const tags = []; - tags.push(['r', filter]); - if (parentId) - tags.push(['e', `${parentId} ${CONSTS.DEFAULT_RELAYS[0]} reply`]) - - let event: NostrEvent; - try { - event = await signEvent({ - // pubkey: globalKeys.pubkey, - // created_at: Math.round(Date.now() / 1000), - kind: 1, - tags, - content, - }) as NostrEvent; - } catch (error) { - alert("Couldn't sign the object successfully...") - return; - } - - - - - return new Promise((resolve, reject) => { - - pool.publish(event, (status: number, relay: string) => { - switch (status) { - case -1: - console.log(`failed to send ${JSON.stringify(event)} to ${relay}`) - break - case 1: - clearTimeout(publishTimeout) - console.log(`event ${event.id?.slice(0, 5)}… published to ${relay}.`) - break - } - }); - - const onEventFetched = (e: CustomEvent) => { - if (e.detail.id === event.id) { - document.removeEventListener('nostr-event', onEventFetched); - confirmPublishingEvent(event) - resolve(); - } - } - document.addEventListener('nostr-event', onEventFetched); - - const publishTimeout = setTimeout(() => { - document.removeEventListener('nostr-event', onEventFetched); - reject("Failed to publish to any relay..."); - }, 5000) - - - }) -} - -function extractParentId(event: NostrEvent): Nullable { - - for (const [identifier, value] of event.tags) { - if (identifier === 'e') { - const [eventId, , marker] = value.split(' '); - if (marker === 'reply') return eventId; - } - } - return null; -} - -export async function constructTree() { - // This function is responsible for transforming the object shaped events into a tree of comments - // ---------------------------------------------------------------------------------------------- - - // Sort them chronologically from oldest to newest - let sortedEvenets = Object.values(events).sort((a, b) => a.created_at - b.created_at); - - - // Extract the pubkeys used - const pubkeysSet = new Set(); - sortedEvenets.forEach(e => pubkeysSet.add(e.pubkey)); - - // Make a request to api to get comments extra data - const commentsExtraData = await getCommentsExtraData(Object.keys(events)); - - let eventsTree: Record = {} - // If event is a reply, connect it to parent - sortedEvenets.forEach(e => { - const parentId = extractParentId(e); - const extraData = commentsExtraData.get(e.id); - - // if no extra data is here then that means this event wasn't done from our platform - if (!extraData) return; - - if (parentId) { - eventsTree[parentId]?.replies.push({ - id: extraData.id, - nostr_id: e.id, - body: e.content, - created_at: e.created_at * 1000, - pubkey: e.pubkey, - author: extraData.user, - replies: [], - votes_count: extraData.votes_count - }); - } else { - eventsTree[e.id] = ({ - id: extraData.id, - nostr_id: e.id, - body: e.content, - created_at: e.created_at * 1000, - pubkey: e.pubkey, - author: extraData.user, - replies: [], - votes_count: extraData.votes_count - - }); - } - }) - - // Run the censoring service - // (nothing for now -:-) - - // Turn the top roots replies into a sorted array - const sortedTree = Object.values(eventsTree).sort((a, b) => b.created_at - a.created_at) - // Publish the new tree. - return sortedTree; - -} \ No newline at end of file diff --git a/src/features/Posts/Components/Comments/CommentsSection/useComments.tsx b/src/features/Posts/Components/Comments/CommentsSection/useComments.tsx deleted file mode 100644 index 6988a94..0000000 --- a/src/features/Posts/Components/Comments/CommentsSection/useComments.tsx +++ /dev/null @@ -1,293 +0,0 @@ -import { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import { relayPool } from 'nostr-tools' -import { Nullable } from 'remirror'; -import { CONSTS } from 'src/utils'; -import { Comment } from "../types"; -import { useDebouncedState } from "@react-hookz/web"; -import { Post_Type } from "src/graphql"; - -const pool = relayPool(); - -const useComments = (config: { - type: Post_Type, - id: string | number; - -}) => { - const commentsEventsTemp = useRef>>({}) - const [commentsEvents, setCommentsEvents] = useDebouncedState>>({}, 1000) - const pendingResolvers = useRef void>>({}); - const [connectionStatus, setConnectionStatus] = useState({ status: "Connecting", connectedRelaysCount: 0 }) - const filter = useMemo(() => `boltfun ${config.type}_comment ${config.id}` + (process.env.NODE_ENV === 'development' ? ' dev' : ""), [config.id, config.type]) - - const [commentsTree, setCommentsTree] = useState([]) - - - useEffect(() => { - connect(); - let sub = pool.sub({ - filter: { - "#r": [filter] - }, - cb: async (event: Required) => { - //Got a new event - if (!event.id) return; - - if (event.id in commentsEventsTemp.current) return; - - commentsEventsTemp.current[event.id] = event; - - setCommentsEvents({ ...commentsEventsTemp.current }) - } - }); - - return () => { - sub.unsub(); - }; - }, [filter, setCommentsEvents]); - - useEffect(() => { - (async () => { - const newTree = await buildTree(commentsEvents); - setCommentsTree(newTree); - Object.entries(pendingResolvers.current).forEach(([id, resolve]) => { - if (id in commentsEvents) { - delete pendingResolvers.current[id]; - resolve(); - } - }); - })(); - }, [commentsEvents]); - - - useEffect(() => { - const interval = setInterval(() => { - const newStatus = getConnectionStatus(); - if (newStatus.connectedRelaysCount !== connectionStatus.connectedRelaysCount || newStatus.status !== connectionStatus.status) - setConnectionStatus(newStatus); - }, 5000) - - return () => { - clearInterval(interval) - } - }, [connectionStatus.connectedRelaysCount, connectionStatus.status]) - - - const postComment = useCallback(async ({ content, parentId }: { - content: string, - parentId?: string - }) => { - - const tags = []; - tags.push(['r', filter]); - if (parentId) - tags.push(['e', `${parentId} ${CONSTS.DEFAULT_RELAYS[0]} reply`]) - - let event: NostrEvent; - try { - event = await signEvent({ - kind: 1, - tags, - content, - }) as NostrEvent; - } catch (error) { - alert("Couldn't sign the object successfully...") - return; - } - - return new Promise((resolve, reject) => { - let confirmationSent = false; - - pool.publish(event, (status: number, relay: string) => { - switch (status) { - case -1: - console.log(`failed to send ${JSON.stringify(event)} to ${relay}`) - break - case 1: - clearTimeout(publishTimeout) - console.log(`event ${event.id?.slice(0, 5)}… published to ${relay}.`) - if (!confirmationSent) { - confirmPublishingEvent(event) - confirmationSent = true; - } - break - } - }); - - pendingResolvers.current[event.id!] = resolve; - - const publishTimeout = setTimeout(() => { - delete pendingResolvers.current[event.id!] - reject("Failed to publish to any relay..."); - }, 5000) - - - }) - }, [filter]); - - - return { commentsTree, postComment, connectionStatus } -} - -export default useComments; - -function connect() { - CONSTS.DEFAULT_RELAYS.forEach(url => { - pool.addRelay(url, { read: true, write: true }) - }) - pool.onNotice((notice: string, relay: any) => { - console.log(`${relay.url} says: ${notice}`) - }) -}; - - -function extractParentId(event: NostrEvent): Nullable { - - for (const [identifier, value] of event.tags) { - if (identifier === 'e') { - const [eventId, , marker] = value.split(' '); - if (marker === 'reply') return eventId; - } - } - return null; -} - - -async function signEvent(event: any) { - const res = await fetch(CONSTS.apiEndpoint + '/nostr-sign-event', { - method: "post", - body: JSON.stringify({ event }), - credentials: 'include', - headers: { - 'Content-Type': 'application/json' - }, - }); - const data = await res.json() - return data.event; -} - -async function confirmPublishingEvent(event: any) { - await fetch(CONSTS.apiEndpoint + '/nostr-confirm-event', { - method: "post", - body: JSON.stringify({ event }), - credentials: 'include', - headers: { - 'Content-Type': 'application/json' - }, - }); - - -} - - -async function getCommentsExtraData(ids: string[]) { - const res = await fetch(CONSTS.apiEndpoint + '/nostr-events-extra-data', { - method: "post", - body: JSON.stringify({ ids }), - credentials: 'include', - headers: { - 'Content-Type': 'application/json' - }, - }); - - type EventExtraData = { - id: number - nostr_id: string - votes_count: number - user: { - id: number, - avatar: string, - name: string, - } - } - - const data = await res.json() as EventExtraData[]; - - const map = new Map() - data.forEach(item => { - map.set(item.nostr_id, item) - }); - return map; -} - -async function buildTree(events: Record>) { - - // Sort them chronologically from oldest to newest - let sortedEvenets = Object.values(events).sort((a, b) => a.created_at - b.created_at); - - - // Extract the pubkeys used - const pubkeysSet = new Set(); - sortedEvenets.forEach(e => pubkeysSet.add(e.pubkey)); - - // Make a request to api to get comments extra data - const commentsExtraData = await getCommentsExtraData(Object.keys(events)); - - let eventsTree: Record = {} - // If event is a reply, connect it to parent - sortedEvenets.forEach(e => { - const parentId = extractParentId(e); - const extraData = commentsExtraData.get(e.id); - - // if no extra data is here then that means this event wasn't done from our platform - if (!extraData) return; - - if (parentId) { - eventsTree[parentId]?.replies.push({ - id: extraData.id, - nostr_id: e.id, - body: e.content, - created_at: e.created_at * 1000, - pubkey: e.pubkey, - author: extraData.user, - replies: [], - votes_count: extraData.votes_count - }); - } else { - eventsTree[e.id] = ({ - id: extraData.id, - nostr_id: e.id, - body: e.content, - created_at: e.created_at * 1000, - pubkey: e.pubkey, - author: extraData.user, - replies: [], - votes_count: extraData.votes_count - - }); - } - }) - - // Run the censoring service - // (nothing for now -:-) - - // Turn the top roots replies into a sorted array - const sortedTree = Object.values(eventsTree).sort((a, b) => b.created_at - a.created_at) - - return sortedTree; -} - -type ConnectionStatus = { - status: 'Connected' | "Connecting" | "Not Connected", - connectedRelaysCount: number -} - -function getConnectionStatus(): ConnectionStatus { - let openedCnt = 0, reconnectingCnt = 0; - - for (const relayUrl in pool.relays) { - const relayStatus = pool.relays[relayUrl].relay.status; - if (relayStatus === 1) openedCnt += 1; - if (relayStatus === 0) reconnectingCnt += 1; - } - - const finalStatus = openedCnt > 0 ? - "Connected" : - reconnectingCnt > 0 ? - "Connecting" : - "Not Connected"; - - return { - status: finalStatus, - connectedRelaysCount: openedCnt - } -} \ No newline at end of file diff --git a/src/features/Posts/Components/Comments/helpers.tsx b/src/features/Posts/Components/Comments/helpers.tsx deleted file mode 100644 index 392c44c..0000000 --- a/src/features/Posts/Components/Comments/helpers.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Comment, CommentWithReplies } from "./types"; - - -// export function convertCommentsToTree(comments: Comment[]) { -// let tree: Record = {}; - -// for (const comment of comments) -// tree[comment.id] = { ...comment, replies: [] } - -// for (const comment of Object.values(tree)) { -// if (comment.parentId) -// tree[comment.parentId].replies = [...tree[comment.parentId].replies, comment] -// } - -// // TODO -// // Sort the comments according to date - -// return Object.values(tree).filter(node => !node.parentId); -// } \ No newline at end of file diff --git a/src/features/Posts/Components/Comments/index.tsx b/src/features/Posts/Components/Comments/index.tsx deleted file mode 100644 index 2c748fc..0000000 --- a/src/features/Posts/Components/Comments/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CommentsSection/CommentsSection' \ No newline at end of file diff --git a/src/features/Posts/Components/Comments/types.ts b/src/features/Posts/Components/Comments/types.ts deleted file mode 100644 index 026bdaf..0000000 --- a/src/features/Posts/Components/Comments/types.ts +++ /dev/null @@ -1,18 +0,0 @@ - -import { Author } from "src/features/Posts/types"; - -export interface Comment { - id: number, - nostr_id: string; - pubkey: string; - author?: Pick; - body: any; - created_at: number; - replies: Comment[] - votes_count: number -} - -export interface CommentWithReplies extends Comment { - replies: CommentWithReplies[] -} - diff --git a/src/features/Posts/Components/PostCard/BountyCard/BountyCard.stories.tsx b/src/features/Posts/Components/PostCard/BountyCard/BountyCard.stories.tsx deleted file mode 100644 index dce5f37..0000000 --- a/src/features/Posts/Components/PostCard/BountyCard/BountyCard.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { MOCK_DATA } from 'src/mocks/data'; - -import BountyCard from './BountyCard'; - -export default { - title: 'Posts/Components/BountyCard', - component: BountyCard, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { - bounty: MOCK_DATA['posts'].bounties[0] -} - - diff --git a/src/features/Posts/Components/PostCard/BountyCard/BountyCard.tsx b/src/features/Posts/Components/PostCard/BountyCard/BountyCard.tsx deleted file mode 100644 index c5c560b..0000000 --- a/src/features/Posts/Components/PostCard/BountyCard/BountyCard.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { Bounty } from "src/features/Posts/types" -import Header from "../Header/Header" -import { FiUsers } from "react-icons/fi" -import Badge from "src/Components/Badge/Badge" -import Button from "src/Components/Button/Button" -import { Link } from "react-router-dom" -import VoteButton from "src/Components/VoteButton/VoteButton" -import { Author, Tag } from "src/graphql" - -export type BountyCardType = Pick & { - tags: Array> - author: Pick -}; -interface Props { - bounty: BountyCardType -} -export default function BountyCard({ bounty }: Props) { - - const handleApply = () => { - - } - - return ( -
      - {bounty.cover_image && } -
      -
      -
      -
      - -

      - Bounty {bounty.title} -

      - - -
      - -
      -
      - Reward: - {bounty.reward_amount} sats -
      -

      {bounty.excerpt}

      - -
      - {bounty.tags.map(tag => - {tag.title} - )} -
      - -
      -
      - -
      - {bounty.applicants_count} Applicants -
      -
      - - - -
      -
      - ) -} diff --git a/src/features/Posts/Components/PostCard/Header/Header.Skeleton.tsx b/src/features/Posts/Components/PostCard/Header/Header.Skeleton.tsx deleted file mode 100644 index 31b7404..0000000 --- a/src/features/Posts/Components/PostCard/Header/Header.Skeleton.tsx +++ /dev/null @@ -1,23 +0,0 @@ - -import Skeleton from 'react-loading-skeleton'; - -interface Props { - size?: 'sm' | 'md' -} - -export default function HeaderSkeleton({ size = 'md', }: Props) { - - return ( -
      - -
      -

      - -

      -

      - -

      -
      -
      - ) -} diff --git a/src/features/Posts/Components/PostCard/Header/Header.tsx b/src/features/Posts/Components/PostCard/Header/Header.tsx deleted file mode 100644 index 2c2c81c..0000000 --- a/src/features/Posts/Components/PostCard/Header/Header.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'; -import dayjs from 'dayjs' -import { UnionToObjectKeys } from 'src/utils/types/utils'; -import { trimText } from 'src/utils/helperFunctions'; -import { Link } from 'react-router-dom'; -import { createRoute } from 'src/utils/routing'; - -interface Props { - author?: { - id: number, - name: string, - avatar: string - } - date: string; - size?: 'sm' | 'md' | 'lg'; - showTimeAgo?: boolean; -} - -const avatarSize: UnionToObjectKeys = { - sm: 32, - md: 40, - lg: 48 -} - -const nameSize: UnionToObjectKeys = { - sm: 'text-body5', - md: 'text-body4', - lg: 'text-body4' -} - -export default function Header({ - size = 'md', - showTimeAgo = false, - ...props }: Props) { - - const passedTime = dayjs().diff(props.date, 'hour'); - - const dateToShow = () => { - const passedTime = dayjs().diff(props.date, 'hour'); - if (passedTime === 0) return 'now'; - if (passedTime < 24) return `${dayjs().diff(props.date, 'hour')}h ago` - return dayjs(props.date).format('MMMM DD'); - } - - - return ( -
      - {props.author ? - - - - : - <> - } -
      -

      {props.author ? trimText(props.author.name, 30) : "Anonymouse"}

      -

      {dateToShow()}

      -
      - {/* {showTimeAgo &&

      - {dayjs().diff(props.date, 'hour') < 24 ? `${dayjs().diff(props.date, 'hour')}h ago` : undefined} -

      } */} -
      - ) -} diff --git a/src/features/Posts/Components/PostCard/PostCard/PostCard.Skeleton.tsx b/src/features/Posts/Components/PostCard/PostCard/PostCard.Skeleton.tsx deleted file mode 100644 index 8022a91..0000000 --- a/src/features/Posts/Components/PostCard/PostCard/PostCard.Skeleton.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import Skeleton from "react-loading-skeleton" -import Badge from 'src/Components/Badge/Badge' -import Card from "src/Components/Card/Card" - -export default function PostCardSkeleton() { - return
      -
      - - -

      -       -
      - -
      - -
      - -

      - -

      -

      - - -

      - -
      -
      - -
      - -
      -
      - - -       -
      -} diff --git a/src/features/Posts/Components/PostCard/PostCard/PostCard.stories.tsx b/src/features/Posts/Components/PostCard/PostCard/PostCard.stories.tsx deleted file mode 100644 index bc31427..0000000 --- a/src/features/Posts/Components/PostCard/PostCard/PostCard.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { MOCK_DATA } from 'src/mocks/data'; - -import PostCard from './PostCard'; -import PostCardSkeleton from './PostCard.Skeleton'; - -export default { - title: 'Posts/Components/PostCard', - component: PostCard, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { - post: MOCK_DATA['posts'].stories[0] -} - -const LoadingTemplate: ComponentStory = (args) =>
      - -export const Loading = LoadingTemplate.bind({}); -Loading.args = { -} - - diff --git a/src/features/Posts/Components/PostCard/PostCard/PostCard.tsx b/src/features/Posts/Components/PostCard/PostCard/PostCard.tsx deleted file mode 100644 index eb44786..0000000 --- a/src/features/Posts/Components/PostCard/PostCard/PostCard.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { isStory, isBounty, isQuestion } from "src/features/Posts/types" -import BountyCard, { BountyCardType } from "../BountyCard/BountyCard" -import QuestionCard, { QuestionCardType } from "../QuestionCard/QuestionCard" -import StoryCard, { StoryCardType } from "../StoryCard/StoryCard" - -export type PostCardType = StoryCardType | QuestionCardType | BountyCardType; - -type Props = { - post: PostCardType -} - -export default function PostCard({ post }: Props) { - if (isStory(post)) - return - - if (isBounty(post)) - return - - if (isQuestion(post)) - return - - return null -} diff --git a/src/features/Posts/Components/PostCard/PostCardHeader/PostCardHeader.tsx b/src/features/Posts/Components/PostCard/PostCardHeader/PostCardHeader.tsx deleted file mode 100644 index 76f0893..0000000 --- a/src/features/Posts/Components/PostCard/PostCardHeader/PostCardHeader.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'; -import dayjs from 'dayjs' -import { UnionToObjectKeys } from 'src/utils/types/utils'; -import { trimText } from 'src/utils/helperFunctions'; -import { Link } from 'react-router-dom'; -import { createRoute } from 'src/utils/routing'; -import { Project, User } from 'src/graphql'; - -interface Props { - author?: Pick - project?: Pick | null - date: string; -} - - -export default function PostCardHeader(props: Props) { - - - const dateToShow = () => { - const passedTimeHrs = dayjs().diff(props.date, 'hour'); - const passedTimesDays = Math.ceil(passedTimeHrs / 24); - if (passedTimeHrs === 0) return 'now'; - if (passedTimeHrs < 24) return `${dayjs().diff(props.date, 'hour')}h ago` - if (passedTimesDays < 29) return `${passedTimesDays} days` - return dayjs(props.date).format('DD MMM'); - } - - if (!props.author) return null - - return ( -
      - - - - - {props.project && - - } - - - -

      {trimText(props.author.name, 20)}

      - - {props.project && <> - for - -

      {trimText(props.project.title, 15)}

      - - } -       -

      {dateToShow()}

      -
      - ) -} diff --git a/src/features/Posts/Components/PostCard/QuestionCard/QuestionCard.stories.tsx b/src/features/Posts/Components/PostCard/QuestionCard/QuestionCard.stories.tsx deleted file mode 100644 index 84e05ba..0000000 --- a/src/features/Posts/Components/PostCard/QuestionCard/QuestionCard.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { MOCK_DATA } from 'src/mocks/data'; - -import QuestionCard from './QuestionCard'; - -export default { - title: 'Posts/Components/QuestionCard', - component: QuestionCard, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { - question: MOCK_DATA['posts'].questions[0] -} - - diff --git a/src/features/Posts/Components/PostCard/QuestionCard/QuestionCard.tsx b/src/features/Posts/Components/PostCard/QuestionCard/QuestionCard.tsx deleted file mode 100644 index 6102ed2..0000000 --- a/src/features/Posts/Components/PostCard/QuestionCard/QuestionCard.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import VotesCount from "src/Components/VotesCount/VotesCount" -import { Question } from "src/features/Posts/types" -import Header from "../Header/Header" -import { FiUsers } from "react-icons/fi" -import Badge from "src/Components/Badge/Badge" -import { Link } from "react-router-dom" -import VoteButton from "src/Components/VoteButton/VoteButton" -import { Author, Tag } from "src/graphql" - -export type QuestionCardType = Pick & { - // comments: Array> - tags: Array> - author: Pick -}; -interface Props { - question: QuestionCardType -} -export default function QuestionCard({ question }: Props) { - return ( -
      - {/* */} -
      -
      -
      - -

      {question.title}

      - -
      -

      {question.excerpt}

      - -
      - - Help - - {question.tags.map(tag => - {tag.title} - )} -
      - -
      -
      - - {/*
      - {question.answers_count} Answers -
      */} -
      - -
      -
      - {/* {question.comments.slice(0, 2).map(comment =>
      -
      -

      {trimText(comment.body, 80)}

      -
      )} */} -
      - - {/*
      - - See all {question.answers_count} comments - -
      */} -
      -
      -
      - ) -} diff --git a/src/features/Posts/Components/PostCard/StoryCard/StoryCard.stories.tsx b/src/features/Posts/Components/PostCard/StoryCard/StoryCard.stories.tsx deleted file mode 100644 index 6649aaa..0000000 --- a/src/features/Posts/Components/PostCard/StoryCard/StoryCard.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { MOCK_DATA } from 'src/mocks/data'; - -import StoryCard from './StoryCard'; - -export default { - title: 'Posts/Components/StoryCard', - component: StoryCard, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { - story: MOCK_DATA['posts'].stories[0] -} - - diff --git a/src/features/Posts/Components/PostCard/StoryCard/StoryCard.tsx b/src/features/Posts/Components/PostCard/StoryCard/StoryCard.tsx deleted file mode 100644 index e85e7d2..0000000 --- a/src/features/Posts/Components/PostCard/StoryCard/StoryCard.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { Story } from "src/features/Posts/types" -import { Link } from "react-router-dom" -import VoteButton from "src/Components/VoteButton/VoteButton" -import { useVote } from "src/utils/hooks" -import { Author, Tag, Vote_Item_Type } from 'src/graphql'; -import Badge from "src/Components/Badge/Badge" -import { createRoute } from "src/utils/routing" -import { BiComment } from "react-icons/bi" -import Card from "src/Components/Card/Card" -import PostCardHeader from "../PostCardHeader/PostCardHeader" - - -export type StoryCardType = Pick & { - tags: Array>, - author: Pick -}; - -interface Props { - story: StoryCardType -} -export default function StoryCard({ story }: Props) { - - const { vote } = useVote({ - itemId: story.id, - itemType: Vote_Item_Type.Story - }); - - - return ( -
      - - - {story.cover_image && - - - - } -
      - -

      {story.title}

      - -

      {story.excerpt}...

      -
      - {story.tags.map(tag => - {tag.title} - )} -
      - -
      -
      - -
      - {story.comments_count} Comments -
      -
      -
      - -       -
      - ) -} diff --git a/src/features/Posts/Components/PostCard/index.tsx b/src/features/Posts/Components/PostCard/index.tsx deleted file mode 100644 index dbbd0ac..0000000 --- a/src/features/Posts/Components/PostCard/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import PostCard from "./PostCard/PostCard"; - -export { default as PostCardSkeleton } from './PostCard/PostCard.Skeleton' - -export default PostCard; \ No newline at end of file diff --git a/src/features/Posts/Components/PostsList/PostsList.stories.tsx b/src/features/Posts/Components/PostsList/PostsList.stories.tsx deleted file mode 100644 index 4bb226b..0000000 --- a/src/features/Posts/Components/PostsList/PostsList.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { MOCK_DATA } from 'src/mocks/data'; - -import PostsList from './PostsList'; - -export default { - title: 'Posts/Components/PostsList', - component: PostsList, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { - items: MOCK_DATA['feed'] -} - - diff --git a/src/features/Posts/Components/PostsList/PostsList.tsx b/src/features/Posts/Components/PostsList/PostsList.tsx deleted file mode 100644 index b27ce86..0000000 --- a/src/features/Posts/Components/PostsList/PostsList.tsx +++ /dev/null @@ -1,32 +0,0 @@ - -import { useReachedBottom } from "src/utils/hooks/useReachedBottom" -import { ListComponentProps } from "src/utils/interfaces" -import PostCard, { PostCardSkeleton } from "../PostCard" -import { PostCardType } from "../PostCard/PostCard/PostCard" - - -type Props = ListComponentProps - -export default function PostsList(props: Props) { - - const { ref } = useReachedBottom(props.onReachedBottom) - - if (props.isLoading) - return
      - {<> - - - - - } -
      - - return ( -
      - { - props.items?.map(post => ) - } - {props.isFetching && } -
      - ) -} diff --git a/src/features/Posts/Components/TrendingCard/TrendingCard.stories.tsx b/src/features/Posts/Components/TrendingCard/TrendingCard.stories.tsx deleted file mode 100644 index 6938216..0000000 --- a/src/features/Posts/Components/TrendingCard/TrendingCard.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; - -import TrendingCard from './TrendingCard'; - -export default { - title: 'Posts/Components/TrendingCard', - component: TrendingCard, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { -} - - diff --git a/src/features/Posts/Components/TrendingCard/TrendingCard.tsx b/src/features/Posts/Components/TrendingCard/TrendingCard.tsx deleted file mode 100644 index 8404bf5..0000000 --- a/src/features/Posts/Components/TrendingCard/TrendingCard.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import Skeleton from 'react-loading-skeleton' -import { Link } from 'react-router-dom' -import Card from 'src/Components/Card/Card' -import Avatar from 'src/features/Profiles/Components/Avatar/Avatar' -import { useTrendingPostsQuery } from 'src/graphql' -import { random } from 'src/utils/helperFunctions' -import { createRoute } from 'src/utils/routing' - -export default function TrendingCard() { - - const trendingPosts = useTrendingPostsQuery() - - - - return ( - -

      Trending on BOLT🔩FUN

      -
        - { - trendingPosts.loading ? - Array(4).fill(0).map((_, idx) =>
      • - -

        -

        -
        • - ) - : - trendingPosts.data?.getTrendingPosts.map(post => { - return -
      • - -

        {post.title}

        -
        • - - } - )} -
      -       - ) -} diff --git a/src/features/Posts/Components/TrendingCard/trendingPosts.graphql b/src/features/Posts/Components/TrendingCard/trendingPosts.graphql deleted file mode 100644 index 76f5baf..0000000 --- a/src/features/Posts/Components/TrendingCard/trendingPosts.graphql +++ /dev/null @@ -1,29 +0,0 @@ -query TrendingPosts { - getTrendingPosts { - ... on Story { - id - title - author { - id - avatar - } - } - ... on Bounty { - id - title - author { - id - avatar - } - } - - ... on Question { - id - title - author { - id - avatar - } - } - } -} diff --git a/src/features/Posts/index.tsx b/src/features/Posts/index.tsx deleted file mode 100644 index bcdab81..0000000 --- a/src/features/Posts/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ - -export { } \ No newline at end of file diff --git a/src/features/Posts/pages/CreatePostPage/Components/BountyForm/BountyForm.stories.tsx b/src/features/Posts/pages/CreatePostPage/Components/BountyForm/BountyForm.stories.tsx deleted file mode 100644 index 9bfc799..0000000 --- a/src/features/Posts/pages/CreatePostPage/Components/BountyForm/BountyForm.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { WithModals } from 'src/utils/storybook/decorators'; - -import BountyForm from './BountyForm'; - -export default { - title: 'Posts/Create Post Page/Bounty Form', - component: BountyForm, - argTypes: { - backgroundColor: { control: 'color' }, - }, - decorators: [WithModals] -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { -} - - diff --git a/src/features/Posts/pages/CreatePostPage/Components/BountyForm/BountyForm.tsx b/src/features/Posts/pages/CreatePostPage/Components/BountyForm/BountyForm.tsx deleted file mode 100644 index 368a9b6..0000000 --- a/src/features/Posts/pages/CreatePostPage/Components/BountyForm/BountyForm.tsx +++ /dev/null @@ -1,182 +0,0 @@ -import { yupResolver } from "@hookform/resolvers/yup"; -import { Controller, FormProvider, NestedValue, Resolver, SubmitHandler, useForm } from "react-hook-form"; -import Button from "src/Components/Button/Button"; -import DatePicker from "src/Components/Inputs/DatePicker/DatePicker"; -import TagsInput from "src/Components/Inputs/TagsInput/TagsInput"; -import { Tag } from "src/graphql"; -import { imageSchema } from "src/utils/validation"; -import * as yup from "yup"; -import ContentEditor from "../ContentEditor/ContentEditor"; - - -const schema = yup.object({ - title: yup - .string() - .required() - .min(10), - tags: yup - .array() - .required() - .min(1), - deadline: yup - .date() - .typeError('Deadline must be a valid date') - .required(), - bounty_amount: yup - .number() - .typeError('Bounty amount must be a valid number') - .required() - .min(100) - .label("Bounty Amount"), - body: yup - .string() - .required() - .min(50, 'you have to write at least 10 words'), - cover_image: imageSchema, -}).required(); - -interface IFormInputs { - title: string - deadline: Date - bounty_amount: number - tags: NestedValue - cover_image: NestedValue | string - body: string -} - - - -export default function BountyForm() { - - - const formMethods = useForm({ - resolver: yupResolver(schema) as Resolver, - defaultValues: { - title: '', - tags: [], - bounty_amount: 1000, - deadline: new Date(), - body: '', - cover_image: [] - } - }); - const { handleSubmit, control, register, formState: { errors }, } = formMethods; - - const onSubmit: SubmitHandler = data => console.log(data); - - return ( - -
      -
      -
      - {/* ( - - )} - /> */} -

      {errors.cover_image?.message}

      - - -

      - Title -

      -
      - -
      - {errors.title &&

      - {errors.title.message} -

      } - -
      -
      -

      - Bounty Amount -

      -
      - -

      - Sats -

      -
      -

      {errors.bounty_amount?.message}

      -
      -
      -

      - Deadline -

      - } - /> -

      {errors.deadline?.message}

      - -
      -
      - - -

      - Tags -

      - ( - - )} - /> - - {errors.tags &&

      - {errors.tags.message} -

      } -
      - - - {errors.body &&

      - {errors.body.message} -

      } -
      -
      - - -
      -
      -       - ) -} diff --git a/src/features/Posts/pages/CreatePostPage/Components/ContentEditor/ContentEditor.tsx b/src/features/Posts/pages/CreatePostPage/Components/ContentEditor/ContentEditor.tsx deleted file mode 100644 index bbf16e4..0000000 --- a/src/features/Posts/pages/CreatePostPage/Components/ContentEditor/ContentEditor.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import 'remirror/styles/all.css'; -import styles from './styles.module.scss' -import TurndownService from 'turndown' - -import javascript from 'refractor/lang/javascript'; -import typescript from 'refractor/lang/typescript'; -import { - BlockquoteExtension, - BoldExtension, - BulletListExtension, - CodeBlockExtension, - CodeExtension, - HardBreakExtension, - HeadingExtension, - ImageExtension, - ItalicExtension, - LinkExtension, - ListItemExtension, - MarkdownExtension, - NodeFormattingExtension, - OrderedListExtension, - PlaceholderExtension, - IframeExtension, - UnderlineExtension, -} from 'remirror/extensions'; -import { ExtensionPriority, InvalidContentHandler } from 'remirror'; -import { EditorComponent, Remirror, useRemirror } from '@remirror/react'; -import { useCallback, useEffect } from 'react'; -import TextEditorComponents from 'src/Components/Inputs/TextEditor'; -import Toolbar from './Toolbar'; - - -const turndownService = new TurndownService() -turndownService.keep(['iframe']); - -interface Props { - placeholder?: string; - initialContent?: () => string; - name?: string; -} - -export default function ContentEditor({ placeholder, initialContent, name }: Props) { - - const onError: InvalidContentHandler = useCallback(({ json, invalidContent, transformers }) => { - // Automatically remove all invalid nodes and marks. - return transformers.remove(json, invalidContent); - }, []); - - - const extensions = useCallback( - () => [ - new PlaceholderExtension({ placeholder }), - new LinkExtension({ - autoLink: true, - defaultTarget: "_blank", - extraAttributes: { - rel: 'noopener noreferrer' - } - }), - new MarkdownExtension({ - copyAsMarkdown: true, htmlToMarkdown: (html) => turndownService.turndown(html) - }), - new BoldExtension(), - // new StrikeExtension(), - new UnderlineExtension(), - new ItalicExtension(), - new HeadingExtension(), - new BlockquoteExtension(), - new BulletListExtension(), - new OrderedListExtension(), - new ListItemExtension({ priority: ExtensionPriority.High, enableCollapsible: true }), - // new TaskListExtension(), - new CodeExtension(), - new CodeBlockExtension({ - supportedLanguages: [javascript, typescript] - }), - new ImageExtension(), - new IframeExtension(), - // new TrailingNodeExtension(), - // new TableExtension(), - new NodeFormattingExtension(), - /** - * `HardBreakExtension` allows us to create a newline inside paragraphs. - * e.g. in a list item - */ - new HardBreakExtension(), - ], - [placeholder], - ); - - - const { manager } = useRemirror({ - extensions, - stringHandler: 'markdown', - onError, - }); - - - return ( -
      - - - - - -
      - ); -}; - - diff --git a/src/features/Posts/pages/CreatePostPage/Components/ContentEditor/Toolbar.tsx b/src/features/Posts/pages/CreatePostPage/Components/ContentEditor/Toolbar.tsx deleted file mode 100644 index d0f2e53..0000000 --- a/src/features/Posts/pages/CreatePostPage/Components/ContentEditor/Toolbar.tsx +++ /dev/null @@ -1,38 +0,0 @@ - -import TextEditorComponents from 'src/Components/Inputs/TextEditor'; - - - -export default function Toolbar() { - - return ( -
      -
      - - - - -
      -
      - {/* - - */} - - - - - - - - -
      - - -
      - - -
      - -
      - ) -} diff --git a/src/features/Posts/pages/CreatePostPage/Components/ContentEditor/styles.module.scss b/src/features/Posts/pages/CreatePostPage/Components/ContentEditor/styles.module.scss deleted file mode 100644 index 9ecd9be..0000000 --- a/src/features/Posts/pages/CreatePostPage/Components/ContentEditor/styles.module.scss +++ /dev/null @@ -1,43 +0,0 @@ -@import "/src/styles/mixins/index.scss"; - -.wrapper { - :global { - .ProseMirror { - overflow: hidden; - border-bottom-left-radius: inherit; - border-bottom-right-radius: inherit; - min-height: var(--rmr-space-7); - - a { - color: rgb(54, 139, 236); - - &:hover { - text-decoration: underline; - cursor: pointer; - } - } - - li { - & > label { - display: none; - } - } - - @include post-body; - } - .remirror-editor-wrapper { - height: calc(min(60vh, 640px)); - overflow-y: scroll; - - &::-webkit-scrollbar { - width: 8px; - } - } - - .ProseMirror, - .ProseMirror:active, - .ProseMirror:focus { - box-shadow: none; - } - } -} diff --git a/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftContainer.stories.tsx b/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftContainer.stories.tsx deleted file mode 100644 index f47f3a3..0000000 --- a/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftContainer.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { Post_Type } from 'src/graphql'; -import { WithModals, WrapForm } from 'src/utils/storybook/decorators'; -import { IStoryFormInputs } from '../../CreateStoryPage/CreateStoryPage'; - -import DraftsContainer from './DraftsContainer'; - -export default { - title: 'Posts/Create Post Page/Drafts Container', - component: DraftsContainer, - argTypes: { - backgroundColor: { control: 'color' }, - }, - decorators: [WithModals, WrapForm({ - defaultValues: { - tags: [], - } - })] -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { - type: Post_Type.Story -} - - diff --git a/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftsContainer.tsx b/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftsContainer.tsx deleted file mode 100644 index 9135853..0000000 --- a/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftsContainer.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import { createAction } from '@reduxjs/toolkit'; -import React, { useCallback, useState } from 'react' -import { useFormContext } from 'react-hook-form'; -import Button from 'src/Components/Button/Button'; -import Card from 'src/Components/Card/Card'; -import LoadingPage from 'src/Components/LoadingPage/LoadingPage'; -import { isStory } from 'src/features/Posts/types'; -import { Post_Type, useDeleteStoryMutation, useGetMyDraftsQuery, usePostDetailsLazyQuery } from 'src/graphql' -import { openModal } from 'src/redux/features/modals.slice'; -import { NotificationsService } from 'src/services'; -import { getDateDifference } from 'src/utils/helperFunctions'; -import { useAppDispatch } from 'src/utils/hooks'; -import { useReduxEffect } from 'src/utils/hooks/useReduxEffect'; -import { CreateStoryType, IStoryFormInputs } from '../../CreateStoryPage/CreateStoryPage'; - -interface Props { - id?: string; - type: Post_Type, - onDraftLoad?: () => void, -} - -const CONFIRM_DELETE_STORY = createAction<{ confirmed?: boolean, id: number }>('DELETE_STORY_CONFIRMED')({ id: -1 }) - -export default function DraftsContainer({ id, type, onDraftLoad }: Props) { - - - const myDraftsQuery = useGetMyDraftsQuery({ variables: { type } }); - const [fetchDraft] = usePostDetailsLazyQuery(); - const [deleteStory] = useDeleteStoryMutation({ - refetchQueries: ['GetMyDrafts'] - }) - const { setValue } = useFormContext() - const dispatch = useAppDispatch(); - - const [loading, setLoading] = useState(false) - - const loadDraft = (id: number) => { - if (!loading) - setLoading(true); - fetchDraft({ variables: { type, id } }) - .then(({ data }) => { - // data.data?.getPostById. - if (data?.getPostById) { - if (isStory(data.getPostById)) { - setValue('id', data.getPostById.id); - setValue('title', data.getPostById.title); - setValue('tags', data.getPostById.tags); - setValue('body', data.getPostById.body); - setValue('cover_image', data.getPostById.cover_image ? { url: data.getPostById.cover_image, id: null, name: null } : null); - setValue('is_published', data.getPostById.is_published); - } - - } - - onDraftLoad?.() - }) - .catch(() => { - NotificationsService.error("Unexpected error happened...") - }) - .finally(() => { - setLoading(false); - }) - } - - - const onConfirmDelete = useCallback(({ payload: { confirmed, id } }: typeof CONFIRM_DELETE_STORY) => { - if (confirmed) - deleteStory({ - variables: { - deleteStoryId: id - } - }) - }, [deleteStory]) - - useReduxEffect(onConfirmDelete, CONFIRM_DELETE_STORY.type); - - const deleteDraft = (id: number) => { - dispatch(openModal({ - Modal: "ConfirmModal", - props: { - callbackAction: { - type: CONFIRM_DELETE_STORY.type, - payload: { - id - } - }, - actionName: "Delete", - title: "Delete Draft", - message: "Are you sure you want to delete this draft ??", - color: "red" - } - })) - } - - return ( - -
      - {(!myDraftsQuery.loading && myDraftsQuery.data?.getMyDrafts && myDraftsQuery.data.getMyDrafts.length > 0) && - -

      Saved Drafts

      -
        - {myDraftsQuery.data.getMyDrafts.map(draft => -
      • -

        loadDraft(draft.id)} - > - {draft.title} -

        -
        -

        Last edited {getDateDifference(draft.updatedAt, { dense: true })} ago

        - -
        -
        • )} -
      -       } - {loading && } -
      - ) -} diff --git a/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/getMyDrafts.graphql b/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/getMyDrafts.graphql deleted file mode 100644 index 6bb1eef..0000000 --- a/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/getMyDrafts.graphql +++ /dev/null @@ -1,19 +0,0 @@ -query GetMyDrafts($type: POST_TYPE!) { - getMyDrafts(type: $type) { - ... on Story { - id - title - updatedAt - } - ... on Bounty { - id - title - updatedAt - } - ... on Question { - id - title - updatedAt - } - } -} diff --git a/src/features/Posts/pages/CreatePostPage/Components/ErrorsContainer/ErrorsContainer.tsx b/src/features/Posts/pages/CreatePostPage/Components/ErrorsContainer/ErrorsContainer.tsx deleted file mode 100644 index f5be324..0000000 --- a/src/features/Posts/pages/CreatePostPage/Components/ErrorsContainer/ErrorsContainer.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React, { forwardRef } from 'react' -import { useFormContext } from 'react-hook-form' -import { IStoryFormInputs } from '../../CreateStoryPage/CreateStoryPage'; - -interface Props { - id?: string; -} - -const ErrorsContainer = forwardRef((props, ref) => { - - const { formState: { isValid, isSubmitted, errors } } = useFormContext(); - - - const hasErrors = Object.values(errors).length > 0 - - return ( - hasErrors ?
      - {(!isValid && isSubmitted) &&
        - {errors.title &&
      • - {errors.title.message} -
        • } - {errors.cover_image &&
      • - {errors.cover_image.message} -
        • } - {errors.tags &&
      • - {errors.tags.message} -
        • } - {errors.body &&
      • - {errors.body.message} -
        • } -
      } -
      - : - null - ) -}) - -export default ErrorsContainer; \ No newline at end of file diff --git a/src/features/Posts/pages/CreatePostPage/Components/PreviewPostCard/PreviewPostCard.stories.tsx b/src/features/Posts/pages/CreatePostPage/Components/PreviewPostCard/PreviewPostCard.stories.tsx deleted file mode 100644 index 99d41ff..0000000 --- a/src/features/Posts/pages/CreatePostPage/Components/PreviewPostCard/PreviewPostCard.stories.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { MOCK_DATA } from 'src/mocks/data'; - -import PreviewPostCard from './PreviewPostCard'; - -export default { - title: 'Posts/Post Details Page/Components/Preview Post Card', - component: PreviewPostCard, - argTypes: { - backgroundColor: { control: 'color' }, - }, -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { - post: MOCK_DATA.posts.stories[0] -} - - - - diff --git a/src/features/Posts/pages/CreatePostPage/Components/PreviewPostCard/PreviewPostCard.tsx b/src/features/Posts/pages/CreatePostPage/Components/PreviewPostCard/PreviewPostCard.tsx deleted file mode 100644 index dbfd312..0000000 --- a/src/features/Posts/pages/CreatePostPage/Components/PreviewPostCard/PreviewPostCard.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { marked } from 'marked'; -import styles from 'src/features/Posts/pages/PostDetailsPage/Components/PageContent/styles.module.scss' -import Badge from "src/Components/Badge/Badge"; -import { Post } from "src/graphql"; -import Card from 'src/Components/Card/Card'; - -function isPost(type?: string): type is 'story' { - return type === 'story' - // || type === 'question' || type === 'bounty' -} - - -interface Props { - post: Pick & { - tags: Array<{ title: string }> - cover_image?: string | File | null - } -} - -export default function PreviewPostContent({ post, }: Props) { - - let coverImg: string; - if (!post.cover_image) - coverImg = ""; - else if (typeof post.cover_image === 'string') - coverImg = post.cover_image; - else - coverImg = URL.createObjectURL(post.cover_image); - - - return ( -
      - - {coverImg && - } -
      -

      {post.title}

      - {post.tags.length > 0 &&
      - {post.tags.map((tag, idx) => - {tag.title} - )} -
      } -
      - -
      -
      - -       - -
      - ) -} diff --git a/src/features/Posts/pages/CreatePostPage/Components/QuestionForm/QuestionForm.stories.tsx b/src/features/Posts/pages/CreatePostPage/Components/QuestionForm/QuestionForm.stories.tsx deleted file mode 100644 index e4da1db..0000000 --- a/src/features/Posts/pages/CreatePostPage/Components/QuestionForm/QuestionForm.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { WithModals } from 'src/utils/storybook/decorators'; - -import QuestionForm from './QuestionForm'; - -export default { - title: 'Posts/Create Post Page/Question Form', - component: QuestionForm, - argTypes: { - backgroundColor: { control: 'color' }, - }, - decorators: [WithModals] -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { -} - - diff --git a/src/features/Posts/pages/CreatePostPage/Components/QuestionForm/QuestionForm.tsx b/src/features/Posts/pages/CreatePostPage/Components/QuestionForm/QuestionForm.tsx deleted file mode 100644 index 9643781..0000000 --- a/src/features/Posts/pages/CreatePostPage/Components/QuestionForm/QuestionForm.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import { yupResolver } from "@hookform/resolvers/yup"; -import { Controller, FormProvider, NestedValue, Resolver, SubmitHandler, useForm } from "react-hook-form"; -import Button from "src/Components/Button/Button"; -import TagsInput from "src/Components/Inputs/TagsInput/TagsInput"; -import { Tag } from "src/graphql"; -import * as yup from "yup"; -import ContentEditor from "../ContentEditor/ContentEditor"; - - -const schema = yup.object({ - title: yup.string().required().min(10), - tags: yup.array().required().min(1), - body: yup.string().required().min(50, 'you have to write at least 10 words'), - cover_image: yup.lazy((value: string | File[]) => { - switch (typeof value) { - case 'object': - return yup.array() - .test("fileSize", "File Size is too large", (files) => (files as File[]).every(file => file.size <= 5242880)) - .test("fileType", "Unsupported File Format, only png/jpg/jpeg images are allowed", - (files) => (files as File[]).every((file: File) => - ["image/jpeg", "image/png", "image/jpg"].includes(file.type))) - case 'string': - return yup.string().url(); - default: - return yup.mixed() - } - }) -}).required(); - -interface IFormInputs { - title: string - tags: NestedValue - cover_image: NestedValue | string - body: string -} - - - -export default function QuestionForm() { - - - const formMethods = useForm({ - resolver: yupResolver(schema) as Resolver, - defaultValues: { - title: '', - tags: [], - body: '', - cover_image: [] - } - }); - const { handleSubmit, control, register, formState: { errors }, } = formMethods; - - const onSubmit: SubmitHandler = data => console.log(data); - - return ( - -
      -
      -
      - {/* ( - - )} - /> */} -

      {errors.cover_image?.message}

      - - -

      - Title -

      -
      - -
      - {errors.title &&

      - {errors.title.message} -

      } - - -

      - Tags -

      - ( - - )} - /> - {errors.tags &&

      - {errors.tags.message} -

      } -
      - - - {errors.body &&

      - {errors.body.message} -

      } -
      -
      - - -
      -
      -       - ) -} diff --git a/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.stories.tsx b/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.stories.tsx deleted file mode 100644 index e89e15b..0000000 --- a/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.stories.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { WithModals, WrapForm } from 'src/utils/storybook/decorators'; -import { IStoryFormInputs } from '../../CreateStoryPage/CreateStoryPage'; - -import StoryForm from './StoryForm'; - -export default { - title: 'Posts/Create Post Page/Story Form', - component: StoryForm, - argTypes: { - backgroundColor: { control: 'color' }, - }, - decorators: [WithModals, WrapForm({ - defaultValues: { - tags: [], - } - })] -} as ComponentMeta; - - -const Template: ComponentStory = (args) =>
      - -export const Default = Template.bind({}); -Default.args = { -} - - diff --git a/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx b/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx deleted file mode 100644 index 8c83dcd..0000000 --- a/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx +++ /dev/null @@ -1,222 +0,0 @@ -import { useEffect, useRef, useState } from 'react' -import { Controller, useFormContext } from "react-hook-form"; -import Button from "src/Components/Button/Button"; -import TagsInput from "src/Components/Inputs/TagsInput/TagsInput"; -import ContentEditor from "../ContentEditor/ContentEditor"; -import { useCreateStoryMutation } from 'src/graphql' -import { useNavigate } from 'react-router-dom' -import { useAppDispatch, } from 'src/utils/hooks'; -import { stageStory } from 'src/redux/features/staging.slice' -import { NotificationsService } from "src/services/notifications.service"; -import { createRoute } from 'src/utils/routing'; -import PreviewPostCard from '../PreviewPostCard/PreviewPostCard' -import { StorageService } from 'src/services'; -import { useThrottledCallback } from '@react-hookz/web'; -import { CreateStoryType } from '../../CreateStoryPage/CreateStoryPage'; -import CoverImageInput from 'src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput'; -import TagProjectInput from '../TagProjectInput/TagProjectInput'; - -interface Props { - isUpdating?: boolean; - isPublished?: boolean; - onSuccess?: (isDraft: boolean) => void, - onValidationError?: () => void -} - -const storageService = new StorageService('story-edit'); - -export default function StoryForm(props: Props) { - - - const dispatch = useAppDispatch(); - const navigate = useNavigate(); - const { handleSubmit, control, register, trigger, getValues, watch, reset } = useFormContext(); - - - const [editMode, setEditMode] = useState(true) - const [loading, setLoading] = useState(false); - const titleInputRef = useRef(null) - - - const presistPost = useThrottledCallback((value) => storageService.set(value), [], 1000) - useEffect(() => { - const subscription = watch(({ id, is_published, ...values }) => presistPost(values)); - return () => subscription.unsubscribe(); - }, [presistPost, watch]); - - useEffect(() => { - if (editMode) - setTimeout(() => titleInputRef.current?.setAttribute("style", "height:" + (titleInputRef.current.scrollHeight) + "px;overflow-y:hidden;"), 0) - }, [editMode]) - - - - const clickPreview = async () => { - const isValid = await trigger(); - - if (isValid) { - const data = getValues() - dispatch(stageStory(data)) - setEditMode(false); - } else { - clickSubmit(false)(); // I'm doing this so that the react-hook-form attaches onChange listener to inputs validation - } - } - - - const [createStory] = useCreateStoryMutation({ - onCompleted: (data) => { - reset() - storageService.clear(); - setLoading(false) - dispatch(stageStory(null)) - if (data.createStory?.is_published) - navigate(createRoute({ type: 'story', id: data.createStory?.id!, title: data.createStory?.title })) - props.onSuccess?.(!!data.createStory?.is_published); - }, - onError: (error) => { - NotificationsService.error('Unexpected error happened, please try again', { error }) - setLoading(false) - }, - refetchQueries: ['GetMyDrafts'] - }); - - const clickSubmit = (publish_now: boolean) => handleSubmit(data => { - setLoading(true); - createStory({ - variables: { - data: { - id: data.id, - title: data.title, - body: data.body, - tags: data.tags.map(t => t.title), - is_published: publish_now, - cover_image: data.cover_image, - project_id: data.project?.id, - }, - } - }) - }, props.onValidationError); - - - - - const postId = watch('id') ?? -1; - const { ref: registerTitleRef, ...titleRegisteration } = register('title'); - - - - - return ( - <> -
      - - -
      -
      - {editMode && <> -
      -
      -
      - { - onChange(e) - }} - // uploadText='Add a cover image' - /> - - } - /> -
      - - - -
      -