fixing merge conflicts

2026-01-09 09:24:30 +01:00 · 2021-12-10 21:45:12 +02:00
parent c2e888ed2c
commit 29fcce5e92
16 changed files with 105388 additions and 15324 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/Components/ClaimProject/Claim_CopySignatureCard.tsx
+++ b/src/Components/ClaimProject/Claim_CopySignatureCard.tsx
@@ -9,7 +9,7 @@ import { IoClose } from 'react-icons/io5';
 export default function Claim_CopySignatureCard({ onClose, direction, ...props }: ModalCard) {

    const dispatch = useAppDispatch();
-    const { projectName, image } = useAppSelector(state => ({ projectName: state.project?.title, image: state.project?.thumbnail_image, }))
+    const { projectName, image } = useAppSelector(state => ({ projectName: state.project.project?.title, image: state.project.project?.thumbnail_image, }))

    const generatedHash = '0x000330RaaSt302440zxc327jjiaswf19987183345pRReuBNksbaaueee'

--- a/src/Components/ClaimProject/Claim_GenerateSignatureCard.tsx
+++ b/src/Components/ClaimProject/Claim_GenerateSignatureCard.tsx
@@ -8,7 +8,7 @@ import { IoClose } from 'react-icons/io5';
 export default function Claim_GenerateSignatureCard({ onClose, direction, ...props }: ModalCard) {

    const dispatch = useAppDispatch();
-    const { projectName, image } = useAppSelector(state => ({ projectName: state.project?.title, image: state.project?.thumbnail_image, }))
+    const { projectName, image } = useAppSelector(state => ({ projectName: state.project.project?.title, image: state.project.project?.thumbnail_image, }))



--- a/src/Components/ExplorePage/Categories/Categories.tsx
+++ b/src/Components/ExplorePage/Categories/Categories.tsx
@@ -1,14 +1,14 @@
-import { useAllCategoriesQuery } from 'src/generated/graphql'
+import { useQuery } from '@apollo/client';
+import { ALL_CATEGORIES_QUERY, ALL_CATEGORIES_QUERY_RES } from './query';

 export default function Categories() {

-    const { data, loading } = useAllCategoriesQuery();
+    const { data, loading } = useQuery<ALL_CATEGORIES_QUERY_RES>(ALL_CATEGORIES_QUERY);

-    const handleClick = (categoryId: number) => {
+    const handleClick = (categoryId: string) => {

    }

-
    if (loading)
        return null;

--- a/src/Components/ExplorePage/Categories/query.ts
+++ b/src/Components/ExplorePage/Categories/query.ts
@@ -1,6 +1,7 @@
 import { gql } from "@apollo/client";
+import { ProjectCategory } from "src/utils/interfaces";

-export const QUERY_ALL_CATEGORIES = gql`
+export const ALL_CATEGORIES_QUERY = gql`
  query AllCategories {
    allCategories {
      id
@@ -8,3 +9,7 @@ export const QUERY_ALL_CATEGORIES = gql`
    }
  }
 `;
+
+export type ALL_CATEGORIES_QUERY_RES = {
+  allCategories: ProjectCategory[];
+};
--- a/src/Components/ExplorePage/ProjectCardMini/ProjectCardMini.tsx
+++ b/src/Components/ExplorePage/ProjectCardMini/ProjectCardMini.tsx
@@ -4,13 +4,13 @@ import { ProjectCard } from "../../../utils/interfaces";

 interface Props {
    project: ProjectCard
-    onClick: (projectId: number) => void
+    onClick: (projectId: string) => void
 }

 export default function ProjectCardMini({ project, onClick }: Props) {
    return (
        <div className="bg-gray-25 select-none px-16 py-16 flex w-[296px] gap-16 border border-gray-200 rounded-10 hover:cursor-pointer hover:bg-gray-100" onClick={() => onClick(project.id)}>
-            <img src={project.img} alt={project.title} draggable="false" className="flex-shrink-0 w-80 h-80 bg-gray-200 border-0 rounded-8"></img>
+            <img src={project.thumbnail_image} alt={project.title} draggable="false" className="flex-shrink-0 w-80 h-80 bg-gray-200 border-0 rounded-8"></img>
            <div className="justify-around items-start min-w-0">
                <p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap">{project.title}</p>
                <p className="text-body5 text-gray-600 font-light my-[5px]">{project.category.title}</p>
--- a/src/Components/ExplorePage/ProjectsRow/ProjectsRow.stories.tsx
+++ b/src/Components/ExplorePage/ProjectsRow/ProjectsRow.stories.tsx
@@ -20,14 +20,14 @@ Hottest.args = {
        <MdLocalFireDepartment
            className='inline-block text-fire align-bottom scale-125 ml-4 origin-bottom'
        /></>,
-    categoryId: 2,
+    categoryId: '2',
    projects: mockData.projectsCards
 }

 export const Defi = Template.bind({});
 Defi.args = {
    title: 'DeFi',
-    categoryId: 33,
+    categoryId: '33',
    projects: mockData.projectsCards
 }

--- a/src/Components/ExplorePage/ProjectsRow/ProjectsRow.tsx
+++ b/src/Components/ExplorePage/ProjectsRow/ProjectsRow.tsx
@@ -19,12 +19,12 @@ const calcNumItems = () => {
    return items;
 }

-interface Props { title: string | ReactElement, categoryId: number, projects: ProjectCard[] }
+interface Props { title: string | ReactElement, categoryId: string, projects: ProjectCard[] }

 export default function ProjectsRow({ title, categoryId, projects }: Props) {

-    const dispatch = useAppDispatch()
    const [carouselItmsCnt, setCarouselItmsCnt] = useState(calcNumItems);
+    const dispatch = useAppDispatch()

    responsive.all.items = carouselItmsCnt

@@ -34,7 +34,6 @@ export default function ProjectsRow({ title, categoryId, projects }: Props) {
    document.addEventListener('mousemove', () => drag.current = true);

    const handleClick = (projectId: string) => {
-        projectId = '1';
        if (!drag.current)
            dispatch(openModal({ modalId: ModalId.Project, propsToPass: { projectId } }))
    }
--- a/src/Components/ExplorePage/ProjectsSection/ProjectsSection.tsx
+++ b/src/Components/ExplorePage/ProjectsSection/ProjectsSection.tsx
@@ -1,19 +1,20 @@

 import ProjectsRow from "../ProjectsRow/ProjectsRow";
 import { MdLocalFireDepartment } from "react-icons/md";
-import { useAllCategoriesProjectsQuery } from "src/generated/graphql";
+import { useQuery } from "@apollo/client";
+import { ALL_CATEGORIES_PROJECTS_QUERY, ALL_CATEGORIES_PROJECTS_RES } from "./query";


 export default function ProjectsSection() {

-    const { data, loading } = useAllCategoriesProjectsQuery()
+    const { data, loading } = useQuery<ALL_CATEGORIES_PROJECTS_RES>(ALL_CATEGORIES_PROJECTS_QUERY);

    if (loading || !data) return null;

    return (
        <div className='mt-32 lg:mt-48'>
            <ProjectsRow title={<>Hottest <MdLocalFireDepartment className='inline-block text-fire align-bottom scale-125 origin-bottom' /></>}
-                categoryId={10101}
+                categoryId="133123"
                projects={data.newProjects} />
            {data.allCategories.map(({ id, title, project, }) => {
                if (project)
--- a/src/Components/ExplorePage/ProjectsSection/query.ts
+++ b/src/Components/ExplorePage/ProjectsSection/query.ts
@@ -1,6 +1,7 @@
 import { gql } from "@apollo/client";
+import { ProjectCard } from "src/utils/interfaces";

-export const QUERY_ALL_CATEGORIES_PROJECTS = gql`
+export const ALL_CATEGORIES_PROJECTS_QUERY = gql`
  query AllCategoriesProjects {
    allCategories {
      id
@@ -24,3 +25,12 @@ export const QUERY_ALL_CATEGORIES_PROJECTS = gql`
    }
  }
 `;
+
+export type ALL_CATEGORIES_PROJECTS_RES = {
+  newProjects: ProjectCard[];
+  allCategories: {
+    id: string;
+    title: string;
+    project: ProjectCard[];
+  }[];
+};
--- a/src/Components/Project/ProjectCard.tsx
+++ b/src/Components/Project/ProjectCard.tsx
@@ -1,54 +1,38 @@
-import { useEffect, useState } from 'react';
 import { motion } from 'framer-motion'
-import { BiArrowBack, BiWindowClose } from 'react-icons/bi'
 import { BsJoystick } from 'react-icons/bs'
-import { AiFillThunderbolt } from 'react-icons/ai';
-import { MdLocalFireDepartment } from 'react-icons/md';
+import { MdClose, MdLocalFireDepartment } from 'react-icons/md';
 import { ModalCard, modalCardVariants } from '../Shared/ModalsContainer/ModalsContainer';
-import { gql, useQuery } from "@apollo/client";
-import { getProjectById } from '../../api';
+import { useQuery } from "@apollo/client";
 import { useAppDispatch, useAppSelector } from '../../utils/hooks';
 import { ModalId, openModal, scheduleModal } from '../../redux/features/modals.slice';
 import { setProject } from '../../redux/features/project.slice';
 import { connectWallet } from '../../redux/features/wallet.slice';
 import Button from 'src/Components/Shared/Button/Button';
 import { requestProvider } from 'webln';
-import mockData from "../../api/mockData.json";
+import { PROJECT_BY_ID_QUERY, PROJECT_BY_ID_RES, PROJECT_BY_ID_VARS } from './query'

-const PROJECT_BY_ID = gql`
-    query Project($projectId: Int!) {
-      getProject(id: $projectId) {
-        id
-        cover_image
-        thumbnail_image
-        title
-        website
-        votes_count
-      }
-    }
-  `;

 export default function ProjectCard({ onClose, direction, ...props }: ModalCard) {

-    const { loading, error, data } = useQuery<any>(
-        PROJECT_BY_ID,
+    const dispatch = useAppDispatch();
+
+    const { loading } = useQuery<PROJECT_BY_ID_RES, PROJECT_BY_ID_VARS>(
+        PROJECT_BY_ID_QUERY,
        {
            variables: { projectId: parseInt(props.projectId) },
-            onCompleted: data => dispatch(setProject(data.getProject)),
+            onCompleted: data => {
+                dispatch(setProject(data.getProject))
+            },
        }
    );

-    const [projectState, setProjectState] = useState<any>({});
-
    const { isWalletConnected, webln, project } = useAppSelector(state => ({
        isWalletConnected: state.wallet.isConnected,
        webln: state.wallet.provider,
-        project: state.project,
+        project: state.project.project,
    }));

-    const dispatch = useAppDispatch();

-    console.log("project", props.projectId, project);

    if (loading || !project) return <></>;

@@ -105,42 +89,40 @@ export default function ProjectCard({ onClose, direction, ...props }: ModalCard)
            className="modal-card max-w-[710px]"

        >
-            <div className="relative h-[152px]">
-                <img className="w-full h-full object-cover" src={project?.cover_image} alt="" />
-                <button className="w-[48px] h-[48px] bg-white absolute top-1/2 left-32 -translate-y-1/2 rounded-full hover:bg-gray-200 text-center" onClick={onClose}><BiArrowBack className=' inline-block text-body1' /></button>
+            <div className="relative h-[80px] lg:h-[152px]">
+                <img className="w-full h-full object-cover" src={project.cover_image} alt="" />
+                <button className="w-[48px] h-[48px] bg-white absolute top-1/2 left-32 -translate-y-1/2 rounded-full hover:bg-gray-200 text-center" onClick={onClose}><MdClose className=' inline-block text-body2 lg:text-body1' /></button>
            </div>
            <div className="p-24">
                <div className="flex gap-24 items-center h-[93px]">
                    <div className="flex-shrink-0 w-[93px] h-[93px] rounded-md overflow-hidden">
-                        <img className="w-full h-full object-cover" src={project?.thumbnail_image} alt="" />
+                        <img className="w-full h-full object-cover" src={project.thumbnail_image} alt="" />
                    </div>
                    <div className='flex flex-col items-start justify-between self-stretch'>
-                        <h3 className="text-h3 font-regular">{project?.title}</h3>
-                        <a className="text-blue-400 font-regular text-body4" target='_blank' rel="noreferrer" href={project?.website}>{project?.website?.replace(/(^\w+:|^)\/\//, '')}</a>
+                        <h3 className="text-h3 font-regular">{project.title}</h3>
+                        <a className="text-blue-400 font-regular text-body4" target='_blank' rel="noreferrer" href={project.website}>{project.website?.replace(/(^\w+:|^)\/\//, '')}</a>
                        <div>
-                            <span className="chip-small font-light text-body5 py-4 px-12 mr-8"> {project?.category.title}</span>
+                            <span className="chip-small font-light text-body5 py-4 px-12 mr-8"> {project.category.title}</span>

-                            <span className="chip-small bg-warning-50 font-light text-body5 py-4 px-12"><MdLocalFireDepartment className='inline-block text-fire transform text-body4 align-middle' /> {project?.votes_count}</span>
+                            <span className="chip-small bg-warning-50 font-light text-body5 py-4 px-12"><MdLocalFireDepartment className='inline-block text-fire transform text-body4 align-middle' /> {project.votes_count}</span>

                        </div>
                    </div>
                    <div className="flex-shrink-0  hidden md:flex ml-auto gap-16">
                        <Button color='primary' size='md' className=" my-16">Play <BsJoystick /></Button>
-                        {isWalletConnected ?
-                            <Button onClick={onTip} size='md' className="border border-warning-100 bg-warning-50 hover:bg-warning-50 active:bg-warning-100 my-16">Tip <MdLocalFireDepartment className='text-fire' /></Button>
-                            :
-                            <Button onClick={onConnectWallet} size='md' className="border border-gray-200 bg-gray-100 hover:bg-gray-50 active:bg-gray-100 my-16">Connect Wallet to Vote</Button>
-                        }
+                        <Button onClick={onTip} size='md' className="border border-warning-100 bg-warning-50 hover:bg-warning-50 active:bg-warning-100 my-16">Tip <MdLocalFireDepartment className='text-fire' /></Button>
                    </div>
                </div>
-                <p className="mt-40 text-body4 leading-normal">{project?.description}</p>
+                <p className="mt-40 text-body4 leading-normal">
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, iure dolorem quaerat ipsum dolores mollitia libero? Sit dolor saepe amet incidunt placeat. Iusto, expedita rerum
+                </p>
+                <div className="flex gap-16 mt-24 flex-wrap">
+                    <span className="chip-small bg-red-100 text-red-800 font-regular"> payments </span>
+                    <span className="chip-small bg-primary-100 text-primary-800 font-regular"> lightining </span>
+                </div>
                <div className="md:hidden">
                    <Button color='primary' size='md' fullWidth className="w-full mt-24 mb-16">Play <BsJoystick /></Button>
-                    {isWalletConnected ?
-                        <Button size='md' fullWidth className="w-full bg-yellow-100 hover:bg-yellow-50 mb-24" onClick={onTip}>Vote <MdLocalFireDepartment className='text-fire' /></Button>
-                        :
-                        <Button size='md' fullWidth className="w-full bg-gray-200 hover:bg-gray-100 mb-24" onClick={onConnectWallet}><AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> Connect Wallet to Vote</Button>
-                    }
+                    <Button size='md' fullWidth className="border border-warning-100 bg-warning-50 hover:bg-warning-50 active:bg-warning-10050 mb-24" onClick={onTip}>Vote <MdLocalFireDepartment className='text-fire' /></Button>
                </div>
                <div className="mt-40">
                    <h3 className="text-h5 font-bold mb-16">Screenshots</h3>
--- a/src/Components/Project/query.ts
+++ b/src/Components/Project/query.ts
@@ -1,8 +1,9 @@
 import { gql } from "@apollo/client";
+import { Project } from "src/utils/interfaces";

-export const QUERY_PROJECT_BY_ID = gql`
-  query GetProject($getProjectId: Int!) {
-    getProject(id: $getProjectId) {
+export const PROJECT_BY_ID_QUERY = gql`
+  query Project($projectId: Int!) {
+    getProject(id: $projectId) {
      id
      cover_image
      thumbnail_image
@@ -10,9 +11,17 @@ export const QUERY_PROJECT_BY_ID = gql`
      website
      votes_count
      category {
-        id
        title
+        id
      }
    }
  }
 `;
+
+export interface PROJECT_BY_ID_RES {
+  getProject: Project;
+}
+
+export interface PROJECT_BY_ID_VARS {
+  projectId: number;
+}
--- a/src/api/mockData.json
+++ b/src/api/mockData.json
@@ -1,130 +1,130 @@
 {
    "categories": [
        {
-            "id": 111,
+            "id": "111",
            "title": "Hottest"
        },
        {
-            "id": 123,
+            "id": "123",
            "title": "Art & Collectibles"
        },
        {
-            "id": 124,
+            "id": "124",
            "title": "DeFi"
        },
        {
-            "id": 311,
+            "id": "311",
            "title": "Entertainment"
        },
        {
-            "id": 333,
+            "id": "333",
            "title": "Exchange"
        },
        {
-            "id": 223,
+            "id": "223",
            "title": "News"
        },
        {
-            "id": 451,
+            "id": "451",
            "title": "Shop"
        },
        {
-            "id": 2321,
+            "id": "232",
            "title": "Social"
        },
        {
-            "id": 51231,
+            "id": "512",
            "title": "Wallet"
        },
        {
-            "id": 1321,
+            "id": "132",
            "title": "Other"
        }
    ],
    "projectsCards": [
        {
-            "id": 123123,
+            "id": "123",
            "title": "First App",
            "thumbnail_image": "https://via.placeholder.com/150",
            "category": {
-                "id": 51231,
+                "id": "512",
                "title": "{app.category}"
            },
            "votes_count": 123
        },
        {
-            "id": 765454,
+            "id": "765",
            "title": "Second App",
            "thumbnail_image": "https://via.placeholder.com/150",
            "category": {
-                "id": 51231,
+                "id": "512",
                "title": "{app.category}"
            },
            "votes_count": 123
        },
        {
-            "id": 55,
+            "id": "55",
            "title": "Third App",
            "thumbnail_image": "https://via.placeholder.com/150",
            "category": {
-                "id": 51231,
+                "id": "512",
                "title": "{app.category}"
            },
            "votes_count": 123
        },
        {
-            "id": 12344123,
+            "id": "12344123",
            "title": "Fourth App",
            "thumbnail_image": "https://via.placeholder.com/150",
            "category": {
-                "id": 51231,
+                "id": "512",
                "title": "{app.category}"
            },
            "votes_count": 123
        },
        {
-            "id": 56745,
+            "id": "56745",
            "title": "Fifth App",
            "thumbnail_image": "https://via.placeholder.com/150",
            "category": {
-                "id": 51231,
+                "id": "512",
                "title": "{app.category}"
            },
            "votes_count": 123
        },
        {
-            "id": 3312431,
+            "id": "3312431",
            "title": "Sixth App",
            "thumbnail_image": "https://via.placeholder.com/150",
            "category": {
-                "id": 51231,
+                "id": "512",
                "title": "{app.category}"
            },
            "votes_count": 123
        }
    ],
    "project": {
-        "id": "0",
+        "id": "1233",
        "cover_image": "https://picsum.photos/id/10/1024/1024",
        "thumbnail_image": "https://s3-alpha-sig.figma.com/img/be1b/cd75/1baa911b3875134c0889d6755c4ba2cb?Expires=1638748800&Signature=DOiLciAA95w8gOvAowjiiR-ZPbmV1oGSRRK8YpE4ALMoe47pL7DifQxZvL1LQn~NRa0aLMoMk61521fbbGJeDAwk~j6fIm~iZAlMzQn7DdWy0wFR0uLQagOgpIiIXO-w8CeC14VoW-hrjIX5mDmOonJzkfoftGqIF1WCOmP2EuswyJpIngFdLb15gCex4Necs3vH2cuD9iSgWG2za97KfdXZP79ROyk2EN9Q3~a7RT4FTBBIlgKDLuFGSVRxReXVNajn~XSxBJh2de9dFVa3tOXkwJXu3jb0G4x-wRCaG-KmBhUOemuGtu5Fumh6goktGh~bIDwoHeUBVKFHAzaYgw__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
        "title": "█████████",
        "website": "████████",
        "description": "██████████████████",
        "category": {
-            "id": "0",
+            "id": "333",
            "title": "█████"
        },
        "tags": [
            {
-                "id": "0",
+                "id": "123",
                "title": "█████"
            },
            {
-                "id": "0",
+                "id": "313",
                "title": "██████"
            },
            {
-                "id": "0",
+                "id": "451",
                "title": "█████"
            }
        ],
--- a/src/redux/features/project.slice.ts
+++ b/src/redux/features/project.slice.ts
@@ -4,24 +4,24 @@ import { Project } from "../../utils/interfaces";
 import mockData from "../../api/mockData.json";

 interface StoreState {
-  project: Project;
+  project: Project | null;
+  projectSet: boolean;
 }

 const initialState = {
-  ...mockData.project,
-} as Project;
+  project: null,
+} as StoreState;

 export const projectSlice = createSlice({
  name: "project",
  initialState,
  reducers: {
    setProject(state, action: PayloadAction<Project>) {
-      state = action.payload;
-      console.log("called:setProject",state);
+      state.project = action.payload;
    },

    unsetProject(state) {
-      state = mockData.project;
+      state.project = null;
    },
  },
 });
--- a/src/utils/interfaces.ts
+++ b/src/utils/interfaces.ts
@@ -1,15 +1,14 @@
-
 export interface AllCategoriesData {
-  allCategories: ProjectCategory[]
+  allCategories: ProjectCategory[];
 }

 export interface ProjectCategory {
-  id: number;
+  id: string;
  title: string;
 }

 export interface ProjectCard {
-  id: number;
+  id: string;
  title: string;
  thumbnail_image: string;
  category: ProjectCategory;
@@ -17,14 +16,14 @@ export interface ProjectCard {
 }

 export interface Tag {
-  id: number;
+  id: string;
  title: string;
 }

 export type Image = string;

 export interface Project {
-  id: number;
+  id: string;
  title: string;
  category: ProjectCategory;
  website?: string;
--- a/yarn.lock
+++ b/yarn.lock