From 3e8d0e7426713b2867329c365034fecfc8b89c56 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 15 Aug 2022 15:36:13 +0300
Subject: [PATCH 01/53] feat: build "list_project" components & tabs, search
 users api & mocks

---
 api/functions/graphql/nexus-typegen.ts        |   6 +
 api/functions/graphql/schema.graphql          |   6 +
 api/functions/graphql/types/project.js        |   8 +
 api/functions/graphql/types/users.js          |  26 +-
 src/App.tsx                                   |   2 +
 .../Inputs/UsersInput/UsersInput.stories.tsx  |  29 ++
 .../Inputs/UsersInput/UsersInput.tsx          | 154 ++++++++++
 .../Inputs/UsersInput/searchUsers.graphql     |   8 +
 .../CapablitiesInput/CapablitiesInput.tsx     |  91 ++++++
 .../CategoriesInput/CategoriesInput.tsx       |  46 +++
 .../Components/ExtrasTab/ExtrasTab.tsx        | 143 +++++++++
 .../FormContainer/FormContainer.tsx           |  12 +
 .../ProjectDetailsTab/ProjectDetailsTab.tsx   | 290 ++++++++++++++++++
 .../RecruitRolesInput/RecruitRolesInput.tsx   |  97 ++++++
 .../TeamMembersInput/TeamMembersInput.tsx     |  87 ++++++
 .../Components/TeamTab/TeamTab.tsx            | 140 +++++++++
 .../TournamentsInput/TournamentsInput.tsx     |  65 ++++
 .../pages/ListProjectPage/ListProjectPage.tsx | 103 +++++++
 src/graphql/index.tsx                         | 162 ++++++----
 src/mocks/data.ts                             |   5 +-
 src/mocks/data/users.ts                       |  63 +++-
 src/mocks/handlers.ts                         |  14 +-
 src/mocks/resolvers.ts                        |   4 +
 src/utils/routing/routes.ts                   |   3 +-
 24 files changed, 1503 insertions(+), 61 deletions(-)
 create mode 100644 src/Components/Inputs/UsersInput/UsersInput.stories.tsx
 create mode 100644 src/Components/Inputs/UsersInput/UsersInput.tsx
 create mode 100644 src/Components/Inputs/UsersInput/searchUsers.graphql
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/CapablitiesInput/CapablitiesInput.tsx
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/CategoriesInput/CategoriesInput.tsx
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/ExtrasTab/ExtrasTab.tsx
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/RecruitRolesInput/RecruitRolesInput.tsx
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.tsx
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.tsx
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.tsx
 create mode 100644 src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index 78a7cfd..33e9aff 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -53,6 +53,7 @@ export interface NexusGenInputs {
 
 export interface NexusGenEnums {
   POST_TYPE: "Bounty" | "Question" | "Story"
+  TEAM_MEMBER_ROLE: "Admin" | "Maker"
   VOTE_ITEM_TYPE: "Bounty" | "PostComment" | "Project" | "Question" | "Story" | "User"
 }
 
@@ -359,6 +360,7 @@ export interface NexusGenFieldTypes {
     profile: NexusGenRootTypes['User'] | null; // User
     projectsByCategory: NexusGenRootTypes['Project'][]; // [Project!]!
     searchProjects: NexusGenRootTypes['Project'][]; // [Project!]!
+    searchUsers: NexusGenRootTypes['User'][]; // [User!]!
   }
   Question: { // field return type
     author: NexusGenRootTypes['Author']; // Author!
@@ -568,6 +570,7 @@ export interface NexusGenFieldTypeNames {
     profile: 'User'
     projectsByCategory: 'Project'
     searchProjects: 'Project'
+    searchUsers: 'User'
   }
   Question: { // field return type name
     author: 'Author'
@@ -725,6 +728,9 @@ export interface NexusGenArgTypes {
       skip?: number | null; // Int
       take: number | null; // Int
     }
+    searchUsers: { // args
+      value: string; // String!
+    }
   }
 }
 
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index b2994b5..965e359 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -167,6 +167,7 @@ type Query {
   profile(id: Int!): User
   projectsByCategory(category_id: Int!, skip: Int = 0, take: Int = 10): [Project!]!
   searchProjects(search: String!, skip: Int = 0, take: Int = 50): [Project!]!
+  searchUsers(value: String!): [User!]!
 }
 
 type Question implements PostBase {
@@ -209,6 +210,11 @@ input StoryInputType {
   title: String!
 }
 
+enum TEAM_MEMBER_ROLE {
+  Admin
+  Maker
+}
+
 type Tag {
   description: String
   icon: String
diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index a9fed49..a8c563a 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -4,6 +4,7 @@ const {
     stringArg,
     extendType,
     nonNull,
+    enumType,
 } = require('nexus')
 const { prisma } = require('../../../prisma');
 
@@ -47,6 +48,12 @@ const Project = objectType({
     }
 })
 
+const TEAM_MEMBER_ROLE = enumType({
+    name: 'TEAM_MEMBER_ROLE',
+    members: ['Admin', 'Maker'],
+});
+
+
 
 const Award = objectType({
     name: 'Award',
@@ -243,6 +250,7 @@ module.exports = {
     // Types
     Project,
     Award,
+    TEAM_MEMBER_ROLE,
     // Queries
     getProject,
     allProjects,
diff --git a/api/functions/graphql/types/users.js b/api/functions/graphql/types/users.js
index 824cc76..d5ba7cc 100644
--- a/api/functions/graphql/types/users.js
+++ b/api/functions/graphql/types/users.js
@@ -1,6 +1,6 @@
 
 const { prisma } = require('../../../prisma');
-const { objectType, extendType, intArg, nonNull, inputObjectType } = require("nexus");
+const { objectType, extendType, intArg, nonNull, inputObjectType, stringArg } = require("nexus");
 const { getUserByPubKey } = require("../../../auth/utils/helperFuncs");
 const { removeNulls } = require("./helpers");
 
@@ -71,6 +71,29 @@ const profile = extendType({
     }
 })
 
+const searchUsers = extendType({
+    type: "Query",
+    definition(t) {
+        t.nonNull.list.nonNull.field('searchUsers', {
+            type: "User",
+            args: {
+                value: nonNull(stringArg())
+            },
+            async resolve(_, { value }) {
+                return prisma.user.findMany({
+                    where: {
+                        name: {
+                            contains: value,
+                            mode: "insensitive"
+                        }
+                    },
+                })
+            }
+        })
+    }
+})
+
+
 const UpdateProfileInput = inputObjectType({
     name: 'UpdateProfileInput',
     definition(t) {
@@ -125,6 +148,7 @@ module.exports = {
     // Queries
     me,
     profile,
+    searchUsers,
     // Mutations
     updateProfile,
 }
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index f94279c..137c506 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,6 +11,7 @@ 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";
 
 
 
@@ -97,6 +98,7 @@ function App() {
           <Route path={PAGES_ROUTES.projects.hottest} element={<HottestPage />} />
           <Route path={PAGES_ROUTES.projects.byCategoryId} element={<CategoryPage />} />
           <Route path={PAGES_ROUTES.projects.default} element={<ExplorePage />} />
+          <Route path={PAGES_ROUTES.projects.listProject} element={<ListProjectPage />} />
 
           <Route path={PAGES_ROUTES.blog.postById} element={<PostDetailsPage />} />
           <Route path={PAGES_ROUTES.blog.feed} element={<FeedPage />} />
diff --git a/src/Components/Inputs/UsersInput/UsersInput.stories.tsx b/src/Components/Inputs/UsersInput/UsersInput.stories.tsx
new file mode 100644
index 0000000..464fce7
--- /dev/null
+++ b/src/Components/Inputs/UsersInput/UsersInput.stories.tsx
@@ -0,0 +1,29 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { WrapForm } from 'src/utils/storybook/decorators';
+
+import UsersInput from './UsersInput';
+
+export default {
+    title: 'Shared/Inputs/Users Input',
+    component: UsersInput,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+    decorators: [WrapForm({
+        defaultValues: {
+            tags: [{
+                title: "Webln"
+            }]
+        }
+    })]
+} as ComponentMeta<typeof UsersInput>;
+
+
+const Template: ComponentStory<typeof UsersInput> = (args) => <div>
+    <p className="text-body4 mb-8 text-gray-700">
+        Search for users:
+    </p>
+    <UsersInput classes={{ input: "max-w-[320px]" }} {...args}></UsersInput>
+</div>
+
+export const Default = Template.bind({});
diff --git a/src/Components/Inputs/UsersInput/UsersInput.tsx b/src/Components/Inputs/UsersInput/UsersInput.tsx
new file mode 100644
index 0000000..2dee41d
--- /dev/null
+++ b/src/Components/Inputs/UsersInput/UsersInput.tsx
@@ -0,0 +1,154 @@
+
+import AsyncSelect from 'react-select/async';
+import { OnChangeValue, StylesConfig, components, OptionProps } from "react-select";
+import { SearchUsersDocument, SearchUsersQuery, SearchUsersQueryResult } from "src/graphql";
+import { apolloClient } from "src/utils/apollo";
+import Avatar from "src/features/Profiles/Components/Avatar/Avatar";
+import { FiSearch } from 'react-icons/fi';
+import { useState } from 'react';
+import debounce from 'lodash.debounce';
+
+
+
+type User = SearchUsersQuery['searchUsers'][number]
+
+interface Props {
+    classes?: {
+        container?: string
+        input?: string
+    }
+    placeholder?: string,
+    onSelect?: (selectedUser: User) => void
+}
+
+const fetchOptions = debounce((value, callback: any) => {
+    apolloClient.query({
+        query: SearchUsersDocument,
+        variables: {
+            value
+        }
+    })
+        .then((result) => callback((result as SearchUsersQueryResult).data?.searchUsers ?? []))
+        .catch((error: any) => callback(error, null));
+}, 1000);
+
+
+
+
+const OptionComponent = (props: OptionProps<User>) => {
+    return (
+        <div>
+            <components.Option {...props} className='!flex items-center gap-16 !py-16'>
+                <Avatar src={props.data.avatar} width={48} />
+                <div>
+                    <p className="font-medium self-center">
+                        {props.data.name}
+                    </p>
+                    <p className="text-body5 text-gray-500">
+                        {props.data.jobTitle}
+                    </p>
+                </div>
+            </components.Option>
+
+        </div>
+    );
+};
+
+
+const colourStyles: StylesConfig = {
+
+    control: (styles, state) => ({
+        ...styles,
+        padding: '8px 16px',
+        borderRadius: 12,
+        // border: 'none',
+        // boxShadow: 'none',
+
+        ":hover": {
+            cursor: "pointer"
+        }
+
+    }),
+    multiValueRemove: (styles) => ({
+        ...styles,
+        ":hover": {
+            background: 'none'
+        }
+    }),
+    indicatorsContainer: () => ({ display: 'none' }),
+    clearIndicator: () => ({ display: 'none' }),
+    indicatorSeparator: () => ({ display: "none" }),
+    input: (styles, state) => ({
+        ...styles,
+        " input": {
+            boxShadow: 'none !important'
+        },
+    }),
+    multiValue: styles => ({
+        ...styles,
+        padding: '4px 12px',
+        borderRadius: 48,
+        fontWeight: 500
+    }),
+    valueContainer: (styles) => ({
+        ...styles,
+        paddingLeft: 0,
+        paddingRight: 0,
+    })
+}
+
+
+export default function UsersInput({
+    classes,
+    ...props }: Props) {
+
+    const [inputValue, setInputValue] = useState("")
+
+    const placeholder = props.placeholder ?? <span className='text-gray-400'><FiSearch /> <span className='align-middle'>Search by username</span></span>
+
+    const handleChange = (newValue: OnChangeValue<User, false>,) => {
+        if (newValue)
+            props.onSelect?.(newValue);
+    }
+
+    let emptyMessage = "Type at least 2 characters";
+    if (inputValue.length >= 2)
+        emptyMessage = "Couldn't find any users..."
+
+
+    let loadingMessage = "Searching...";
+    if (inputValue.length < 2)
+        loadingMessage = "Type at least 2 characters"
+
+    return (
+        <div className={`${classes?.container}`}>
+            <AsyncSelect
+                value={null}
+                inputValue={inputValue}
+                onInputChange={setInputValue}
+                defaultOptions={false}
+                loadOptions={fetchOptions}
+                loadingMessage={() => loadingMessage}
+                placeholder={placeholder}
+                noOptionsMessage={() => emptyMessage}
+                onChange={handleChange as any}
+                components={{
+                    Option: OptionComponent,
+                    // ValueContainer: CustomValueContainer
+                }}
+                styles={colourStyles as any}
+                theme={(theme) => ({
+                    ...theme,
+                    borderRadius: 8,
+                    colors: {
+                        ...theme.colors,
+                        primary: 'var(--primary)',
+                    },
+                })}
+            />
+            {/* <div className="flex mt-16 gap-8 flex-wrap">
+                {(value as Tag[]).map((tag, idx) => <Badge color="gray" key={tag.title} onRemove={() => handleRemove(idx)} >{tag.title}</Badge>)}
+            </div> */}
+        </div>
+    )
+}
diff --git a/src/Components/Inputs/UsersInput/searchUsers.graphql b/src/Components/Inputs/UsersInput/searchUsers.graphql
new file mode 100644
index 0000000..f503aed
--- /dev/null
+++ b/src/Components/Inputs/UsersInput/searchUsers.graphql
@@ -0,0 +1,8 @@
+query SearchUsers($value: String!) {
+  searchUsers(value: $value) {
+    id
+    name
+    avatar
+    jobTitle
+  }
+}
diff --git a/src/features/Projects/pages/ListProjectPage/Components/CapablitiesInput/CapablitiesInput.tsx b/src/features/Projects/pages/ListProjectPage/Components/CapablitiesInput/CapablitiesInput.tsx
new file mode 100644
index 0000000..d267179
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/CapablitiesInput/CapablitiesInput.tsx
@@ -0,0 +1,91 @@
+import React from 'react'
+import Button from 'src/Components/Button/Button';
+import { useAllCategoriesQuery } from 'src/graphql'
+import { random } from 'src/utils/helperFunctions';
+
+interface Props {
+    value: string[];
+    onChange?: (v: string[]) => void;
+}
+
+export default function CapablitiesInput(props: Props) {
+
+
+    const handleClick = (clickedValue: string) => {
+        if (props.value.includes(clickedValue))
+            props.onChange?.(props.value.filter(v => v !== clickedValue));
+        else
+            props.onChange?.([...props.value, clickedValue])
+    }
+
+
+    return (
+        <div className="flex flex-wrap gap-8">
+            {false ?
+                Array(10).fill(0).map((_, idx) =>
+                    <div
+                        key={idx}
+                        className="bg-gray-100 border border-gray-200 p-8 rounded-10">
+                        <span className='invisible'>{"loading category skeleton".slice(random(6, 12))}</span>
+                    </div>)
+                :
+                data.map(item =>
+                    <Button
+                        key={item.text}
+                        color='none'
+                        size='sm'
+                        className={`
+                        border border-gray-200
+                        ${props.value.includes(item.text) ?
+                                'text-primary-600 bg-primary-100'
+                                :
+                                "bg-gray-100"
+                            }
+                        `}
+                        onClick={() => handleClick(item.text)}
+                    >
+                        {item.icon} {item.text}
+                    </Button>)
+            }
+        </div>
+    )
+}
+
+const data = [
+    {
+        text: 'Mobile',
+        icon: '📱'
+    },
+    {
+        text: 'Web',
+        icon: '💻'
+    },
+    {
+        text: 'WebLN',
+        icon: '🎛️'
+    },
+    {
+        text: 'LNURL-auth',
+        icon: '🔑️️'
+    },
+    {
+        text: 'LNURL-pay',
+        icon: '💸'
+    },
+    {
+        text: 'LNURL-channel',
+        icon: '🕳️️'
+    },
+    {
+        text: 'LNURL-withdraw',
+        icon: '🎬️'
+    },
+    {
+        text: 'BOLT 11',
+        icon: '⚡'
+    },
+    {
+        text: 'BOLT 12',
+        icon: '⚡'
+    },
+]
diff --git a/src/features/Projects/pages/ListProjectPage/Components/CategoriesInput/CategoriesInput.tsx b/src/features/Projects/pages/ListProjectPage/Components/CategoriesInput/CategoriesInput.tsx
new file mode 100644
index 0000000..c5e8e18
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/CategoriesInput/CategoriesInput.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import Button from 'src/Components/Button/Button';
+import { useAllCategoriesQuery } from 'src/graphql'
+import { random } from 'src/utils/helperFunctions';
+
+interface Props {
+    value?: number;
+    onChange?: (v: number) => void;
+}
+
+export default function CategoriesInput(props: Props) {
+
+    const categoriesQuery = useAllCategoriesQuery();
+
+
+    return (
+        <div className="flex flex-wrap gap-8">
+            {categoriesQuery.loading ?
+                Array(10).fill(0).map((_, idx) =>
+                    <div
+                        key={idx}
+                        className="bg-gray-100 border border-gray-200 p-8 rounded-10">
+                        <span className='invisible'>{"loading category skeleton".slice(random(6, 12))}</span>
+                    </div>)
+                :
+                categoriesQuery.data?.allCategories.map(category =>
+                    <Button
+                        key={category.id}
+                        color='none'
+                        size='sm'
+                        className={`
+                        border border-gray-200
+                        ${props.value === category.id ?
+                                'text-primary-600 bg-primary-100'
+                                :
+                                "bg-gray-100"
+                            }
+                        `}
+                        onClick={() => props.onChange?.(category.id)}
+                    >
+                        {category.icon} {category.title}
+                    </Button>)
+            }
+        </div>
+    )
+}
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ExtrasTab/ExtrasTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ExtrasTab/ExtrasTab.tsx
new file mode 100644
index 0000000..7ae502d
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/ExtrasTab/ExtrasTab.tsx
@@ -0,0 +1,143 @@
+import { Controller, NestedValue, Resolver, SubmitHandler, useForm } from "react-hook-form"
+import { NotificationsService } from "src/services/notifications.service";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { usePrompt } from "src/utils/hooks";
+import { toast } from "react-toastify";
+import Card from "src/Components/Card/Card";
+import TeamMembersInput from "../TeamMembersInput/TeamMembersInput";
+import { Team_Member_Role } from "src/graphql";
+import RecruitRolesInput from "../RecruitRolesInput/RecruitRolesInput";
+import TournamentsInput from "../TournamentsInput/TournamentsInput";
+
+
+export interface IExtrasForm {
+    launch_status: "wip" | "launched"
+    tournaments: NestedValue<string[]>
+}
+
+interface Props {
+    data?: IExtrasForm,
+}
+
+// type IFormInputs = Props['data'];
+
+const schema: yup.SchemaOf<IExtrasForm> = yup.object({
+    launch_status: yup.mixed().oneOf(['wip', 'launched']).required(),
+    tournaments: yup.array().required().default([])
+}).required();
+
+export default function ExtrasTab({ data }: Props) {
+
+    const { register, formState: { errors, isDirty, }, handleSubmit, reset, control } = useForm<IExtrasForm>({
+        defaultValues: {
+            ...data,
+            launch_status: 'wip',
+            tournaments: []
+        },
+        resolver: yupResolver(schema) as Resolver<IExtrasForm>,
+        // mode: 'onBlur',
+    });
+
+
+
+    usePrompt('You may have some unsaved changes. You still want to leave?', isDirty)
+
+
+    const onSubmit: SubmitHandler<IExtrasForm> = data => {
+
+        const toastId = toast.loading("Saving changes...", NotificationsService.defaultOptions)
+        const mutate: any = null;
+        mutate({
+            // variables: {
+            //     data: {
+            //         // name: data.name,
+            //         // avatar: data.avatar,
+            //         // jobTitle: data.jobTitle,
+            //         // bio: data.bio,
+            //         // email: data.email,
+            //         // github: data.github,
+            //         // linkedin: data.linkedin,
+            //         // lightning_address: data.lightning_address,
+            //         // location: data.location,
+            //         // twitter: data.twitter,
+            //         // website: data.website,
+            //     }
+            // },
+            onCompleted: () => {
+                reset(data);
+                toast.update(toastId, { render: "Saved changes successfully", type: "success", ...NotificationsService.defaultOptions, isLoading: false });
+            }
+        })
+            .catch(() => {
+                toast.update(toastId, { render: "A network error happened", type: "error", ...NotificationsService.defaultOptions, isLoading: false });
+                // mutationStatus.reset()
+            })
+    };
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
+            <div className="md:col-span-2 flex flex-col gap-24">
+
+
+                <Card>
+                    <h2 className="text-body2 font-bolder">🚀  Launch status</h2>
+                    <p className="text-body4 font-light text-gray-600 mt-8">Has this product been launched already, or is it still a work in progress?</p>
+                    <div className="mt-24 flex flex-col gap-24">
+                        <div className="flex gap-16">
+                            <input
+                                {...register("launch_status")}
+                                type="radio"
+                                name="launch_status"
+                                value='wip'
+                            />
+                            <div>
+                                <p className="text-body4 font-medium">WIP 🛠️</p>
+                                <p className="text-body5 text-gray-500 mt-4">It’s still a Work In Progress.</p>
+                            </div>
+                        </div>
+                        <div className="flex gap-16">
+                            <input
+                                {...register("launch_status")}
+                                type="radio"
+                                name="launch_status"
+                                value='launched'
+                            />
+                            <div>
+                                <p className="text-body4 font-medium">Launched 🚀</p>
+                                <p className="text-body5 text-gray-500 mt-4">The product is ready for launch, or has been launched already.</p>
+                            </div>
+                        </div>
+                        {errors.launch_status && <p className='input-error'>{errors.launch_status?.message}</p>}
+                    </div>
+                </Card>
+
+                <Card>
+                    <h2 className="text-body2 font-bolder">⚔️️  Tournaments</h2>
+                    <p className="text-body4 font-light text-gray-600 mt-8">Is your application part of a tournament? If so, select the tournament(s) that apply and it will automatically be listed for you.</p>
+                    <div className="mt-24">
+                        <Controller
+                            control={control}
+                            name="tournaments"
+                            render={({ field: { onChange, value } }) => (
+                                <TournamentsInput
+                                    value={value}
+                                    onChange={onChange}
+                                />
+                            )}
+                        />
+                        {errors.tournaments && <p className='input-error'>{errors.tournaments?.message}</p>}
+                    </div>
+                </Card>
+            </div>
+            <div className="self-start sticky-side-element">
+                {/* <SaveChangesCard
+                    isLoading={mutationStatus.loading}
+                    isDirty={isDirty}
+                    onSubmit={handleSubmit(onSubmit)}
+                    onCancel={() => reset()}
+                /> */}
+            </div>
+        </div>
+    )
+}
diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
new file mode 100644
index 0000000..11c7d5d
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -0,0 +1,12 @@
+
+interface Props {
+
+}
+
+export default function FormContainer() {
+    return (
+        <div>
+
+        </div>
+    )
+}
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
new file mode 100644
index 0000000..abfa9d2
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
@@ -0,0 +1,290 @@
+import { Controller, NestedValue, Resolver, SubmitHandler, useForm } from "react-hook-form"
+import Button from "src/Components/Button/Button";
+import { Project, User, useUpdateProfileAboutMutation } from "src/graphql";
+import { NotificationsService } from "src/services/notifications.service";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import Avatar from "src/features/Profiles/Components/Avatar/Avatar";
+import { usePrompt } from "src/utils/hooks";
+import { toast } from "react-toastify";
+import Card from "src/Components/Card/Card";
+import { FaDiscord, FaTwitter } from "react-icons/fa";
+import { FiCamera, FiGithub, FiTwitter } from "react-icons/fi";
+import CategoriesInput from "../CategoriesInput/CategoriesInput";
+import CapablitiesInput from "../CapablitiesInput/CapablitiesInput";
+
+
+interface IProjectDetails {
+    name: string
+    website: string
+    tagline: string
+    description: string
+    thumbnail_image: string
+    cover_image: string
+
+    twitter: string
+    discord: string
+    github: string
+
+    category_id: number
+
+    capabilities: NestedValue<string[]>
+
+    screenshots: NestedValue<string[]>
+
+}
+
+interface Props {
+    data?: IProjectDetails,
+    onClose?: () => void;
+}
+
+// type IFormInputs = Props['data'];
+
+const schema: yup.SchemaOf<IProjectDetails> = yup.object({
+    name: yup.string().trim().required().min(2),
+    website: yup.string().trim().url().required(),
+    tagline: yup.string().trim().required().min(10),
+    description: yup.string().trim().required().min(50, 'Write at least 10 words descriping your project'),
+    thumbnail_image: yup.string().url().required(),
+    cover_image: yup.string().url().required(),
+
+    twitter: yup.string().ensure(),
+    discord: yup.string().ensure(),
+    github: yup.string().ensure(),
+
+    category_id: yup.number().required(),
+
+    capabilities: yup.array().of(yup.string().required()),
+
+    screenshots: yup.array().of(yup.string().required()),
+}).required();
+
+export default function ProjectDetailsTab({ data, onClose }: Props) {
+
+    const { register, formState: { errors, isDirty, }, handleSubmit, reset, control } = useForm<IProjectDetails>({
+        defaultValues: {
+            ...data,
+            capabilities: data?.capabilities ?? []
+        },
+        resolver: yupResolver(schema) as Resolver<IProjectDetails>,
+        // mode: 'onBlur',
+    });
+
+    const [mutate, mutationStatus] = useUpdateProfileAboutMutation();
+
+
+
+    usePrompt('You may have some unsaved changes. You still want to leave?', isDirty)
+
+
+    const onSubmit: SubmitHandler<IProjectDetails> = data => {
+
+        const toastId = toast.loading("Saving changes...", NotificationsService.defaultOptions)
+
+        mutate({
+            // variables: {
+            //     data: {
+            //         // name: data.name,
+            //         // avatar: data.avatar,
+            //         // jobTitle: data.jobTitle,
+            //         // bio: data.bio,
+            //         // email: data.email,
+            //         // github: data.github,
+            //         // linkedin: data.linkedin,
+            //         // lightning_address: data.lightning_address,
+            //         // location: data.location,
+            //         // twitter: data.twitter,
+            //         // website: data.website,
+            //     }
+            // },
+            onCompleted: () => {
+                reset(data);
+                toast.update(toastId, { render: "Saved changes successfully", type: "success", ...NotificationsService.defaultOptions, isLoading: false });
+            }
+        })
+            .catch(() => {
+                toast.update(toastId, { render: "A network error happened", type: "error", ...NotificationsService.defaultOptions, isLoading: false });
+                mutationStatus.reset()
+            })
+    };
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
+            <div className="md:col-span-2 flex flex-col gap-24">
+                <Card className="" defaultPadding={false}>
+                    <div className="bg-gray-600 relative h-[160px] rounded-t-16">
+                        <div className="absolute left-24 bottom-0 translate-y-1/2">
+                            {/* <Avatar src={data.avatar} width={120} /> */}
+                            <div
+                                className="rounded-full w-[120px] aspect-square border-2 border-gray-200 bg-white flex flex-col gap-8 items-center justify-center"
+                                role={'button'}
+                            >
+                                <FiCamera className="text-gray-400 text-h2" />
+                                <span className="text-gray-400 text-body6">Add image</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="p-16 md:p-24 mt-64">
+                        <p className="text-body5 font-medium">
+                            Project name<sup className="text-red-500">*</sup>
+                        </p>
+                        <div className="input-wrapper mt-8 relative">
+                            <input
+                                autoFocus
+                                type='text'
+                                className="input-text"
+                                placeholder='e.g BOLT🔩FUN'
+                                {...register("name")}
+                            />
+                        </div>
+                        {errors.name && <p className="input-error">
+                            {errors.name.message}
+                        </p>}
+                        <p className="text-body5 mt-16 font-medium">
+                            Project link<sup className="text-red-500">*</sup>
+                        </p>
+                        <div className="input-wrapper mt-8 relative">
+                            <input
+
+                                type='text'
+                                className="input-text"
+                                placeholder='https://lightning.xyz'
+                                {...register("website")}
+                            />
+                        </div>
+                        {errors.website && <p className="input-error">
+                            {errors.website.message}
+                        </p>}
+                        <p className="text-body5 mt-16 font-medium">
+                            Tagline<sup className="text-red-500">*</sup>
+                        </p>
+                        <div className="input-wrapper mt-8 relative">
+                            <input
+
+                                type='text'
+                                className="input-text"
+                                placeholder='Your product’s one liner goes here...'
+                                {...register("tagline")}
+                            />
+                        </div>
+                        {errors.tagline && <p className="input-error">
+                            {errors.tagline.message}
+                        </p>}
+                        <p className="text-body5 mt-16 font-medium">
+                            Description<sup className="text-red-500">*</sup>
+                        </p>
+                        <div className="input-wrapper mt-8 relative">
+                            <textarea
+
+                                rows={3}
+                                className="input-text !p-20"
+                                placeholder='Provide a short description your product...'
+                                {...register("description")}
+                            />
+                        </div>
+                        {errors.description && <p className="input-error">
+                            {errors.description.message}
+                        </p>}
+
+                    </div>
+                </Card>
+                <Card className="">
+                    <h2 className="text-body2 font-bolder">🔗  Links</h2>
+                    <p className="text-body4 font-light text-gray-600 mt-8">Make sure that people can find your project online. </p>
+                    <div className="flex flex-col gap-8 mt-24">
+
+                        <div>
+                            <div className="input-wrapper mt-8 relative">
+                                <FiTwitter className="text-blue-400 h-full flex-shrink-0 w-42 pl-12 py-12 self-center" />
+                                <input
+                                    type='text'
+                                    className="input-text"
+                                    placeholder='https://twitter.com/'
+                                    {...register("twitter")}
+                                />
+                            </div>
+                            {errors.twitter && <p className="input-error">
+                                {errors.twitter.message}
+                            </p>}
+                        </div>
+
+                        <div>
+                            <div className="input-wrapper mt-8 relative">
+                                <FaDiscord className="text-violet-500 h-full flex-shrink-0 w-42 pl-12 py-12 self-center" />
+                                <input
+                                    type='text'
+                                    className="input-text"
+                                    placeholder='https://discord.com/'
+                                    {...register("discord")}
+                                />
+                            </div>
+                            {errors.discord && <p className="input-error">
+                                {errors.discord.message}
+                            </p>}
+                        </div>
+
+                        <div>
+                            <div className="input-wrapper mt-8 relative">
+                                <FiGithub className="text-gray-700 h-full flex-shrink-0 w-42 pl-12 py-12 self-center" />
+                                <input
+                                    type='text'
+                                    className="input-text"
+                                    placeholder='https://github.com/'
+                                    {...register("github")}
+                                />
+                            </div>
+                            {errors.github && <p className="input-error">
+                                {errors.github.message}
+                            </p>}
+                        </div>
+                    </div>
+                </Card>
+
+                <Card>
+                    <h2 className="text-body2 font-bolder">🌶️ Category</h2>
+                    <p className="text-body4 font-light text-gray-600 mt-8">Select one of the categories below.</p>
+                    <div className="mt-24">
+                        <Controller
+                            control={control}
+                            name="category_id"
+                            render={({ field: { onChange, value } }) => (
+                                <CategoriesInput
+                                    value={value}
+                                    onChange={onChange}
+                                />
+                            )}
+                        />
+                        {errors.category_id && <p className='input-error'>{errors.category_id?.message}</p>}
+                    </div>
+                </Card>
+
+                <Card>
+                    <h2 className="text-body2 font-bolder">🦾  Capabilities</h2>
+                    <p className="text-body4 font-light text-gray-600 mt-8">Let other makers know what lightning capabilities your applicaiton has.</p>
+                    <div className="mt-24">
+                        <Controller
+                            control={control}
+                            name="capabilities"
+                            render={({ field: { onChange, value } }) => (
+                                <CapablitiesInput
+                                    value={value}
+                                    onChange={onChange}
+                                />
+                            )}
+                        />
+                        {errors.capabilities && <p className='input-error'>{errors.capabilities?.message}</p>}
+                    </div>
+                </Card>
+            </div>
+            <div className="self-start sticky-side-element">
+                {/* <SaveChangesCard
+                    isLoading={mutationStatus.loading}
+                    isDirty={isDirty}
+                    onSubmit={handleSubmit(onSubmit)}
+                    onCancel={() => reset()}
+                /> */}
+            </div>
+        </div>
+    )
+}
diff --git a/src/features/Projects/pages/ListProjectPage/Components/RecruitRolesInput/RecruitRolesInput.tsx b/src/features/Projects/pages/ListProjectPage/Components/RecruitRolesInput/RecruitRolesInput.tsx
new file mode 100644
index 0000000..6e6dcf2
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/RecruitRolesInput/RecruitRolesInput.tsx
@@ -0,0 +1,97 @@
+
+import Button from 'src/Components/Button/Button';
+import { random } from 'src/utils/helperFunctions';
+
+interface Props {
+    value: string[];
+    onChange?: (v: string[]) => void;
+}
+
+export default function RecruitRolesInput(props: Props) {
+
+    const handleClick = (clickedValue: string) => {
+        if (props.value.includes(clickedValue))
+            props.onChange?.(props.value.filter(v => v !== clickedValue));
+        else
+            props.onChange?.([...props.value, clickedValue])
+    }
+
+
+    return (
+        <div className="flex flex-wrap gap-8">
+            {false ?
+                Array(10).fill(0).map((_, idx) =>
+                    <div
+                        key={idx}
+                        className="bg-gray-100 border border-gray-200 p-8 rounded-10">
+                        <span className='invisible'>{"loading category skeleton".slice(random(6, 12))}</span>
+                    </div>)
+                :
+                data.map(item =>
+                    <Button
+                        key={item.text}
+                        color='none'
+                        size='sm'
+                        className={`
+                        border border-gray-200
+                        ${props.value.includes(item.text) ?
+                                'text-primary-600 bg-primary-100'
+                                :
+                                "bg-gray-100"
+                            }
+                        `}
+                        onClick={() => handleClick(item.text)}
+                    >
+                        {item.icon} {item.text}
+                    </Button>)
+            }
+        </div>
+    )
+}
+
+const data = [
+    {
+        text: 'Frontend Dev',
+        icon: '💄️'
+    },
+    {
+        text: 'Backend Dev',
+        icon: '💻'
+    },
+    {
+        text: 'UI/UX Designer',
+        icon: '🌈️️'
+    },
+    {
+        text: 'Comm. Manager',
+        icon: '🎉️️'
+    },
+    {
+        text: 'Founder',
+        icon: '🦄️'
+    },
+    {
+        text: 'Marketer',
+        icon: '🚨️'
+    },
+    {
+        text: 'Content Creator',
+        icon: '🎥️'
+    },
+    {
+        text: 'Researcher',
+        icon: '🔬'
+    },
+    {
+        text: 'Data engineer',
+        icon: '💿️'
+    },
+    {
+        text: 'Growth hacker',
+        icon: '📉️'
+    },
+    {
+        text: 'Technical Writer',
+        icon: '✍️️'
+    },
+]
diff --git a/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.tsx b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.tsx
new file mode 100644
index 0000000..97de7a1
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.tsx
@@ -0,0 +1,87 @@
+import { Menu, MenuButton, MenuItem } from '@szhsin/react-menu';
+import React, { ComponentProps } from 'react'
+import { NestedValue } from 'react-hook-form'
+import { FaChevronDown, FaRegTrashAlt, FaTimes } from 'react-icons/fa';
+import IconButton from 'src/Components/IconButton/IconButton';
+import UsersInput from 'src/Components/Inputs/UsersInput/UsersInput'
+import Avatar from 'src/features/Profiles/Components/Avatar/Avatar';
+import { Team_Member_Role } from 'src/graphql';
+import { ITeamForm } from '../TeamTab/TeamTab'
+
+type Value = ITeamForm['members'] extends NestedValue<infer U> ? U : never;
+
+type Props = {
+    value: Value,
+    onChange?: (new_value: Value) => void
+}
+
+export default function TeamMembersInput({ value, onChange = () => { } }: Props) {
+
+    const addMember: ComponentProps<typeof UsersInput>['onSelect'] = (user) => {
+        if (value.some(u => u.id === user.id))
+            return;
+        onChange([
+            ...value,
+            {
+                id: user.id,
+                name: user.name,
+                avatar: user.avatar,
+                jobTitle: user.jobTitle,
+                role: Team_Member_Role.Maker,
+            }])
+    }
+
+    const setMemberRole = (id: number, role: Team_Member_Role) => {
+        onChange(value.map(u => {
+            if (u.id !== id) return u;
+            return {
+                ...u,
+                role,
+            }
+        }))
+    }
+
+    const removeMemeber = (id: number) => {
+        onChange(value.filter(u => u.id !== id));
+    }
+
+    return (
+        <>
+            <UsersInput onSelect={addMember} />
+            {value.length > 0 &&
+                <div className='flex flex-col mt-24'>
+                    {value.map(user => {
+                        return <div
+                            key={user.id}
+                            className="border-b py-16 last-of-type:border-b-0 flex flex-wrap gap-16 items-center">
+
+                            <Avatar width={40} src={user.avatar} />
+                            <div className='grow'>
+                                <p className="font-medium self-center">
+                                    {user.name}
+                                </p>
+                                <p className="text-body5 text-gray-500">
+                                    {user.jobTitle}
+                                </p>
+                            </div>
+                            <div className="ml-auto flex gap-16">
+                                <Menu
+                                    offsetY={12}
+                                    align='end'
+                                    menuButton={<MenuButton className='border border-gray-200 p-8 rounded-8 text-gray-500'>{user.role} <FaChevronDown className='ml-4 text-gray-400' /></MenuButton>} transition>
+                                    {Object.values(Team_Member_Role).map(role =>
+                                        <MenuItem
+                                            onClick={() => setMemberRole(user.id, role)}
+                                            key={role}>{role}</MenuItem>
+                                    )}
+                                </Menu>
+                                <button onClick={() => removeMemeber(user.id)} className=''>
+                                    <FaRegTrashAlt className='text-red-400' />
+                                </button>
+                            </div>
+                        </div>
+                    })}
+                </div>}
+        </>
+    )
+}
diff --git a/src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.tsx
new file mode 100644
index 0000000..9aeb6d5
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.tsx
@@ -0,0 +1,140 @@
+import { Controller, NestedValue, Resolver, SubmitHandler, useForm } from "react-hook-form"
+import { NotificationsService } from "src/services/notifications.service";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { usePrompt } from "src/utils/hooks";
+import { toast } from "react-toastify";
+import Card from "src/Components/Card/Card";
+import TeamMembersInput from "../TeamMembersInput/TeamMembersInput";
+import { Team_Member_Role } from "src/graphql";
+import RecruitRolesInput from "../RecruitRolesInput/RecruitRolesInput";
+
+
+export interface ITeamForm {
+    members: NestedValue<{
+        id: number,
+        name: string,
+        jobTitle: string | null,
+        avatar: string,
+        role: Team_Member_Role,
+    }[]>
+
+    recruit_roles: NestedValue<string[]>
+}
+
+interface Props {
+    data?: ITeamForm,
+}
+
+// type IFormInputs = Props['data'];
+
+const schema: yup.SchemaOf<ITeamForm> = yup.object({
+    members: yup.array().of(yup.object() as any).required().default([]),
+    recruit_roles: yup.array().required().default([])
+}).required();
+
+export default function TeamTab({ data }: Props) {
+
+    const { formState: { errors, isDirty, }, handleSubmit, reset, control } = useForm<ITeamForm>({
+        defaultValues: {
+            ...data,
+            members: [],
+            recruit_roles: [],
+        },
+        resolver: yupResolver(schema) as Resolver<ITeamForm>,
+        // mode: 'onBlur',
+    });
+
+
+
+    usePrompt('You may have some unsaved changes. You still want to leave?', isDirty)
+
+
+    const onSubmit: SubmitHandler<ITeamForm> = data => {
+
+        const toastId = toast.loading("Saving changes...", NotificationsService.defaultOptions)
+        const mutate: any = null;
+        mutate({
+            // variables: {
+            //     data: {
+            //         // name: data.name,
+            //         // avatar: data.avatar,
+            //         // jobTitle: data.jobTitle,
+            //         // bio: data.bio,
+            //         // email: data.email,
+            //         // github: data.github,
+            //         // linkedin: data.linkedin,
+            //         // lightning_address: data.lightning_address,
+            //         // location: data.location,
+            //         // twitter: data.twitter,
+            //         // website: data.website,
+            //     }
+            // },
+            onCompleted: () => {
+                reset(data);
+                toast.update(toastId, { render: "Saved changes successfully", type: "success", ...NotificationsService.defaultOptions, isLoading: false });
+            }
+        })
+            .catch(() => {
+                toast.update(toastId, { render: "A network error happened", type: "error", ...NotificationsService.defaultOptions, isLoading: false });
+                // mutationStatus.reset()
+            })
+    };
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
+            <div className="md:col-span-2 flex flex-col gap-24">
+
+
+                <Card>
+                    <h2 className="text-body2 font-bolder">⚡️  Team</h2>
+                    <p className="text-body4 font-light text-gray-600 mt-8">Let us know who is on this product’s team.</p>
+                    <div className="mt-24">
+                        <Controller
+                            control={control}
+                            name="members"
+                            render={({ field: { onChange, value } }) => (
+                                <TeamMembersInput
+                                    value={value}
+                                    onChange={onChange}
+                                />
+                            )}
+                        />
+                        {errors.members && <p className='input-error'>{errors.members?.message}</p>}
+                    </div>
+                    <div className="bg-gray-50 p-16 rounded-12 border border-gray-200 mt-24">
+                        <p className="text-body5">
+                            <span className="font-bold">💡 Onboard your team:</span> Make sure you onboard any other team members so they can help you manage this project.
+                        </p>
+                    </div>
+                </Card>
+
+                <Card>
+                    <h2 className="text-body2 font-bolder">💪️  Recruit</h2>
+                    <p className="text-body4 font-light text-gray-600 mt-8">Are you looking to recruit more makers to your project? Select the roles you’re looking for below and let makers discover your project at ⚔️ Tournaments.</p>
+                    <div className="mt-24">
+                        <Controller
+                            control={control}
+                            name="recruit_roles"
+                            render={({ field: { onChange, value } }) => (
+                                <RecruitRolesInput
+                                    value={value}
+                                    onChange={onChange}
+                                />
+                            )}
+                        />
+                        {errors.recruit_roles && <p className='input-error'>{errors.recruit_roles?.message}</p>}
+                    </div>
+                </Card>
+            </div>
+            <div className="self-start sticky-side-element">
+                {/* <SaveChangesCard
+                    isLoading={mutationStatus.loading}
+                    isDirty={isDirty}
+                    onSubmit={handleSubmit(onSubmit)}
+                    onCancel={() => reset()}
+                /> */}
+            </div>
+        </div>
+    )
+}
diff --git a/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.tsx b/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.tsx
new file mode 100644
index 0000000..d09130c
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.tsx
@@ -0,0 +1,65 @@
+import Button from 'src/Components/Button/Button';
+import { random } from 'src/utils/helperFunctions';
+
+interface Props {
+    value: string[];
+    onChange?: (v: string[]) => void;
+}
+
+export default function TournamentsInput(props: Props) {
+
+
+    const handleClick = (clickedValue: string) => {
+        if (props.value.includes(clickedValue))
+            props.onChange?.(props.value.filter(v => v !== clickedValue));
+        else
+            props.onChange?.([...props.value, clickedValue])
+    }
+
+
+    return (
+        <div className="flex flex-wrap gap-8">
+            {false ?
+                Array(10).fill(0).map((_, idx) =>
+                    <div
+                        key={idx}
+                        className="bg-gray-100 border border-gray-200 p-8 rounded-10">
+                        <span className='invisible'>{"loading category skeleton".slice(random(6, 12))}</span>
+                    </div>)
+                :
+                data.map(item =>
+                    <Button
+                        key={item.text}
+                        color='none'
+                        size='sm'
+                        className={`
+                        border border-gray-200
+                        ${props.value.includes(item.text) ?
+                                'text-primary-600 bg-primary-100'
+                                :
+                                "bg-gray-100"
+                            }
+                        `}
+                        onClick={() => handleClick(item.text)}
+                    >
+                        {item.text}
+                    </Button>)
+            }
+        </div>
+    )
+}
+
+const data = [
+    {
+        text: 'ShockTheWeb3',
+    },
+    {
+        text: 'Adopting Bitcoin 2022',
+    },
+    {
+        text: 'TabConf',
+    },
+    {
+        text: 'Blockstream',
+    },
+]
diff --git a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
new file mode 100644
index 0000000..bc53d70
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
@@ -0,0 +1,103 @@
+import { Navigate, NavLink, Route, Routes, useParams } from "react-router-dom";
+import Slider from "src/Components/Slider/Slider";
+import { useAppSelector, useMediaQuery } from "src/utils/hooks";
+import { Helmet } from 'react-helmet'
+import { MEDIA_QUERIES } from "src/utils/theme";
+import Card from "src/Components/Card/Card";
+import ProjectDetailsTab from "./Components/ProjectDetailsTab/ProjectDetailsTab";
+import TeamTab from "./Components/TeamTab/TeamTab";
+import ExtrasTab from "./Components/ExtrasTab/ExtrasTab";
+
+
+const links = [
+    {
+        text: "🚀️  Project details",
+        path: 'project-details',
+    },
+    {
+        text: "⚡️  Team",
+        path: 'team',
+    },
+    {
+        text: "💎  Extras",
+        path: 'extras',
+    }
+]
+
+
+
+export default function ListProjectPage() {
+
+    const { id } = useParams()
+
+    const isUpdating = !!id;
+
+    const isMediumScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
+
+
+
+
+    // if (!userId || profileQuery.loading)
+    //     return <LoadingPage />
+
+    // if (!profileQuery.data?.profile)
+    //     return <NotFoundPage />
+
+    return (
+        <>
+            <Helmet>
+                <title>List a project</title>
+                <meta property="og:title" content='List a project' />
+            </Helmet>
+            <div className="page-container grid grid-cols-1 md:grid-cols-4 gap-24">
+                <aside>
+                    {isMediumScreen ?
+                        <Card className="sticky-side-element">
+                            <p className="text-body2 font-bolder text-black mb-16">List a project</p>
+                            <ul className=' flex flex-col gap-8'>
+                                {links.map((link, idx) =>
+                                    <li key={idx}>
+                                        <NavLink
+                                            to={link.path}
+                                            className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
+                                 active:scale-95 transition-transform
+                                ${isActive ? 'bg-gray-100' : 'hover:bg-gray-50'}
+                                `}
+                                        >
+                                            {link.text}
+                                        </NavLink>
+                                    </li>)}
+                            </ul>
+                        </Card>
+                        :
+                        <div className="border-b-2 border-gray-200">
+                            <Slider>
+                                {links.map((link, idx) =>
+                                    <NavLink
+                                        to={link.path}
+                                        key={idx}
+                                        className={`flex items-start cursor-pointer font-bold py-12
+                                                active:scale-95 transition-transform`}
+                                        style={({ isActive }) => ({
+                                            boxShadow: isActive ? '0px 2px var(--primary)' : 'none'
+                                        })}
+                                    >
+                                        {link.text}
+                                    </NavLink>
+                                )}
+                            </Slider>
+                        </div>
+                    }
+                </aside>
+                <main className="md:col-span-3">
+                    <Routes>
+                        <Route index element={<Navigate to={links[0].path} />} />
+                        <Route path={links[0].path} element={<ProjectDetailsTab />} />
+                        <Route path={links[1].path} element={<TeamTab />} />
+                        <Route path={links[2].path} element={<ExtrasTab />} />
+                    </Routes>
+                </main>
+            </div>
+        </>
+    )
+}
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index 612d9a3..d153a57 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -231,6 +231,7 @@ export type Query = {
   profile: Maybe<User>;
   projectsByCategory: Array<Project>;
   searchProjects: Array<Project>;
+  searchUsers: Array<User>;
 };
 
 
@@ -310,6 +311,11 @@ export type QuerySearchProjectsArgs = {
   take?: InputMaybe<Scalars['Int']>;
 };
 
+
+export type QuerySearchUsersArgs = {
+  value: Scalars['String'];
+};
+
 export type Question = PostBase & {
   __typename?: 'Question';
   author: Author;
@@ -352,6 +358,11 @@ export type StoryInputType = {
   title: Scalars['String'];
 };
 
+export enum Team_Member_Role {
+  Admin = 'Admin',
+  Maker = 'Maker'
+}
+
 export type Tag = {
   __typename?: 'Tag';
   description: Maybe<Scalars['String']>;
@@ -421,6 +432,13 @@ export type OfficialTagsQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type OfficialTagsQuery = { __typename?: 'Query', officialTags: Array<{ __typename?: 'Tag', id: number, title: string, icon: string | null, description: string | null }> };
 
+export type SearchUsersQueryVariables = Exact<{
+  value: Scalars['String'];
+}>;
+
+
+export type SearchUsersQuery = { __typename?: 'Query', searchUsers: Array<{ __typename?: 'User', id: number, name: string, avatar: string, jobTitle: string | null }> };
+
 export type NavCategoriesQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -515,13 +533,6 @@ export type PostDetailsQueryVariables = Exact<{
 
 export type PostDetailsQuery = { __typename?: 'Query', getPostById: { __typename?: 'Bounty', id: number, title: string, createdAt: any, body: string, votes_count: number, type: string, cover_image: string | null, deadline: string, reward_amount: number, applicants_count: number, author: { __typename?: 'Author', id: number, name: string, avatar: string, join_date: any }, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, applications: Array<{ __typename?: 'BountyApplication', id: number, date: string, workplan: string, author: { __typename?: 'Author', id: number, name: string, avatar: string } }> } | { __typename?: 'Question', id: number, title: string, createdAt: any, body: string, votes_count: number, type: string, author: { __typename?: 'Author', id: number, name: string, avatar: string, join_date: any }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } | { __typename?: 'Story', id: number, title: string, createdAt: any, body: string, votes_count: number, type: string, cover_image: string | null, is_published: boolean | null, author: { __typename?: 'Author', id: number, name: string, avatar: string, join_date: any }, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } };
 
-export type ProfileQueryVariables = Exact<{
-  profileId: Scalars['Int'];
-}>;
-
-
-export type ProfileQuery = { __typename?: 'Query', profile: { __typename?: 'User', id: number, name: string, avatar: string, join_date: any, role: string | null, email: string | null, jobTitle: string | null, lightning_address: string | null, website: string | null, twitter: string | null, github: string | null, linkedin: string | null, bio: string | null, location: string | null, nostr_prv_key: string | null, nostr_pub_key: string | null, stories: Array<{ __typename?: 'Story', id: number, title: string, createdAt: any, tags: Array<{ __typename?: 'Tag', id: number, title: string, icon: string | null }> }> } | null };
-
 export type UpdateProfileAboutMutationVariables = Exact<{
   data: InputMaybe<UpdateProfileInput>;
 }>;
@@ -529,6 +540,13 @@ export type UpdateProfileAboutMutationVariables = Exact<{
 
 export type UpdateProfileAboutMutation = { __typename?: 'Mutation', updateProfile: { __typename?: 'User', id: number, name: string, avatar: string, join_date: any, website: string | null, role: string | null, email: string | null, lightning_address: string | null, jobTitle: string | null, twitter: string | null, github: string | null, linkedin: string | null, bio: string | null, location: string | null } | null };
 
+export type ProfileQueryVariables = Exact<{
+  profileId: Scalars['Int'];
+}>;
+
+
+export type ProfileQuery = { __typename?: 'Query', profile: { __typename?: 'User', id: number, name: string, avatar: string, join_date: any, role: string | null, email: string | null, jobTitle: string | null, lightning_address: string | null, website: string | null, twitter: string | null, github: string | null, linkedin: string | null, bio: string | null, location: string | null, nostr_prv_key: string | null, nostr_pub_key: string | null, stories: Array<{ __typename?: 'Story', id: number, title: string, createdAt: any, tags: Array<{ __typename?: 'Tag', id: number, title: string, icon: string | null }> }> } | null };
+
 export type CategoryPageQueryVariables = Exact<{
   categoryId: Scalars['Int'];
 }>;
@@ -613,6 +631,44 @@ export function useOfficialTagsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptio
 export type OfficialTagsQueryHookResult = ReturnType<typeof useOfficialTagsQuery>;
 export type OfficialTagsLazyQueryHookResult = ReturnType<typeof useOfficialTagsLazyQuery>;
 export type OfficialTagsQueryResult = Apollo.QueryResult<OfficialTagsQuery, OfficialTagsQueryVariables>;
+export const SearchUsersDocument = gql`
+    query SearchUsers($value: String!) {
+  searchUsers(value: $value) {
+    id
+    name
+    avatar
+    jobTitle
+  }
+}
+    `;
+
+/**
+ * __useSearchUsersQuery__
+ *
+ * To run a query within a React component, call `useSearchUsersQuery` and pass it any options that fit your needs.
+ * When your component renders, `useSearchUsersQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useSearchUsersQuery({
+ *   variables: {
+ *      value: // value for 'value'
+ *   },
+ * });
+ */
+export function useSearchUsersQuery(baseOptions: Apollo.QueryHookOptions<SearchUsersQuery, SearchUsersQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<SearchUsersQuery, SearchUsersQueryVariables>(SearchUsersDocument, options);
+      }
+export function useSearchUsersLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<SearchUsersQuery, SearchUsersQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<SearchUsersQuery, SearchUsersQueryVariables>(SearchUsersDocument, options);
+        }
+export type SearchUsersQueryHookResult = ReturnType<typeof useSearchUsersQuery>;
+export type SearchUsersLazyQueryHookResult = ReturnType<typeof useSearchUsersLazyQuery>;
+export type SearchUsersQueryResult = Apollo.QueryResult<SearchUsersQuery, SearchUsersQueryVariables>;
 export const NavCategoriesDocument = gql`
     query NavCategories {
   allCategories {
@@ -1306,6 +1362,52 @@ export function usePostDetailsLazyQuery(baseOptions?: Apollo.LazyQueryHookOption
 export type PostDetailsQueryHookResult = ReturnType<typeof usePostDetailsQuery>;
 export type PostDetailsLazyQueryHookResult = ReturnType<typeof usePostDetailsLazyQuery>;
 export type PostDetailsQueryResult = Apollo.QueryResult<PostDetailsQuery, PostDetailsQueryVariables>;
+export const UpdateProfileAboutDocument = gql`
+    mutation updateProfileAbout($data: UpdateProfileInput) {
+  updateProfile(data: $data) {
+    id
+    name
+    avatar
+    join_date
+    website
+    role
+    email
+    lightning_address
+    jobTitle
+    twitter
+    github
+    linkedin
+    bio
+    location
+  }
+}
+    `;
+export type UpdateProfileAboutMutationFn = Apollo.MutationFunction<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>;
+
+/**
+ * __useUpdateProfileAboutMutation__
+ *
+ * To run a mutation, you first call `useUpdateProfileAboutMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUpdateProfileAboutMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [updateProfileAboutMutation, { data, loading, error }] = useUpdateProfileAboutMutation({
+ *   variables: {
+ *      data: // value for 'data'
+ *   },
+ * });
+ */
+export function useUpdateProfileAboutMutation(baseOptions?: Apollo.MutationHookOptions<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>(UpdateProfileAboutDocument, options);
+      }
+export type UpdateProfileAboutMutationHookResult = ReturnType<typeof useUpdateProfileAboutMutation>;
+export type UpdateProfileAboutMutationResult = Apollo.MutationResult<UpdateProfileAboutMutation>;
+export type UpdateProfileAboutMutationOptions = Apollo.BaseMutationOptions<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>;
 export const ProfileDocument = gql`
     query profile($profileId: Int!) {
   profile(id: $profileId) {
@@ -1366,52 +1468,6 @@ export function useProfileLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<Pr
 export type ProfileQueryHookResult = ReturnType<typeof useProfileQuery>;
 export type ProfileLazyQueryHookResult = ReturnType<typeof useProfileLazyQuery>;
 export type ProfileQueryResult = Apollo.QueryResult<ProfileQuery, ProfileQueryVariables>;
-export const UpdateProfileAboutDocument = gql`
-    mutation updateProfileAbout($data: UpdateProfileInput) {
-  updateProfile(data: $data) {
-    id
-    name
-    avatar
-    join_date
-    website
-    role
-    email
-    lightning_address
-    jobTitle
-    twitter
-    github
-    linkedin
-    bio
-    location
-  }
-}
-    `;
-export type UpdateProfileAboutMutationFn = Apollo.MutationFunction<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>;
-
-/**
- * __useUpdateProfileAboutMutation__
- *
- * To run a mutation, you first call `useUpdateProfileAboutMutation` within a React component and pass it any options that fit your needs.
- * When your component renders, `useUpdateProfileAboutMutation` returns a tuple that includes:
- * - A mutate function that you can call at any time to execute the mutation
- * - An object with fields that represent the current status of the mutation's execution
- *
- * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
- *
- * @example
- * const [updateProfileAboutMutation, { data, loading, error }] = useUpdateProfileAboutMutation({
- *   variables: {
- *      data: // value for 'data'
- *   },
- * });
- */
-export function useUpdateProfileAboutMutation(baseOptions?: Apollo.MutationHookOptions<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useMutation<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>(UpdateProfileAboutDocument, options);
-      }
-export type UpdateProfileAboutMutationHookResult = ReturnType<typeof useUpdateProfileAboutMutation>;
-export type UpdateProfileAboutMutationResult = Apollo.MutationResult<UpdateProfileAboutMutation>;
-export type UpdateProfileAboutMutationOptions = Apollo.BaseMutationOptions<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>;
 export const CategoryPageDocument = gql`
     query CategoryPage($categoryId: Int!) {
   projectsByCategory(category_id: $categoryId) {
diff --git a/src/mocks/data.ts b/src/mocks/data.ts
index a660dcf..21e9e8b 100644
--- a/src/mocks/data.ts
+++ b/src/mocks/data.ts
@@ -1,7 +1,7 @@
 import { hackathons } from "./data/hackathon";
 import { posts, feed, generatePostComments } from "./data/posts";
 import { categories, projects } from "./data/projects";
-import { user } from "./data/users";
+import { users } from "./data/users";
 
 export const MOCK_DATA = {
     projects,
@@ -10,5 +10,6 @@ export const MOCK_DATA = {
     feed,
     hackathons,
     generatePostComments: generatePostComments,
-    user: user
+    user: users[0],
+    users: users,
 }
\ No newline at end of file
diff --git a/src/mocks/data/users.ts b/src/mocks/data/users.ts
index ac8f844..3d99352 100644
--- a/src/mocks/data/users.ts
+++ b/src/mocks/data/users.ts
@@ -1,12 +1,12 @@
 import { User } from "src/graphql";
 import { posts } from "./posts";
 
-export const user: User = {
+export const users: User[] = [{
     id: 123,
     email: "mtg0987654321@gmail.com",
     avatar: "https://avatars.dicebear.com/api/bottts/Mtgmtg.svg",
     bio: "Lorem asiop asklh kluiw wekjhl shkj kljhsva klu khsc klhlkbs mjklwqr kmlk sadlfui mewr qiumnk, asdjomi cskhsdf.",
-    name: "123123124asdfsadfsa8d7fsadfasdf",
+    name: "Mtg",
     github: "MTG2000",
     jobTitle: "Front-end Web Developer",
     join_date: new Date(2021).toISOString(),
@@ -19,4 +19,61 @@ export const user: User = {
     stories: posts.stories,
     nostr_prv_key: "123123124asdfsadfsa8d7fsadfasdf",
     nostr_pub_key: "123124123123dfsadfsa8d7f11sadfasdf",
-}
+},
+{
+    id: 441,
+    email: "eddy@gmail.com",
+    avatar: "https://avatars.dicebear.com/api/bottts/Eduardu.svg",
+    bio: "Lorem asiop asklh kluiw wekjhl shkj kljhsva klu khsc klhlkbs mjklwqr kmlk sadlfui mewr qiumnk, asdjomi cskhsdf.",
+    name: "Edward P",
+    github: "barefoot_88",
+    jobTitle: "Senior Product Designer",
+    join_date: new Date(2021).toISOString(),
+    lightning_address: "ed@getalby.com",
+    linkedin: "https://www.linkedin.com/in/mtg-softwares-dev/",
+    location: "Germany, Berlin",
+    role: "user",
+    twitter: "john-doe",
+    website: "https://mtg-dev.tech",
+    stories: posts.stories,
+    nostr_prv_key: "123123124asdfsadfsa8d7fsadfasdf",
+    nostr_pub_key: "123124123123dfsadfsa8d7f11sadfasdf",
+},
+{
+    id: 422,
+    email: "johns@gmail.com",
+    avatar: "https://avatars.dicebear.com/api/bottts/Johns.svg",
+    bio: "Lorem asiop asklh kluiw wekjhl shkj kljhsva klu khsc klhlkbs mjklwqr kmlk sadlfui mewr qiumnk, asdjomi cskhsdf.",
+    name: "Johns Beharry",
+    github: "johnsbehhary",
+    jobTitle: "Manager",
+    join_date: new Date(2021).toISOString(),
+    lightning_address: "johns@getalby.com",
+    linkedin: "https://www.linkedin.com/in/mtg-softwares-dev/",
+    location: "Germany, Berlin",
+    role: "user",
+    twitter: "john-doe",
+    website: "https://mtg-dev.tech",
+    stories: posts.stories,
+    nostr_prv_key: "123123124asdfsadfsa8d7fsadfasdf",
+    nostr_pub_key: "123124123123dfsadfsa8d7f11sadfasdf",
+},
+{
+    id: 511,
+    email: "carlos@gmail.com",
+    avatar: "https://avatars.dicebear.com/api/bottts/Carlos.svg",
+    bio: "Lorem asiop asklh kluiw wekjhl shkj kljhsva klu khsc klhlkbs mjklwqr kmlk sadlfui mewr qiumnk, asdjomi cskhsdf.",
+    name: "Mohammed Taher ",
+    github: "MTG2000",
+    jobTitle: "Back-end Web Developer",
+    join_date: new Date(2021).toISOString(),
+    lightning_address: "carlos@getalby.com",
+    linkedin: "https://www.linkedin.com/in/mtg-softwares-dev/",
+    location: "Germany, Berlin",
+    role: "user",
+    twitter: "john-doe",
+    website: "https://mtg-dev.tech",
+    stories: posts.stories,
+    nostr_prv_key: "123123124asdfsadfsa8d7fsadfasdf",
+    nostr_pub_key: "123124123123dfsadfsa8d7f11sadfasdf",
+}]
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index a1fb79b..a265f5f 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -1,6 +1,6 @@
 
 import { graphql } from 'msw'
-import { allCategories, getAllHackathons, getCategory, getFeed, getMyDrafts, getPostById, getProject, getTrendingPosts, hottestProjects, me, newProjects, popularTags, profile, projectsByCategory, searchProjects } from './resolvers'
+import { allCategories, getAllHackathons, getCategory, getFeed, getMyDrafts, getPostById, getProject, getTrendingPosts, hottestProjects, me, newProjects, popularTags, profile, projectsByCategory, searchProjects, searchUsers } from './resolvers'
 import {
     NavCategoriesQuery,
     ExploreProjectsQuery,
@@ -29,6 +29,8 @@ import {
     MeQuery,
     ProfileQuery,
     GetMyDraftsQuery,
+    SearchUsersQuery,
+    SearchUsersQueryVariables,
 } from 'src/graphql'
 
 const delay = (ms = 1000) => new Promise((res) => setTimeout(res, ms + Math.random() * 1000))
@@ -213,6 +215,16 @@ export const handlers = [
         )
     }),
 
+
+    graphql.query<SearchUsersQuery, SearchUsersQueryVariables>('SearchUsers', async (req, res, ctx) => {
+        await delay()
+        return res(
+            ctx.data({
+                searchUsers: searchUsers(req.variables.value)
+            })
+        )
+    }),
+
     graphql.query<GetMyDraftsQuery>('GetMyDrafts', async (req, res, ctx) => {
         await delay()
 
diff --git a/src/mocks/resolvers.ts b/src/mocks/resolvers.ts
index c3e5ccc..ab9c4a3 100644
--- a/src/mocks/resolvers.ts
+++ b/src/mocks/resolvers.ts
@@ -79,6 +79,10 @@ export function profile() {
     return MOCK_DATA['user']
 }
 
+export function searchUsers(value: string) {
+    return MOCK_DATA['users'].filter(u => u.name.toLowerCase().indexOf(value.toLowerCase()) !== -1);
+}
+
 export function getMyDrafts(): Query['getMyDrafts'] {
     return MOCK_DATA['posts'].stories;
 }
\ No newline at end of file
diff --git a/src/utils/routing/routes.ts b/src/utils/routing/routes.ts
index f4c338f..a8b64fb 100644
--- a/src/utils/routing/routes.ts
+++ b/src/utils/routing/routes.ts
@@ -64,7 +64,8 @@ export const PAGES_ROUTES = {
     projects: {
         default: "/projects",
         hottest: "/projects/hottest",
-        byCategoryId: "/projects/category/:id"
+        byCategoryId: "/projects/category/:id",
+        listProject: "/projects/list-project/*"
     },
     blog: {
         feed: "/blog",

From 66b427876882e2597cc5cae552fd3adceed83dde Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 15 Aug 2022 19:40:01 +0300
Subject: [PATCH 02/53] feat: add storybooks to list_project components

---
 .../CapabilitiesInput.stories.tsx             | 21 ++++++++++++++
 .../CapabilitiesInput.tsx}                    |  2 +-
 .../CategoriesInput.stories.tsx               | 20 +++++++++++++
 .../ExtrasTab/ExtrasTab.stories.tsx           | 20 +++++++++++++
 .../ProjectDetailsTab.stories.tsx             | 20 +++++++++++++
 .../ProjectDetailsTab/ProjectDetailsTab.tsx   |  4 +--
 .../RecruiterRolesInput.stories.tsx           | 21 ++++++++++++++
 .../TeamMembersInput.stories.tsx              | 21 ++++++++++++++
 .../Components/TeamTab/TeamTab.stories.tsx    | 20 +++++++++++++
 .../TournamentsInput.stories.tsx              | 21 ++++++++++++++
 src/utils/storybook/decorators.tsx            |  3 +-
 src/utils/storybook/utils.tsx                 | 29 +++++++++++++++++++
 12 files changed, 198 insertions(+), 4 deletions(-)
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/CapabilitiesInput/CapabilitiesInput.stories.tsx
 rename src/features/Projects/pages/ListProjectPage/Components/{CapablitiesInput/CapablitiesInput.tsx => CapabilitiesInput/CapabilitiesInput.tsx} (97%)
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/CategoriesInput/CategoriesInput.stories.tsx
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/ExtrasTab/ExtrasTab.stories.tsx
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.stories.tsx
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/RecruitRolesInput/RecruiterRolesInput.stories.tsx
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.stories.tsx
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.stories.tsx
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.stories.tsx

diff --git a/src/features/Projects/pages/ListProjectPage/Components/CapabilitiesInput/CapabilitiesInput.stories.tsx b/src/features/Projects/pages/ListProjectPage/Components/CapabilitiesInput/CapabilitiesInput.stories.tsx
new file mode 100644
index 0000000..2839537
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/CapabilitiesInput/CapabilitiesInput.stories.tsx
@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { WrapFormController } from 'src/utils/storybook/utils';
+import CapabilitiesInput from './CapabilitiesInput';
+
+export default {
+    title: 'Projects/List Project Page/Inputs/Capabilites Input',
+    component: CapabilitiesInput,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof CapabilitiesInput>;
+
+
+const Template: ComponentStory<typeof CapabilitiesInput> = (args) => WrapFormController('v', [])(<CapabilitiesInput {...args as any} ></CapabilitiesInput>)
+
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+
diff --git a/src/features/Projects/pages/ListProjectPage/Components/CapablitiesInput/CapablitiesInput.tsx b/src/features/Projects/pages/ListProjectPage/Components/CapabilitiesInput/CapabilitiesInput.tsx
similarity index 97%
rename from src/features/Projects/pages/ListProjectPage/Components/CapablitiesInput/CapablitiesInput.tsx
rename to src/features/Projects/pages/ListProjectPage/Components/CapabilitiesInput/CapabilitiesInput.tsx
index d267179..72830a0 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/CapablitiesInput/CapablitiesInput.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/CapabilitiesInput/CapabilitiesInput.tsx
@@ -8,7 +8,7 @@ interface Props {
     onChange?: (v: string[]) => void;
 }
 
-export default function CapablitiesInput(props: Props) {
+export default function CapabilitiesInput(props: Props) {
 
 
     const handleClick = (clickedValue: string) => {
diff --git a/src/features/Projects/pages/ListProjectPage/Components/CategoriesInput/CategoriesInput.stories.tsx b/src/features/Projects/pages/ListProjectPage/Components/CategoriesInput/CategoriesInput.stories.tsx
new file mode 100644
index 0000000..e12ce6f
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/CategoriesInput/CategoriesInput.stories.tsx
@@ -0,0 +1,20 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { WrapFormController } from 'src/utils/storybook/utils';
+import CategoriesInput from './CategoriesInput';
+
+export default {
+    title: 'Projects/List Project Page/Inputs/Categories Input',
+    component: CategoriesInput,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof CategoriesInput>;
+
+
+const Template: ComponentStory<typeof CategoriesInput> = (args) => WrapFormController('v', [])(<CategoriesInput {...args as any} ></CategoriesInput>)
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ExtrasTab/ExtrasTab.stories.tsx b/src/features/Projects/pages/ListProjectPage/Components/ExtrasTab/ExtrasTab.stories.tsx
new file mode 100644
index 0000000..ceb7a6f
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/ExtrasTab/ExtrasTab.stories.tsx
@@ -0,0 +1,20 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ExtrasTab from './ExtrasTab';
+
+export default {
+    title: 'Projects/List Project Page/Tabs/Extras',
+    component: ExtrasTab,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof ExtrasTab>;
+
+
+const Template: ComponentStory<typeof ExtrasTab> = (args) => <ExtrasTab {...args as any} ></ExtrasTab>
+
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.stories.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.stories.tsx
new file mode 100644
index 0000000..6303394
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.stories.tsx
@@ -0,0 +1,20 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ProjectDetailsTab from './ProjectDetailsTab';
+
+export default {
+    title: 'Projects/List Project Page/Tabs/Project Details',
+    component: ProjectDetailsTab,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof ProjectDetailsTab>;
+
+
+const Template: ComponentStory<typeof ProjectDetailsTab> = (args) => <ProjectDetailsTab {...args as any} ></ProjectDetailsTab>
+
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
index abfa9d2..0a7bb04 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
@@ -11,7 +11,7 @@ import Card from "src/Components/Card/Card";
 import { FaDiscord, FaTwitter } from "react-icons/fa";
 import { FiCamera, FiGithub, FiTwitter } from "react-icons/fi";
 import CategoriesInput from "../CategoriesInput/CategoriesInput";
-import CapablitiesInput from "../CapablitiesInput/CapablitiesInput";
+import CapabilitiesInput from "../CapabilitiesInput/CapabilitiesInput";
 
 
 interface IProjectDetails {
@@ -267,7 +267,7 @@ export default function ProjectDetailsTab({ data, onClose }: Props) {
                             control={control}
                             name="capabilities"
                             render={({ field: { onChange, value } }) => (
-                                <CapablitiesInput
+                                <CapabilitiesInput
                                     value={value}
                                     onChange={onChange}
                                 />
diff --git a/src/features/Projects/pages/ListProjectPage/Components/RecruitRolesInput/RecruiterRolesInput.stories.tsx b/src/features/Projects/pages/ListProjectPage/Components/RecruitRolesInput/RecruiterRolesInput.stories.tsx
new file mode 100644
index 0000000..81dd2fa
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/RecruitRolesInput/RecruiterRolesInput.stories.tsx
@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { WrapFormController } from 'src/utils/storybook/utils';
+import RecruitRolesInput from './RecruitRolesInput';
+
+export default {
+    title: 'Projects/List Project Page/Inputs/Recruiter Roles Input',
+    component: RecruitRolesInput,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof RecruitRolesInput>;
+
+
+const Template: ComponentStory<typeof RecruitRolesInput> = (args) => WrapFormController('v', [])(<RecruitRolesInput {...args as any} ></RecruitRolesInput>)
+
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+
diff --git a/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.stories.tsx b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.stories.tsx
new file mode 100644
index 0000000..0427410
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.stories.tsx
@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { WrapFormController } from 'src/utils/storybook/utils';
+import TeamMembersInput from './TeamMembersInput';
+
+export default {
+    title: 'Projects/List Project Page/Inputs/Team Members Input',
+    component: TeamMembersInput,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof TeamMembersInput>;
+
+
+const Template: ComponentStory<typeof TeamMembersInput> = (args) => WrapFormController('v', [])(<TeamMembersInput {...args as any} ></TeamMembersInput>)
+
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+
diff --git a/src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.stories.tsx b/src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.stories.tsx
new file mode 100644
index 0000000..a2a7fa2
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.stories.tsx
@@ -0,0 +1,20 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import TeamTab from './TeamTab';
+
+export default {
+    title: 'Projects/List Project Page/Tabs/Team',
+    component: TeamTab,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof TeamTab>;
+
+
+const Template: ComponentStory<typeof TeamTab> = (args) => <TeamTab {...args as any} ></TeamTab>
+
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+
diff --git a/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.stories.tsx b/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.stories.tsx
new file mode 100644
index 0000000..aa7f5b3
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.stories.tsx
@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { WrapFormController } from 'src/utils/storybook/utils';
+import TournamentsInput from './TournamentsInput';
+
+export default {
+    title: 'Projects/List Project Page/Inputs/Tournaments Input',
+    component: TournamentsInput,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof TournamentsInput>;
+
+
+const Template: ComponentStory<typeof TournamentsInput> = (args) => WrapFormController('v', [])(<TournamentsInput {...args as any} ></TournamentsInput>)
+
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+
diff --git a/src/utils/storybook/decorators.tsx b/src/utils/storybook/decorators.tsx
index 4170b69..1756607 100644
--- a/src/utils/storybook/decorators.tsx
+++ b/src/utils/storybook/decorators.tsx
@@ -16,7 +16,7 @@ import "src/styles/index.scss";
 import 'react-loading-skeleton/dist/skeleton.css'
 import { ApolloProvider } from '@apollo/client';
 import { apolloClient } from '../apollo';
-import { FormProvider, useForm, UseFormProps } from 'react-hook-form';
+import { FormProvider, useForm, UseFormProps, Controller } from 'react-hook-form';
 import ModalsContainer from 'src/Components/Modals/ModalsContainer/ModalsContainer';
 
 
@@ -123,6 +123,7 @@ export function WrapForm<T = any>(options?: Partial<UseFormProps<T>>): Decorator
 }
 
 
+
 export const WithModals: DecoratorFn = (Component) => <>
     <Component />
     <ModalsContainer />
diff --git a/src/utils/storybook/utils.tsx b/src/utils/storybook/utils.tsx
index 060c12b..35caa96 100644
--- a/src/utils/storybook/utils.tsx
+++ b/src/utils/storybook/utils.tsx
@@ -1,3 +1,5 @@
+import React, { ReactElement, ReactNode } from "react"
+import { Controller, useForm } from "react-hook-form"
 import { RootState } from "src/redux/store"
 
 export type ModifyArgs = Partial<{
@@ -8,3 +10,30 @@ export type ModifyArgs = Partial<{
 }>
 
 
+
+export function WrapFormController<K extends string, V extends any>(key: K, defaultValue: V) {
+
+    const Func = (Story: ReactElement) => {
+        const { control } = useForm({
+            defaultValues: {
+                [key]: defaultValue as any
+            }
+        })
+        return <Controller
+            control={control}
+            name={key}
+            render={({ field: { onChange, value, onBlur } }) => {
+                console.log(value);
+                return React.cloneElement(Story, { value, onChange, onBlur })
+                // <Story
+                //     value={value}
+                //     onChange={onChange}
+                //     onBlur={onBlur}
+                // />
+            }}
+        />
+    }
+
+    return Func;
+
+}

From 37117cf0f738fce4c9978bb27cb5a02007762c84 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 16 Aug 2022 12:15:45 +0300
Subject: [PATCH 03/53] feat: added form state management

---
 .../pages/ExplorePage/Header/Header.tsx       |   9 +-
 .../Components/ExtrasTab/ExtrasTab.tsx        | 181 +++-----
 .../FormContainer/FormContainer.tsx           |  87 +++-
 .../ProjectDetailsTab/ProjectDetailsTab.tsx   | 438 +++++++-----------
 .../SaveChangesCard/SaveChangesCard.tsx       | 105 +++++
 .../TeamMembersInput/TeamMembersInput.tsx     |   9 +-
 .../Components/TeamTab/TeamTab.tsx            | 165 ++-----
 .../pages/ListProjectPage/ListProjectPage.tsx |  99 ++--
 src/services/notifications.service.ts         |  13 +-
 src/styles/shared.scss                        |   5 +
 src/utils/routing/routes.ts                   |   7 +
 11 files changed, 550 insertions(+), 568 deletions(-)
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx

diff --git a/src/features/Projects/pages/ExplorePage/Header/Header.tsx b/src/features/Projects/pages/ExplorePage/Header/Header.tsx
index 0c2891c..12654a0 100644
--- a/src/features/Projects/pages/ExplorePage/Header/Header.tsx
+++ b/src/features/Projects/pages/ExplorePage/Header/Header.tsx
@@ -5,6 +5,7 @@ import { MEDIA_QUERIES } from "src/utils/theme/media_queries";
 import CustomDot from "./CustomDot/CustomDot";
 import useEmblaCarousel from 'embla-carousel-react'
 import { useCallback, useEffect, useState } from "react";
+import { createRoute } from "src/utils/routing";
 
 const headerLinks = [
   {
@@ -12,7 +13,8 @@ const headerLinks = [
     img: Assets.Images_ExploreHeader1,
     link: {
       content: "Submit project",
-      url: "https://form.jotform.com/220301236112030",
+      url: createRoute({ type: "edit-project" }),
+      newTab: false,
     },
   },
   {
@@ -25,6 +27,7 @@ const headerLinks = [
     link: {
       content: "Register Now",
       url: "https://bolt.fun/hackathons/shock-the-web-2/",
+      newTab: true,
     },
   },
 ];
@@ -72,7 +75,7 @@ export default function Header() {
               {headerLinks[0].title}
             </div>
 
-            <Button href={headerLinks[0].link.url} newTab color="white" className="mt-24">
+            <Button href={headerLinks[0].link.url} newTab={headerLinks[0].link.newTab} color="white" className="mt-24">
               {headerLinks[0].link.content}
             </Button>
           </div>
@@ -86,7 +89,7 @@ export default function Header() {
             <div className="max-w-[90%]">
               {headerLinks[1].title}
             </div>
-            <Button color="white" href={headerLinks[1].link.url} newTab className="mt-24">
+            <Button color="white" href={headerLinks[1].link.url} newTab={headerLinks[1].link.newTab} className="mt-24">
               {headerLinks[1].link.content}
             </Button>
           </div>
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ExtrasTab/ExtrasTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ExtrasTab/ExtrasTab.tsx
index 7ae502d..178ac90 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/ExtrasTab/ExtrasTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/ExtrasTab/ExtrasTab.tsx
@@ -1,143 +1,70 @@
-import { Controller, NestedValue, Resolver, SubmitHandler, useForm } from "react-hook-form"
-import { NotificationsService } from "src/services/notifications.service";
-import * as yup from "yup";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { usePrompt } from "src/utils/hooks";
-import { toast } from "react-toastify";
+import { Controller, useFormContext } from "react-hook-form"
 import Card from "src/Components/Card/Card";
-import TeamMembersInput from "../TeamMembersInput/TeamMembersInput";
-import { Team_Member_Role } from "src/graphql";
-import RecruitRolesInput from "../RecruitRolesInput/RecruitRolesInput";
 import TournamentsInput from "../TournamentsInput/TournamentsInput";
+import { IListProjectForm } from "../FormContainer/FormContainer";
 
+interface Props { }
 
-export interface IExtrasForm {
-    launch_status: "wip" | "launched"
-    tournaments: NestedValue<string[]>
-}
+export default function ExtrasTab(props: Props) {
 
-interface Props {
-    data?: IExtrasForm,
-}
-
-// type IFormInputs = Props['data'];
-
-const schema: yup.SchemaOf<IExtrasForm> = yup.object({
-    launch_status: yup.mixed().oneOf(['wip', 'launched']).required(),
-    tournaments: yup.array().required().default([])
-}).required();
-
-export default function ExtrasTab({ data }: Props) {
-
-    const { register, formState: { errors, isDirty, }, handleSubmit, reset, control } = useForm<IExtrasForm>({
-        defaultValues: {
-            ...data,
-            launch_status: 'wip',
-            tournaments: []
-        },
-        resolver: yupResolver(schema) as Resolver<IExtrasForm>,
-        // mode: 'onBlur',
-    });
+    const { register, formState: { errors, isDirty, }, control } = useFormContext<IListProjectForm>();
 
 
 
-    usePrompt('You may have some unsaved changes. You still want to leave?', isDirty)
+    // usePrompt('You may have some unsaved changes. You still want to leave?', isDirty)
 
 
-    const onSubmit: SubmitHandler<IExtrasForm> = data => {
-
-        const toastId = toast.loading("Saving changes...", NotificationsService.defaultOptions)
-        const mutate: any = null;
-        mutate({
-            // variables: {
-            //     data: {
-            //         // name: data.name,
-            //         // avatar: data.avatar,
-            //         // jobTitle: data.jobTitle,
-            //         // bio: data.bio,
-            //         // email: data.email,
-            //         // github: data.github,
-            //         // linkedin: data.linkedin,
-            //         // lightning_address: data.lightning_address,
-            //         // location: data.location,
-            //         // twitter: data.twitter,
-            //         // website: data.website,
-            //     }
-            // },
-            onCompleted: () => {
-                reset(data);
-                toast.update(toastId, { render: "Saved changes successfully", type: "success", ...NotificationsService.defaultOptions, isLoading: false });
-            }
-        })
-            .catch(() => {
-                toast.update(toastId, { render: "A network error happened", type: "error", ...NotificationsService.defaultOptions, isLoading: false });
-                // mutationStatus.reset()
-            })
-    };
-
     return (
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
-            <div className="md:col-span-2 flex flex-col gap-24">
-
-
-                <Card>
-                    <h2 className="text-body2 font-bolder">🚀  Launch status</h2>
-                    <p className="text-body4 font-light text-gray-600 mt-8">Has this product been launched already, or is it still a work in progress?</p>
-                    <div className="mt-24 flex flex-col gap-24">
-                        <div className="flex gap-16">
-                            <input
-                                {...register("launch_status")}
-                                type="radio"
-                                name="launch_status"
-                                value='wip'
-                            />
-                            <div>
-                                <p className="text-body4 font-medium">WIP 🛠️</p>
-                                <p className="text-body5 text-gray-500 mt-4">It’s still a Work In Progress.</p>
-                            </div>
-                        </div>
-                        <div className="flex gap-16">
-                            <input
-                                {...register("launch_status")}
-                                type="radio"
-                                name="launch_status"
-                                value='launched'
-                            />
-                            <div>
-                                <p className="text-body4 font-medium">Launched 🚀</p>
-                                <p className="text-body5 text-gray-500 mt-4">The product is ready for launch, or has been launched already.</p>
-                            </div>
-                        </div>
-                        {errors.launch_status && <p className='input-error'>{errors.launch_status?.message}</p>}
-                    </div>
-                </Card>
-
-                <Card>
-                    <h2 className="text-body2 font-bolder">⚔️️  Tournaments</h2>
-                    <p className="text-body4 font-light text-gray-600 mt-8">Is your application part of a tournament? If so, select the tournament(s) that apply and it will automatically be listed for you.</p>
-                    <div className="mt-24">
-                        <Controller
-                            control={control}
-                            name="tournaments"
-                            render={({ field: { onChange, value } }) => (
-                                <TournamentsInput
-                                    value={value}
-                                    onChange={onChange}
-                                />
-                            )}
+        <div className="flex flex-col gap-24">
+            <Card>
+                <h2 className="text-body2 font-bolder">🚀  Launch status</h2>
+                <p className="text-body4 font-light text-gray-600 mt-8">Has this product been launched already, or is it still a work in progress?</p>
+                <div className="mt-24 flex flex-col gap-24">
+                    <div className="flex gap-16">
+                        <input
+                            {...register("launch_status")}
+                            type="radio"
+                            name="launch_status"
+                            value='wip'
                         />
-                        {errors.tournaments && <p className='input-error'>{errors.tournaments?.message}</p>}
+                        <div>
+                            <p className="text-body4 font-medium">WIP 🛠️</p>
+                            <p className="text-body5 text-gray-500 mt-4">It’s still a Work In Progress.</p>
+                        </div>
                     </div>
-                </Card>
-            </div>
-            <div className="self-start sticky-side-element">
-                {/* <SaveChangesCard
-                    isLoading={mutationStatus.loading}
-                    isDirty={isDirty}
-                    onSubmit={handleSubmit(onSubmit)}
-                    onCancel={() => reset()}
-                /> */}
-            </div>
+                    <div className="flex gap-16">
+                        <input
+                            {...register("launch_status")}
+                            type="radio"
+                            name="launch_status"
+                            value='launched'
+                        />
+                        <div>
+                            <p className="text-body4 font-medium">Launched 🚀</p>
+                            <p className="text-body5 text-gray-500 mt-4">The product is ready for launch, or has been launched already.</p>
+                        </div>
+                    </div>
+                    {errors.launch_status && <p className='input-error'>{errors.launch_status?.message}</p>}
+                </div>
+            </Card>
+
+            <Card>
+                <h2 className="text-body2 font-bolder">⚔️️  Tournaments</h2>
+                <p className="text-body4 font-light text-gray-600 mt-8">Is your application part of a tournament? If so, select the tournament(s) that apply and it will automatically be listed for you.</p>
+                <div className="mt-24">
+                    <Controller
+                        control={control}
+                        name="tournaments"
+                        render={({ field: { onChange, value } }) => (
+                            <TournamentsInput
+                                value={value}
+                                onChange={onChange}
+                            />
+                        )}
+                    />
+                    {errors.tournaments && <p className='input-error'>{errors.tournaments?.message}</p>}
+                </div>
+            </Card>
         </div>
     )
 }
diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
index 11c7d5d..7630da3 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -1,12 +1,91 @@
+import { FormProvider, NestedValue, Resolver, SubmitHandler, useForm } from "react-hook-form"
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Team_Member_Role } from "src/graphql";
+import { PropsWithChildren } from "react";
+import { useSearchParams } from "react-router-dom";
+
 
 interface Props {
 
 }
 
-export default function FormContainer() {
-    return (
-        <div>
 
-        </div>
+export interface IListProjectForm {
+    id?: number
+    name: string
+    website: string
+    tagline: string
+    description: string
+    thumbnail_image?: string
+    cover_image?: string
+    twitter?: string
+    discord?: string
+    github?: string
+    category_id: number
+    capabilities: NestedValue<string[]>
+    screenshots: NestedValue<string[]>
+
+    members: NestedValue<{
+        id: number,
+        name: string,
+        jobTitle: string | null,
+        avatar: string,
+        role: Team_Member_Role,
+    }[]>
+    recruit_roles: NestedValue<string[]>
+
+
+    launch_status: "wip" | "launched"
+    tournaments: NestedValue<string[]>
+}
+
+const schema: yup.SchemaOf<IListProjectForm> = yup.object({
+    id: yup.number().optional(),
+    name: yup.string().trim().required().min(2),
+    website: yup.string().trim().url().required(),
+    tagline: yup.string().trim().required().min(10),
+    description: yup.string().trim().required().min(50, 'Write at least 10 words descriping your project'),
+    thumbnail_image: yup.string().url().ensure(),
+    cover_image: yup.string().url().ensure(),
+    twitter: yup.string().url().ensure(),
+    discord: yup.string().url().ensure(),
+    github: yup.string().url().ensure(),
+    category_id: yup.number().required("Please choose a category"),
+    capabilities: yup.array().of(yup.string().required()).default([]),
+    screenshots: yup.array().of(yup.string().required()).default([]),
+    members: yup.array().of(yup.object() as any).default([]),
+    recruit_roles: yup.array().default([]),
+    launch_status: yup.mixed().oneOf(['wip', 'launched']).default('wip'),
+    tournaments: yup.array().default([])
+}).required();
+
+export default function FormContainer(props: PropsWithChildren<Props>) {
+
+    const [params] = useSearchParams();
+
+    const methods = useForm<IListProjectForm>({
+        defaultValues: {
+            id: !!params.get('id') ? Number(params.get('id')) : undefined,
+            capabilities: [],
+            screenshots: [],
+            members: [],
+            recruit_roles: [],
+            launch_status: 'wip',
+            tournaments: [],
+        },
+        resolver: yupResolver(schema) as Resolver<IListProjectForm>,
+    });
+
+
+    const onSubmit: SubmitHandler<IListProjectForm> = data => console.log(data);
+
+
+    return (
+        <FormProvider {...methods} >
+            <form onSubmit={methods.handleSubmit(onSubmit)}>
+                {props.children}
+            </form>
+        </FormProvider>
     )
 }
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
index 0a7bb04..6fe02f0 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
@@ -1,290 +1,188 @@
-import { Controller, NestedValue, Resolver, SubmitHandler, useForm } from "react-hook-form"
-import Button from "src/Components/Button/Button";
-import { Project, User, useUpdateProfileAboutMutation } from "src/graphql";
-import { NotificationsService } from "src/services/notifications.service";
-import * as yup from "yup";
-import { yupResolver } from "@hookform/resolvers/yup";
-import Avatar from "src/features/Profiles/Components/Avatar/Avatar";
-import { usePrompt } from "src/utils/hooks";
-import { toast } from "react-toastify";
+import { Controller, useFormContext } from "react-hook-form"
 import Card from "src/Components/Card/Card";
-import { FaDiscord, FaTwitter } from "react-icons/fa";
+import { FaDiscord } from "react-icons/fa";
 import { FiCamera, FiGithub, FiTwitter } from "react-icons/fi";
 import CategoriesInput from "../CategoriesInput/CategoriesInput";
 import CapabilitiesInput from "../CapabilitiesInput/CapabilitiesInput";
+import { IListProjectForm } from "../FormContainer/FormContainer";
+
+interface Props { }
+
+export default function ProjectDetailsTab(props: Props) {
+
+    const { register, formState: { errors, }, control } = useFormContext<IListProjectForm>();
 
 
-interface IProjectDetails {
-    name: string
-    website: string
-    tagline: string
-    description: string
-    thumbnail_image: string
-    cover_image: string
-
-    twitter: string
-    discord: string
-    github: string
-
-    category_id: number
-
-    capabilities: NestedValue<string[]>
-
-    screenshots: NestedValue<string[]>
-
-}
-
-interface Props {
-    data?: IProjectDetails,
-    onClose?: () => void;
-}
-
-// type IFormInputs = Props['data'];
-
-const schema: yup.SchemaOf<IProjectDetails> = yup.object({
-    name: yup.string().trim().required().min(2),
-    website: yup.string().trim().url().required(),
-    tagline: yup.string().trim().required().min(10),
-    description: yup.string().trim().required().min(50, 'Write at least 10 words descriping your project'),
-    thumbnail_image: yup.string().url().required(),
-    cover_image: yup.string().url().required(),
-
-    twitter: yup.string().ensure(),
-    discord: yup.string().ensure(),
-    github: yup.string().ensure(),
-
-    category_id: yup.number().required(),
-
-    capabilities: yup.array().of(yup.string().required()),
-
-    screenshots: yup.array().of(yup.string().required()),
-}).required();
-
-export default function ProjectDetailsTab({ data, onClose }: Props) {
-
-    const { register, formState: { errors, isDirty, }, handleSubmit, reset, control } = useForm<IProjectDetails>({
-        defaultValues: {
-            ...data,
-            capabilities: data?.capabilities ?? []
-        },
-        resolver: yupResolver(schema) as Resolver<IProjectDetails>,
-        // mode: 'onBlur',
-    });
-
-    const [mutate, mutationStatus] = useUpdateProfileAboutMutation();
+    // usePrompt('You may have some unsaved changes. You still want to leave?', isDirty)
 
 
 
-    usePrompt('You may have some unsaved changes. You still want to leave?', isDirty)
-
-
-    const onSubmit: SubmitHandler<IProjectDetails> = data => {
-
-        const toastId = toast.loading("Saving changes...", NotificationsService.defaultOptions)
-
-        mutate({
-            // variables: {
-            //     data: {
-            //         // name: data.name,
-            //         // avatar: data.avatar,
-            //         // jobTitle: data.jobTitle,
-            //         // bio: data.bio,
-            //         // email: data.email,
-            //         // github: data.github,
-            //         // linkedin: data.linkedin,
-            //         // lightning_address: data.lightning_address,
-            //         // location: data.location,
-            //         // twitter: data.twitter,
-            //         // website: data.website,
-            //     }
-            // },
-            onCompleted: () => {
-                reset(data);
-                toast.update(toastId, { render: "Saved changes successfully", type: "success", ...NotificationsService.defaultOptions, isLoading: false });
-            }
-        })
-            .catch(() => {
-                toast.update(toastId, { render: "A network error happened", type: "error", ...NotificationsService.defaultOptions, isLoading: false });
-                mutationStatus.reset()
-            })
-    };
-
     return (
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
-            <div className="md:col-span-2 flex flex-col gap-24">
-                <Card className="" defaultPadding={false}>
-                    <div className="bg-gray-600 relative h-[160px] rounded-t-16">
-                        <div className="absolute left-24 bottom-0 translate-y-1/2">
-                            {/* <Avatar src={data.avatar} width={120} /> */}
-                            <div
-                                className="rounded-full w-[120px] aspect-square border-2 border-gray-200 bg-white flex flex-col gap-8 items-center justify-center"
-                                role={'button'}
-                            >
-                                <FiCamera className="text-gray-400 text-h2" />
-                                <span className="text-gray-400 text-body6">Add image</span>
-                            </div>
+        <div className="md:col-span-2 flex flex-col gap-24">
+            <Card className="" defaultPadding={false}>
+                <div className="bg-gray-600 relative h-[160px] rounded-t-16">
+                    <div className="absolute left-24 bottom-0 translate-y-1/2">
+                        {/* <Avatar src={data.avatar} width={120} /> */}
+                        <div
+                            className="rounded-full w-[120px] aspect-square border-2 border-gray-200 bg-white flex flex-col gap-8 items-center justify-center"
+                            role={'button'}
+                        >
+                            <FiCamera className="text-gray-400 text-h2" />
+                            <span className="text-gray-400 text-body6">Add image</span>
                         </div>
                     </div>
-                    <div className="p-16 md:p-24 mt-64">
-                        <p className="text-body5 font-medium">
-                            Project name<sup className="text-red-500">*</sup>
-                        </p>
-                        <div className="input-wrapper mt-8 relative">
-                            <input
-                                autoFocus
-                                type='text'
-                                className="input-text"
-                                placeholder='e.g BOLT🔩FUN'
-                                {...register("name")}
-                            />
-                        </div>
-                        {errors.name && <p className="input-error">
-                            {errors.name.message}
-                        </p>}
-                        <p className="text-body5 mt-16 font-medium">
-                            Project link<sup className="text-red-500">*</sup>
-                        </p>
-                        <div className="input-wrapper mt-8 relative">
-                            <input
-
-                                type='text'
-                                className="input-text"
-                                placeholder='https://lightning.xyz'
-                                {...register("website")}
-                            />
-                        </div>
-                        {errors.website && <p className="input-error">
-                            {errors.website.message}
-                        </p>}
-                        <p className="text-body5 mt-16 font-medium">
-                            Tagline<sup className="text-red-500">*</sup>
-                        </p>
-                        <div className="input-wrapper mt-8 relative">
-                            <input
-
-                                type='text'
-                                className="input-text"
-                                placeholder='Your product’s one liner goes here...'
-                                {...register("tagline")}
-                            />
-                        </div>
-                        {errors.tagline && <p className="input-error">
-                            {errors.tagline.message}
-                        </p>}
-                        <p className="text-body5 mt-16 font-medium">
-                            Description<sup className="text-red-500">*</sup>
-                        </p>
-                        <div className="input-wrapper mt-8 relative">
-                            <textarea
-
-                                rows={3}
-                                className="input-text !p-20"
-                                placeholder='Provide a short description your product...'
-                                {...register("description")}
-                            />
-                        </div>
-                        {errors.description && <p className="input-error">
-                            {errors.description.message}
-                        </p>}
-
-                    </div>
-                </Card>
-                <Card className="">
-                    <h2 className="text-body2 font-bolder">🔗  Links</h2>
-                    <p className="text-body4 font-light text-gray-600 mt-8">Make sure that people can find your project online. </p>
-                    <div className="flex flex-col gap-8 mt-24">
-
-                        <div>
-                            <div className="input-wrapper mt-8 relative">
-                                <FiTwitter className="text-blue-400 h-full flex-shrink-0 w-42 pl-12 py-12 self-center" />
-                                <input
-                                    type='text'
-                                    className="input-text"
-                                    placeholder='https://twitter.com/'
-                                    {...register("twitter")}
-                                />
-                            </div>
-                            {errors.twitter && <p className="input-error">
-                                {errors.twitter.message}
-                            </p>}
-                        </div>
-
-                        <div>
-                            <div className="input-wrapper mt-8 relative">
-                                <FaDiscord className="text-violet-500 h-full flex-shrink-0 w-42 pl-12 py-12 self-center" />
-                                <input
-                                    type='text'
-                                    className="input-text"
-                                    placeholder='https://discord.com/'
-                                    {...register("discord")}
-                                />
-                            </div>
-                            {errors.discord && <p className="input-error">
-                                {errors.discord.message}
-                            </p>}
-                        </div>
-
-                        <div>
-                            <div className="input-wrapper mt-8 relative">
-                                <FiGithub className="text-gray-700 h-full flex-shrink-0 w-42 pl-12 py-12 self-center" />
-                                <input
-                                    type='text'
-                                    className="input-text"
-                                    placeholder='https://github.com/'
-                                    {...register("github")}
-                                />
-                            </div>
-                            {errors.github && <p className="input-error">
-                                {errors.github.message}
-                            </p>}
-                        </div>
-                    </div>
-                </Card>
-
-                <Card>
-                    <h2 className="text-body2 font-bolder">🌶️ Category</h2>
-                    <p className="text-body4 font-light text-gray-600 mt-8">Select one of the categories below.</p>
-                    <div className="mt-24">
-                        <Controller
-                            control={control}
-                            name="category_id"
-                            render={({ field: { onChange, value } }) => (
-                                <CategoriesInput
-                                    value={value}
-                                    onChange={onChange}
-                                />
-                            )}
+                </div>
+                <div className="p-16 md:p-24 mt-64">
+                    <p className="text-body5 font-medium">
+                        Project name<sup className="text-red-500">*</sup>
+                    </p>
+                    <div className="input-wrapper mt-8 relative">
+                        <input
+                            autoFocus
+                            type='text'
+                            className="input-text"
+                            placeholder='e.g BOLT🔩FUN'
+                            {...register("name")}
                         />
-                        {errors.category_id && <p className='input-error'>{errors.category_id?.message}</p>}
                     </div>
-                </Card>
+                    {errors.name && <p className="input-error">
+                        {errors.name.message}
+                    </p>}
+                    <p className="text-body5 mt-16 font-medium">
+                        Project link<sup className="text-red-500">*</sup>
+                    </p>
+                    <div className="input-wrapper mt-8 relative">
+                        <input
 
-                <Card>
-                    <h2 className="text-body2 font-bolder">🦾  Capabilities</h2>
-                    <p className="text-body4 font-light text-gray-600 mt-8">Let other makers know what lightning capabilities your applicaiton has.</p>
-                    <div className="mt-24">
-                        <Controller
-                            control={control}
-                            name="capabilities"
-                            render={({ field: { onChange, value } }) => (
-                                <CapabilitiesInput
-                                    value={value}
-                                    onChange={onChange}
-                                />
-                            )}
+                            type='text'
+                            className="input-text"
+                            placeholder='https://lightning.xyz'
+                            {...register("website")}
                         />
-                        {errors.capabilities && <p className='input-error'>{errors.capabilities?.message}</p>}
                     </div>
-                </Card>
-            </div>
-            <div className="self-start sticky-side-element">
-                {/* <SaveChangesCard
-                    isLoading={mutationStatus.loading}
-                    isDirty={isDirty}
-                    onSubmit={handleSubmit(onSubmit)}
-                    onCancel={() => reset()}
-                /> */}
-            </div>
+                    {errors.website && <p className="input-error">
+                        {errors.website.message}
+                    </p>}
+                    <p className="text-body5 mt-16 font-medium">
+                        Tagline<sup className="text-red-500">*</sup>
+                    </p>
+                    <div className="input-wrapper mt-8 relative">
+                        <input
+
+                            type='text'
+                            className="input-text"
+                            placeholder='Your product’s one liner goes here...'
+                            {...register("tagline")}
+                        />
+                    </div>
+                    {errors.tagline && <p className="input-error">
+                        {errors.tagline.message}
+                    </p>}
+                    <p className="text-body5 mt-16 font-medium">
+                        Description<sup className="text-red-500">*</sup>
+                    </p>
+                    <div className="input-wrapper mt-8 relative">
+                        <textarea
+
+                            rows={3}
+                            className="input-text !p-20"
+                            placeholder='Provide a short description your product...'
+                            {...register("description")}
+                        />
+                    </div>
+                    {errors.description && <p className="input-error">
+                        {errors.description.message}
+                    </p>}
+
+                </div>
+            </Card>
+            <Card className="">
+                <h2 className="text-body2 font-bolder">🔗  Links</h2>
+                <p className="text-body4 font-light text-gray-600 mt-8">Make sure that people can find your project online. </p>
+                <div className="flex flex-col gap-8 mt-24">
+
+                    <div>
+                        <div className="input-wrapper mt-8 relative">
+                            <FiTwitter className="text-blue-400 h-full flex-shrink-0 w-42 pl-12 py-12 self-center" />
+                            <input
+                                type='text'
+                                className="input-text"
+                                placeholder='https://twitter.com/'
+                                {...register("twitter")}
+                            />
+                        </div>
+                        {errors.twitter && <p className="input-error">
+                            {errors.twitter.message}
+                        </p>}
+                    </div>
+
+                    <div>
+                        <div className="input-wrapper mt-8 relative">
+                            <FaDiscord className="text-violet-500 h-full flex-shrink-0 w-42 pl-12 py-12 self-center" />
+                            <input
+                                type='text'
+                                className="input-text"
+                                placeholder='https://discord.com/'
+                                {...register("discord")}
+                            />
+                        </div>
+                        {errors.discord && <p className="input-error">
+                            {errors.discord.message}
+                        </p>}
+                    </div>
+
+                    <div>
+                        <div className="input-wrapper mt-8 relative">
+                            <FiGithub className="text-gray-700 h-full flex-shrink-0 w-42 pl-12 py-12 self-center" />
+                            <input
+                                type='text'
+                                className="input-text"
+                                placeholder='https://github.com/'
+                                {...register("github")}
+                            />
+                        </div>
+                        {errors.github && <p className="input-error">
+                            {errors.github.message}
+                        </p>}
+                    </div>
+                </div>
+            </Card>
+
+            <Card>
+                <h2 className="text-body2 font-bolder">🌶️ Category</h2>
+                <p className="text-body4 font-light text-gray-600 mt-8">Select one of the categories below.</p>
+                <div className="mt-24">
+                    <Controller
+                        control={control}
+                        name="category_id"
+                        render={({ field: { onChange, value } }) => (
+                            <CategoriesInput
+                                value={value}
+                                onChange={onChange}
+                            />
+                        )}
+                    />
+                    {errors.category_id && <p className='input-error'>{errors.category_id?.message}</p>}
+                </div>
+            </Card>
+
+            <Card>
+                <h2 className="text-body2 font-bolder">🦾  Capabilities</h2>
+                <p className="text-body4 font-light text-gray-600 mt-8">Let other makers know what lightning capabilities your applicaiton has.</p>
+                <div className="mt-24">
+                    <Controller
+                        control={control}
+                        name="capabilities"
+                        render={({ field: { onChange, value } }) => (
+                            <CapabilitiesInput
+                                value={value}
+                                onChange={onChange}
+                            />
+                        )}
+                    />
+                    {errors.capabilities && <p className='input-error'>{errors.capabilities?.message}</p>}
+                </div>
+            </Card>
         </div>
     )
 }
diff --git a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
new file mode 100644
index 0000000..1ea32fc
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
@@ -0,0 +1,105 @@
+import { useNavigate } from 'react-router-dom'
+import Button from 'src/Components/Button/Button'
+import Card from 'src/Components/Card/Card'
+import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'
+import { useFormContext } from "react-hook-form"
+import { IListProjectForm } from "../FormContainer/FormContainer";
+import { useMemo, useState } from 'react'
+import { tabs } from '../../ListProjectPage'
+import { NotificationsService } from 'src/services'
+
+interface Props {
+    currentTab: keyof typeof tabs
+}
+
+export default function SaveChangesCard(props: Props) {
+
+    const { handleSubmit, formState: { errors, isDirty, }, reset, getValues, watch } = useFormContext<IListProjectForm>();
+    const navigate = useNavigate();
+
+    const [isLoading, setIsLoading] = useState(false);
+    const isUpdating = useMemo(() => !!getValues('id'), [getValues]);
+
+
+    const [img, name, tagline] = watch(['thumbnail_image', 'name', 'tagline'])
+
+    const clickCancel = () => {
+        if (window.confirm('You might lose some unsaved changes. Are you sure you want to continue?'))
+            // props.onCancel?.() 
+            alert("Canceled")
+    }
+
+    const clickSubmit = handleSubmit<IListProjectForm>(data => {
+        NotificationsService.success("Submitted successfully")
+        console.log(data);
+    }, () => {
+        NotificationsService.error("Please fill all the required fields");
+        navigate(tabs['project-details'].path)
+    })
+
+
+
+    let ctaBtn = useMemo(() => {
+        if (isUpdating)
+            return <Button
+                color="primary"
+                fullWidth
+                onClick={clickSubmit}
+                disabled={!isDirty || isLoading}
+            >
+                Save Changes
+            </Button>
+        else if (props.currentTab === 'project-details')
+            return <Button
+                color="primary"
+                fullWidth
+                href={tabs.team.path}
+            >
+                Next step: {tabs.team.text}
+            </Button>
+        else if (props.currentTab === 'team')
+            return <Button
+                color="primary"
+                fullWidth
+                href={tabs.extras.path}
+            >
+                Next step: {tabs.extras.text}
+            </Button>
+        else
+            return <Button
+                color="primary"
+                fullWidth
+                onClick={clickSubmit}
+                disabled={!isDirty || isLoading}
+            >
+                List your product
+            </Button>
+    }, [clickSubmit, isDirty, isLoading, isUpdating, props.currentTab])
+
+
+    return (
+        <Card onlyMd className='flex flex-col gap-24'>
+            <div className='hidden md:flex gap-8'>
+                {img ?
+                    <Avatar width={48} src={img} /> :
+                    <div className="bg-gray-100 rounded-full w-48 h-48 shrink-0"></div>
+                }
+                <div className='overflow-hidden'>
+                    <p className={`text-body4 text-black font-medium overflow-hidden text-ellipsis`}>{name || "Product preview"}</p>
+                    {<p className={`text-body6 text-gray-600`}>{tagline || "Provide some more details."}</p>}
+                </div>
+            </div>
+            {/* <p className="hidden md:block text-body5">{trimText(profileQuery.data.profile.bio, 120)}</p> */}
+            <div className="flex flex-col gap-16">
+                {ctaBtn}
+                <Button
+                    color="gray"
+                    onClick={clickCancel}
+                    disabled={!isDirty || isLoading}
+                >
+                    Cancel
+                </Button>
+            </div>
+        </Card>
+    )
+}
diff --git a/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.tsx b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.tsx
index 97de7a1..da0f6aa 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.tsx
@@ -1,14 +1,13 @@
 import { Menu, MenuButton, MenuItem } from '@szhsin/react-menu';
-import React, { ComponentProps } from 'react'
+import { ComponentProps } from 'react'
 import { NestedValue } from 'react-hook-form'
-import { FaChevronDown, FaRegTrashAlt, FaTimes } from 'react-icons/fa';
-import IconButton from 'src/Components/IconButton/IconButton';
+import { FaChevronDown, FaRegTrashAlt, } from 'react-icons/fa';
 import UsersInput from 'src/Components/Inputs/UsersInput/UsersInput'
 import Avatar from 'src/features/Profiles/Components/Avatar/Avatar';
 import { Team_Member_Role } from 'src/graphql';
-import { ITeamForm } from '../TeamTab/TeamTab'
+import { IListProjectForm } from '../FormContainer/FormContainer';
 
-type Value = ITeamForm['members'] extends NestedValue<infer U> ? U : never;
+type Value = IListProjectForm['members'] extends NestedValue<infer U> ? U : never;
 
 type Props = {
     value: Value,
diff --git a/src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.tsx
index 9aeb6d5..d94a888 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.tsx
@@ -1,140 +1,63 @@
-import { Controller, NestedValue, Resolver, SubmitHandler, useForm } from "react-hook-form"
-import { NotificationsService } from "src/services/notifications.service";
-import * as yup from "yup";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { usePrompt } from "src/utils/hooks";
-import { toast } from "react-toastify";
+import { Controller, useFormContext } from "react-hook-form"
 import Card from "src/Components/Card/Card";
 import TeamMembersInput from "../TeamMembersInput/TeamMembersInput";
-import { Team_Member_Role } from "src/graphql";
 import RecruitRolesInput from "../RecruitRolesInput/RecruitRolesInput";
+import { IListProjectForm } from "../FormContainer/FormContainer";
 
 
-export interface ITeamForm {
-    members: NestedValue<{
-        id: number,
-        name: string,
-        jobTitle: string | null,
-        avatar: string,
-        role: Team_Member_Role,
-    }[]>
-
-    recruit_roles: NestedValue<string[]>
-}
-
 interface Props {
-    data?: ITeamForm,
 }
 
-// type IFormInputs = Props['data'];
+export default function TeamTab(props: Props) {
 
-const schema: yup.SchemaOf<ITeamForm> = yup.object({
-    members: yup.array().of(yup.object() as any).required().default([]),
-    recruit_roles: yup.array().required().default([])
-}).required();
-
-export default function TeamTab({ data }: Props) {
-
-    const { formState: { errors, isDirty, }, handleSubmit, reset, control } = useForm<ITeamForm>({
-        defaultValues: {
-            ...data,
-            members: [],
-            recruit_roles: [],
-        },
-        resolver: yupResolver(schema) as Resolver<ITeamForm>,
-        // mode: 'onBlur',
-    });
+    const { formState: { errors, }, control } = useFormContext<IListProjectForm>();
 
 
 
-    usePrompt('You may have some unsaved changes. You still want to leave?', isDirty)
-
-
-    const onSubmit: SubmitHandler<ITeamForm> = data => {
-
-        const toastId = toast.loading("Saving changes...", NotificationsService.defaultOptions)
-        const mutate: any = null;
-        mutate({
-            // variables: {
-            //     data: {
-            //         // name: data.name,
-            //         // avatar: data.avatar,
-            //         // jobTitle: data.jobTitle,
-            //         // bio: data.bio,
-            //         // email: data.email,
-            //         // github: data.github,
-            //         // linkedin: data.linkedin,
-            //         // lightning_address: data.lightning_address,
-            //         // location: data.location,
-            //         // twitter: data.twitter,
-            //         // website: data.website,
-            //     }
-            // },
-            onCompleted: () => {
-                reset(data);
-                toast.update(toastId, { render: "Saved changes successfully", type: "success", ...NotificationsService.defaultOptions, isLoading: false });
-            }
-        })
-            .catch(() => {
-                toast.update(toastId, { render: "A network error happened", type: "error", ...NotificationsService.defaultOptions, isLoading: false });
-                // mutationStatus.reset()
-            })
-    };
-
     return (
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
-            <div className="md:col-span-2 flex flex-col gap-24">
+        <div className="flex flex-col gap-24">
 
 
-                <Card>
-                    <h2 className="text-body2 font-bolder">⚡️  Team</h2>
-                    <p className="text-body4 font-light text-gray-600 mt-8">Let us know who is on this product’s team.</p>
-                    <div className="mt-24">
-                        <Controller
-                            control={control}
-                            name="members"
-                            render={({ field: { onChange, value } }) => (
-                                <TeamMembersInput
-                                    value={value}
-                                    onChange={onChange}
-                                />
-                            )}
-                        />
-                        {errors.members && <p className='input-error'>{errors.members?.message}</p>}
-                    </div>
-                    <div className="bg-gray-50 p-16 rounded-12 border border-gray-200 mt-24">
-                        <p className="text-body5">
-                            <span className="font-bold">💡 Onboard your team:</span> Make sure you onboard any other team members so they can help you manage this project.
-                        </p>
-                    </div>
-                </Card>
+            <Card >
+                <h2 className="text-body2 font-bolder">⚡️  Team</h2>
+                <p className="text-body4 font-light text-gray-600 mt-8">Let us know who is on this product’s team.</p>
+                <div className="mt-24">
+                    <Controller
+                        control={control}
+                        name="members"
+                        render={({ field: { onChange, value } }) => (
+                            <TeamMembersInput
+                                value={value}
+                                onChange={onChange}
+                            />
+                        )}
+                    />
+                    {errors.members && <p className='input-error'>{errors.members?.message}</p>}
+                </div>
+                <div className="bg-gray-50 p-16 rounded-12 border border-gray-200 mt-24">
+                    <p className="text-body5">
+                        <span className="font-bold">💡 Onboard your team:</span> Make sure you onboard any other team members so they can help you manage this project.
+                    </p>
+                </div>
+            </Card>
 
-                <Card>
-                    <h2 className="text-body2 font-bolder">💪️  Recruit</h2>
-                    <p className="text-body4 font-light text-gray-600 mt-8">Are you looking to recruit more makers to your project? Select the roles you’re looking for below and let makers discover your project at ⚔️ Tournaments.</p>
-                    <div className="mt-24">
-                        <Controller
-                            control={control}
-                            name="recruit_roles"
-                            render={({ field: { onChange, value } }) => (
-                                <RecruitRolesInput
-                                    value={value}
-                                    onChange={onChange}
-                                />
-                            )}
-                        />
-                        {errors.recruit_roles && <p className='input-error'>{errors.recruit_roles?.message}</p>}
-                    </div>
-                </Card>
-            </div>
-            <div className="self-start sticky-side-element">
-                {/* <SaveChangesCard
-                    isLoading={mutationStatus.loading}
-                    isDirty={isDirty}
-                    onSubmit={handleSubmit(onSubmit)}
-                    onCancel={() => reset()}
-                /> */}
-            </div>
+            <Card>
+                <h2 className="text-body2 font-bolder">💪️  Recruit</h2>
+                <p className="text-body4 font-light text-gray-600 mt-8">Are you looking to recruit more makers to your project? Select the roles you’re looking for below and let makers discover your project at ⚔️ Tournaments.</p>
+                <div className="mt-24">
+                    <Controller
+                        control={control}
+                        name="recruit_roles"
+                        render={({ field: { onChange, value } }) => (
+                            <RecruitRolesInput
+                                value={value}
+                                onChange={onChange}
+                            />
+                        )}
+                    />
+                    {errors.recruit_roles && <p className='input-error'>{errors.recruit_roles?.message}</p>}
+                </div>
+            </Card>
         </div>
     )
 }
diff --git a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
index bc53d70..4fce78e 100644
--- a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
+++ b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
@@ -1,4 +1,4 @@
-import { Navigate, NavLink, Route, Routes, useParams } from "react-router-dom";
+import { Navigate, NavLink, Route, Routes, useLocation, useParams } from "react-router-dom";
 import Slider from "src/Components/Slider/Slider";
 import { useAppSelector, useMediaQuery } from "src/utils/hooks";
 import { Helmet } from 'react-helmet'
@@ -7,33 +7,47 @@ import Card from "src/Components/Card/Card";
 import ProjectDetailsTab from "./Components/ProjectDetailsTab/ProjectDetailsTab";
 import TeamTab from "./Components/TeamTab/TeamTab";
 import ExtrasTab from "./Components/ExtrasTab/ExtrasTab";
+import FormContainer from "./Components/FormContainer/FormContainer";
+import { useMemo } from "react";
+import SaveChangesCard from "./Components/SaveChangesCard/SaveChangesCard";
 
 
-const links = [
-    {
+export const tabs = {
+    'project-details': {
         text: "🚀️  Project details",
         path: 'project-details',
     },
-    {
+    'team': {
         text: "⚡️  Team",
         path: 'team',
     },
-    {
+    'extras': {
         text: "💎  Extras",
         path: 'extras',
     }
-]
+} as const;
 
+const links = [tabs['project-details'], tabs['team'], tabs['extras']];
 
+type TabsKeys = keyof typeof tabs;
+
+const getCurrentTab = (locattion: string) => {
+    for (const key in tabs) {
+        const tab = tabs[key as TabsKeys];
+        if (locattion.includes(tab.path))
+            return key as TabsKeys;
+    }
+    return null;
+}
 
 export default function ListProjectPage() {
 
-    const { id } = useParams()
-
-    const isUpdating = !!id;
-
     const isMediumScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
 
+    const location = useLocation();
+    const currentTab = useMemo(() => getCurrentTab(location.pathname), [location.pathname])
+
+
 
 
 
@@ -50,8 +64,8 @@ export default function ListProjectPage() {
                 <meta property="og:title" content='List a project' />
             </Helmet>
             <div className="page-container grid grid-cols-1 md:grid-cols-4 gap-24">
-                <aside>
-                    {isMediumScreen ?
+                {isMediumScreen ?
+                    <aside >
                         <Card className="sticky-side-element">
                             <p className="text-body2 font-bolder text-black mb-16">List a project</p>
                             <ul className=' flex flex-col gap-8'>
@@ -69,33 +83,44 @@ export default function ListProjectPage() {
                                     </li>)}
                             </ul>
                         </Card>
-                        :
-                        <div className="border-b-2 border-gray-200">
-                            <Slider>
-                                {links.map((link, idx) =>
-                                    <NavLink
-                                        to={link.path}
-                                        key={idx}
-                                        className={`flex items-start cursor-pointer font-bold py-12
+                    </aside>
+                    :
+                    <aside
+                        className="border-b-2 border-gray-200 bg-white z-10 w-full sticky-top-element"
+                    >
+                        <Slider>
+                            {links.map((link, idx) =>
+                                <NavLink
+                                    to={link.path}
+                                    key={idx}
+                                    className={`flex items-start cursor-pointer font-bold py-12
                                                 active:scale-95 transition-transform`}
-                                        style={({ isActive }) => ({
-                                            boxShadow: isActive ? '0px 2px var(--primary)' : 'none'
-                                        })}
-                                    >
-                                        {link.text}
-                                    </NavLink>
-                                )}
-                            </Slider>
-                        </div>
-                    }
-                </aside>
+                                    style={({ isActive }) => ({
+                                        boxShadow: isActive ? '0px 2px var(--primary)' : 'none'
+                                    })}
+                                >
+                                    {link.text}
+                                </NavLink>
+                            )}
+                        </Slider>
+                    </aside>
+                }
                 <main className="md:col-span-3">
-                    <Routes>
-                        <Route index element={<Navigate to={links[0].path} />} />
-                        <Route path={links[0].path} element={<ProjectDetailsTab />} />
-                        <Route path={links[1].path} element={<TeamTab />} />
-                        <Route path={links[2].path} element={<ExtrasTab />} />
-                    </Routes>
+                    <FormContainer>
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
+                            <div className="md:col-span-2">
+                                <Routes>
+                                    <Route index element={<Navigate to={tabs['project-details'].path} />} />
+                                    <Route path={tabs['project-details'].path} element={<ProjectDetailsTab />} />
+                                    <Route path={tabs['team'].path} element={<TeamTab />} />
+                                    <Route path={tabs['extras'].path} element={<ExtrasTab />} />
+                                </Routes>
+                            </div>
+                            <div className="self-start sticky-side-element">
+                                {currentTab && <SaveChangesCard currentTab={currentTab} />}
+                            </div>
+                        </div>
+                    </FormContainer>
                 </main>
             </div>
         </>
diff --git a/src/services/notifications.service.ts b/src/services/notifications.service.ts
index 4b54ead..af7b7b9 100644
--- a/src/services/notifications.service.ts
+++ b/src/services/notifications.service.ts
@@ -25,7 +25,8 @@ export class NotificationsService {
         toast.success(msg, {
             onClose: options?.onComplete,
             autoClose: options?.autoClose ?? 2500,
-            icon: "✅"
+            icon: "✅",
+            ...options,
         })
     }
 
@@ -33,6 +34,15 @@ export class NotificationsService {
         toast.info(msg, {
             onClose: options?.onComplete,
             autoClose: options?.autoClose ?? 2500,
+            ...options,
+        })
+    }
+
+    static warn(msg: string, options?: AlertOptions) {
+        toast.warn(msg, {
+            onClose: options?.onComplete,
+            autoClose: options?.autoClose ?? 2500,
+            ...options,
         })
     }
 
@@ -41,6 +51,7 @@ export class NotificationsService {
         toast.error(msg, {
             onClose: options?.onComplete,
             autoClose: options?.autoClose ?? 2500,
+            ...options,
         })
     }
 
diff --git a/src/styles/shared.scss b/src/styles/shared.scss
index 6441768..6a03db4 100644
--- a/src/styles/shared.scss
+++ b/src/styles/shared.scss
@@ -19,3 +19,8 @@ button[disabled] {
   top: calc(var(--navHeight) + 16px);
   max-height: calc(100vh - var(--navHeight) - 16px);
 }
+
+.sticky-top-element {
+  position: sticky;
+  top: calc(var(--navHeight));
+}
diff --git a/src/utils/routing/routes.ts b/src/utils/routing/routes.ts
index a8b64fb..2f60a0b 100644
--- a/src/utils/routing/routes.ts
+++ b/src/utils/routing/routes.ts
@@ -31,6 +31,10 @@ type RouteOptions =
         id: string | number,
         username?: string,
     }
+    | {
+        type: "edit-project",
+        id?: number,
+    }
 
 export function createRoute(options: RouteOptions) {
 
@@ -57,6 +61,9 @@ export function createRoute(options: RouteOptions) {
         return `/profile/${options.id}`
             + (options.username ? `/${toSlug(options.username)}` : "");
 
+    if (options.type === 'edit-project')
+        return `/projects/list-project` + (options.id ? `?id=${options.id}` : '')
+
     return ""
 }
 

From 86acaa5ee5a7d51fa04e7ec9221636a92f0e6482 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 16 Aug 2022 12:27:45 +0300
Subject: [PATCH 04/53] update: reset form on cancel btn

---
 .../Components/SaveChangesCard/SaveChangesCard.tsx         | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
index 1ea32fc..a423c85 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
@@ -25,12 +25,11 @@ export default function SaveChangesCard(props: Props) {
 
     const clickCancel = () => {
         if (window.confirm('You might lose some unsaved changes. Are you sure you want to continue?'))
-            // props.onCancel?.() 
-            alert("Canceled")
+            reset();
     }
 
     const clickSubmit = handleSubmit<IListProjectForm>(data => {
-        NotificationsService.success("Submitted successfully")
+        NotificationsService.success("Product listed successfully")
         console.log(data);
     }, () => {
         NotificationsService.error("Please fill all the required fields");
@@ -82,7 +81,7 @@ export default function SaveChangesCard(props: Props) {
             <div className='hidden md:flex gap-8'>
                 {img ?
                     <Avatar width={48} src={img} /> :
-                    <div className="bg-gray-100 rounded-full w-48 h-48 shrink-0"></div>
+                    <div className="bg-gray-50 border border-gray-200 rounded-full w-48 h-48 shrink-0"></div>
                 }
                 <div className='overflow-hidden'>
                     <p className={`text-body4 text-black font-medium overflow-hidden text-ellipsis`}>{name || "Product preview"}</p>

From 2e88178cc41eff497d1c564948a84b671f7be898 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 16 Aug 2022 13:22:48 +0300
Subject: [PATCH 05/53] feat: added "Project Listed" modal

---
 .../ProjectDetailsTab.stories.tsx             | 26 +++++
 .../ProjectListedModal/ProjectListedModal.tsx | 96 +++++++++++++++++++
 .../Components/ProjectListedModal/index.ts    |  4 +
 .../SaveChangesCard/SaveChangesCard.tsx       | 19 +++-
 src/redux/features/modals.slice.ts            |  3 +-
 src/styles/index.scss                         |  2 +-
 src/styles/portals.scss                       |  6 ++
 src/styles/ui_state.scss                      |  7 ++
 src/utils/routing/routes.ts                   |  8 ++
 9 files changed, 168 insertions(+), 3 deletions(-)
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/ProjectDetailsTab.stories.tsx
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/ProjectListedModal.tsx
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/index.ts
 create mode 100644 src/styles/portals.scss

diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/ProjectDetailsTab.stories.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/ProjectDetailsTab.stories.tsx
new file mode 100644
index 0000000..e3dbd67
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/ProjectDetailsTab.stories.tsx
@@ -0,0 +1,26 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ProjectListedModal from './ProjectListedModal';
+
+export default {
+    title: 'Projects/List Project Page/Modals/Project Listed Modal',
+    component: ProjectListedModal,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof ProjectListedModal>;
+
+
+const Template: ComponentStory<typeof ProjectListedModal> = (args) => <ProjectListedModal {...args as any} ></ProjectListedModal>
+
+
+export const Default = Template.bind({});
+Default.args = {
+    project: {
+        id: 12,
+        name: "BOLT FUN",
+        img: "https://picsum.photos/id/870/150/150.jpg",
+        tagline: "An awesome directory for lightning projects and makers"
+    }
+}
+
+
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/ProjectListedModal.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/ProjectListedModal.tsx
new file mode 100644
index 0000000..0964b6c
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/ProjectListedModal.tsx
@@ -0,0 +1,96 @@
+import { motion } from 'framer-motion'
+import { useAppSelector, useMediaQuery, useWindowSize } from 'src/utils/hooks';
+import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
+import Button from 'src/Components/Button/Button'
+import { IoClose } from 'react-icons/io5';
+import NutImg from './nut.png'
+import AlbyImg from './alby.png'
+import Avatar from 'src/features/Profiles/Components/Avatar/Avatar';
+import { createRoute } from 'src/utils/routing';
+import Confetti from 'react-confetti'
+import { Portal } from 'src/Components/Portal/Portal';
+
+
+interface Props extends ModalCard {
+    project: {
+        id: number,
+        img: string,
+        name: string,
+        tagline: string,
+    }
+}
+
+export default function ProjectListedModal({ onClose, direction, project, ...props }: Props) {
+
+    const size = useWindowSize();
+
+    const isSmallScreen = useMediaQuery('screen and (max-width: 680px)')
+
+    return (
+        <motion.div
+            custom={direction}
+            variants={modalCardVariants}
+            initial='initial'
+            animate="animate"
+            exit='exit'
+            className="modal-card max-w-[442px] p-24 rounded-xl relative"
+        >
+            <Portal id='confetti'>
+                <Confetti recycle={false} width={size.width} height={size.height} numberOfPieces={isSmallScreen ? 200 : 400} />
+            </Portal>
+            <IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
+            <h2 className='text-h5 font-bold text-center'>Product listed!</h2>
+            <div className="flex flex-col gap-16 justify-center items-center my-24">
+                <Avatar src={project.img} width={80} />
+                <p className="text-body3 font-medium">{project.name}</p>
+            </div>
+            <p className="text-body4 font-light text-gray-600 mt-24 text-center">
+                Nice work, you successfully listed your product! Here are a few ideas to get your started.
+            </p>
+
+            <div className="flex flex-col gap-16 my-32">
+                <div className='!flex items-center gap-16'>
+                    <div className={`rounded-8 w-48 h-48 text-center py-12 shrink-0 bg-gray-100`}>
+                        ✍️
+                    </div>
+                    <div>
+                        <p className="font-medium self-center">
+                            Stories
+                        </p>
+                        <p className="text-body5 text-gray-500">
+                            Tell the maker community about your product.
+                        </p>
+                    </div>
+                </div>
+                <div className='!flex items-center gap-16'>
+                    <div className={`rounded-8 w-48 h-48 text-center py-12 shrink-0 bg-gray-100`}>
+                        ⚔️
+                    </div>
+                    <div>
+                        <p className="font-medium self-center">
+                            Start hacking
+                        </p>
+                        <p className="text-body5 text-gray-500">
+                            Kickstart your hacking journey with a tournament.
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <div className="flex flex-col gap-16" >
+                <Button
+                    color='primary'
+                    fullWidth
+                    newTab
+                    href={createRoute({ type: "edit-story" })}
+                >✍️ Write a story</Button>
+                <Button
+                    color='white'
+                    fullWidth
+                    newTab
+                    href='/tournaments'
+                >⚔️ Explore tournaments</Button>
+            </div>
+        </motion.div>
+    )
+}
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/index.ts b/src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/index.ts
new file mode 100644
index 0000000..c93533d
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal/index.ts
@@ -0,0 +1,4 @@
+
+import { lazyModal } from 'src/utils/helperFunctions';
+
+export const { LazyComponent: ProjectListedModal } = lazyModal(() => import('./ProjectListedModal'))
\ No newline at end of file
diff --git a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
index a423c85..0a05370 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
@@ -7,6 +7,8 @@ import { IListProjectForm } from "../FormContainer/FormContainer";
 import { useMemo, useState } from 'react'
 import { tabs } from '../../ListProjectPage'
 import { NotificationsService } from 'src/services'
+import { useAppDispatch } from 'src/utils/hooks';
+import { openModal } from 'src/redux/features/modals.slice';
 
 interface Props {
     currentTab: keyof typeof tabs
@@ -16,6 +18,7 @@ export default function SaveChangesCard(props: Props) {
 
     const { handleSubmit, formState: { errors, isDirty, }, reset, getValues, watch } = useFormContext<IListProjectForm>();
     const navigate = useNavigate();
+    const dispatch = useAppDispatch();
 
     const [isLoading, setIsLoading] = useState(false);
     const isUpdating = useMemo(() => !!getValues('id'), [getValues]);
@@ -29,7 +32,21 @@ export default function SaveChangesCard(props: Props) {
     }
 
     const clickSubmit = handleSubmit<IListProjectForm>(data => {
-        NotificationsService.success("Product listed successfully")
+
+        if (isUpdating)
+            NotificationsService.success("Saved changes successfully")
+        else {
+            dispatch(openModal({
+                Modal: "ProjectListedModal", props: {
+                    project: {
+                        id: data.id!,
+                        name: data.name,
+                        img: data.thumbnail_image || "https://picsum.photos/id/870/150/150.jpg",
+                        tagline: data.tagline,
+                    }
+                }
+            }))
+        }
         console.log(data);
     }, () => {
         NotificationsService.error("Please fill all the required fields");
diff --git a/src/redux/features/modals.slice.ts b/src/redux/features/modals.slice.ts
index c6c3a27..32506a3 100644
--- a/src/redux/features/modals.slice.ts
+++ b/src/redux/features/modals.slice.ts
@@ -1,6 +1,7 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { Login_ScanningWalletCard, Login_ExternalWalletCard, Login_NativeWalletCard, Login_SuccessCard } from "src/Components/Modals/Login";
 import { ProjectDetailsCard } from "src/features/Projects/pages/ProjectPage/ProjectDetailsCard";
+import { ProjectListedModal } from "src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal";
 import VoteCard from "src/features/Projects/pages/ProjectPage/VoteCard/VoteCard";
 import { InsertImageModal } from 'src/Components/Inputs/TextEditor/InsertImageModal'
 import { InsertVideoModal } from 'src/Components/Inputs/TextEditor/InsertVideoModal'
@@ -37,7 +38,7 @@ export const ALL_MODALS = {
   ConfirmModal,
   NoWeblnModal,
   LinkingAccountModal,
-
+  ProjectListedModal,
   // Text Editor Modals
   InsertImageModal,
   InsertVideoModal,
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96fdc2e..b24c8c2 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -3,7 +3,7 @@
 $screen-xs-min: 320px;
 
 @import "./tw.scss", "./shared.scss", "./vendors.scss", "./scrollbar.scss",
-  "./ui_state.scss";
+  "./ui_state.scss", "./portals.scss";
 @import "/src/styles/mixins/index.scss";
 
 html {
diff --git a/src/styles/portals.scss b/src/styles/portals.scss
new file mode 100644
index 0000000..d856f8c
--- /dev/null
+++ b/src/styles/portals.scss
@@ -0,0 +1,6 @@
+#confetti {
+  z-index: 3000;
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+}
diff --git a/src/styles/ui_state.scss b/src/styles/ui_state.scss
index 3f8527f..aa2e496 100644
--- a/src/styles/ui_state.scss
+++ b/src/styles/ui_state.scss
@@ -1,3 +1,10 @@
 :root {
   --navHeight: 0;
+
+  // Z Indexes
+  --baseZ: 10;
+  --navZ: var(--baseZ) + 1;
+  --popupZ: var(--navZ) + 1;
+  --modalZ: var(--popupZ) + 1;
+  --particlesZ: var(--modalZ) + 1;
 }
diff --git a/src/utils/routing/routes.ts b/src/utils/routing/routes.ts
index 2f60a0b..845aaeb 100644
--- a/src/utils/routing/routes.ts
+++ b/src/utils/routing/routes.ts
@@ -14,6 +14,10 @@ type RouteOptions =
         title?: string,
         username?: string,
     }
+    | {
+        type: "edit-story",
+        id?: number,
+    }
     | {
         type: "bounty",
         id: string | number,
@@ -47,6 +51,10 @@ export function createRoute(options: RouteOptions) {
         return `/blog/post/story/${options.id}`
             + (options.title ? `/${toSlug(options.title)}` : "");
 
+
+    if (options.type === "edit-story")
+        return `/blog/create-post` + (options.id ? `?id=${options.id}` : '')
+
     if (options.type === "bounty")
         return `/blog/post/bounty/${options.id}`
             + (options.title ? `/${toSlug(options.title)}` : "");

From 09fdf7beae6534aae520c9083a6d860bc76850f7 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 16 Aug 2022 13:23:24 +0300
Subject: [PATCH 06/53] update: remove css zVars

---
 src/styles/ui_state.scss | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/styles/ui_state.scss b/src/styles/ui_state.scss
index aa2e496..3f8527f 100644
--- a/src/styles/ui_state.scss
+++ b/src/styles/ui_state.scss
@@ -1,10 +1,3 @@
 :root {
   --navHeight: 0;
-
-  // Z Indexes
-  --baseZ: 10;
-  --navZ: var(--baseZ) + 1;
-  --popupZ: var(--navZ) + 1;
-  --modalZ: var(--popupZ) + 1;
-  --particlesZ: var(--modalZ) + 1;
 }

From fc80d3e76a3e918f9b6a6ee0263032179808ad25 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Wed, 17 Aug 2022 09:58:28 +0300
Subject: [PATCH 07/53] update: add required asterisk to category input

---
 .../Components/ProjectDetailsTab/ProjectDetailsTab.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
index 6fe02f0..3201b6c 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
@@ -149,7 +149,7 @@ export default function ProjectDetailsTab(props: Props) {
             </Card>
 
             <Card>
-                <h2 className="text-body2 font-bolder">🌶️ Category</h2>
+                <h2 className="text-body2 font-bolder">🌶️ Category<sup className="text-red-500">*</sup></h2>
                 <p className="text-body4 font-light text-gray-600 mt-8">Select one of the categories below.</p>
                 <div className="mt-24">
                     <Controller

From b8bf4d2334930c980c4f449a82813411c7ada80f Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 18 Aug 2022 10:52:04 +0300
Subject: [PATCH 08/53] fix: fixing QA issues

---
 .../Inputs/UsersInput/UsersInput.tsx          | 12 ++++-
 .../FormContainer/FormContainer.tsx           | 15 +++++-
 .../ProjectDetailsTab/ProjectDetailsTab.tsx   | 17 ++++---
 .../SaveChangesCard/SaveChangesCard.tsx       |  7 +--
 .../TeamMembersInput/TeamMembersInput.tsx     | 10 ++--
 .../pages/ListProjectPage/ListProjectPage.tsx | 51 ++++++++++++-------
 src/styles/tw.scss                            |  4 +-
 7 files changed, 79 insertions(+), 37 deletions(-)

diff --git a/src/Components/Inputs/UsersInput/UsersInput.tsx b/src/Components/Inputs/UsersInput/UsersInput.tsx
index 2dee41d..bb8024e 100644
--- a/src/Components/Inputs/UsersInput/UsersInput.tsx
+++ b/src/Components/Inputs/UsersInput/UsersInput.tsx
@@ -59,13 +59,23 @@ const colourStyles: StylesConfig = {
 
     control: (styles, state) => ({
         ...styles,
-        padding: '8px 16px',
+        padding: '5px 16px',
         borderRadius: 12,
         // border: 'none',
         // boxShadow: 'none',
 
         ":hover": {
             cursor: "pointer"
+        },
+        ":focus-within": {
+            '--tw-border-opacity': '1',
+            borderColor: 'rgb(179 160 255 / var(--tw-border-opacity))',
+            outlineColor: '#9E88FF',
+            '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
+            '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
+            boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+            '--tw-ring-color': 'rgb(179 160 255 / var(--tw-ring-opacity))',
+            '--tw-ring-opacity': '0.5'
         }
 
     }),
diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
index 7630da3..4d4b931 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -2,8 +2,9 @@ import { FormProvider, NestedValue, Resolver, SubmitHandler, useForm } from "rea
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Team_Member_Role } from "src/graphql";
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
+import { usePrompt } from "src/utils/hooks";
 
 
 interface Props {
@@ -67,6 +68,16 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
     const methods = useForm<IListProjectForm>({
         defaultValues: {
             id: !!params.get('id') ? Number(params.get('id')) : undefined,
+            name: "",
+            website: "",
+            tagline: "",
+            description: "",
+            thumbnail_image: "",
+            cover_image: "",
+            twitter: "",
+            discord: "",
+            github: "",
+            category_id: undefined,
             capabilities: [],
             screenshots: [],
             members: [],
@@ -78,9 +89,11 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
     });
 
 
+
     const onSubmit: SubmitHandler<IListProjectForm> = data => console.log(data);
 
 
+
     return (
         <FormProvider {...methods} >
             <form onSubmit={methods.handleSubmit(onSubmit)}>
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
index 3201b6c..9261e3d 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
@@ -10,7 +10,7 @@ interface Props { }
 
 export default function ProjectDetailsTab(props: Props) {
 
-    const { register, formState: { errors, }, control } = useFormContext<IListProjectForm>();
+    const { register, formState: { errors, }, control, getValues } = useFormContext<IListProjectForm>();
 
 
     // usePrompt('You may have some unsaved changes. You still want to leave?', isDirty)
@@ -20,7 +20,7 @@ export default function ProjectDetailsTab(props: Props) {
     return (
         <div className="md:col-span-2 flex flex-col gap-24">
             <Card className="" defaultPadding={false}>
-                <div className="bg-gray-600 relative h-[160px] rounded-t-16">
+                <div className="bg-gray-600 relative h-[160px] rounded-t-12 md:rounded-t-16">
                     <div className="absolute left-24 bottom-0 translate-y-1/2">
                         {/* <Avatar src={data.avatar} width={120} /> */}
                         <div
@@ -68,12 +68,13 @@ export default function ProjectDetailsTab(props: Props) {
                     </p>
                     <div className="input-wrapper mt-8 relative">
                         <input
-
+                            maxLength={32}
                             type='text'
                             className="input-text"
-                            placeholder='Your product’s one liner goes here...'
+                            placeholder='Your product’s one liner'
                             {...register("tagline")}
                         />
+                        <span className="h-full shrink-0 px-12 text-gray-400 text-body6 font-medium self-center">{getValues('tagline').length} / 32</span>
                     </div>
                     {errors.tagline && <p className="input-error">
                         {errors.tagline.message}
@@ -85,7 +86,7 @@ export default function ProjectDetailsTab(props: Props) {
                         <textarea
 
                             rows={3}
-                            className="input-text !p-20"
+                            className="input-text !px-16 !py-12"
                             placeholder='Provide a short description your product...'
                             {...register("description")}
                         />
@@ -103,7 +104,7 @@ export default function ProjectDetailsTab(props: Props) {
 
                     <div>
                         <div className="input-wrapper mt-8 relative">
-                            <FiTwitter className="text-blue-400 h-full flex-shrink-0 w-42 pl-12 py-12 self-center" />
+                            <FiTwitter className="text-blue-400 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />
                             <input
                                 type='text'
                                 className="input-text"
@@ -118,7 +119,7 @@ export default function ProjectDetailsTab(props: Props) {
 
                     <div>
                         <div className="input-wrapper mt-8 relative">
-                            <FaDiscord className="text-violet-500 h-full flex-shrink-0 w-42 pl-12 py-12 self-center" />
+                            <FaDiscord className="text-violet-500 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />
                             <input
                                 type='text'
                                 className="input-text"
@@ -133,7 +134,7 @@ export default function ProjectDetailsTab(props: Props) {
 
                     <div>
                         <div className="input-wrapper mt-8 relative">
-                            <FiGithub className="text-gray-700 h-full flex-shrink-0 w-42 pl-12 py-12 self-center" />
+                            <FiGithub className="text-gray-700 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />
                             <input
                                 type='text'
                                 className="input-text"
diff --git a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
index 0a05370..0b4a58b 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
@@ -94,17 +94,18 @@ export default function SaveChangesCard(props: Props) {
 
 
     return (
-        <Card onlyMd className='flex flex-col gap-24'>
-            <div className='hidden md:flex gap-8'>
+        <Card className='flex flex-col gap-24'>
+            <div className='flex gap-8 items-center'>
                 {img ?
                     <Avatar width={48} src={img} /> :
                     <div className="bg-gray-50 border border-gray-200 rounded-full w-48 h-48 shrink-0"></div>
                 }
                 <div className='overflow-hidden'>
                     <p className={`text-body4 text-black font-medium overflow-hidden text-ellipsis`}>{name || "Product preview"}</p>
-                    {<p className={`text-body6 text-gray-600`}>{tagline || "Provide some more details."}</p>}
+                    {<p className={`text-body6 text-gray-600 text-ellipsis overflow-hidden whitespace-nowrap`}>{tagline || "Provide some more details."}</p>}
                 </div>
             </div>
+            <div className="border-b border-gray-200"></div>
             {/* <p className="hidden md:block text-body5">{trimText(profileQuery.data.profile.bio, 120)}</p> */}
             <div className="flex flex-col gap-16">
                 {ctaBtn}
diff --git a/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.tsx b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.tsx
index da0f6aa..28f6f37 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.tsx
@@ -52,18 +52,18 @@ export default function TeamMembersInput({ value, onChange = () => { } }: Props)
                     {value.map(user => {
                         return <div
                             key={user.id}
-                            className="border-b py-16 last-of-type:border-b-0 flex flex-wrap gap-16 items-center">
+                            className="border-b py-16 last-of-type:border-b-0 flex gap-16 items-center">
 
                             <Avatar width={40} src={user.avatar} />
-                            <div className='grow'>
-                                <p className="font-medium self-center">
+                            <div className='grow overflow-hidden'>
+                                <p className="font-medium self-center overflow-hidden text-ellipsis whitespace-nowrap">
                                     {user.name}
                                 </p>
-                                <p className="text-body5 text-gray-500">
+                                <p className="text-body5 text-gray-500 overflow-hidden text-ellipsis whitespace-nowrap">
                                     {user.jobTitle}
                                 </p>
                             </div>
-                            <div className="ml-auto flex gap-16">
+                            <div className="ml-auto flex gap-12 md:gap-16 shrink-0">
                                 <Menu
                                     offsetY={12}
                                     align='end'
diff --git a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
index 4fce78e..79f3c82 100644
--- a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
+++ b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
@@ -1,6 +1,6 @@
 import { Navigate, NavLink, Route, Routes, useLocation, useParams } from "react-router-dom";
 import Slider from "src/Components/Slider/Slider";
-import { useAppSelector, useMediaQuery } from "src/utils/hooks";
+import { useAppSelector, useCarousel, useMediaQuery, usePrompt } from "src/utils/hooks";
 import { Helmet } from 'react-helmet'
 import { MEDIA_QUERIES } from "src/utils/theme";
 import Card from "src/Components/Card/Card";
@@ -46,9 +46,13 @@ export default function ListProjectPage() {
 
     const location = useLocation();
     const currentTab = useMemo(() => getCurrentTab(location.pathname), [location.pathname])
+    const { viewportRef, } = useCarousel({
+        align: 'start', slidesToScroll: 2,
+        containScroll: "trimSnaps",
+    })
 
 
-
+    usePrompt('You may have some unsaved changes. You still want to leave?', true)
 
 
     // if (!userId || profileQuery.loading)
@@ -72,6 +76,7 @@ export default function ListProjectPage() {
                                 {links.map((link, idx) =>
                                     <li key={idx}>
                                         <NavLink
+                                            replace
                                             to={link.path}
                                             className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
                                  active:scale-95 transition-transform
@@ -86,23 +91,35 @@ export default function ListProjectPage() {
                     </aside>
                     :
                     <aside
-                        className="border-b-2 border-gray-200 bg-white z-10 w-full sticky-top-element"
+                        className=" bg-white z-10 w-full sticky-top-element"
                     >
-                        <Slider>
-                            {links.map((link, idx) =>
-                                <NavLink
-                                    to={link.path}
-                                    key={idx}
-                                    className={`flex items-start cursor-pointer font-bold py-12
+                        <div className="relative group overflow-hidden">
+                            <div className="border-b-2 border-gray-200" ref={viewportRef}>
+                                <div className="select-none w-full flex gap-16">
+                                    {links.map((link, idx) =>
+                                        <NavLink
+                                            replace
+                                            to={link.path}
+                                            key={idx}
+                                            className={`flex min-w-max  items-start cursor-pointer font-bold py-12 px-8
                                                 active:scale-95 transition-transform`}
-                                    style={({ isActive }) => ({
-                                        boxShadow: isActive ? '0px 2px var(--primary)' : 'none'
-                                    })}
-                                >
-                                    {link.text}
-                                </NavLink>
-                            )}
-                        </Slider>
+                                            style={({ isActive }) => {
+                                                console.log(isActive);
+                                                return {
+                                                    ...(isActive && {
+                                                        borderBottom: '2px solid var(--primary)',
+                                                        marginBottom: -2
+                                                    }),
+                                                }
+
+                                            }}
+                                        >
+                                            {link.text}
+                                        </NavLink>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
                     </aside>
                 }
                 <main className="md:col-span-3">
diff --git a/src/styles/tw.scss b/src/styles/tw.scss
index eaa3544..a2bb859 100644
--- a/src/styles/tw.scss
+++ b/src/styles/tw.scss
@@ -16,11 +16,11 @@
   }
 
   .input-wrapper {
-    @apply relative w-full border border-gray-300 rounded-lg flex focus-within:outline-primary-400 focus-within:border-primary-300 focus-within:ring focus-within:ring-primary-200 focus-within:ring-opacity-50;
+    @apply relative w-full border border-gray-300 rounded-12 flex focus-within:outline-primary-400 focus-within:border-primary-300 focus-within:ring focus-within:ring-primary-200 focus-within:ring-opacity-50;
   }
 
   .input-text {
-    @apply flex-grow border-none focus:border-0 focus:ring-0 bg-transparent min-w-0 text-gray-900;
+    @apply flex-grow border-none focus:border-0 focus:ring-0 bg-transparent min-w-0 text-gray-900 px-16 py-12;
   }
 
   .input-checkbox {

From bbc0716371900e7dddb70add6f8faa4ad4d0c39e Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 18 Aug 2022 10:53:29 +0300
Subject: [PATCH 09/53] chore: remove prompt

---
 .../Projects/pages/ListProjectPage/ListProjectPage.tsx    | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
index 79f3c82..3e3d4f9 100644
--- a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
+++ b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
@@ -52,14 +52,6 @@ export default function ListProjectPage() {
     })
 
 
-    usePrompt('You may have some unsaved changes. You still want to leave?', true)
-
-
-    // if (!userId || profileQuery.loading)
-    //     return <LoadingPage />
-
-    // if (!profileQuery.data?.profile)
-    //     return <NotFoundPage />
 
     return (
         <>

From 3f752b2d4ad6af24bc8088e4b071337ba8116a31 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 18 Aug 2022 14:30:07 +0300
Subject: [PATCH 10/53] fix: add leave page prompt when there is unsaved
 changes

---
 .../FormContainer/FormContainer.tsx           |  1 +
 .../pages/ListProjectPage/ListProjectPage.tsx | 70 +++++++------------
 src/utils/routing/routes.ts                   |  2 +-
 3 files changed, 29 insertions(+), 44 deletions(-)

diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
index 4d4b931..b0fe561 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -89,6 +89,7 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
     });
 
 
+    usePrompt('You may have some unsaved changes. You still want to leave?', methods.formState.isDirty)
 
     const onSubmit: SubmitHandler<IListProjectForm> = data => console.log(data);
 
diff --git a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
index 3e3d4f9..b3abf4c 100644
--- a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
+++ b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
@@ -1,6 +1,4 @@
-import { Navigate, NavLink, Route, Routes, useLocation, useParams } from "react-router-dom";
-import Slider from "src/Components/Slider/Slider";
-import { useAppSelector, useCarousel, useMediaQuery, usePrompt } from "src/utils/hooks";
+import { useCarousel, useMediaQuery, } from "src/utils/hooks";
 import { Helmet } from 'react-helmet'
 import { MEDIA_QUERIES } from "src/utils/theme";
 import Card from "src/Components/Card/Card";
@@ -8,7 +6,7 @@ import ProjectDetailsTab from "./Components/ProjectDetailsTab/ProjectDetailsTab"
 import TeamTab from "./Components/TeamTab/TeamTab";
 import ExtrasTab from "./Components/ExtrasTab/ExtrasTab";
 import FormContainer from "./Components/FormContainer/FormContainer";
-import { useMemo } from "react";
+import { useState } from "react";
 import SaveChangesCard from "./Components/SaveChangesCard/SaveChangesCard";
 
 
@@ -31,21 +29,11 @@ const links = [tabs['project-details'], tabs['team'], tabs['extras']];
 
 type TabsKeys = keyof typeof tabs;
 
-const getCurrentTab = (locattion: string) => {
-    for (const key in tabs) {
-        const tab = tabs[key as TabsKeys];
-        if (locattion.includes(tab.path))
-            return key as TabsKeys;
-    }
-    return null;
-}
 
 export default function ListProjectPage() {
 
     const isMediumScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
-
-    const location = useLocation();
-    const currentTab = useMemo(() => getCurrentTab(location.pathname), [location.pathname])
+    const [curTab, setCurTab] = useState<TabsKeys>(tabs['project-details'].path)
     const { viewportRef, } = useCarousel({
         align: 'start', slidesToScroll: 2,
         containScroll: "trimSnaps",
@@ -67,16 +55,19 @@ export default function ListProjectPage() {
                             <ul className=' flex flex-col gap-8'>
                                 {links.map((link, idx) =>
                                     <li key={idx}>
-                                        <NavLink
-                                            replace
-                                            to={link.path}
-                                            className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
-                                 active:scale-95 transition-transform
-                                ${isActive ? 'bg-gray-100' : 'hover:bg-gray-50'}
-                                `}
+                                        <button
+                                            //             className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
+                                            //  active:scale-95 transition-transform
+                                            // ${isActive ? 'bg-gray-100' : 'hover:bg-gray-50'}
+                                            // `}
+                                            className={`flex w-full items-start rounded-8 cursor-pointer font-bold p-12
+                                                        active:scale-95 transition-transform
+                                                        ${link.path === curTab ? 'bg-gray-100' : 'hover:bg-gray-50'}
+                                                        `}
+                                            onClick={() => setCurTab(link.path)}
                                         >
                                             {link.text}
-                                        </NavLink>
+                                        </button>
                                     </li>)}
                             </ul>
                         </Card>
@@ -89,25 +80,21 @@ export default function ListProjectPage() {
                             <div className="border-b-2 border-gray-200" ref={viewportRef}>
                                 <div className="select-none w-full flex gap-16">
                                     {links.map((link, idx) =>
-                                        <NavLink
-                                            replace
-                                            to={link.path}
+                                        <button
                                             key={idx}
                                             className={`flex min-w-max  items-start cursor-pointer font-bold py-12 px-8
                                                 active:scale-95 transition-transform`}
-                                            style={({ isActive }) => {
-                                                console.log(isActive);
-                                                return {
-                                                    ...(isActive && {
-                                                        borderBottom: '2px solid var(--primary)',
-                                                        marginBottom: -2
-                                                    }),
-                                                }
+                                            style={{
+                                                ...(link.path === curTab && {
+                                                    borderBottom: '2px solid var(--primary)',
+                                                    marginBottom: -2
+                                                }),
+                                            }
+                                            }
 
-                                            }}
                                         >
                                             {link.text}
-                                        </NavLink>
+                                        </button>
                                     )}
                                 </div>
                             </div>
@@ -118,15 +105,12 @@ export default function ListProjectPage() {
                     <FormContainer>
                         <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
                             <div className="md:col-span-2">
-                                <Routes>
-                                    <Route index element={<Navigate to={tabs['project-details'].path} />} />
-                                    <Route path={tabs['project-details'].path} element={<ProjectDetailsTab />} />
-                                    <Route path={tabs['team'].path} element={<TeamTab />} />
-                                    <Route path={tabs['extras'].path} element={<ExtrasTab />} />
-                                </Routes>
+                                {curTab === tabs["project-details"].path && <ProjectDetailsTab />}
+                                {curTab === tabs["team"].path && <TeamTab />}
+                                {curTab === tabs["extras"].path && <ExtrasTab />}
                             </div>
                             <div className="self-start sticky-side-element">
-                                {currentTab && <SaveChangesCard currentTab={currentTab} />}
+                                <SaveChangesCard currentTab={curTab} />
                             </div>
                         </div>
                     </FormContainer>
diff --git a/src/utils/routing/routes.ts b/src/utils/routing/routes.ts
index 845aaeb..f8adab6 100644
--- a/src/utils/routing/routes.ts
+++ b/src/utils/routing/routes.ts
@@ -80,7 +80,7 @@ export const PAGES_ROUTES = {
         default: "/projects",
         hottest: "/projects/hottest",
         byCategoryId: "/projects/category/:id",
-        listProject: "/projects/list-project/*"
+        listProject: "/projects/list-project"
     },
     blog: {
         feed: "/blog",

From c73ba1309041d5f286c7ce4a6429131a0841efcc Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 5 Sep 2022 10:55:05 +0300
Subject: [PATCH 11/53] update: gen schema

---
 api/functions/graphql/nexus-typegen.ts |   8 +-
 api/functions/graphql/schema.graphql   |  13 +-
 src/graphql/index.tsx                  | 312 +++++++++++++------------
 3 files changed, 170 insertions(+), 163 deletions(-)

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index 8b1a204..b8ff689 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -24,7 +24,7 @@ declare global {
 
 
 declare global {
-  interface NexusGen extends NexusGenTypes { }
+  interface NexusGen extends NexusGenTypes {}
 }
 
 export interface NexusGenInputs {
@@ -69,6 +69,7 @@ export interface NexusGenInputs {
 export interface NexusGenEnums {
   POST_TYPE: "Bounty" | "Question" | "Story"
   RoleLevelEnum: 3 | 0 | 1 | 2 | 4
+  TEAM_MEMBER_ROLE: "Admin" | "Maker"
   VOTE_ITEM_TYPE: "Bounty" | "PostComment" | "Project" | "Question" | "Story" | "User"
 }
 
@@ -465,6 +466,7 @@ export interface NexusGenFieldTypes {
     profile: NexusGenRootTypes['User'] | null; // User
     projectsByCategory: NexusGenRootTypes['Project'][]; // [Project!]!
     searchProjects: NexusGenRootTypes['Project'][]; // [Project!]!
+    searchUsers: NexusGenRootTypes['User'][]; // [User!]!
     similarMakers: NexusGenRootTypes['User'][]; // [User!]!
   }
   Question: { // field return type
@@ -757,6 +759,7 @@ export interface NexusGenFieldTypeNames {
     profile: 'User'
     projectsByCategory: 'Project'
     searchProjects: 'Project'
+    searchUsers: 'User'
     similarMakers: 'User'
   }
   Question: { // field return type name
@@ -960,6 +963,9 @@ export interface NexusGenArgTypes {
       skip?: number | null; // Int
       take: number | null; // Int
     }
+    searchUsers: { // args
+      value: string; // String!
+    }
     similarMakers: { // args
       id: number; // Int!
     }
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index 520c6f2..6db06e0 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -1,6 +1,7 @@
 ### This file was generated by Nexus Schema
 ### Do not make changes to this file directly
 
+
 type Author {
   avatar: String!
   id: Int!
@@ -75,9 +76,7 @@ type Category {
   votes_sum: Int!
 }
 
-"""
-Date custom scalar type
-"""
+"""Date custom scalar type"""
 scalar Date
 
 type Donation {
@@ -263,11 +262,7 @@ type Query {
   officialTags: [Tag!]!
   popularTags: [Tag!]!
   profile(id: Int!): User
-  projectsByCategory(
-    category_id: Int!
-    skip: Int = 0
-    take: Int = 10
-  ): [Project!]!
+  projectsByCategory(category_id: Int!, skip: Int = 0, take: Int = 10): [Project!]!
   searchProjects(search: String!, skip: Int = 0, take: Int = 50): [Project!]!
   searchUsers(value: String!): [User!]!
   similarMakers(id: Int!): [User!]!
@@ -396,4 +391,4 @@ type WalletKey {
   is_current: Boolean!
   key: String!
   name: String!
-}
+}
\ No newline at end of file
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index c09e6a6..4258495 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -342,6 +342,7 @@ export type Query = {
   profile: Maybe<User>;
   projectsByCategory: Array<Project>;
   searchProjects: Array<Project>;
+  searchUsers: Array<User>;
   similarMakers: Array<User>;
 };
 
@@ -423,6 +424,11 @@ export type QuerySearchProjectsArgs = {
 };
 
 
+export type QuerySearchUsersArgs = {
+  value: Scalars['String'];
+};
+
+
 export type QuerySimilarMakersArgs = {
   id: Scalars['Int'];
 };
@@ -825,13 +831,13 @@ export const OfficialTagsDocument = gql`
  * });
  */
 export function useOfficialTagsQuery(baseOptions?: Apollo.QueryHookOptions<OfficialTagsQuery, OfficialTagsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<OfficialTagsQuery, OfficialTagsQueryVariables>(OfficialTagsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<OfficialTagsQuery, OfficialTagsQueryVariables>(OfficialTagsDocument, options);
+      }
 export function useOfficialTagsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<OfficialTagsQuery, OfficialTagsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<OfficialTagsQuery, OfficialTagsQueryVariables>(OfficialTagsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<OfficialTagsQuery, OfficialTagsQueryVariables>(OfficialTagsDocument, options);
+        }
 export type OfficialTagsQueryHookResult = ReturnType<typeof useOfficialTagsQuery>;
 export type OfficialTagsLazyQueryHookResult = ReturnType<typeof useOfficialTagsLazyQuery>;
 export type OfficialTagsQueryResult = Apollo.QueryResult<OfficialTagsQuery, OfficialTagsQueryVariables>;
@@ -863,13 +869,13 @@ export const SearchUsersDocument = gql`
  * });
  */
 export function useSearchUsersQuery(baseOptions: Apollo.QueryHookOptions<SearchUsersQuery, SearchUsersQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<SearchUsersQuery, SearchUsersQueryVariables>(SearchUsersDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<SearchUsersQuery, SearchUsersQueryVariables>(SearchUsersDocument, options);
+      }
 export function useSearchUsersLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<SearchUsersQuery, SearchUsersQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<SearchUsersQuery, SearchUsersQueryVariables>(SearchUsersDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<SearchUsersQuery, SearchUsersQueryVariables>(SearchUsersDocument, options);
+        }
 export type SearchUsersQueryHookResult = ReturnType<typeof useSearchUsersQuery>;
 export type SearchUsersLazyQueryHookResult = ReturnType<typeof useSearchUsersLazyQuery>;
 export type SearchUsersQueryResult = Apollo.QueryResult<SearchUsersQuery, SearchUsersQueryVariables>;
@@ -900,13 +906,13 @@ export const NavCategoriesDocument = gql`
  * });
  */
 export function useNavCategoriesQuery(baseOptions?: Apollo.QueryHookOptions<NavCategoriesQuery, NavCategoriesQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<NavCategoriesQuery, NavCategoriesQueryVariables>(NavCategoriesDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<NavCategoriesQuery, NavCategoriesQueryVariables>(NavCategoriesDocument, options);
+      }
 export function useNavCategoriesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<NavCategoriesQuery, NavCategoriesQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<NavCategoriesQuery, NavCategoriesQueryVariables>(NavCategoriesDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<NavCategoriesQuery, NavCategoriesQueryVariables>(NavCategoriesDocument, options);
+        }
 export type NavCategoriesQueryHookResult = ReturnType<typeof useNavCategoriesQuery>;
 export type NavCategoriesLazyQueryHookResult = ReturnType<typeof useNavCategoriesLazyQuery>;
 export type NavCategoriesQueryResult = Apollo.QueryResult<NavCategoriesQuery, NavCategoriesQueryVariables>;
@@ -941,13 +947,13 @@ export const SearchProjectsDocument = gql`
  * });
  */
 export function useSearchProjectsQuery(baseOptions: Apollo.QueryHookOptions<SearchProjectsQuery, SearchProjectsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<SearchProjectsQuery, SearchProjectsQueryVariables>(SearchProjectsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<SearchProjectsQuery, SearchProjectsQueryVariables>(SearchProjectsDocument, options);
+      }
 export function useSearchProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<SearchProjectsQuery, SearchProjectsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<SearchProjectsQuery, SearchProjectsQueryVariables>(SearchProjectsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<SearchProjectsQuery, SearchProjectsQueryVariables>(SearchProjectsDocument, options);
+        }
 export type SearchProjectsQueryHookResult = ReturnType<typeof useSearchProjectsQuery>;
 export type SearchProjectsLazyQueryHookResult = ReturnType<typeof useSearchProjectsLazyQuery>;
 export type SearchProjectsQueryResult = Apollo.QueryResult<SearchProjectsQuery, SearchProjectsQueryVariables>;
@@ -980,13 +986,13 @@ export const MeDocument = gql`
  * });
  */
 export function useMeQuery(baseOptions?: Apollo.QueryHookOptions<MeQuery, MeQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<MeQuery, MeQueryVariables>(MeDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MeQuery, MeQueryVariables>(MeDocument, options);
+      }
 export function useMeLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MeQuery, MeQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<MeQuery, MeQueryVariables>(MeDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MeQuery, MeQueryVariables>(MeDocument, options);
+        }
 export type MeQueryHookResult = ReturnType<typeof useMeQuery>;
 export type MeLazyQueryHookResult = ReturnType<typeof useMeLazyQuery>;
 export type MeQueryResult = Apollo.QueryResult<MeQuery, MeQueryVariables>;
@@ -1017,13 +1023,13 @@ export const DonationsStatsDocument = gql`
  * });
  */
 export function useDonationsStatsQuery(baseOptions?: Apollo.QueryHookOptions<DonationsStatsQuery, DonationsStatsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<DonationsStatsQuery, DonationsStatsQueryVariables>(DonationsStatsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<DonationsStatsQuery, DonationsStatsQueryVariables>(DonationsStatsDocument, options);
+      }
 export function useDonationsStatsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<DonationsStatsQuery, DonationsStatsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<DonationsStatsQuery, DonationsStatsQueryVariables>(DonationsStatsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<DonationsStatsQuery, DonationsStatsQueryVariables>(DonationsStatsDocument, options);
+        }
 export type DonationsStatsQueryHookResult = ReturnType<typeof useDonationsStatsQuery>;
 export type DonationsStatsLazyQueryHookResult = ReturnType<typeof useDonationsStatsLazyQuery>;
 export type DonationsStatsQueryResult = Apollo.QueryResult<DonationsStatsQuery, DonationsStatsQueryVariables>;
@@ -1057,9 +1063,9 @@ export type DonateMutationFn = Apollo.MutationFunction<DonateMutation, DonateMut
  * });
  */
 export function useDonateMutation(baseOptions?: Apollo.MutationHookOptions<DonateMutation, DonateMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<DonateMutation, DonateMutationVariables>(DonateDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<DonateMutation, DonateMutationVariables>(DonateDocument, options);
+      }
 export type DonateMutationHookResult = ReturnType<typeof useDonateMutation>;
 export type DonateMutationResult = Apollo.MutationResult<DonateMutation>;
 export type DonateMutationOptions = Apollo.BaseMutationOptions<DonateMutation, DonateMutationVariables>;
@@ -1093,9 +1099,9 @@ export type ConfirmDonationMutationFn = Apollo.MutationFunction<ConfirmDonationM
  * });
  */
 export function useConfirmDonationMutation(baseOptions?: Apollo.MutationHookOptions<ConfirmDonationMutation, ConfirmDonationMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<ConfirmDonationMutation, ConfirmDonationMutationVariables>(ConfirmDonationDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<ConfirmDonationMutation, ConfirmDonationMutationVariables>(ConfirmDonationDocument, options);
+      }
 export type ConfirmDonationMutationHookResult = ReturnType<typeof useConfirmDonationMutation>;
 export type ConfirmDonationMutationResult = Apollo.MutationResult<ConfirmDonationMutation>;
 export type ConfirmDonationMutationOptions = Apollo.BaseMutationOptions<ConfirmDonationMutation, ConfirmDonationMutationVariables>;
@@ -1137,13 +1143,13 @@ export const GetHackathonsDocument = gql`
  * });
  */
 export function useGetHackathonsQuery(baseOptions?: Apollo.QueryHookOptions<GetHackathonsQuery, GetHackathonsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<GetHackathonsQuery, GetHackathonsQueryVariables>(GetHackathonsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetHackathonsQuery, GetHackathonsQueryVariables>(GetHackathonsDocument, options);
+      }
 export function useGetHackathonsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetHackathonsQuery, GetHackathonsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<GetHackathonsQuery, GetHackathonsQueryVariables>(GetHackathonsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetHackathonsQuery, GetHackathonsQueryVariables>(GetHackathonsDocument, options);
+        }
 export type GetHackathonsQueryHookResult = ReturnType<typeof useGetHackathonsQuery>;
 export type GetHackathonsLazyQueryHookResult = ReturnType<typeof useGetHackathonsLazyQuery>;
 export type GetHackathonsQueryResult = Apollo.QueryResult<GetHackathonsQuery, GetHackathonsQueryVariables>;
@@ -1194,13 +1200,13 @@ export const TrendingPostsDocument = gql`
  * });
  */
 export function useTrendingPostsQuery(baseOptions?: Apollo.QueryHookOptions<TrendingPostsQuery, TrendingPostsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<TrendingPostsQuery, TrendingPostsQueryVariables>(TrendingPostsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<TrendingPostsQuery, TrendingPostsQueryVariables>(TrendingPostsDocument, options);
+      }
 export function useTrendingPostsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<TrendingPostsQuery, TrendingPostsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<TrendingPostsQuery, TrendingPostsQueryVariables>(TrendingPostsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<TrendingPostsQuery, TrendingPostsQueryVariables>(TrendingPostsDocument, options);
+        }
 export type TrendingPostsQueryHookResult = ReturnType<typeof useTrendingPostsQuery>;
 export type TrendingPostsLazyQueryHookResult = ReturnType<typeof useTrendingPostsLazyQuery>;
 export type TrendingPostsQueryResult = Apollo.QueryResult<TrendingPostsQuery, TrendingPostsQueryVariables>;
@@ -1243,13 +1249,13 @@ export const GetMyDraftsDocument = gql`
  * });
  */
 export function useGetMyDraftsQuery(baseOptions: Apollo.QueryHookOptions<GetMyDraftsQuery, GetMyDraftsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<GetMyDraftsQuery, GetMyDraftsQueryVariables>(GetMyDraftsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetMyDraftsQuery, GetMyDraftsQueryVariables>(GetMyDraftsDocument, options);
+      }
 export function useGetMyDraftsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetMyDraftsQuery, GetMyDraftsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<GetMyDraftsQuery, GetMyDraftsQueryVariables>(GetMyDraftsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetMyDraftsQuery, GetMyDraftsQueryVariables>(GetMyDraftsDocument, options);
+        }
 export type GetMyDraftsQueryHookResult = ReturnType<typeof useGetMyDraftsQuery>;
 export type GetMyDraftsLazyQueryHookResult = ReturnType<typeof useGetMyDraftsLazyQuery>;
 export type GetMyDraftsQueryResult = Apollo.QueryResult<GetMyDraftsQuery, GetMyDraftsQueryVariables>;
@@ -1291,9 +1297,9 @@ export type CreateStoryMutationFn = Apollo.MutationFunction<CreateStoryMutation,
  * });
  */
 export function useCreateStoryMutation(baseOptions?: Apollo.MutationHookOptions<CreateStoryMutation, CreateStoryMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<CreateStoryMutation, CreateStoryMutationVariables>(CreateStoryDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CreateStoryMutation, CreateStoryMutationVariables>(CreateStoryDocument, options);
+      }
 export type CreateStoryMutationHookResult = ReturnType<typeof useCreateStoryMutation>;
 export type CreateStoryMutationResult = Apollo.MutationResult<CreateStoryMutation>;
 export type CreateStoryMutationOptions = Apollo.BaseMutationOptions<CreateStoryMutation, CreateStoryMutationVariables>;
@@ -1324,9 +1330,9 @@ export type DeleteStoryMutationFn = Apollo.MutationFunction<DeleteStoryMutation,
  * });
  */
 export function useDeleteStoryMutation(baseOptions?: Apollo.MutationHookOptions<DeleteStoryMutation, DeleteStoryMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<DeleteStoryMutation, DeleteStoryMutationVariables>(DeleteStoryDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<DeleteStoryMutation, DeleteStoryMutationVariables>(DeleteStoryDocument, options);
+      }
 export type DeleteStoryMutationHookResult = ReturnType<typeof useDeleteStoryMutation>;
 export type DeleteStoryMutationResult = Apollo.MutationResult<DeleteStoryMutation>;
 export type DeleteStoryMutationOptions = Apollo.BaseMutationOptions<DeleteStoryMutation, DeleteStoryMutationVariables>;
@@ -1356,13 +1362,13 @@ export const PopularTagsDocument = gql`
  * });
  */
 export function usePopularTagsQuery(baseOptions?: Apollo.QueryHookOptions<PopularTagsQuery, PopularTagsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<PopularTagsQuery, PopularTagsQueryVariables>(PopularTagsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<PopularTagsQuery, PopularTagsQueryVariables>(PopularTagsDocument, options);
+      }
 export function usePopularTagsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PopularTagsQuery, PopularTagsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<PopularTagsQuery, PopularTagsQueryVariables>(PopularTagsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<PopularTagsQuery, PopularTagsQueryVariables>(PopularTagsDocument, options);
+        }
 export type PopularTagsQueryHookResult = ReturnType<typeof usePopularTagsQuery>;
 export type PopularTagsLazyQueryHookResult = ReturnType<typeof usePopularTagsLazyQuery>;
 export type PopularTagsQueryResult = Apollo.QueryResult<PopularTagsQuery, PopularTagsQueryVariables>;
@@ -1453,13 +1459,13 @@ export const FeedDocument = gql`
  * });
  */
 export function useFeedQuery(baseOptions?: Apollo.QueryHookOptions<FeedQuery, FeedQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<FeedQuery, FeedQueryVariables>(FeedDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<FeedQuery, FeedQueryVariables>(FeedDocument, options);
+      }
 export function useFeedLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<FeedQuery, FeedQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<FeedQuery, FeedQueryVariables>(FeedDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<FeedQuery, FeedQueryVariables>(FeedDocument, options);
+        }
 export type FeedQueryHookResult = ReturnType<typeof useFeedQuery>;
 export type FeedLazyQueryHookResult = ReturnType<typeof useFeedLazyQuery>;
 export type FeedQueryResult = Apollo.QueryResult<FeedQuery, FeedQueryVariables>;
@@ -1558,13 +1564,13 @@ export const PostDetailsDocument = gql`
  * });
  */
 export function usePostDetailsQuery(baseOptions: Apollo.QueryHookOptions<PostDetailsQuery, PostDetailsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<PostDetailsQuery, PostDetailsQueryVariables>(PostDetailsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<PostDetailsQuery, PostDetailsQueryVariables>(PostDetailsDocument, options);
+      }
 export function usePostDetailsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PostDetailsQuery, PostDetailsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<PostDetailsQuery, PostDetailsQueryVariables>(PostDetailsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<PostDetailsQuery, PostDetailsQueryVariables>(PostDetailsDocument, options);
+        }
 export type PostDetailsQueryHookResult = ReturnType<typeof usePostDetailsQuery>;
 export type PostDetailsLazyQueryHookResult = ReturnType<typeof usePostDetailsLazyQuery>;
 export type PostDetailsQueryResult = Apollo.QueryResult<PostDetailsQuery, PostDetailsQueryVariables>;
@@ -1592,13 +1598,13 @@ export const MyProfileAboutDocument = gql`
  * });
  */
 export function useMyProfileAboutQuery(baseOptions?: Apollo.QueryHookOptions<MyProfileAboutQuery, MyProfileAboutQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<MyProfileAboutQuery, MyProfileAboutQueryVariables>(MyProfileAboutDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MyProfileAboutQuery, MyProfileAboutQueryVariables>(MyProfileAboutDocument, options);
+      }
 export function useMyProfileAboutLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MyProfileAboutQuery, MyProfileAboutQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<MyProfileAboutQuery, MyProfileAboutQueryVariables>(MyProfileAboutDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MyProfileAboutQuery, MyProfileAboutQueryVariables>(MyProfileAboutDocument, options);
+        }
 export type MyProfileAboutQueryHookResult = ReturnType<typeof useMyProfileAboutQuery>;
 export type MyProfileAboutLazyQueryHookResult = ReturnType<typeof useMyProfileAboutLazyQuery>;
 export type MyProfileAboutQueryResult = Apollo.QueryResult<MyProfileAboutQuery, MyProfileAboutQueryVariables>;
@@ -1629,9 +1635,9 @@ export type UpdateProfileAboutMutationFn = Apollo.MutationFunction<UpdateProfile
  * });
  */
 export function useUpdateProfileAboutMutation(baseOptions?: Apollo.MutationHookOptions<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>(UpdateProfileAboutDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>(UpdateProfileAboutDocument, options);
+      }
 export type UpdateProfileAboutMutationHookResult = ReturnType<typeof useUpdateProfileAboutMutation>;
 export type UpdateProfileAboutMutationResult = Apollo.MutationResult<UpdateProfileAboutMutation>;
 export type UpdateProfileAboutMutationOptions = Apollo.BaseMutationOptions<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>;
@@ -1666,13 +1672,13 @@ export const MyProfilePreferencesDocument = gql`
  * });
  */
 export function useMyProfilePreferencesQuery(baseOptions?: Apollo.QueryHookOptions<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>(MyProfilePreferencesDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>(MyProfilePreferencesDocument, options);
+      }
 export function useMyProfilePreferencesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>(MyProfilePreferencesDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>(MyProfilePreferencesDocument, options);
+        }
 export type MyProfilePreferencesQueryHookResult = ReturnType<typeof useMyProfilePreferencesQuery>;
 export type MyProfilePreferencesLazyQueryHookResult = ReturnType<typeof useMyProfilePreferencesLazyQuery>;
 export type MyProfilePreferencesQueryResult = Apollo.QueryResult<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>;
@@ -1709,9 +1715,9 @@ export type UpdateUserPreferencesMutationFn = Apollo.MutationFunction<UpdateUser
  * });
  */
 export function useUpdateUserPreferencesMutation(baseOptions?: Apollo.MutationHookOptions<UpdateUserPreferencesMutation, UpdateUserPreferencesMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<UpdateUserPreferencesMutation, UpdateUserPreferencesMutationVariables>(UpdateUserPreferencesDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpdateUserPreferencesMutation, UpdateUserPreferencesMutationVariables>(UpdateUserPreferencesDocument, options);
+      }
 export type UpdateUserPreferencesMutationHookResult = ReturnType<typeof useUpdateUserPreferencesMutation>;
 export type UpdateUserPreferencesMutationResult = Apollo.MutationResult<UpdateUserPreferencesMutation>;
 export type UpdateUserPreferencesMutationOptions = Apollo.BaseMutationOptions<UpdateUserPreferencesMutation, UpdateUserPreferencesMutationVariables>;
@@ -1749,13 +1755,13 @@ export const MyProfileRolesSkillsDocument = gql`
  * });
  */
 export function useMyProfileRolesSkillsQuery(baseOptions?: Apollo.QueryHookOptions<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>(MyProfileRolesSkillsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>(MyProfileRolesSkillsDocument, options);
+      }
 export function useMyProfileRolesSkillsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>(MyProfileRolesSkillsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>(MyProfileRolesSkillsDocument, options);
+        }
 export type MyProfileRolesSkillsQueryHookResult = ReturnType<typeof useMyProfileRolesSkillsQuery>;
 export type MyProfileRolesSkillsLazyQueryHookResult = ReturnType<typeof useMyProfileRolesSkillsLazyQuery>;
 export type MyProfileRolesSkillsQueryResult = Apollo.QueryResult<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>;
@@ -1796,9 +1802,9 @@ export type UpdateUserRolesSkillsMutationFn = Apollo.MutationFunction<UpdateUser
  * });
  */
 export function useUpdateUserRolesSkillsMutation(baseOptions?: Apollo.MutationHookOptions<UpdateUserRolesSkillsMutation, UpdateUserRolesSkillsMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<UpdateUserRolesSkillsMutation, UpdateUserRolesSkillsMutationVariables>(UpdateUserRolesSkillsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpdateUserRolesSkillsMutation, UpdateUserRolesSkillsMutationVariables>(UpdateUserRolesSkillsDocument, options);
+      }
 export type UpdateUserRolesSkillsMutationHookResult = ReturnType<typeof useUpdateUserRolesSkillsMutation>;
 export type UpdateUserRolesSkillsMutationResult = Apollo.MutationResult<UpdateUserRolesSkillsMutation>;
 export type UpdateUserRolesSkillsMutationOptions = Apollo.BaseMutationOptions<UpdateUserRolesSkillsMutation, UpdateUserRolesSkillsMutationVariables>;
@@ -1852,13 +1858,13 @@ ${UserRolesSkillsFragmentDoc}`;
  * });
  */
 export function useProfileQuery(baseOptions: Apollo.QueryHookOptions<ProfileQuery, ProfileQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<ProfileQuery, ProfileQueryVariables>(ProfileDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ProfileQuery, ProfileQueryVariables>(ProfileDocument, options);
+      }
 export function useProfileLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProfileQuery, ProfileQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<ProfileQuery, ProfileQueryVariables>(ProfileDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ProfileQuery, ProfileQueryVariables>(ProfileDocument, options);
+        }
 export type ProfileQueryHookResult = ReturnType<typeof useProfileQuery>;
 export type ProfileLazyQueryHookResult = ReturnType<typeof useProfileLazyQuery>;
 export type ProfileQueryResult = Apollo.QueryResult<ProfileQuery, ProfileQueryVariables>;
@@ -1900,13 +1906,13 @@ export const CategoryPageDocument = gql`
  * });
  */
 export function useCategoryPageQuery(baseOptions: Apollo.QueryHookOptions<CategoryPageQuery, CategoryPageQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<CategoryPageQuery, CategoryPageQueryVariables>(CategoryPageDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<CategoryPageQuery, CategoryPageQueryVariables>(CategoryPageDocument, options);
+      }
 export function useCategoryPageLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<CategoryPageQuery, CategoryPageQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<CategoryPageQuery, CategoryPageQueryVariables>(CategoryPageDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<CategoryPageQuery, CategoryPageQueryVariables>(CategoryPageDocument, options);
+        }
 export type CategoryPageQueryHookResult = ReturnType<typeof useCategoryPageQuery>;
 export type CategoryPageLazyQueryHookResult = ReturnType<typeof useCategoryPageLazyQuery>;
 export type CategoryPageQueryResult = Apollo.QueryResult<CategoryPageQuery, CategoryPageQueryVariables>;
@@ -1936,13 +1942,13 @@ export const AllCategoriesDocument = gql`
  * });
  */
 export function useAllCategoriesQuery(baseOptions?: Apollo.QueryHookOptions<AllCategoriesQuery, AllCategoriesQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<AllCategoriesQuery, AllCategoriesQueryVariables>(AllCategoriesDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<AllCategoriesQuery, AllCategoriesQueryVariables>(AllCategoriesDocument, options);
+      }
 export function useAllCategoriesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AllCategoriesQuery, AllCategoriesQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<AllCategoriesQuery, AllCategoriesQueryVariables>(AllCategoriesDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<AllCategoriesQuery, AllCategoriesQueryVariables>(AllCategoriesDocument, options);
+        }
 export type AllCategoriesQueryHookResult = ReturnType<typeof useAllCategoriesQuery>;
 export type AllCategoriesLazyQueryHookResult = ReturnType<typeof useAllCategoriesLazyQuery>;
 export type AllCategoriesQueryResult = Apollo.QueryResult<AllCategoriesQuery, AllCategoriesQueryVariables>;
@@ -2001,13 +2007,13 @@ export const ExploreProjectsDocument = gql`
  * });
  */
 export function useExploreProjectsQuery(baseOptions?: Apollo.QueryHookOptions<ExploreProjectsQuery, ExploreProjectsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<ExploreProjectsQuery, ExploreProjectsQueryVariables>(ExploreProjectsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExploreProjectsQuery, ExploreProjectsQueryVariables>(ExploreProjectsDocument, options);
+      }
 export function useExploreProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExploreProjectsQuery, ExploreProjectsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<ExploreProjectsQuery, ExploreProjectsQueryVariables>(ExploreProjectsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExploreProjectsQuery, ExploreProjectsQueryVariables>(ExploreProjectsDocument, options);
+        }
 export type ExploreProjectsQueryHookResult = ReturnType<typeof useExploreProjectsQuery>;
 export type ExploreProjectsLazyQueryHookResult = ReturnType<typeof useExploreProjectsLazyQuery>;
 export type ExploreProjectsQueryResult = Apollo.QueryResult<ExploreProjectsQuery, ExploreProjectsQueryVariables>;
@@ -2042,13 +2048,13 @@ export const HottestProjectsDocument = gql`
  * });
  */
 export function useHottestProjectsQuery(baseOptions?: Apollo.QueryHookOptions<HottestProjectsQuery, HottestProjectsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<HottestProjectsQuery, HottestProjectsQueryVariables>(HottestProjectsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<HottestProjectsQuery, HottestProjectsQueryVariables>(HottestProjectsDocument, options);
+      }
 export function useHottestProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<HottestProjectsQuery, HottestProjectsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<HottestProjectsQuery, HottestProjectsQueryVariables>(HottestProjectsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<HottestProjectsQuery, HottestProjectsQueryVariables>(HottestProjectsDocument, options);
+        }
 export type HottestProjectsQueryHookResult = ReturnType<typeof useHottestProjectsQuery>;
 export type HottestProjectsLazyQueryHookResult = ReturnType<typeof useHottestProjectsLazyQuery>;
 export type HottestProjectsQueryResult = Apollo.QueryResult<HottestProjectsQuery, HottestProjectsQueryVariables>;
@@ -2100,13 +2106,13 @@ export const ProjectDetailsDocument = gql`
  * });
  */
 export function useProjectDetailsQuery(baseOptions: Apollo.QueryHookOptions<ProjectDetailsQuery, ProjectDetailsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useQuery<ProjectDetailsQuery, ProjectDetailsQueryVariables>(ProjectDetailsDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ProjectDetailsQuery, ProjectDetailsQueryVariables>(ProjectDetailsDocument, options);
+      }
 export function useProjectDetailsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProjectDetailsQuery, ProjectDetailsQueryVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useLazyQuery<ProjectDetailsQuery, ProjectDetailsQueryVariables>(ProjectDetailsDocument, options);
-}
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ProjectDetailsQuery, ProjectDetailsQueryVariables>(ProjectDetailsDocument, options);
+        }
 export type ProjectDetailsQueryHookResult = ReturnType<typeof useProjectDetailsQuery>;
 export type ProjectDetailsLazyQueryHookResult = ReturnType<typeof useProjectDetailsLazyQuery>;
 export type ProjectDetailsQueryResult = Apollo.QueryResult<ProjectDetailsQuery, ProjectDetailsQueryVariables>;
@@ -2145,9 +2151,9 @@ export type VoteMutationFn = Apollo.MutationFunction<VoteMutation, VoteMutationV
  * });
  */
 export function useVoteMutation(baseOptions?: Apollo.MutationHookOptions<VoteMutation, VoteMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<VoteMutation, VoteMutationVariables>(VoteDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<VoteMutation, VoteMutationVariables>(VoteDocument, options);
+      }
 export type VoteMutationHookResult = ReturnType<typeof useVoteMutation>;
 export type VoteMutationResult = Apollo.MutationResult<VoteMutation>;
 export type VoteMutationOptions = Apollo.BaseMutationOptions<VoteMutation, VoteMutationVariables>;
@@ -2185,9 +2191,9 @@ export type ConfirmVoteMutationFn = Apollo.MutationFunction<ConfirmVoteMutation,
  * });
  */
 export function useConfirmVoteMutation(baseOptions?: Apollo.MutationHookOptions<ConfirmVoteMutation, ConfirmVoteMutationVariables>) {
-  const options = { ...defaultOptions, ...baseOptions }
-  return Apollo.useMutation<ConfirmVoteMutation, ConfirmVoteMutationVariables>(ConfirmVoteDocument, options);
-}
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<ConfirmVoteMutation, ConfirmVoteMutationVariables>(ConfirmVoteDocument, options);
+      }
 export type ConfirmVoteMutationHookResult = ReturnType<typeof useConfirmVoteMutation>;
 export type ConfirmVoteMutationResult = Apollo.MutationResult<ConfirmVoteMutation>;
 export type ConfirmVoteMutationOptions = Apollo.BaseMutationOptions<ConfirmVoteMutation, ConfirmVoteMutationVariables>;
\ No newline at end of file

From dddae22ffbf3444959333026aa1b3bb32c3afdf2 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 5 Sep 2022 10:58:00 +0300
Subject: [PATCH 12/53] fix: typing for users mocks data

---
 src/mocks/data/users.ts | 141 +++++++++++++++++++++++++++-------------
 1 file changed, 96 insertions(+), 45 deletions(-)

diff --git a/src/mocks/data/users.ts b/src/mocks/data/users.ts
index 6d7d2f5..76bbc82 100644
--- a/src/mocks/data/users.ts
+++ b/src/mocks/data/users.ts
@@ -97,6 +97,52 @@ export const allMakersSkills: MakerSkill[] = [
     },
 ]
 
+const similar_makers = [
+    {
+        id: 144,
+        name: "Johns Beharry",
+        jobTitle: "Manager",
+        avatar: getAvatarImage(),
+    },
+    {
+        id: 155,
+        name: "Edward P",
+        jobTitle: "Front-end Developer",
+        avatar: getAvatarImage(),
+    },
+    {
+        id: 123,
+        name: "Mohammed T",
+        jobTitle: "Front-end Developer",
+        avatar: getAvatarImage(),
+    },
+] as User[]
+
+const tournaments = [
+    {
+        id: 1,
+        title: "BreezConf",
+        description: chance.paragraph(),
+        cover_image: getCoverImage(),
+        thumbnail_image: getCoverImage(),
+        start_date: new Date(2021, 3).toISOString(),
+        end_date: new Date(2021, 4).toISOString(),
+        tags: [],
+        website: "https://breez-conf.com"
+    },
+    {
+        id: 2,
+        title: "Shock the Web 3",
+        description: chance.paragraph(),
+        cover_image: getCoverImage(),
+        thumbnail_image: getCoverImage(),
+        start_date: new Date(2022, 7).toISOString(),
+        end_date: new Date(2022, 11).toISOString(),
+        tags: [],
+        website: "https://shock-the-web.com"
+    },
+];
+
 export const users: (User | MyProfile)[] = [{
     id: 123,
     email: "mtg0987654321@gmail.com",
@@ -128,51 +174,10 @@ export const users: (User | MyProfile)[] = [{
         },],
     roles: randomItems(3, ...allMakersRoles).map(role => ({ ...role, level: randomItem(...Object.values(RoleLevelEnum)) })),
     skills: randomItems(7, ...allMakersSkills),
-    tournaments: [
-        {
-            id: 1,
-            title: "BreezConf",
-            description: chance.paragraph(),
-            cover_image: getCoverImage(),
-            thumbnail_image: getCoverImage(),
-            start_date: new Date(2021, 3).toISOString(),
-            end_date: new Date(2021, 4).toISOString(),
-            tags: [],
-            website: "https://breez-conf.com"
-        },
-        {
-            id: 2,
-            title: "Shock the Web 3",
-            description: chance.paragraph(),
-            cover_image: getCoverImage(),
-            thumbnail_image: getCoverImage(),
-            start_date: new Date(2022, 7).toISOString(),
-            end_date: new Date(2022, 11).toISOString(),
-            tags: [],
-            website: "https://shock-the-web.com"
-        },
-    ],
-    similar_makers: [
-        {
-            id: 144,
-            name: "Johns Beharry",
-            jobTitle: "Manager",
-            avatar: getAvatarImage(),
-        },
-        {
-            id: 155,
-            name: "Edward P",
-            jobTitle: "Front-end Developer",
-            avatar: getAvatarImage(),
-        },
-        {
-            id: 166,
-            name: "Mohammed T",
-            jobTitle: "Front-end Developer",
-            avatar: getAvatarImage(),
-        },
-    ] as User[]
-}, {
+    tournaments,
+    similar_makers
+},
+{
     id: 441,
     email: "eddy@gmail.com",
     avatar: "https://avatars.dicebear.com/api/bottts/Eduardu.svg",
@@ -190,6 +195,22 @@ export const users: (User | MyProfile)[] = [{
     stories: posts.stories,
     nostr_prv_key: "123123124asdfsadfsa8d7fsadfasdf",
     nostr_pub_key: "123124123123dfsadfsa8d7f11sadfasdf",
+
+    walletsKeys: [
+        {
+            key: "1645h234j2421zxvertw",
+            name: "My Alby wallet key",
+            is_current: true
+        },
+        {
+            key: "66345134234235",
+            name: "My Phoenix wallet key",
+            is_current: false
+        },],
+    roles: randomItems(3, ...allMakersRoles).map(role => ({ ...role, level: randomItem(...Object.values(RoleLevelEnum)) })),
+    skills: randomItems(7, ...allMakersSkills),
+    tournaments,
+    similar_makers
 },
 {
     id: 422,
@@ -209,6 +230,21 @@ export const users: (User | MyProfile)[] = [{
     stories: posts.stories,
     nostr_prv_key: "123123124asdfsadfsa8d7fsadfasdf",
     nostr_pub_key: "123124123123dfsadfsa8d7f11sadfasdf",
+    walletsKeys: [
+        {
+            key: "1645h234j2421zxvertw",
+            name: "My Alby wallet key",
+            is_current: true
+        },
+        {
+            key: "66345134234235",
+            name: "My Phoenix wallet key",
+            is_current: false
+        },],
+    roles: randomItems(3, ...allMakersRoles).map(role => ({ ...role, level: randomItem(...Object.values(RoleLevelEnum)) })),
+    skills: randomItems(7, ...allMakersSkills),
+    tournaments,
+    similar_makers
 },
 {
     id: 511,
@@ -228,6 +264,21 @@ export const users: (User | MyProfile)[] = [{
     stories: posts.stories,
     nostr_prv_key: "123123124asdfsadfsa8d7fsadfasdf",
     nostr_pub_key: "123124123123dfsadfsa8d7f11sadfasdf",
+    walletsKeys: [
+        {
+            key: "1645h234j2421zxvertw",
+            name: "My Alby wallet key",
+            is_current: true
+        },
+        {
+            key: "66345134234235",
+            name: "My Phoenix wallet key",
+            is_current: false
+        },],
+    roles: randomItems(3, ...allMakersRoles).map(role => ({ ...role, level: randomItem(...Object.values(RoleLevelEnum)) })),
+    skills: randomItems(7, ...allMakersSkills),
+    tournaments,
+    similar_makers
 }]
 
 

From 9b376af28988c9f739f120bbb1e7fe2335c8010f Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 15 Sep 2022 10:08:21 +0300
Subject: [PATCH 13/53] feat: add base api schema to list-project

---
 api/functions/graphql/types/project.js | 61 +++++++++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index 0a8f86a..8e193fa 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -5,6 +5,7 @@ const {
     extendType,
     nonNull,
     enumType,
+    inputObjectType,
 } = require('nexus')
 const { prisma } = require('../../../prisma');
 
@@ -269,6 +270,61 @@ const getLnurlDetailsForProject = extendType({
     }
 })
 
+const TeamMemberInput = inputObjectType({
+    name: 'CreateProjectInput',
+    definition(t) {
+        t.nonNull.int('id')
+        t.nonNull.field("role", {
+            type: TEAM_MEMBER_ROLE
+        })
+    }
+})
+
+const CreateProjectInput = inputObjectType({
+    name: 'CreateProjectInput',
+    definition(t) {
+        t.int('id') // exists in update
+        t.nonNull.string('title');
+        t.nonNull.string('website');
+        t.nonNull.string('tagline');
+        t.nonNull.string('description');
+        t.nonNull.string('thumbnail_image');
+        t.nonNull.string('cover_image');
+        t.string('twitter');
+        t.string('discord');
+        t.string('github');
+        t.nonNull.int('category_id');
+        t.nonNull.list.nonNull.string('capabilities');
+        t.nonNull.list.nonNull.string('screenshots');
+        t.nonNull.list.nonNull.field('members', {
+            type: TeamMemberInput
+        });
+        t.nonNull.list.nonNull.int('recruit_roles'); // ids
+        t.nonNull.string('launch_status');   // "wip" | "launched"
+    }
+})
+
+const createProject = extendType({
+    type: 'Mutation',
+    definition(t) {
+        t.field('createProject', {
+            type: 'Project',
+            args: { data: CreateProjectInput },
+            async resolve(_root, args, ctx) {
+                if (args.data.id) {
+                    // Update project
+                } else {
+                    // Create project
+                }
+            }
+        })
+    },
+})
+
+
+
+
+
 module.exports = {
     // Types
     Project,
@@ -281,5 +337,8 @@ module.exports = {
     hottestProjects,
     searchProjects,
     projectsByCategory,
-    getLnurlDetailsForProject
+    getLnurlDetailsForProject,
+
+    // Mutations
+    createProject,
 }
\ No newline at end of file

From 1ac0e8f9c5ad976684440523758b4223d2798926 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 15 Sep 2022 10:24:52 +0300
Subject: [PATCH 14/53] update: list project api schema

---
 api/functions/graphql/types/project.js | 55 ++++++++++++++++++++++----
 1 file changed, 48 insertions(+), 7 deletions(-)

diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index 8e193fa..58eba7b 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -304,24 +304,64 @@ const CreateProjectInput = inputObjectType({
     }
 })
 
+const CreateProjectResponse = objectType({
+    name: 'CreateProjectResponse',
+    definition(t) {
+        t.nonNull.field('project', { type: Project })
+    }
+})
+
 const createProject = extendType({
     type: 'Mutation',
     definition(t) {
         t.field('createProject', {
-            type: 'Project',
-            args: { data: CreateProjectInput },
+            type: CreateProjectResponse,
+            args: { input: CreateProjectInput },
             async resolve(_root, args, ctx) {
-                if (args.data.id) {
-                    // Update project
-                } else {
-                    // Create project
-                }
+                const { title } = args.input;
+
             }
         })
     },
 })
 
 
+const UpdateProjectInput = inputObjectType({
+    name: 'UpdateProjectInput',
+    definition(t) {
+        t.int('id')
+        t.nonNull.string('title');
+        t.nonNull.string('website');
+        t.nonNull.string('tagline');
+        t.nonNull.string('description');
+        t.nonNull.string('thumbnail_image');
+        t.nonNull.string('cover_image');
+        t.string('twitter');
+        t.string('discord');
+        t.string('github');
+        t.nonNull.int('category_id');
+        t.nonNull.list.nonNull.string('capabilities');
+        t.nonNull.list.nonNull.string('screenshots');
+        t.nonNull.list.nonNull.field('members', {
+            type: TeamMemberInput
+        });
+        t.nonNull.list.nonNull.int('recruit_roles'); // ids
+        t.nonNull.string('launch_status');   // "wip" | "launched"
+    }
+})
+
+const updateProject = extendType({
+    type: 'Mutation',
+    definition(t) {
+        t.field('updateProject', {
+            type: CreateProjectResponse,
+            args: { input: UpdateProjectInput },
+            async resolve(_root, args, ctx) {
+
+            }
+        })
+    },
+})
 
 
 
@@ -341,4 +381,5 @@ module.exports = {
 
     // Mutations
     createProject,
+    updateProject,
 }
\ No newline at end of file

From 47e65adb677370d80a3a79ff9cb0ae0ce4355f99 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 15 Sep 2022 13:28:47 +0300
Subject: [PATCH 15/53] update: project api base schema

---
 api/functions/graphql/types/project.js | 38 ++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index 642be84..8a95c8c 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -11,6 +11,7 @@ const { prisma } = require('../../../prisma');
 const { resolveImgObjectToUrl } = require('../../../utils/resolveImageUrl');
 
 const { paginationArgs, getLnurlDetails, lightningAddressToLnurl } = require('./helpers');
+const { ImageInput } = require('./misc');
 const { MakerRole } = require('./users');
 
 
@@ -310,14 +311,20 @@ const CreateProjectInput = inputObjectType({
         t.nonNull.string('website');
         t.nonNull.string('tagline');
         t.nonNull.string('description');
-        t.nonNull.string('thumbnail_image');
-        t.nonNull.string('cover_image');
+        t.nonNull.field('thumbnail_image', {
+            type: ImageInput
+        })
+        t.nonNull.field('cover_image', {
+            type: ImageInput
+        })
         t.string('twitter');
         t.string('discord');
         t.string('github');
         t.nonNull.int('category_id');
         t.nonNull.list.nonNull.string('capabilities');
-        t.nonNull.list.nonNull.string('screenshots');
+        t.nonNull.list.nonNull.field('screenshots', {
+            type: ImageInput
+        });
         t.nonNull.list.nonNull.field('members', {
             type: TeamMemberInput
         });
@@ -356,14 +363,20 @@ const UpdateProjectInput = inputObjectType({
         t.nonNull.string('website');
         t.nonNull.string('tagline');
         t.nonNull.string('description');
-        t.nonNull.string('thumbnail_image');
-        t.nonNull.string('cover_image');
+        t.nonNull.field('thumbnail_image', {
+            type: ImageInput
+        })
+        t.nonNull.field('cover_image', {
+            type: ImageInput
+        })
         t.string('twitter');
         t.string('discord');
         t.string('github');
         t.nonNull.int('category_id');
         t.nonNull.list.nonNull.string('capabilities');
-        t.nonNull.list.nonNull.string('screenshots');
+        t.nonNull.list.nonNull.field('screenshots', {
+            type: ImageInput
+        });
         t.nonNull.list.nonNull.field('members', {
             type: TeamMemberInput
         });
@@ -385,6 +398,18 @@ const updateProject = extendType({
     },
 })
 
+const deleteProject = extendType({
+    type: 'Mutation',
+    definition(t) {
+        t.field('deleteProject', {
+            type: CreateProjectResponse,
+            args: { id: nonNull(intArg()) },
+            async resolve(_root, args, ctx) {
+                // ...
+            }
+        })
+    },
+})
 
 
 module.exports = {
@@ -404,4 +429,5 @@ module.exports = {
     // Mutations
     createProject,
     updateProject,
+    deleteProject,
 }
\ No newline at end of file

From 48e9365a05f8a9e46bf04e27462ddc15f770d88c Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 15 Sep 2022 13:31:13 +0300
Subject: [PATCH 16/53] fix: remove merge comment

---
 .../Projects/pages/ExplorePage/Header/Header.tsx | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/features/Projects/pages/ExplorePage/Header/Header.tsx b/src/features/Projects/pages/ExplorePage/Header/Header.tsx
index 08981dc..c56ba10 100644
--- a/src/features/Projects/pages/ExplorePage/Header/Header.tsx
+++ b/src/features/Projects/pages/ExplorePage/Header/Header.tsx
@@ -42,22 +42,6 @@ const headerLinks = [
       newTab: false,
     },
   },
-<<<<<<< HEAD
-  {
-    title:
-      <>
-        <p className="text-body1 font-bolder text-white">Take part in BOLT🔩FUN’s Shock the Web 2 ⚡️</p>
-        <p className="text-body3 font-medium text-white mt-8">16th - 19th June, 2022</p>
-      </>,
-    img: Assets.Images_ExploreHeader2,
-    link: {
-      content: "Register Now",
-      url: "https://bolt.fun/hackathons/shock-the-web-2/",
-      newTab: true,
-    },
-  },
-=======
->>>>>>> dev
 ];
 
 

From d60d876fc904041c5e948e58ac21802b9fa650e4 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 15 Sep 2022 14:01:18 +0300
Subject: [PATCH 17/53] fix: merge small conflicts

---
 .../Components/FormContainer/FormContainer.tsx              | 6 +++---
 .../Components/ProjectDetailsTab/ProjectDetailsTab.tsx      | 6 +++---
 .../Components/SaveChangesCard/SaveChangesCard.tsx          | 4 ++--
 src/services/notifications.service.ts                       | 2 +-
 src/utils/storybook/decorators.tsx                          | 2 +-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
index b0fe561..835e765 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -14,7 +14,7 @@ interface Props {
 
 export interface IListProjectForm {
     id?: number
-    name: string
+    title: string
     website: string
     tagline: string
     description: string
@@ -43,7 +43,7 @@ export interface IListProjectForm {
 
 const schema: yup.SchemaOf<IListProjectForm> = yup.object({
     id: yup.number().optional(),
-    name: yup.string().trim().required().min(2),
+    title: yup.string().trim().required().min(2),
     website: yup.string().trim().url().required(),
     tagline: yup.string().trim().required().min(10),
     description: yup.string().trim().required().min(50, 'Write at least 10 words descriping your project'),
@@ -68,7 +68,7 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
     const methods = useForm<IListProjectForm>({
         defaultValues: {
             id: !!params.get('id') ? Number(params.get('id')) : undefined,
-            name: "",
+            title: "",
             website: "",
             tagline: "",
             description: "",
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
index 9261e3d..68ff942 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
@@ -42,11 +42,11 @@ export default function ProjectDetailsTab(props: Props) {
                             type='text'
                             className="input-text"
                             placeholder='e.g BOLT🔩FUN'
-                            {...register("name")}
+                            {...register("title")}
                         />
                     </div>
-                    {errors.name && <p className="input-error">
-                        {errors.name.message}
+                    {errors.title && <p className="input-error">
+                        {errors.title.message}
                     </p>}
                     <p className="text-body5 mt-16 font-medium">
                         Project link<sup className="text-red-500">*</sup>
diff --git a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
index 0b4a58b..0cc6e49 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
@@ -24,7 +24,7 @@ export default function SaveChangesCard(props: Props) {
     const isUpdating = useMemo(() => !!getValues('id'), [getValues]);
 
 
-    const [img, name, tagline] = watch(['thumbnail_image', 'name', 'tagline'])
+    const [img, name, tagline] = watch(['thumbnail_image', 'title', 'tagline'])
 
     const clickCancel = () => {
         if (window.confirm('You might lose some unsaved changes. Are you sure you want to continue?'))
@@ -40,7 +40,7 @@ export default function SaveChangesCard(props: Props) {
                 Modal: "ProjectListedModal", props: {
                     project: {
                         id: data.id!,
-                        name: data.name,
+                        name: data.title,
                         img: data.thumbnail_image || "https://picsum.photos/id/870/150/150.jpg",
                         tagline: data.tagline,
                     }
diff --git a/src/services/notifications.service.ts b/src/services/notifications.service.ts
index 79e4d26..da850a7 100644
--- a/src/services/notifications.service.ts
+++ b/src/services/notifications.service.ts
@@ -40,7 +40,7 @@ export class NotificationsService {
 
     static warn(msg: string, options?: AlertOptions) {
         toast.warn(msg, {
-            onClose: options?.onComplete,
+            onClose: options?.onClose,
             autoClose: options?.autoClose ?? 2500,
             ...options,
         })
diff --git a/src/utils/storybook/decorators.tsx b/src/utils/storybook/decorators.tsx
index 287e70f..af87b2d 100644
--- a/src/utils/storybook/decorators.tsx
+++ b/src/utils/storybook/decorators.tsx
@@ -16,7 +16,7 @@ import "src/styles/index.scss";
 import 'react-loading-skeleton/dist/skeleton.css'
 import { ApolloProvider } from '@apollo/client';
 import { apolloClient } from '../apollo';
-import { Controller, FormProvider, useForm, UseFormProps, Controller } from 'react-hook-form';
+import { Controller, FormProvider, useForm, UseFormProps, } from 'react-hook-form';
 import ModalsContainer from 'src/Components/Modals/ModalsContainer/ModalsContainer';
 import { ToastContainer } from 'react-toastify';
 import { NotificationsService } from 'src/services';

From 239d0a72260eb05fdbc8cb85775293920ad0f451 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 15 Sep 2022 14:04:27 +0300
Subject: [PATCH 18/53] fix: team-member-input name

---
 api/functions/graphql/nexus-typegen.ts | 69 +++++++++++++++++++++++++-
 api/functions/graphql/schema.graphql   | 50 +++++++++++++++++++
 api/functions/graphql/types/project.js |  2 +-
 3 files changed, 118 insertions(+), 3 deletions(-)

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index 45c3262..03ffa44 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -24,10 +24,28 @@ declare global {
 
 
 declare global {
-  interface NexusGen extends NexusGenTypes { }
+  interface NexusGen extends NexusGenTypes {}
 }
 
 export interface NexusGenInputs {
+  CreateProjectInput: { // input type
+    capabilities: string[]; // [String!]!
+    category_id: number; // Int!
+    cover_image: NexusGenInputs['ImageInput']; // ImageInput!
+    description: string; // String!
+    discord?: string | null; // String
+    github?: string | null; // String
+    id?: number | null; // Int
+    launch_status: string; // String!
+    members: NexusGenInputs['TeamMemberInput'][]; // [TeamMemberInput!]!
+    recruit_roles: number[]; // [Int!]!
+    screenshots: NexusGenInputs['ImageInput'][]; // [ImageInput!]!
+    tagline: string; // String!
+    thumbnail_image: NexusGenInputs['ImageInput']; // ImageInput!
+    title: string; // String!
+    twitter?: string | null; // String
+    website: string; // String!
+  }
   ImageInput: { // input type
     id?: string | null; // String
     name?: string | null; // String
@@ -70,6 +88,28 @@ export interface NexusGenInputs {
     tags: string[]; // [String!]!
     title: string; // String!
   }
+  TeamMemberInput: { // input type
+    id: number; // Int!
+    role: NexusGenEnums['TEAM_MEMBER_ROLE']; // TEAM_MEMBER_ROLE!
+  }
+  UpdateProjectInput: { // input type
+    capabilities: string[]; // [String!]!
+    category_id: number; // Int!
+    cover_image: NexusGenInputs['ImageInput']; // ImageInput!
+    description: string; // String!
+    discord?: string | null; // String
+    github?: string | null; // String
+    id?: number | null; // Int
+    launch_status: string; // String!
+    members: NexusGenInputs['TeamMemberInput'][]; // [TeamMemberInput!]!
+    recruit_roles: number[]; // [Int!]!
+    screenshots: NexusGenInputs['ImageInput'][]; // [ImageInput!]!
+    tagline: string; // String!
+    thumbnail_image: NexusGenInputs['ImageInput']; // ImageInput!
+    title: string; // String!
+    twitter?: string | null; // String
+    website: string; // String!
+  }
   UpdateTournamentRegistrationInput: { // input type
     email?: string | null; // String
     hacking_status?: NexusGenEnums['TournamentMakerHackingStatusEnum'] | null; // TournamentMakerHackingStatusEnum
@@ -83,9 +123,9 @@ export interface NexusGenInputs {
 export interface NexusGenEnums {
   POST_TYPE: "Bounty" | "Question" | "Story"
   RoleLevelEnum: 3 | 0 | 1 | 2 | 4
+  TEAM_MEMBER_ROLE: "Admin" | "Maker"
   TournamentEventTypeEnum: 2 | 3 | 0 | 1
   TournamentMakerHackingStatusEnum: 1 | 0
-  TEAM_MEMBER_ROLE: "Admin" | "Maker"
   VOTE_ITEM_TYPE: "Bounty" | "PostComment" | "Project" | "Question" | "Story" | "User"
 }
 
@@ -115,6 +155,7 @@ export interface NexusGenObjects {
     applicants_count: number; // Int!
     applications: NexusGenRootTypes['BountyApplication'][]; // [BountyApplication!]!
     body: string; // String!
+    cover_image?: string | null; // String
     createdAt: NexusGenScalars['Date']; // Date!
     deadline: string; // String!
     excerpt: string; // String!
@@ -136,6 +177,9 @@ export interface NexusGenObjects {
     id: number; // Int!
     title: string; // String!
   }
+  CreateProjectResponse: { // root type
+    project: NexusGenRootTypes['Project']; // Project!
+  }
   Donation: { // root type
     amount: number; // Int!
     createdAt: NexusGenScalars['Date']; // Date!
@@ -388,6 +432,9 @@ export interface NexusGenFieldTypes {
     title: string; // String!
     votes_sum: number; // Int!
   }
+  CreateProjectResponse: { // field return type
+    project: NexusGenRootTypes['Project']; // Project!
+  }
   Donation: { // field return type
     amount: number; // Int!
     by: NexusGenRootTypes['User'] | null; // User
@@ -438,12 +485,15 @@ export interface NexusGenFieldTypes {
   Mutation: { // field return type
     confirmDonation: NexusGenRootTypes['Donation']; // Donation!
     confirmVote: NexusGenRootTypes['Vote']; // Vote!
+    createProject: NexusGenRootTypes['CreateProjectResponse'] | null; // CreateProjectResponse
     createStory: NexusGenRootTypes['Story'] | null; // Story
+    deleteProject: NexusGenRootTypes['CreateProjectResponse'] | null; // CreateProjectResponse
     deleteStory: NexusGenRootTypes['Story'] | null; // Story
     donate: NexusGenRootTypes['Donation']; // Donation!
     registerInTournament: NexusGenRootTypes['User'] | null; // User
     updateProfileDetails: NexusGenRootTypes['MyProfile'] | null; // MyProfile
     updateProfileRoles: NexusGenRootTypes['MyProfile'] | null; // MyProfile
+    updateProject: NexusGenRootTypes['CreateProjectResponse'] | null; // CreateProjectResponse
     updateTournamentRegistration: NexusGenRootTypes['ParticipationInfo'] | null; // ParticipationInfo
     updateUserPreferences: NexusGenRootTypes['MyProfile']; // MyProfile!
     vote: NexusGenRootTypes['Vote']; // Vote!
@@ -746,6 +796,9 @@ export interface NexusGenFieldTypeNames {
     title: 'String'
     votes_sum: 'Int'
   }
+  CreateProjectResponse: { // field return type name
+    project: 'Project'
+  }
   Donation: { // field return type name
     amount: 'Int'
     by: 'User'
@@ -796,12 +849,15 @@ export interface NexusGenFieldTypeNames {
   Mutation: { // field return type name
     confirmDonation: 'Donation'
     confirmVote: 'Vote'
+    createProject: 'CreateProjectResponse'
     createStory: 'Story'
+    deleteProject: 'CreateProjectResponse'
     deleteStory: 'Story'
     donate: 'Donation'
     registerInTournament: 'User'
     updateProfileDetails: 'MyProfile'
     updateProfileRoles: 'MyProfile'
+    updateProject: 'CreateProjectResponse'
     updateTournamentRegistration: 'ParticipationInfo'
     updateUserPreferences: 'MyProfile'
     vote: 'Vote'
@@ -1066,9 +1122,15 @@ export interface NexusGenArgTypes {
       payment_request: string; // String!
       preimage: string; // String!
     }
+    createProject: { // args
+      input?: NexusGenInputs['CreateProjectInput'] | null; // CreateProjectInput
+    }
     createStory: { // args
       data?: NexusGenInputs['StoryInputType'] | null; // StoryInputType
     }
+    deleteProject: { // args
+      id: number; // Int!
+    }
     deleteStory: { // args
       id: number; // Int!
     }
@@ -1085,6 +1147,9 @@ export interface NexusGenArgTypes {
     updateProfileRoles: { // args
       data?: NexusGenInputs['ProfileRolesInput'] | null; // ProfileRolesInput
     }
+    updateProject: { // args
+      input?: NexusGenInputs['UpdateProjectInput'] | null; // UpdateProjectInput
+    }
     updateTournamentRegistration: { // args
       data?: NexusGenInputs['UpdateTournamentRegistrationInput'] | null; // UpdateTournamentRegistrationInput
       tournament_id: number; // Int!
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index 4765fbc..9ba1f25 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -77,6 +77,29 @@ type Category {
   votes_sum: Int!
 }
 
+input CreateProjectInput {
+  capabilities: [String!]!
+  category_id: Int!
+  cover_image: ImageInput!
+  description: String!
+  discord: String
+  github: String
+  id: Int
+  launch_status: String!
+  members: [TeamMemberInput!]!
+  recruit_roles: [Int!]!
+  screenshots: [ImageInput!]!
+  tagline: String!
+  thumbnail_image: ImageInput!
+  title: String!
+  twitter: String
+  website: String!
+}
+
+type CreateProjectResponse {
+  project: Project!
+}
+
 """Date custom scalar type"""
 scalar Date
 
@@ -152,12 +175,15 @@ input MakerSkillInput {
 type Mutation {
   confirmDonation(payment_request: String!, preimage: String!): Donation!
   confirmVote(payment_request: String!, preimage: String!): Vote!
+  createProject(input: CreateProjectInput): CreateProjectResponse
   createStory(data: StoryInputType): Story
+  deleteProject(id: Int!): CreateProjectResponse
   deleteStory(id: Int!): Story
   donate(amount_in_sat: Int!): Donation!
   registerInTournament(data: RegisterInTournamentInput, tournament_id: Int!): User
   updateProfileDetails(data: ProfileDetailsInput): MyProfile
   updateProfileRoles(data: ProfileRolesInput): MyProfile
+  updateProject(input: UpdateProjectInput): CreateProjectResponse
   updateTournamentRegistration(data: UpdateTournamentRegistrationInput, tournament_id: Int!): ParticipationInfo
   updateUserPreferences(userKeys: [UserKeyInputType!]): MyProfile!
   vote(amount_in_sat: Int!, item_id: Int!, item_type: VOTE_ITEM_TYPE!): Vote!
@@ -357,6 +383,11 @@ type Tag {
   title: String!
 }
 
+input TeamMemberInput {
+  id: Int!
+  role: TEAM_MEMBER_ROLE!
+}
+
 type Tournament {
   cover_image: String!
   description: String!
@@ -436,6 +467,25 @@ type TournamentProjectsResponse {
   projects: [Project!]!
 }
 
+input UpdateProjectInput {
+  capabilities: [String!]!
+  category_id: Int!
+  cover_image: ImageInput!
+  description: String!
+  discord: String
+  github: String
+  id: Int
+  launch_status: String!
+  members: [TeamMemberInput!]!
+  recruit_roles: [Int!]!
+  screenshots: [ImageInput!]!
+  tagline: String!
+  thumbnail_image: ImageInput!
+  title: String!
+  twitter: String
+  website: String!
+}
+
 input UpdateTournamentRegistrationInput {
   email: String
   hacking_status: TournamentMakerHackingStatusEnum
diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index 8a95c8c..a1c1768 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -294,7 +294,7 @@ const getLnurlDetailsForProject = extendType({
 })
 
 const TeamMemberInput = inputObjectType({
-    name: 'CreateProjectInput',
+    name: 'TeamMemberInput',
     definition(t) {
         t.nonNull.int('id')
         t.nonNull.field("role", {

From b76279642707329969457c5df6fffccc5f901b26 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 15 Sep 2022 14:05:40 +0300
Subject: [PATCH 19/53] fix: page-container in list-project-page

---
 .../pages/ListProjectPage/ListProjectPage.tsx | 122 +++++++++---------
 1 file changed, 62 insertions(+), 60 deletions(-)

diff --git a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
index b3abf4c..0603de3 100644
--- a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
+++ b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
@@ -47,74 +47,76 @@ export default function ListProjectPage() {
                 <title>List a project</title>
                 <meta property="og:title" content='List a project' />
             </Helmet>
-            <div className="page-container grid grid-cols-1 md:grid-cols-4 gap-24">
-                {isMediumScreen ?
-                    <aside >
-                        <Card className="sticky-side-element">
-                            <p className="text-body2 font-bolder text-black mb-16">List a project</p>
-                            <ul className=' flex flex-col gap-8'>
-                                {links.map((link, idx) =>
-                                    <li key={idx}>
-                                        <button
-                                            //             className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
-                                            //  active:scale-95 transition-transform
-                                            // ${isActive ? 'bg-gray-100' : 'hover:bg-gray-50'}
-                                            // `}
-                                            className={`flex w-full items-start rounded-8 cursor-pointer font-bold p-12
+            <div className="page-container">
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-24">
+                    {isMediumScreen ?
+                        <aside >
+                            <Card className="sticky-side-element">
+                                <p className="text-body2 font-bolder text-black mb-16">List a project</p>
+                                <ul className=' flex flex-col gap-8'>
+                                    {links.map((link, idx) =>
+                                        <li key={idx}>
+                                            <button
+                                                //             className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
+                                                //  active:scale-95 transition-transform
+                                                // ${isActive ? 'bg-gray-100' : 'hover:bg-gray-50'}
+                                                // `}
+                                                className={`flex w-full items-start rounded-8 cursor-pointer font-bold p-12
                                                         active:scale-95 transition-transform
                                                         ${link.path === curTab ? 'bg-gray-100' : 'hover:bg-gray-50'}
                                                         `}
-                                            onClick={() => setCurTab(link.path)}
-                                        >
-                                            {link.text}
-                                        </button>
-                                    </li>)}
-                            </ul>
-                        </Card>
-                    </aside>
-                    :
-                    <aside
-                        className=" bg-white z-10 w-full sticky-top-element"
-                    >
-                        <div className="relative group overflow-hidden">
-                            <div className="border-b-2 border-gray-200" ref={viewportRef}>
-                                <div className="select-none w-full flex gap-16">
-                                    {links.map((link, idx) =>
-                                        <button
-                                            key={idx}
-                                            className={`flex min-w-max  items-start cursor-pointer font-bold py-12 px-8
+                                                onClick={() => setCurTab(link.path)}
+                                            >
+                                                {link.text}
+                                            </button>
+                                        </li>)}
+                                </ul>
+                            </Card>
+                        </aside>
+                        :
+                        <aside
+                            className=" bg-white z-10 w-full sticky-top-element"
+                        >
+                            <div className="relative group overflow-hidden">
+                                <div className="border-b-2 border-gray-200" ref={viewportRef}>
+                                    <div className="select-none w-full flex gap-16">
+                                        {links.map((link, idx) =>
+                                            <button
+                                                key={idx}
+                                                className={`flex min-w-max  items-start cursor-pointer font-bold py-12 px-8
                                                 active:scale-95 transition-transform`}
-                                            style={{
-                                                ...(link.path === curTab && {
-                                                    borderBottom: '2px solid var(--primary)',
-                                                    marginBottom: -2
-                                                }),
-                                            }
-                                            }
+                                                style={{
+                                                    ...(link.path === curTab && {
+                                                        borderBottom: '2px solid var(--primary)',
+                                                        marginBottom: -2
+                                                    }),
+                                                }
+                                                }
 
-                                        >
-                                            {link.text}
-                                        </button>
-                                    )}
+                                            >
+                                                {link.text}
+                                            </button>
+                                        )}
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    </aside>
-                }
-                <main className="md:col-span-3">
-                    <FormContainer>
-                        <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
-                            <div className="md:col-span-2">
-                                {curTab === tabs["project-details"].path && <ProjectDetailsTab />}
-                                {curTab === tabs["team"].path && <TeamTab />}
-                                {curTab === tabs["extras"].path && <ExtrasTab />}
+                        </aside>
+                    }
+                    <main className="md:col-span-3">
+                        <FormContainer>
+                            <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
+                                <div className="md:col-span-2">
+                                    {curTab === tabs["project-details"].path && <ProjectDetailsTab />}
+                                    {curTab === tabs["team"].path && <TeamTab />}
+                                    {curTab === tabs["extras"].path && <ExtrasTab />}
+                                </div>
+                                <div className="self-start sticky-side-element">
+                                    <SaveChangesCard currentTab={curTab} />
+                                </div>
                             </div>
-                            <div className="self-start sticky-side-element">
-                                <SaveChangesCard currentTab={curTab} />
-                            </div>
-                        </div>
-                    </FormContainer>
-                </main>
+                        </FormContainer>
+                    </main>
+                </div>
             </div>
         </>
     )

From 9710893a424bb10287ee453aa8d6d16f94665334 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 15 Sep 2022 14:57:02 +0300
Subject: [PATCH 20/53] fix: tabs urls state

---
 api/functions/graphql/nexus-typegen.ts        |   2 +
 api/functions/graphql/schema.graphql          |   2 +
 api/functions/graphql/types/project.js        |   2 +
 .../FormContainer/FormContainer.tsx           |  67 +++---
 .../FormContainer/listProject.graphql         |  65 ++++++
 .../RecruitRolesInput/RecruitRolesInput.tsx   |  21 +-
 .../SaveChangesCard/SaveChangesCard.tsx       |   9 +-
 .../TournamentsInput/TournamentsInput.tsx     |  28 +--
 .../pages/ListProjectPage/ListProjectPage.tsx |  12 +-
 src/graphql/index.tsx                         | 202 ++++++++++++++++++
 src/utils/interfaces/misc.interfaces.ts       |   2 +-
 11 files changed, 357 insertions(+), 55 deletions(-)
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/FormContainer/listProject.graphql

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index 03ffa44..faed966 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -43,6 +43,7 @@ export interface NexusGenInputs {
     tagline: string; // String!
     thumbnail_image: NexusGenInputs['ImageInput']; // ImageInput!
     title: string; // String!
+    tournaments: number[]; // [Int!]!
     twitter?: string | null; // String
     website: string; // String!
   }
@@ -107,6 +108,7 @@ export interface NexusGenInputs {
     tagline: string; // String!
     thumbnail_image: NexusGenInputs['ImageInput']; // ImageInput!
     title: string; // String!
+    tournaments: number[]; // [Int!]!
     twitter?: string | null; // String
     website: string; // String!
   }
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index 9ba1f25..fa85d9f 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -92,6 +92,7 @@ input CreateProjectInput {
   tagline: String!
   thumbnail_image: ImageInput!
   title: String!
+  tournaments: [Int!]!
   twitter: String
   website: String!
 }
@@ -482,6 +483,7 @@ input UpdateProjectInput {
   tagline: String!
   thumbnail_image: ImageInput!
   title: String!
+  tournaments: [Int!]!
   twitter: String
   website: String!
 }
diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index a1c1768..cf0f88b 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -330,6 +330,7 @@ const CreateProjectInput = inputObjectType({
         });
         t.nonNull.list.nonNull.int('recruit_roles'); // ids
         t.nonNull.string('launch_status');   // "wip" | "launched"
+        t.nonNull.list.nonNull.int('tournaments'); // ids
     }
 })
 
@@ -382,6 +383,7 @@ const UpdateProjectInput = inputObjectType({
         });
         t.nonNull.list.nonNull.int('recruit_roles'); // ids
         t.nonNull.string('launch_status');   // "wip" | "launched"
+        t.nonNull.list.nonNull.int('tournaments'); // ids
     }
 })
 
diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
index 835e765..09fb258 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -1,10 +1,12 @@
 import { FormProvider, NestedValue, Resolver, SubmitHandler, useForm } from "react-hook-form"
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Team_Member_Role } from "src/graphql";
+import { Team_Member_Role, UpdateProjectInput } from "src/graphql";
 import { PropsWithChildren, useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
 import { usePrompt } from "src/utils/hooks";
+import { imageSchema } from "src/utils/validation";
+import { Override } from "src/utils/interfaces";
 
 
 interface Props {
@@ -12,21 +14,38 @@ interface Props {
 }
 
 
-export interface IListProjectForm {
-    id?: number
-    title: string
-    website: string
-    tagline: string
-    description: string
-    thumbnail_image?: string
-    cover_image?: string
-    twitter?: string
-    discord?: string
-    github?: string
-    category_id: number
-    capabilities: NestedValue<string[]>
-    screenshots: NestedValue<string[]>
+// export interface IListProjectForm {
+//     id?: number
+//     title: string
+//     website: string
+//     tagline: string
+//     description: string
+//     thumbnail_image?: string
+//     cover_image?: string
+//     twitter?: string
+//     discord?: string
+//     github?: string
+//     category_id: number
+//     capabilities: NestedValue<string[]>
+//     screenshots: NestedValue<string[]>
 
+//     members: NestedValue<{
+//         id: number,
+//         name: string,
+//         jobTitle: string | null,
+//         avatar: string,
+//         role: Team_Member_Role,
+//     }[]>
+//     recruit_roles: NestedValue<string[]>
+
+
+//     launch_status: "wip" | "launched"
+//     tournaments: NestedValue<string[]>
+// }
+
+
+
+export type IListProjectForm = Override<UpdateProjectInput, {
     members: NestedValue<{
         id: number,
         name: string,
@@ -34,12 +53,10 @@ export interface IListProjectForm {
         avatar: string,
         role: Team_Member_Role,
     }[]>
-    recruit_roles: NestedValue<string[]>
-
-
-    launch_status: "wip" | "launched"
-    tournaments: NestedValue<string[]>
-}
+    capabilities: NestedValue<UpdateProjectInput['capabilities']>
+    recruit_roles: NestedValue<UpdateProjectInput['recruit_roles']>
+    tournaments: NestedValue<UpdateProjectInput['tournaments']>
+}>
 
 const schema: yup.SchemaOf<IListProjectForm> = yup.object({
     id: yup.number().optional(),
@@ -47,8 +64,8 @@ const schema: yup.SchemaOf<IListProjectForm> = yup.object({
     website: yup.string().trim().url().required(),
     tagline: yup.string().trim().required().min(10),
     description: yup.string().trim().required().min(50, 'Write at least 10 words descriping your project'),
-    thumbnail_image: yup.string().url().ensure(),
-    cover_image: yup.string().url().ensure(),
+    thumbnail_image: imageSchema.required(),
+    cover_image: imageSchema.required(),
     twitter: yup.string().url().ensure(),
     discord: yup.string().url().ensure(),
     github: yup.string().url().ensure(),
@@ -56,7 +73,7 @@ const schema: yup.SchemaOf<IListProjectForm> = yup.object({
     capabilities: yup.array().of(yup.string().required()).default([]),
     screenshots: yup.array().of(yup.string().required()).default([]),
     members: yup.array().of(yup.object() as any).default([]),
-    recruit_roles: yup.array().default([]),
+    recruit_roles: yup.array().of(yup.object() as any).default([]),
     launch_status: yup.mixed().oneOf(['wip', 'launched']).default('wip'),
     tournaments: yup.array().default([])
 }).required();
@@ -72,8 +89,6 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
             website: "",
             tagline: "",
             description: "",
-            thumbnail_image: "",
-            cover_image: "",
             twitter: "",
             discord: "",
             github: "",
diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/listProject.graphql b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/listProject.graphql
new file mode 100644
index 0000000..eaef155
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/listProject.graphql
@@ -0,0 +1,65 @@
+mutation CreateProject($input: CreateProjectInput) {
+  createProject(input: $input) {
+    project {
+      id
+      title
+      description
+      cover_image
+      thumbnail_image
+      screenshots
+      website
+      lightning_address
+      lnurl_callback_url
+      votes_count
+      category {
+        id
+        title
+        icon
+      }
+      tags {
+        id
+        title
+        icon
+      }
+      recruit_roles {
+        id
+        title
+        icon
+        level
+      }
+    }
+  }
+}
+
+mutation UpdateProject($input: UpdateProjectInput) {
+  updateProject(input: $input) {
+    project {
+      id
+      title
+      description
+      cover_image
+      thumbnail_image
+      screenshots
+      website
+      lightning_address
+      lnurl_callback_url
+      votes_count
+      category {
+        id
+        title
+        icon
+      }
+      tags {
+        id
+        title
+        icon
+      }
+      recruit_roles {
+        id
+        title
+        icon
+        level
+      }
+    }
+  }
+}
diff --git a/src/features/Projects/pages/ListProjectPage/Components/RecruitRolesInput/RecruitRolesInput.tsx b/src/features/Projects/pages/ListProjectPage/Components/RecruitRolesInput/RecruitRolesInput.tsx
index 6e6dcf2..e594680 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/RecruitRolesInput/RecruitRolesInput.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/RecruitRolesInput/RecruitRolesInput.tsx
@@ -1,15 +1,18 @@
 
 import Button from 'src/Components/Button/Button';
+import { useGetAllRolesQuery } from 'src/graphql';
 import { random } from 'src/utils/helperFunctions';
 
 interface Props {
-    value: string[];
-    onChange?: (v: string[]) => void;
+    value: number[];
+    onChange?: (v: number[]) => void;
 }
 
 export default function RecruitRolesInput(props: Props) {
 
-    const handleClick = (clickedValue: string) => {
+    const query = useGetAllRolesQuery();
+
+    const handleClick = (clickedValue: number) => {
         if (props.value.includes(clickedValue))
             props.onChange?.(props.value.filter(v => v !== clickedValue));
         else
@@ -19,7 +22,7 @@ export default function RecruitRolesInput(props: Props) {
 
     return (
         <div className="flex flex-wrap gap-8">
-            {false ?
+            {query.loading ?
                 Array(10).fill(0).map((_, idx) =>
                     <div
                         key={idx}
@@ -27,22 +30,22 @@ export default function RecruitRolesInput(props: Props) {
                         <span className='invisible'>{"loading category skeleton".slice(random(6, 12))}</span>
                     </div>)
                 :
-                data.map(item =>
+                query.data?.getAllMakersRoles.map(item =>
                     <Button
-                        key={item.text}
+                        key={item.id}
                         color='none'
                         size='sm'
                         className={`
                         border border-gray-200
-                        ${props.value.includes(item.text) ?
+                        ${props.value.includes(item.id) ?
                                 'text-primary-600 bg-primary-100'
                                 :
                                 "bg-gray-100"
                             }
                         `}
-                        onClick={() => handleClick(item.text)}
+                        onClick={() => handleClick(item.id)}
                     >
-                        {item.icon} {item.text}
+                        {item.icon} {item.title}
                     </Button>)
             }
         </div>
diff --git a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
index 0cc6e49..6b4c539 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
@@ -12,6 +12,7 @@ import { openModal } from 'src/redux/features/modals.slice';
 
 interface Props {
     currentTab: keyof typeof tabs
+    onNext: () => void
 }
 
 export default function SaveChangesCard(props: Props) {
@@ -41,7 +42,7 @@ export default function SaveChangesCard(props: Props) {
                     project: {
                         id: data.id!,
                         name: data.title,
-                        img: data.thumbnail_image || "https://picsum.photos/id/870/150/150.jpg",
+                        img: data.thumbnail_image.url || "https://picsum.photos/id/870/150/150.jpg",
                         tagline: data.tagline,
                     }
                 }
@@ -69,7 +70,7 @@ export default function SaveChangesCard(props: Props) {
             return <Button
                 color="primary"
                 fullWidth
-                href={tabs.team.path}
+                onClick={props.onNext}
             >
                 Next step: {tabs.team.text}
             </Button>
@@ -77,7 +78,7 @@ export default function SaveChangesCard(props: Props) {
             return <Button
                 color="primary"
                 fullWidth
-                href={tabs.extras.path}
+                onClick={props.onNext}
             >
                 Next step: {tabs.extras.text}
             </Button>
@@ -97,7 +98,7 @@ export default function SaveChangesCard(props: Props) {
         <Card className='flex flex-col gap-24'>
             <div className='flex gap-8 items-center'>
                 {img ?
-                    <Avatar width={48} src={img} /> :
+                    <Avatar width={48} src={img.url} /> :
                     <div className="bg-gray-50 border border-gray-200 rounded-full w-48 h-48 shrink-0"></div>
                 }
                 <div className='overflow-hidden'>
diff --git a/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.tsx b/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.tsx
index d09130c..50248f4 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.tsx
@@ -2,14 +2,14 @@ import Button from 'src/Components/Button/Button';
 import { random } from 'src/utils/helperFunctions';
 
 interface Props {
-    value: string[];
-    onChange?: (v: string[]) => void;
+    value: number[];
+    onChange?: (v: number[]) => void;
 }
 
 export default function TournamentsInput(props: Props) {
 
 
-    const handleClick = (clickedValue: string) => {
+    const handleClick = (clickedValue: number) => {
         if (props.value.includes(clickedValue))
             props.onChange?.(props.value.filter(v => v !== clickedValue));
         else
@@ -29,20 +29,20 @@ export default function TournamentsInput(props: Props) {
                 :
                 data.map(item =>
                     <Button
-                        key={item.text}
+                        key={item.id}
                         color='none'
                         size='sm'
                         className={`
                         border border-gray-200
-                        ${props.value.includes(item.text) ?
-                                'text-primary-600 bg-primary-100'
+                        ${props.value.includes(item.id) ?
+                                'title-primary-600 bg-primary-100'
                                 :
                                 "bg-gray-100"
                             }
                         `}
-                        onClick={() => handleClick(item.text)}
+                        onClick={() => handleClick(item.id)}
                     >
-                        {item.text}
+                        {item.title}
                     </Button>)
             }
         </div>
@@ -51,15 +51,19 @@ export default function TournamentsInput(props: Props) {
 
 const data = [
     {
-        text: 'ShockTheWeb3',
+        id: 1,
+        title: 'ShockTheWeb3',
     },
     {
-        text: 'Adopting Bitcoin 2022',
+        id: 2,
+        title: 'Adopting Bitcoin 2022',
     },
     {
-        text: 'TabConf',
+        id: 3,
+        title: 'TabConf',
     },
     {
-        text: 'Blockstream',
+        id: 4,
+        title: 'Blockstream',
     },
 ]
diff --git a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
index 0603de3..5cf82b5 100644
--- a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
+++ b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
@@ -75,7 +75,7 @@ export default function ListProjectPage() {
                         </aside>
                         :
                         <aside
-                            className=" bg-white z-10 w-full sticky-top-element"
+                            className=" bg-white z-10 w-full sticky-top-element !col-start-1"
                         >
                             <div className="relative group overflow-hidden">
                                 <div className="border-b-2 border-gray-200" ref={viewportRef}>
@@ -92,7 +92,7 @@ export default function ListProjectPage() {
                                                     }),
                                                 }
                                                 }
-
+                                                onClick={() => setCurTab(link.path)}
                                             >
                                                 {link.text}
                                             </button>
@@ -111,7 +111,13 @@ export default function ListProjectPage() {
                                     {curTab === tabs["extras"].path && <ExtrasTab />}
                                 </div>
                                 <div className="self-start sticky-side-element">
-                                    <SaveChangesCard currentTab={curTab} />
+                                    <SaveChangesCard
+                                        currentTab={curTab}
+                                        onNext={() => {
+                                            if (curTab === 'project-details') setCurTab(tabs['team'].path)
+                                            else if (curTab === 'team') setCurTab(tabs['extras'].path)
+                                        }}
+                                    />
                                 </div>
                             </div>
                         </FormContainer>
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index a8dbd61..1098ea4 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -102,6 +102,31 @@ export type Category = {
   votes_sum: Scalars['Int'];
 };
 
+export type CreateProjectInput = {
+  capabilities: Array<Scalars['String']>;
+  category_id: Scalars['Int'];
+  cover_image: ImageInput;
+  description: Scalars['String'];
+  discord?: InputMaybe<Scalars['String']>;
+  github?: InputMaybe<Scalars['String']>;
+  id?: InputMaybe<Scalars['Int']>;
+  launch_status: Scalars['String'];
+  members: Array<TeamMemberInput>;
+  recruit_roles: Array<Scalars['Int']>;
+  screenshots: Array<ImageInput>;
+  tagline: Scalars['String'];
+  thumbnail_image: ImageInput;
+  title: Scalars['String'];
+  tournaments: Array<Scalars['Int']>;
+  twitter?: InputMaybe<Scalars['String']>;
+  website: Scalars['String'];
+};
+
+export type CreateProjectResponse = {
+  __typename?: 'CreateProjectResponse';
+  project: Project;
+};
+
 export type Donation = {
   __typename?: 'Donation';
   amount: Scalars['Int'];
@@ -182,12 +207,15 @@ export type Mutation = {
   __typename?: 'Mutation';
   confirmDonation: Donation;
   confirmVote: Vote;
+  createProject: Maybe<CreateProjectResponse>;
   createStory: Maybe<Story>;
+  deleteProject: Maybe<CreateProjectResponse>;
   deleteStory: Maybe<Story>;
   donate: Donation;
   registerInTournament: Maybe<User>;
   updateProfileDetails: Maybe<MyProfile>;
   updateProfileRoles: Maybe<MyProfile>;
+  updateProject: Maybe<CreateProjectResponse>;
   updateTournamentRegistration: Maybe<ParticipationInfo>;
   updateUserPreferences: MyProfile;
   vote: Vote;
@@ -206,11 +234,21 @@ export type MutationConfirmVoteArgs = {
 };
 
 
+export type MutationCreateProjectArgs = {
+  input: InputMaybe<CreateProjectInput>;
+};
+
+
 export type MutationCreateStoryArgs = {
   data: InputMaybe<StoryInputType>;
 };
 
 
+export type MutationDeleteProjectArgs = {
+  id: Scalars['Int'];
+};
+
+
 export type MutationDeleteStoryArgs = {
   id: Scalars['Int'];
 };
@@ -237,6 +275,11 @@ export type MutationUpdateProfileRolesArgs = {
 };
 
 
+export type MutationUpdateProjectArgs = {
+  input: InputMaybe<UpdateProjectInput>;
+};
+
+
 export type MutationUpdateTournamentRegistrationArgs = {
   data: InputMaybe<UpdateTournamentRegistrationInput>;
   tournament_id: Scalars['Int'];
@@ -577,6 +620,11 @@ export type Tag = {
   title: Scalars['String'];
 };
 
+export type TeamMemberInput = {
+  id: Scalars['Int'];
+  role: Team_Member_Role;
+};
+
 export type Tournament = {
   __typename?: 'Tournament';
   cover_image: Scalars['String'];
@@ -664,6 +712,26 @@ export type TournamentProjectsResponse = {
   projects: Array<Project>;
 };
 
+export type UpdateProjectInput = {
+  capabilities: Array<Scalars['String']>;
+  category_id: Scalars['Int'];
+  cover_image: ImageInput;
+  description: Scalars['String'];
+  discord?: InputMaybe<Scalars['String']>;
+  github?: InputMaybe<Scalars['String']>;
+  id?: InputMaybe<Scalars['Int']>;
+  launch_status: Scalars['String'];
+  members: Array<TeamMemberInput>;
+  recruit_roles: Array<Scalars['Int']>;
+  screenshots: Array<ImageInput>;
+  tagline: Scalars['String'];
+  thumbnail_image: ImageInput;
+  title: Scalars['String'];
+  tournaments: Array<Scalars['Int']>;
+  twitter?: InputMaybe<Scalars['String']>;
+  website: Scalars['String'];
+};
+
 export type UpdateTournamentRegistrationInput = {
   email?: InputMaybe<Scalars['String']>;
   hacking_status?: InputMaybe<TournamentMakerHackingStatusEnum>;
@@ -914,6 +982,20 @@ export type HottestProjectsQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type HottestProjectsQuery = { __typename?: 'Query', hottestProjects: Array<{ __typename?: 'Project', id: number, thumbnail_image: string, title: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }> };
 
+export type CreateProjectMutationVariables = Exact<{
+  input: InputMaybe<CreateProjectInput>;
+}>;
+
+
+export type CreateProjectMutation = { __typename?: 'Mutation', createProject: { __typename?: 'CreateProjectResponse', project: { __typename?: 'Project', id: number, title: string, description: string, cover_image: string, thumbnail_image: string, screenshots: Array<string>, website: string, lightning_address: string | null, lnurl_callback_url: string | null, votes_count: number, category: { __typename?: 'Category', id: number, title: string, icon: string | null }, tags: Array<{ __typename?: 'Tag', id: number, title: string, icon: string | null }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> } } | null };
+
+export type UpdateProjectMutationVariables = Exact<{
+  input: InputMaybe<UpdateProjectInput>;
+}>;
+
+
+export type UpdateProjectMutation = { __typename?: 'Mutation', updateProject: { __typename?: 'CreateProjectResponse', project: { __typename?: 'Project', id: number, title: string, description: string, cover_image: string, thumbnail_image: string, screenshots: Array<string>, website: string, lightning_address: string | null, lnurl_callback_url: string | null, votes_count: number, category: { __typename?: 'Category', id: number, title: string, icon: string | null }, tags: Array<{ __typename?: 'Tag', id: number, title: string, icon: string | null }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> } } | null };
+
 export type ProjectDetailsQueryVariables = Exact<{
   projectId: Scalars['Int'];
 }>;
@@ -2284,6 +2366,126 @@ export function useHottestProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOp
 export type HottestProjectsQueryHookResult = ReturnType<typeof useHottestProjectsQuery>;
 export type HottestProjectsLazyQueryHookResult = ReturnType<typeof useHottestProjectsLazyQuery>;
 export type HottestProjectsQueryResult = Apollo.QueryResult<HottestProjectsQuery, HottestProjectsQueryVariables>;
+export const CreateProjectDocument = gql`
+    mutation CreateProject($input: CreateProjectInput) {
+  createProject(input: $input) {
+    project {
+      id
+      title
+      description
+      cover_image
+      thumbnail_image
+      screenshots
+      website
+      lightning_address
+      lnurl_callback_url
+      votes_count
+      category {
+        id
+        title
+        icon
+      }
+      tags {
+        id
+        title
+        icon
+      }
+      recruit_roles {
+        id
+        title
+        icon
+        level
+      }
+    }
+  }
+}
+    `;
+export type CreateProjectMutationFn = Apollo.MutationFunction<CreateProjectMutation, CreateProjectMutationVariables>;
+
+/**
+ * __useCreateProjectMutation__
+ *
+ * To run a mutation, you first call `useCreateProjectMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateProjectMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createProjectMutation, { data, loading, error }] = useCreateProjectMutation({
+ *   variables: {
+ *      input: // value for 'input'
+ *   },
+ * });
+ */
+export function useCreateProjectMutation(baseOptions?: Apollo.MutationHookOptions<CreateProjectMutation, CreateProjectMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CreateProjectMutation, CreateProjectMutationVariables>(CreateProjectDocument, options);
+      }
+export type CreateProjectMutationHookResult = ReturnType<typeof useCreateProjectMutation>;
+export type CreateProjectMutationResult = Apollo.MutationResult<CreateProjectMutation>;
+export type CreateProjectMutationOptions = Apollo.BaseMutationOptions<CreateProjectMutation, CreateProjectMutationVariables>;
+export const UpdateProjectDocument = gql`
+    mutation UpdateProject($input: UpdateProjectInput) {
+  updateProject(input: $input) {
+    project {
+      id
+      title
+      description
+      cover_image
+      thumbnail_image
+      screenshots
+      website
+      lightning_address
+      lnurl_callback_url
+      votes_count
+      category {
+        id
+        title
+        icon
+      }
+      tags {
+        id
+        title
+        icon
+      }
+      recruit_roles {
+        id
+        title
+        icon
+        level
+      }
+    }
+  }
+}
+    `;
+export type UpdateProjectMutationFn = Apollo.MutationFunction<UpdateProjectMutation, UpdateProjectMutationVariables>;
+
+/**
+ * __useUpdateProjectMutation__
+ *
+ * To run a mutation, you first call `useUpdateProjectMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useUpdateProjectMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [updateProjectMutation, { data, loading, error }] = useUpdateProjectMutation({
+ *   variables: {
+ *      input: // value for 'input'
+ *   },
+ * });
+ */
+export function useUpdateProjectMutation(baseOptions?: Apollo.MutationHookOptions<UpdateProjectMutation, UpdateProjectMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<UpdateProjectMutation, UpdateProjectMutationVariables>(UpdateProjectDocument, options);
+      }
+export type UpdateProjectMutationHookResult = ReturnType<typeof useUpdateProjectMutation>;
+export type UpdateProjectMutationResult = Apollo.MutationResult<UpdateProjectMutation>;
+export type UpdateProjectMutationOptions = Apollo.BaseMutationOptions<UpdateProjectMutation, UpdateProjectMutationVariables>;
 export const ProjectDetailsDocument = gql`
     query ProjectDetails($projectId: Int!) {
   getProject(id: $projectId) {
diff --git a/src/utils/interfaces/misc.interfaces.ts b/src/utils/interfaces/misc.interfaces.ts
index c906a59..8e4b3bf 100644
--- a/src/utils/interfaces/misc.interfaces.ts
+++ b/src/utils/interfaces/misc.interfaces.ts
@@ -23,7 +23,7 @@ export type ControlledStateHandler<T, IsMulti extends boolean> = {
 }
 
 
-export type Override<A, B> = Omit<A, keyof B> & B;
+export type Override<A, B extends { [Key in keyof A]?: any }> = Omit<A, keyof B> & B;
 
 
 export type Image = string;
\ No newline at end of file

From 318367de2d6c1d3c46c3fd44b81057ff5a1153b5 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Thu, 15 Sep 2022 15:27:27 +0300
Subject: [PATCH 21/53] feat: add images input components to list-project,
 connect with api

---
 .../CoverImageInput/CoverImageInput.tsx       |  4 +-
 .../ScreenshotsInput.stories.tsx              |  9 ++--
 .../ScreenshotsInput/ScreenshotsInput.tsx     | 21 ++++----
 .../FormContainer/FormContainer.tsx           |  6 +--
 .../ProjectDetailsTab/ProjectDetailsTab.tsx   | 52 ++++++++++++++++---
 .../SaveChangesCard/SaveChangesCard.tsx       | 24 ++++++---
 .../pages/ListProjectPage/ListProjectPage.tsx |  1 +
 7 files changed, 80 insertions(+), 37 deletions(-)

diff --git a/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.tsx b/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.tsx
index 975366d..b4975a4 100644
--- a/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.tsx
+++ b/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.tsx
@@ -34,7 +34,7 @@ export default function CoverImageInput(props: Props) {
                 wrapperClass='h-full'
                 render={({ img, isUploading, isDraggingOnWindow }) =>
                     <div className="w-full h-full group relative ">
-                        {!img && <div className='w-full h-full flex flex-col justify-center items-center bg-gray-500 outline outline-2 outline-gray-200'>
+                        {!img && <div className={`w-full h-full flex flex-col justify-center items-center bg-gray-500 outline outline-2 outline-gray-200  ${props.rounded ?? 'rounded-12'}`}>
                             <p className="text-center text-gray-100 text-body1 md:text-h1 mb-8"><FaImage /></p>
                             <div className={`text-gray-100 text-center text-body4`}>
                                 Drop a <span className="font-bold">COVER IMAGE</span> here or  <br />  <span className="text-blue-300 underline">Click to browse</span>
@@ -56,7 +56,7 @@ export default function CoverImageInput(props: Props) {
                         </>}
                         {isUploading &&
                             <div
-                                className="absolute inset-0 bg-gray-400  bg-opacity-60 flex flex-col justify-center items-center text-white font-bold transition-transform"
+                                className={`absolute inset-0 bg-gray-400  ${props.rounded ?? 'rounded-12'} bg-opacity-60 flex flex-col justify-center items-center text-white font-bold transition-transform`}
                             >
                                 <RotatingLines
                                     strokeColor="#fff"
diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.stories.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.stories.tsx
index 1575707..e308f85 100644
--- a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.stories.tsx
+++ b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.stories.tsx
@@ -1,13 +1,14 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ScreenshotsInput, { ScreenshotType } from './ScreenshotsInput';
+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<ScreenshotType> }>({
+        WrapFormController<{ screenshots: Array<ImageInput> }>({
             logValues: true,
             name: "screenshots",
             defaultValues: {
@@ -29,7 +30,7 @@ Empty.args = {
 
 export const WithValues = Template.bind({});
 WithValues.decorators = [
-    WrapFormController<{ screenshots: Array<ScreenshotType> }>({
+    WrapFormController<{ screenshots: Array<ImageInput> }>({
         logValues: true,
         name: "screenshots",
         defaultValues: {
@@ -51,7 +52,7 @@ WithValues.args = {
 
 export const Full = Template.bind({});
 Full.decorators = [
-    WrapFormController<{ screenshots: Array<ScreenshotType> }>({
+    WrapFormController<{ screenshots: Array<ImageInput> }>({
         logValues: true,
         name: "screenshots",
         defaultValues: {
diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx
index b5bf6c0..4893118 100644
--- a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx
+++ b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx
@@ -11,6 +11,8 @@ 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";
 
 
 
@@ -20,15 +22,10 @@ const mockSenderEnhancer = getMockSenderEnhancer({
 
 const MAX_UPLOAD_COUNT = 4 as const;
 
-export interface ScreenshotType {
-    id: string,
-    name: string,
-    url: string;
-}
 
 interface Props {
-    value: ScreenshotType[],
-    onChange: (new_value: ScreenshotType[]) => void
+    value: ImageInput[],
+    onChange: (new_value: ImageInput[]) => void
 }
 
 
@@ -49,7 +46,6 @@ export default function ScreenshotsInput(props: Props) {
             multiple={true}
             inputFieldName='file'
             grouped={false}
-            enhancer={mockSenderEnhancer}
             listeners={{
                 [UPLOADER_EVENTS.BATCH_ADD]: (batch) => {
                     setUploadingCount(v => v + batch.items.length)
@@ -96,17 +92,18 @@ const DropZone = forwardRef<any, any>((props, ref) => {
 
 
     useRequestPreSend(async (data) => {
-
         const filename = data.items?.[0].file.name ?? ''
 
-        // const url = await fetchUploadUrl({ filename });
+        const res = await fetchUploadImageUrl({ filename });
+
         return {
             options: {
                 destination: {
-                    url: "URL"
-                }
+                    url: res.uploadURL
+                },
             }
         }
+
     })
 
     const onZoneClick = useCallback(
diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
index 09fb258..add3831 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -71,11 +71,11 @@ const schema: yup.SchemaOf<IListProjectForm> = yup.object({
     github: yup.string().url().ensure(),
     category_id: yup.number().required("Please choose a category"),
     capabilities: yup.array().of(yup.string().required()).default([]),
-    screenshots: yup.array().of(yup.string().required()).default([]),
+    screenshots: yup.array().of(imageSchema.required()).default([]),
     members: yup.array().of(yup.object() as any).default([]),
-    recruit_roles: yup.array().of(yup.object() as any).default([]),
+    recruit_roles: yup.array().of(yup.number().required()).default([]),
     launch_status: yup.mixed().oneOf(['wip', 'launched']).default('wip'),
-    tournaments: yup.array().default([])
+    tournaments: yup.array().of(yup.number().required()).default([])
 }).required();
 
 export default function FormContainer(props: PropsWithChildren<Props>) {
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
index 68ff942..11a2dce 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
@@ -5,6 +5,9 @@ import { FiCamera, FiGithub, FiTwitter } from "react-icons/fi";
 import CategoriesInput from "../CategoriesInput/CategoriesInput";
 import CapabilitiesInput from "../CapabilitiesInput/CapabilitiesInput";
 import { IListProjectForm } from "../FormContainer/FormContainer";
+import AvatarInput from "src/Components/Inputs/FilesInputs/AvatarInput/AvatarInput";
+import CoverImageInput from "src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput";
+import ScreenshotsInput from "src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput";
 
 interface Props { }
 
@@ -21,15 +24,28 @@ export default function ProjectDetailsTab(props: Props) {
         <div className="md:col-span-2 flex flex-col gap-24">
             <Card className="" defaultPadding={false}>
                 <div className="bg-gray-600 relative h-[160px] rounded-t-12 md:rounded-t-16">
+                    <Controller
+                        control={control}
+                        name="cover_image"
+                        render={({ field: { onChange, value, onBlur, ref } }) => <CoverImageInput
+                            value={value}
+                            rounded='rounded-t-12 md:rounded-t-16'
+                            onChange={e => {
+                                onChange(e)
+                            }}
+                        // uploadText='Add a cover image'
+                        />
+
+                        }
+                    />
                     <div className="absolute left-24 bottom-0 translate-y-1/2">
-                        {/* <Avatar src={data.avatar} width={120} /> */}
-                        <div
-                            className="rounded-full w-[120px] aspect-square border-2 border-gray-200 bg-white flex flex-col gap-8 items-center justify-center"
-                            role={'button'}
-                        >
-                            <FiCamera className="text-gray-400 text-h2" />
-                            <span className="text-gray-400 text-body6">Add image</span>
-                        </div>
+                        <Controller
+                            control={control}
+                            name="thumbnail_image"
+                            render={({ field: { onChange, value } }) => (
+                                <AvatarInput value={value} onChange={onChange} width={120} />
+                            )}
+                        />
                     </div>
                 </div>
                 <div className="p-16 md:p-24 mt-64">
@@ -184,6 +200,26 @@ export default function ProjectDetailsTab(props: Props) {
                     {errors.capabilities && <p className='input-error'>{errors.capabilities?.message}</p>}
                 </div>
             </Card>
+
+            <Card>
+                <h2 className="text-body2 font-bolder">📷  Screenshots</h2>
+                <p className="text-body4 font-light text-gray-600 mt-8">Choose up to 4 images from your project</p>
+                <div className="mt-24">
+                    <Controller
+                        control={control}
+                        name="screenshots"
+                        render={({ field: { onChange, value, onBlur, ref } }) => <ScreenshotsInput
+                            value={value}
+                            onChange={e => {
+                                onChange(e)
+                            }}
+                        />
+
+                        }
+                    />
+                    {errors.capabilities && <p className='input-error'>{errors.capabilities?.message}</p>}
+                </div>
+            </Card>
         </div>
     )
 }
diff --git a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
index 6b4c539..549982f 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
@@ -9,31 +9,40 @@ import { tabs } from '../../ListProjectPage'
 import { NotificationsService } from 'src/services'
 import { useAppDispatch } from 'src/utils/hooks';
 import { openModal } from 'src/redux/features/modals.slice';
+import { useCreateProjectMutation, useUpdateProjectMutation } from 'src/graphql'
 
 interface Props {
     currentTab: keyof typeof tabs
     onNext: () => void
+    onBackToFirstPage: () => void
 }
 
 export default function SaveChangesCard(props: Props) {
 
     const { handleSubmit, formState: { errors, isDirty, }, reset, getValues, watch } = useFormContext<IListProjectForm>();
-    const navigate = useNavigate();
     const dispatch = useAppDispatch();
 
     const [isLoading, setIsLoading] = useState(false);
     const isUpdating = useMemo(() => !!getValues('id'), [getValues]);
 
+    const [update, updatingStatus] = useUpdateProjectMutation();
+    const [create, creatingStatus] = useCreateProjectMutation()
 
-    const [img, name, tagline] = watch(['thumbnail_image', 'title', 'tagline'])
+
+    const [img, name, tagline] = watch(['thumbnail_image', 'title', 'tagline',])
 
     const clickCancel = () => {
         if (window.confirm('You might lose some unsaved changes. Are you sure you want to continue?'))
             reset();
     }
 
-    const clickSubmit = handleSubmit<IListProjectForm>(data => {
-
+    const clickSubmit = handleSubmit<IListProjectForm>(async data => {
+        try {
+            await (isUpdating ? update({ variables: { input: data } }) : create({ variables: { input: data } }))
+        } catch (error) {
+            NotificationsService.error("A network error happened...");
+            return;
+        }
         if (isUpdating)
             NotificationsService.success("Saved changes successfully")
         else {
@@ -48,10 +57,9 @@ export default function SaveChangesCard(props: Props) {
                 }
             }))
         }
-        console.log(data);
-    }, () => {
+    }, (errors) => {
         NotificationsService.error("Please fill all the required fields");
-        navigate(tabs['project-details'].path)
+        props.onBackToFirstPage()
     })
 
 
@@ -91,7 +99,7 @@ export default function SaveChangesCard(props: Props) {
             >
                 List your product
             </Button>
-    }, [clickSubmit, isDirty, isLoading, isUpdating, props.currentTab])
+    }, [clickSubmit, isDirty, isLoading, isUpdating, props.currentTab, props.onNext])
 
 
     return (
diff --git a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
index 5cf82b5..9f70496 100644
--- a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
+++ b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
@@ -117,6 +117,7 @@ export default function ListProjectPage() {
                                             if (curTab === 'project-details') setCurTab(tabs['team'].path)
                                             else if (curTab === 'team') setCurTab(tabs['extras'].path)
                                         }}
+                                        onBackToFirstPage={() => setCurTab(tabs["project-details"].path)}
                                     />
                                 </div>
                             </div>

From da7e909b46bc5b0d69942ba6eaa28246e01302b0 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Fri, 16 Sep 2022 11:42:39 +0300
Subject: [PATCH 22/53] feat: add "hashtag" field to api, add images validation
 to FE, make launch_status an enum field

---
 api/functions/graphql/nexus-typegen.ts        |  7 ++-
 api/functions/graphql/schema.graphql          | 11 +++-
 api/functions/graphql/types/project.js        | 15 ++++-
 .../Components/ExtrasTab/ExtrasTab.tsx        | 10 ++-
 .../FormContainer/FormContainer.tsx           | 61 ++++++-------------
 .../ProjectDetailsTab/ProjectDetailsTab.tsx   | 32 +++++++---
 .../SaveChangesCard/SaveChangesCard.tsx       |  8 +--
 src/graphql/index.tsx                         | 11 +++-
 8 files changed, 88 insertions(+), 67 deletions(-)

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index faed966..605b75d 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -35,8 +35,9 @@ export interface NexusGenInputs {
     description: string; // String!
     discord?: string | null; // String
     github?: string | null; // String
+    hashtag: string; // String!
     id?: number | null; // Int
-    launch_status: string; // String!
+    launch_status: NexusGenEnums['ProjectLaunchStatusEnum']; // ProjectLaunchStatusEnum!
     members: NexusGenInputs['TeamMemberInput'][]; // [TeamMemberInput!]!
     recruit_roles: number[]; // [Int!]!
     screenshots: NexusGenInputs['ImageInput'][]; // [ImageInput!]!
@@ -100,8 +101,9 @@ export interface NexusGenInputs {
     description: string; // String!
     discord?: string | null; // String
     github?: string | null; // String
+    hashtag: string; // String!
     id?: number | null; // Int
-    launch_status: string; // String!
+    launch_status: NexusGenEnums['ProjectLaunchStatusEnum']; // ProjectLaunchStatusEnum!
     members: NexusGenInputs['TeamMemberInput'][]; // [TeamMemberInput!]!
     recruit_roles: number[]; // [Int!]!
     screenshots: NexusGenInputs['ImageInput'][]; // [ImageInput!]!
@@ -124,6 +126,7 @@ export interface NexusGenInputs {
 
 export interface NexusGenEnums {
   POST_TYPE: "Bounty" | "Question" | "Story"
+  ProjectLaunchStatusEnum: "Launched" | "WIP"
   RoleLevelEnum: 3 | 0 | 1 | 2 | 4
   TEAM_MEMBER_ROLE: "Admin" | "Maker"
   TournamentEventTypeEnum: 2 | 3 | 0 | 1
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index fa85d9f..761d57b 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -84,8 +84,9 @@ input CreateProjectInput {
   description: String!
   discord: String
   github: String
+  hashtag: String!
   id: Int
-  launch_status: String!
+  launch_status: ProjectLaunchStatusEnum!
   members: [TeamMemberInput!]!
   recruit_roles: [Int!]!
   screenshots: [ImageInput!]!
@@ -288,6 +289,11 @@ type Project {
   website: String!
 }
 
+enum ProjectLaunchStatusEnum {
+  Launched
+  WIP
+}
+
 type Query {
   allCategories: [Category!]!
   allProjects(skip: Int = 0, take: Int = 50): [Project!]!
@@ -475,8 +481,9 @@ input UpdateProjectInput {
   description: String!
   discord: String
   github: String
+  hashtag: String!
   id: Int
-  launch_status: String!
+  launch_status: ProjectLaunchStatusEnum!
   members: [TeamMemberInput!]!
   recruit_roles: [Int!]!
   screenshots: [ImageInput!]!
diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index cf0f88b..625a22e 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -303,11 +303,17 @@ const TeamMemberInput = inputObjectType({
     }
 })
 
+const ProjectLaunchStatusEnum = enumType({
+    name: 'ProjectLaunchStatusEnum',
+    members: ['WIP', 'Launched'],
+});
+
 const CreateProjectInput = inputObjectType({
     name: 'CreateProjectInput',
     definition(t) {
         t.int('id') // exists in update
         t.nonNull.string('title');
+        t.nonNull.string('hashtag');
         t.nonNull.string('website');
         t.nonNull.string('tagline');
         t.nonNull.string('description');
@@ -329,7 +335,9 @@ const CreateProjectInput = inputObjectType({
             type: TeamMemberInput
         });
         t.nonNull.list.nonNull.int('recruit_roles'); // ids
-        t.nonNull.string('launch_status');   // "wip" | "launched"
+        t.nonNull.field('launch_status', {
+            type: ProjectLaunchStatusEnum
+        });
         t.nonNull.list.nonNull.int('tournaments'); // ids
     }
 })
@@ -361,6 +369,7 @@ const UpdateProjectInput = inputObjectType({
     definition(t) {
         t.int('id')
         t.nonNull.string('title');
+        t.nonNull.string('hashtag');
         t.nonNull.string('website');
         t.nonNull.string('tagline');
         t.nonNull.string('description');
@@ -382,7 +391,9 @@ const UpdateProjectInput = inputObjectType({
             type: TeamMemberInput
         });
         t.nonNull.list.nonNull.int('recruit_roles'); // ids
-        t.nonNull.string('launch_status');   // "wip" | "launched"
+        t.nonNull.field('launch_status', {
+            type: ProjectLaunchStatusEnum
+        });
         t.nonNull.list.nonNull.int('tournaments'); // ids
     }
 })
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ExtrasTab/ExtrasTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ExtrasTab/ExtrasTab.tsx
index 178ac90..18deacc 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/ExtrasTab/ExtrasTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/ExtrasTab/ExtrasTab.tsx
@@ -2,18 +2,16 @@ import { Controller, useFormContext } from "react-hook-form"
 import Card from "src/Components/Card/Card";
 import TournamentsInput from "../TournamentsInput/TournamentsInput";
 import { IListProjectForm } from "../FormContainer/FormContainer";
+import { ProjectLaunchStatusEnum } from "src/graphql";
 
 interface Props { }
 
 export default function ExtrasTab(props: Props) {
 
-    const { register, formState: { errors, isDirty, }, control } = useFormContext<IListProjectForm>();
+    const { register, formState: { errors, }, control } = useFormContext<IListProjectForm>();
 
 
 
-    // usePrompt('You may have some unsaved changes. You still want to leave?', isDirty)
-
-
     return (
         <div className="flex flex-col gap-24">
             <Card>
@@ -25,7 +23,7 @@ export default function ExtrasTab(props: Props) {
                             {...register("launch_status")}
                             type="radio"
                             name="launch_status"
-                            value='wip'
+                            value={ProjectLaunchStatusEnum.Wip}
                         />
                         <div>
                             <p className="text-body4 font-medium">WIP 🛠️</p>
@@ -37,7 +35,7 @@ export default function ExtrasTab(props: Props) {
                             {...register("launch_status")}
                             type="radio"
                             name="launch_status"
-                            value='launched'
+                            value={ProjectLaunchStatusEnum.Launched}
                         />
                         <div>
                             <p className="text-body4 font-medium">Launched 🚀</p>
diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
index add3831..d969109 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -1,7 +1,7 @@
 import { FormProvider, NestedValue, Resolver, SubmitHandler, useForm } from "react-hook-form"
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Team_Member_Role, UpdateProjectInput } from "src/graphql";
+import { ProjectLaunchStatusEnum, Team_Member_Role, UpdateProjectInput } from "src/graphql";
 import { PropsWithChildren, useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
 import { usePrompt } from "src/utils/hooks";
@@ -13,38 +13,6 @@ interface Props {
 
 }
 
-
-// export interface IListProjectForm {
-//     id?: number
-//     title: string
-//     website: string
-//     tagline: string
-//     description: string
-//     thumbnail_image?: string
-//     cover_image?: string
-//     twitter?: string
-//     discord?: string
-//     github?: string
-//     category_id: number
-//     capabilities: NestedValue<string[]>
-//     screenshots: NestedValue<string[]>
-
-//     members: NestedValue<{
-//         id: number,
-//         name: string,
-//         jobTitle: string | null,
-//         avatar: string,
-//         role: Team_Member_Role,
-//     }[]>
-//     recruit_roles: NestedValue<string[]>
-
-
-//     launch_status: "wip" | "launched"
-//     tournaments: NestedValue<string[]>
-// }
-
-
-
 export type IListProjectForm = Override<UpdateProjectInput, {
     members: NestedValue<{
         id: number,
@@ -56,25 +24,34 @@ export type IListProjectForm = Override<UpdateProjectInput, {
     capabilities: NestedValue<UpdateProjectInput['capabilities']>
     recruit_roles: NestedValue<UpdateProjectInput['recruit_roles']>
     tournaments: NestedValue<UpdateProjectInput['tournaments']>
+    cover_image: NestedValue<UpdateProjectInput['cover_image']>
+    thumbnail_image: NestedValue<UpdateProjectInput['thumbnail_image']>
 }>
 
 const schema: yup.SchemaOf<IListProjectForm> = yup.object({
     id: yup.number().optional(),
     title: yup.string().trim().required().min(2),
-    website: yup.string().trim().url().required(),
+    hashtag: yup
+        .string()
+        .required()
+        .matches(
+            /^(?:#)([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:(?!))){0,28}(?:[A-Za-z0-9_]))?)((?: #)([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:\.(?!\.))){0,28}(?:[A-Za-z0-9_]))?))*$/,
+            "Invalid format for hashtag"
+        ),
+    website: yup.string().trim().url().required().label("project's link"),
     tagline: yup.string().trim().required().min(10),
     description: yup.string().trim().required().min(50, 'Write at least 10 words descriping your project'),
-    thumbnail_image: imageSchema.required(),
-    cover_image: imageSchema.required(),
-    twitter: yup.string().url().ensure(),
-    discord: yup.string().url().ensure(),
-    github: yup.string().url().ensure(),
+    thumbnail_image: imageSchema.required("Please pick a thumbnail image").default(undefined),
+    cover_image: imageSchema.required("Please pick a cover image").default(undefined),
+    twitter: yup.string().url(),
+    discord: yup.string().url(),
+    github: yup.string().url(),
     category_id: yup.number().required("Please choose a category"),
     capabilities: yup.array().of(yup.string().required()).default([]),
     screenshots: yup.array().of(imageSchema.required()).default([]),
     members: yup.array().of(yup.object() as any).default([]),
     recruit_roles: yup.array().of(yup.number().required()).default([]),
-    launch_status: yup.mixed().oneOf(['wip', 'launched']).default('wip'),
+    launch_status: yup.mixed().oneOf([ProjectLaunchStatusEnum.Wip, ProjectLaunchStatusEnum.Launched]).default(ProjectLaunchStatusEnum.Wip),
     tournaments: yup.array().of(yup.number().required()).default([])
 }).required();
 
@@ -84,6 +61,8 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
 
     const methods = useForm<IListProjectForm>({
         defaultValues: {
+            cover_image: undefined,
+            thumbnail_image: undefined,
             id: !!params.get('id') ? Number(params.get('id')) : undefined,
             title: "",
             website: "",
@@ -97,7 +76,7 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
             screenshots: [],
             members: [],
             recruit_roles: [],
-            launch_status: 'wip',
+            launch_status: ProjectLaunchStatusEnum.Wip,
             tournaments: [],
         },
         resolver: yupResolver(schema) as Resolver<IListProjectForm>,
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
index 11a2dce..7f42a90 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
@@ -15,11 +15,6 @@ export default function ProjectDetailsTab(props: Props) {
 
     const { register, formState: { errors, }, control, getValues } = useFormContext<IListProjectForm>();
 
-
-    // usePrompt('You may have some unsaved changes. You still want to leave?', isDirty)
-
-
-
     return (
         <div className="md:col-span-2 flex flex-col gap-24">
             <Card className="" defaultPadding={false}>
@@ -33,7 +28,6 @@ export default function ProjectDetailsTab(props: Props) {
                             onChange={e => {
                                 onChange(e)
                             }}
-                        // uploadText='Add a cover image'
                         />
 
                         }
@@ -48,7 +42,16 @@ export default function ProjectDetailsTab(props: Props) {
                         />
                     </div>
                 </div>
+
                 <div className="p-16 md:p-24 mt-64">
+                    {(errors.cover_image || errors.thumbnail_image) && <div className="mb-16">
+                        {errors.cover_image && <p className="input-error">
+                            {errors.cover_image.message}
+                        </p>}
+                        {errors.thumbnail_image && <p className="input-error">
+                            {errors.thumbnail_image.message}
+                        </p>}
+                    </div>}
                     <p className="text-body5 font-medium">
                         Project name<sup className="text-red-500">*</sup>
                     </p>
@@ -110,7 +113,20 @@ export default function ProjectDetailsTab(props: Props) {
                     {errors.description && <p className="input-error">
                         {errors.description.message}
                     </p>}
-
+                    <p className="text-body5 font-medium mt-16">
+                        Hashtag<sup className="text-red-500">*</sup>
+                    </p>
+                    <div className="input-wrapper mt-8 relative">
+                        <input
+                            type='text'
+                            className="input-text"
+                            placeholder='#my_awesome_app'
+                            {...register("hashtag")}
+                        />
+                    </div>
+                    {errors.hashtag && <p className="input-error">
+                        {errors.hashtag.message}
+                    </p>}
                 </div>
             </Card>
             <Card className="">
@@ -203,7 +219,7 @@ export default function ProjectDetailsTab(props: Props) {
 
             <Card>
                 <h2 className="text-body2 font-bolder">📷  Screenshots</h2>
-                <p className="text-body4 font-light text-gray-600 mt-8">Choose up to 4 images from your project</p>
+                <p className="text-body4 font-light text-gray-600 mt-8">Choose up to 4 screenshots from your project</p>
                 <div className="mt-24">
                     <Controller
                         control={control}
diff --git a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
index 549982f..eb512a4 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
@@ -1,10 +1,9 @@
-import { useNavigate } from 'react-router-dom'
 import Button from 'src/Components/Button/Button'
 import Card from 'src/Components/Card/Card'
 import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'
 import { useFormContext } from "react-hook-form"
 import { IListProjectForm } from "../FormContainer/FormContainer";
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { tabs } from '../../ListProjectPage'
 import { NotificationsService } from 'src/services'
 import { useAppDispatch } from 'src/utils/hooks';
@@ -19,15 +18,16 @@ interface Props {
 
 export default function SaveChangesCard(props: Props) {
 
-    const { handleSubmit, formState: { errors, isDirty, }, reset, getValues, watch } = useFormContext<IListProjectForm>();
+    const { handleSubmit, formState: { isDirty, }, reset, getValues, watch } = useFormContext<IListProjectForm>();
     const dispatch = useAppDispatch();
 
-    const [isLoading, setIsLoading] = useState(false);
     const isUpdating = useMemo(() => !!getValues('id'), [getValues]);
 
     const [update, updatingStatus] = useUpdateProjectMutation();
     const [create, creatingStatus] = useCreateProjectMutation()
 
+    const isLoading = updatingStatus.loading || creatingStatus.loading
+
 
     const [img, name, tagline] = watch(['thumbnail_image', 'title', 'tagline',])
 
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index 1098ea4..2e364f0 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -109,8 +109,9 @@ export type CreateProjectInput = {
   description: Scalars['String'];
   discord?: InputMaybe<Scalars['String']>;
   github?: InputMaybe<Scalars['String']>;
+  hashtag: Scalars['String'];
   id?: InputMaybe<Scalars['Int']>;
-  launch_status: Scalars['String'];
+  launch_status: ProjectLaunchStatusEnum;
   members: Array<TeamMemberInput>;
   recruit_roles: Array<Scalars['Int']>;
   screenshots: Array<ImageInput>;
@@ -404,6 +405,11 @@ export type Project = {
   website: Scalars['String'];
 };
 
+export enum ProjectLaunchStatusEnum {
+  Launched = 'Launched',
+  Wip = 'WIP'
+}
+
 export type Query = {
   __typename?: 'Query';
   allCategories: Array<Category>;
@@ -719,8 +725,9 @@ export type UpdateProjectInput = {
   description: Scalars['String'];
   discord?: InputMaybe<Scalars['String']>;
   github?: InputMaybe<Scalars['String']>;
+  hashtag: Scalars['String'];
   id?: InputMaybe<Scalars['Int']>;
-  launch_status: Scalars['String'];
+  launch_status: ProjectLaunchStatusEnum;
   members: Array<TeamMemberInput>;
   recruit_roles: Array<Scalars['Int']>;
   screenshots: Array<ImageInput>;

From cc9eec8bfbafef1946564871cd40508e479296ff Mon Sep 17 00:00:00 2001
From: Dolu <doludev@protonmail.com>
Date: Fri, 16 Sep 2022 15:04:12 +0200
Subject: [PATCH 23/53] feat: add capabilities table + query + add columns to
 project for project creation

---
 api/functions/graphql/nexus-typegen.ts        | 23 ++++++++
 api/functions/graphql/schema.graphql          | 11 ++++
 api/functions/graphql/types/project.js        | 52 ++++++++++++++++-
 .../migration.sql                             | 38 ++++++++++++
 prisma/schema.prisma                          | 22 ++++++-
 prisma/seed/data.js                           | 58 +++++++++++++++++++
 prisma/seed/index.js                          | 13 ++++-
 .../ProjectDetailsTab/ProjectDetailsTab.tsx   |  2 +-
 8 files changed, 213 insertions(+), 6 deletions(-)
 create mode 100644 prisma/migrations/20220916130117_add_capabilities_project/migration.sql

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index 605b75d..db9322c 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -91,7 +91,10 @@ export interface NexusGenInputs {
     title: string; // String!
   }
   TeamMemberInput: { // input type
+    avatar?: string | null; // String
     id: number; // Int!
+    jobTitle?: string | null; // String
+    name?: string | null; // String
     role: NexusGenEnums['TEAM_MEMBER_ROLE']; // TEAM_MEMBER_ROLE!
   }
   UpdateProjectInput: { // input type
@@ -177,6 +180,12 @@ export interface NexusGenObjects {
     id: number; // Int!
     workplan: string; // String!
   }
+  Capability: { // root type
+    icon: string; // String!
+    id: number; // Int!
+    is_official: boolean; // Boolean!
+    title: string; // String!
+  }
   Category: { // root type
     icon?: string | null; // String
     id: number; // Int!
@@ -428,6 +437,12 @@ export interface NexusGenFieldTypes {
     id: number; // Int!
     workplan: string; // String!
   }
+  Capability: { // field return type
+    icon: string; // String!
+    id: number; // Int!
+    is_official: boolean; // Boolean!
+    title: string; // String!
+  }
   Category: { // field return type
     apps_count: number; // Int!
     cover_image: string | null; // String
@@ -561,6 +576,7 @@ export interface NexusGenFieldTypes {
   Query: { // field return type
     allCategories: NexusGenRootTypes['Category'][]; // [Category!]!
     allProjects: NexusGenRootTypes['Project'][]; // [Project!]!
+    getAllCapabilities: NexusGenRootTypes['Capability'][]; // [Capability!]!
     getAllHackathons: NexusGenRootTypes['Hackathon'][]; // [Hackathon!]!
     getAllMakersRoles: NexusGenRootTypes['GenericMakerRole'][]; // [GenericMakerRole!]!
     getAllMakersSkills: NexusGenRootTypes['MakerSkill'][]; // [MakerSkill!]!
@@ -792,6 +808,12 @@ export interface NexusGenFieldTypeNames {
     id: 'Int'
     workplan: 'String'
   }
+  Capability: { // field return type name
+    icon: 'String'
+    id: 'Int'
+    is_official: 'Boolean'
+    title: 'String'
+  }
   Category: { // field return type name
     apps_count: 'Int'
     cover_image: 'String'
@@ -925,6 +947,7 @@ export interface NexusGenFieldTypeNames {
   Query: { // field return type name
     allCategories: 'Category'
     allProjects: 'Project'
+    getAllCapabilities: 'Capability'
     getAllHackathons: 'Hackathon'
     getAllMakersRoles: 'GenericMakerRole'
     getAllMakersSkills: 'MakerSkill'
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index 761d57b..9564585 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -67,6 +67,13 @@ type BountyApplication {
   workplan: String!
 }
 
+type Capability {
+  icon: String!
+  id: Int!
+  is_official: Boolean!
+  title: String!
+}
+
 type Category {
   apps_count: Int!
   cover_image: String
@@ -297,6 +304,7 @@ enum ProjectLaunchStatusEnum {
 type Query {
   allCategories: [Category!]!
   allProjects(skip: Int = 0, take: Int = 50): [Project!]!
+  getAllCapabilities: [Capability!]!
   getAllHackathons(sortBy: String, tag: Int): [Hackathon!]!
   getAllMakersRoles: [GenericMakerRole!]!
   getAllMakersSkills: [MakerSkill!]!
@@ -391,7 +399,10 @@ type Tag {
 }
 
 input TeamMemberInput {
+  avatar: String
   id: Int!
+  jobTitle: String
+  name: String
   role: TEAM_MEMBER_ROLE!
 }
 
diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index 625a22e..cb82a57 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -119,6 +119,27 @@ const Award = objectType({
 })
 
 
+const Capability = objectType({
+    name: 'Capability',
+    definition(t) {
+        t.nonNull.int('id');
+        t.nonNull.string('title');
+        t.nonNull.string('icon');
+        t.nonNull.boolean('is_official');
+    }
+})
+
+const getAllCapabilities = extendType({
+    type: "Query",
+    definition(t) {
+        t.nonNull.list.nonNull.field('getAllCapabilities', {
+            type: Capability,
+            async resolve(parent, args, context) {
+                return prisma.capability.findMany();
+            }
+        })
+    }
+})
 
 
 const getProject = extendType({
@@ -297,6 +318,9 @@ const TeamMemberInput = inputObjectType({
     name: 'TeamMemberInput',
     definition(t) {
         t.nonNull.int('id')
+        t.nullable.string('name')
+        t.nullable.string('avatar')
+        t.nullable.string('jobTitle')
         t.nonNull.field("role", {
             type: TEAM_MEMBER_ROLE
         })
@@ -356,8 +380,33 @@ const createProject = extendType({
             type: CreateProjectResponse,
             args: { input: CreateProjectInput },
             async resolve(_root, args, ctx) {
-                const { title } = args.input;
+                const {
+                    title,
+                    tagline,
+                    hashtag,
+                    description,
+                    capabilities,
+                    category_id,
+                    cover_image,
+                    discord,
+                    github,
+                    twitter,
+                    website,
+                    launch_status,
+                    members,
+                    recruit_roles,
+                    screenshots,
+                    thumbnail_image,
+                    tournaments,
+                } = args.input
+                
+                const user = await getUserByPubKey(ctx.userPubKey);
 
+                // Do some validation
+                if (!user)
+                    throw new ApolloError("Not Authenticated");
+
+                // TODO Create project
             }
         })
     },
@@ -438,6 +487,7 @@ module.exports = {
     searchProjects,
     projectsByCategory,
     getLnurlDetailsForProject,
+    getAllCapabilities,
 
     // Mutations
     createProject,
diff --git a/prisma/migrations/20220916130117_add_capabilities_project/migration.sql b/prisma/migrations/20220916130117_add_capabilities_project/migration.sql
new file mode 100644
index 0000000..dd8f200
--- /dev/null
+++ b/prisma/migrations/20220916130117_add_capabilities_project/migration.sql
@@ -0,0 +1,38 @@
+-- AlterTable
+ALTER TABLE "Project" ADD COLUMN     "discord" TEXT NOT NULL DEFAULT E'',
+ADD COLUMN     "github" TEXT NOT NULL DEFAULT E'',
+ADD COLUMN     "hashtag" TEXT NOT NULL DEFAULT E'',
+ADD COLUMN     "launch_status" TEXT NOT NULL DEFAULT E'',
+ADD COLUMN     "tagline" TEXT NOT NULL DEFAULT E'',
+ADD COLUMN     "twitter" TEXT NOT NULL DEFAULT E'';
+
+-- CreateTable
+CREATE TABLE "Capability" (
+    "id" SERIAL NOT NULL,
+    "title" TEXT NOT NULL,
+    "icon" TEXT,
+    "is_official" BOOLEAN NOT NULL DEFAULT false,
+
+    CONSTRAINT "Capability_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "_CapabilityToProject" (
+    "A" INTEGER NOT NULL,
+    "B" INTEGER NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Capability_title_key" ON "Capability"("title");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "_CapabilityToProject_AB_unique" ON "_CapabilityToProject"("A", "B");
+
+-- CreateIndex
+CREATE INDEX "_CapabilityToProject_B_index" ON "_CapabilityToProject"("B");
+
+-- AddForeignKey
+ALTER TABLE "_CapabilityToProject" ADD FOREIGN KEY ("A") REFERENCES "Capability"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_CapabilityToProject" ADD FOREIGN KEY ("B") REFERENCES "Project"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 5003892..3d1cbb0 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -131,6 +131,9 @@ model Project {
   screenshots         String[]
   screenshots_ids     Int[]
   website             String
+  discord             String       @default("")
+  twitter             String       @default("")
+  github              String       @default("")
   thumbnail_image     String?
   thumbnail_image_id  Int?         @unique
   thumbnail_image_rel HostedImage? @relation("Project_Thumbnail", fields: [thumbnail_image_id], references: [id])
@@ -139,14 +142,18 @@ model Project {
   cover_image_rel     HostedImage? @relation("Project_CoverImage", fields: [cover_image_id], references: [id])
   lightning_address   String?
   lnurl_callback_url  String?
+  tagline             String       @default("")
+  launch_status       String       @default("")
+  hashtag             String       @default("")
 
   category    Category @relation(fields: [category_id], references: [id])
   category_id Int
   votes_count Int      @default(0)
   createdAt   DateTime @default(now())
 
-  awards Award[]
-  tags   Tag[]
+  awards       Award[]
+  tags         Tag[]
+  capabilities Capability[]
 
   recruit_roles ProjectRecruitRoles[]
   tournaments   TournamentProject[]
@@ -409,3 +416,14 @@ model TournamentProject {
 
   @@id([tournament_id, project_id])
 }
+
+// -----------------
+// Capability
+// -----------------
+model Capability {
+  id         Int       @id @default(autoincrement())
+  title      String    @unique
+  icon       String?
+  is_official Boolean   @default(false)
+  project    Project[]
+}
diff --git a/prisma/seed/data.js b/prisma/seed/data.js
index cc482df..251342e 100644
--- a/prisma/seed/data.js
+++ b/prisma/seed/data.js
@@ -510,6 +510,63 @@ const skills = [
     },
 ]
 
+const capabilities = [
+    {
+        id: 1,
+        is_official: true,
+        title: 'Mobile',
+        icon: '📱'
+    },
+    {
+        id: 2,
+        is_official: true,
+        title: 'Web',
+        icon: '💻'
+    },
+    {
+        id: 3,
+        is_official: true,
+        title: 'WebLN',
+        icon: '🎛️'
+    },
+    {
+        id: 4,
+        is_official: true,
+        title: 'LNURL-auth',
+        icon: '🔑️️'
+    },
+    {
+        id: 5,
+        is_official: true,
+        title: 'LNURL-pay',
+        icon: '💸'
+    },
+    {
+        id: 6,
+        is_official: true,
+        title: 'LNURL-channel',
+        icon: '🕳️️'
+    },
+    {
+        id: 7,
+        is_official: true,
+        title: 'LNURL-withdraw',
+        icon: '🎬️'
+    },
+    {
+        id: 8,
+        is_official: true,
+        title: 'BOLT 11',
+        icon: '⚡'
+    },
+    {
+        id: 9,
+        is_official: true,
+        title: 'BOLT 12',
+        icon: '⚡'
+    },
+]
+
 module.exports = {
     categories,
     projects,
@@ -517,4 +574,5 @@ module.exports = {
     hackathons,
     roles,
     skills,
+    capabilities,
 }
\ No newline at end of file
diff --git a/prisma/seed/index.js b/prisma/seed/index.js
index beb24cd..2c51ee4 100644
--- a/prisma/seed/index.js
+++ b/prisma/seed/index.js
@@ -1,6 +1,6 @@
 const { PrismaClient } = require("@prisma/client");
 const { generatePrivateKey, getPublicKey } = require("../../api/utils/nostr-tools");
-const { categories, projects, tags, hackathons, roles, skills } = require("./data");
+const { categories, projects, tags, hackathons, roles, skills, capabilities } = require("./data");
 const Chance = require('chance');
 const { getCoverImage, randomItems, random } = require("./helpers");
 const { tournament: tournamentMock } = require("./data/tournament.seed");
@@ -67,7 +67,9 @@ async function main() {
 
     // await createTournament();
 
-    await migrateOldImages();
+    // await migrateOldImages();
+
+    await createCapabilities();
 }
 
 async function migrateOldImages() {
@@ -499,6 +501,13 @@ async function createTournament() {
 
 }
 
+async function createCapabilities() {
+    console.log("Creating Capabilities");
+    await prisma.capability.createMany({
+        data: capabilities
+    })
+}
+
 
 main()
     .catch((e) => {
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
index 7f42a90..bc7d3c8 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
@@ -201,7 +201,7 @@ export default function ProjectDetailsTab(props: Props) {
 
             <Card>
                 <h2 className="text-body2 font-bolder">🦾  Capabilities</h2>
-                <p className="text-body4 font-light text-gray-600 mt-8">Let other makers know what lightning capabilities your applicaiton has.</p>
+                <p className="text-body4 font-light text-gray-600 mt-8">Let other makers know what lightning capabilities your application has.</p>
                 <div className="mt-24">
                     <Controller
                         control={control}

From 1172139b1991569d8fd5345c88e8c05d8446bdc3 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Fri, 16 Sep 2022 21:28:11 +0300
Subject: [PATCH 24/53] fix: remove extra data from mutation input

---
 .../Components/SaveChangesCard/SaveChangesCard.tsx           | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
index eb512a4..14ced48 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
@@ -38,7 +38,10 @@ export default function SaveChangesCard(props: Props) {
 
     const clickSubmit = handleSubmit<IListProjectForm>(async data => {
         try {
-            await (isUpdating ? update({ variables: { input: data } }) : create({ variables: { input: data } }))
+            await (isUpdating ?
+                update({ variables: { input: { ...data, members: data.members.map(m => ({ id: m.id, role: m.role })) } } })
+                : create({ variables: { input: { ...data, members: data.members.map(m => ({ id: m.id, role: m.role })) } } })
+            )
         } catch (error) {
             NotificationsService.error("A network error happened...");
             return;

From 014d471065ee5b127d492c1833e7c2fa365ae860 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sun, 18 Sep 2022 10:46:53 +0300
Subject: [PATCH 25/53] update: update project with links

---
 api/functions/graphql/nexus-typegen.ts        | 14 ++--
 api/functions/graphql/schema.graphql          | 12 ++--
 api/functions/graphql/types/project.js        | 18 +++---
 .../migration.sql                             | 18 ++++++
 prisma/schema.prisma                          | 17 ++---
 prisma/seed/data.js                           |  9 ---
 .../CapabilitiesInput/CapabilitiesInput.tsx   | 64 ++++---------------
 .../getAllCapabilities.graphql                |  7 ++
 .../FormContainer/FormContainer.tsx           |  4 +-
 .../ProjectDetailsTab/ProjectDetailsTab.tsx   | 30 ++++++++-
 src/graphql/index.tsx                         | 57 ++++++++++++++++-
 11 files changed, 157 insertions(+), 93 deletions(-)
 create mode 100644 prisma/migrations/20220918072708_update_project_links_fields/migration.sql
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/CapabilitiesInput/getAllCapabilities.graphql

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index db9322c..aa1dc62 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -29,7 +29,7 @@ declare global {
 
 export interface NexusGenInputs {
   CreateProjectInput: { // input type
-    capabilities: string[]; // [String!]!
+    capabilities: number[]; // [Int!]!
     category_id: number; // Int!
     cover_image: NexusGenInputs['ImageInput']; // ImageInput!
     description: string; // String!
@@ -41,7 +41,9 @@ export interface NexusGenInputs {
     members: NexusGenInputs['TeamMemberInput'][]; // [TeamMemberInput!]!
     recruit_roles: number[]; // [Int!]!
     screenshots: NexusGenInputs['ImageInput'][]; // [ImageInput!]!
+    slack?: string | null; // String
     tagline: string; // String!
+    telegram?: string | null; // String
     thumbnail_image: NexusGenInputs['ImageInput']; // ImageInput!
     title: string; // String!
     tournaments: number[]; // [Int!]!
@@ -91,14 +93,11 @@ export interface NexusGenInputs {
     title: string; // String!
   }
   TeamMemberInput: { // input type
-    avatar?: string | null; // String
     id: number; // Int!
-    jobTitle?: string | null; // String
-    name?: string | null; // String
     role: NexusGenEnums['TEAM_MEMBER_ROLE']; // TEAM_MEMBER_ROLE!
   }
   UpdateProjectInput: { // input type
-    capabilities: string[]; // [String!]!
+    capabilities: number[]; // [Int!]!
     category_id: number; // Int!
     cover_image: NexusGenInputs['ImageInput']; // ImageInput!
     description: string; // String!
@@ -110,7 +109,9 @@ export interface NexusGenInputs {
     members: NexusGenInputs['TeamMemberInput'][]; // [TeamMemberInput!]!
     recruit_roles: number[]; // [Int!]!
     screenshots: NexusGenInputs['ImageInput'][]; // [ImageInput!]!
+    slack?: string | null; // String
     tagline: string; // String!
+    telegram?: string | null; // String
     thumbnail_image: NexusGenInputs['ImageInput']; // ImageInput!
     title: string; // String!
     tournaments: number[]; // [Int!]!
@@ -183,7 +184,6 @@ export interface NexusGenObjects {
   Capability: { // root type
     icon: string; // String!
     id: number; // Int!
-    is_official: boolean; // Boolean!
     title: string; // String!
   }
   Category: { // root type
@@ -440,7 +440,6 @@ export interface NexusGenFieldTypes {
   Capability: { // field return type
     icon: string; // String!
     id: number; // Int!
-    is_official: boolean; // Boolean!
     title: string; // String!
   }
   Category: { // field return type
@@ -811,7 +810,6 @@ export interface NexusGenFieldTypeNames {
   Capability: { // field return type name
     icon: 'String'
     id: 'Int'
-    is_official: 'Boolean'
     title: 'String'
   }
   Category: { // field return type name
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index 9564585..31785f1 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -70,7 +70,6 @@ type BountyApplication {
 type Capability {
   icon: String!
   id: Int!
-  is_official: Boolean!
   title: String!
 }
 
@@ -85,7 +84,7 @@ type Category {
 }
 
 input CreateProjectInput {
-  capabilities: [String!]!
+  capabilities: [Int!]!
   category_id: Int!
   cover_image: ImageInput!
   description: String!
@@ -97,7 +96,9 @@ input CreateProjectInput {
   members: [TeamMemberInput!]!
   recruit_roles: [Int!]!
   screenshots: [ImageInput!]!
+  slack: String
   tagline: String!
+  telegram: String
   thumbnail_image: ImageInput!
   title: String!
   tournaments: [Int!]!
@@ -399,10 +400,7 @@ type Tag {
 }
 
 input TeamMemberInput {
-  avatar: String
   id: Int!
-  jobTitle: String
-  name: String
   role: TEAM_MEMBER_ROLE!
 }
 
@@ -486,7 +484,7 @@ type TournamentProjectsResponse {
 }
 
 input UpdateProjectInput {
-  capabilities: [String!]!
+  capabilities: [Int!]!
   category_id: Int!
   cover_image: ImageInput!
   description: String!
@@ -498,7 +496,9 @@ input UpdateProjectInput {
   members: [TeamMemberInput!]!
   recruit_roles: [Int!]!
   screenshots: [ImageInput!]!
+  slack: String
   tagline: String!
+  telegram: String
   thumbnail_image: ImageInput!
   title: String!
   tournaments: [Int!]!
diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index cb82a57..a332569 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -1,3 +1,4 @@
+const { ApolloError } = require('apollo-server-lambda');
 const {
     intArg,
     objectType,
@@ -6,7 +7,8 @@ const {
     nonNull,
     enumType,
     inputObjectType,
-} = require('nexus')
+} = require('nexus');
+const { getUserByPubKey } = require('../../../auth/utils/helperFuncs');
 const { prisma } = require('../../../prisma');
 const { resolveImgObjectToUrl } = require('../../../utils/resolveImageUrl');
 
@@ -125,7 +127,6 @@ const Capability = objectType({
         t.nonNull.int('id');
         t.nonNull.string('title');
         t.nonNull.string('icon');
-        t.nonNull.boolean('is_official');
     }
 })
 
@@ -318,9 +319,6 @@ const TeamMemberInput = inputObjectType({
     name: 'TeamMemberInput',
     definition(t) {
         t.nonNull.int('id')
-        t.nullable.string('name')
-        t.nullable.string('avatar')
-        t.nullable.string('jobTitle')
         t.nonNull.field("role", {
             type: TEAM_MEMBER_ROLE
         })
@@ -350,8 +348,10 @@ const CreateProjectInput = inputObjectType({
         t.string('twitter');
         t.string('discord');
         t.string('github');
+        t.string('slack');
+        t.string('telegram');
         t.nonNull.int('category_id');
-        t.nonNull.list.nonNull.string('capabilities');
+        t.nonNull.list.nonNull.int('capabilities'); // ids
         t.nonNull.list.nonNull.field('screenshots', {
             type: ImageInput
         });
@@ -399,7 +399,7 @@ const createProject = extendType({
                     thumbnail_image,
                     tournaments,
                 } = args.input
-                
+                console.log(launch_status);
                 const user = await getUserByPubKey(ctx.userPubKey);
 
                 // Do some validation
@@ -431,8 +431,10 @@ const UpdateProjectInput = inputObjectType({
         t.string('twitter');
         t.string('discord');
         t.string('github');
+        t.string('slack');
+        t.string('telegram');
         t.nonNull.int('category_id');
-        t.nonNull.list.nonNull.string('capabilities');
+        t.nonNull.list.nonNull.int('capabilities');
         t.nonNull.list.nonNull.field('screenshots', {
             type: ImageInput
         });
diff --git a/prisma/migrations/20220918072708_update_project_links_fields/migration.sql b/prisma/migrations/20220918072708_update_project_links_fields/migration.sql
new file mode 100644
index 0000000..3b23f83
--- /dev/null
+++ b/prisma/migrations/20220918072708_update_project_links_fields/migration.sql
@@ -0,0 +1,18 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `is_official` on the `Capability` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "Capability" DROP COLUMN "is_official";
+
+-- AlterTable
+ALTER TABLE "Project" ADD COLUMN     "slack" TEXT,
+ADD COLUMN     "telegram" TEXT,
+ALTER COLUMN "discord" DROP NOT NULL,
+ALTER COLUMN "discord" DROP DEFAULT,
+ALTER COLUMN "github" DROP NOT NULL,
+ALTER COLUMN "github" DROP DEFAULT,
+ALTER COLUMN "twitter" DROP NOT NULL,
+ALTER COLUMN "twitter" DROP DEFAULT;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 3d1cbb0..1808c83 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -131,9 +131,11 @@ model Project {
   screenshots         String[]
   screenshots_ids     Int[]
   website             String
-  discord             String       @default("")
-  twitter             String       @default("")
-  github              String       @default("")
+  discord             String?
+  twitter             String?
+  github              String?
+  telegram            String?
+  slack               String?
   thumbnail_image     String?
   thumbnail_image_id  Int?         @unique
   thumbnail_image_rel HostedImage? @relation("Project_Thumbnail", fields: [thumbnail_image_id], references: [id])
@@ -421,9 +423,8 @@ model TournamentProject {
 // Capability
 // -----------------
 model Capability {
-  id         Int       @id @default(autoincrement())
-  title      String    @unique
-  icon       String?
-  is_official Boolean   @default(false)
-  project    Project[]
+  id      Int       @id @default(autoincrement())
+  title   String    @unique
+  icon    String?
+  project Project[]
 }
diff --git a/prisma/seed/data.js b/prisma/seed/data.js
index 251342e..9ebd9e4 100644
--- a/prisma/seed/data.js
+++ b/prisma/seed/data.js
@@ -513,55 +513,46 @@ const skills = [
 const capabilities = [
     {
         id: 1,
-        is_official: true,
         title: 'Mobile',
         icon: '📱'
     },
     {
         id: 2,
-        is_official: true,
         title: 'Web',
         icon: '💻'
     },
     {
         id: 3,
-        is_official: true,
         title: 'WebLN',
         icon: '🎛️'
     },
     {
         id: 4,
-        is_official: true,
         title: 'LNURL-auth',
         icon: '🔑️️'
     },
     {
         id: 5,
-        is_official: true,
         title: 'LNURL-pay',
         icon: '💸'
     },
     {
         id: 6,
-        is_official: true,
         title: 'LNURL-channel',
         icon: '🕳️️'
     },
     {
         id: 7,
-        is_official: true,
         title: 'LNURL-withdraw',
         icon: '🎬️'
     },
     {
         id: 8,
-        is_official: true,
         title: 'BOLT 11',
         icon: '⚡'
     },
     {
         id: 9,
-        is_official: true,
         title: 'BOLT 12',
         icon: '⚡'
     },
diff --git a/src/features/Projects/pages/ListProjectPage/Components/CapabilitiesInput/CapabilitiesInput.tsx b/src/features/Projects/pages/ListProjectPage/Components/CapabilitiesInput/CapabilitiesInput.tsx
index 72830a0..8fa6837 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/CapabilitiesInput/CapabilitiesInput.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/CapabilitiesInput/CapabilitiesInput.tsx
@@ -1,17 +1,20 @@
 import React from 'react'
 import Button from 'src/Components/Button/Button';
-import { useAllCategoriesQuery } from 'src/graphql'
+import { useGetAllCapabilitiesQuery } from 'src/graphql';
 import { random } from 'src/utils/helperFunctions';
 
 interface Props {
-    value: string[];
-    onChange?: (v: string[]) => void;
+    value: number[];
+    onChange?: (v: number[]) => void;
 }
 
 export default function CapabilitiesInput(props: Props) {
 
 
-    const handleClick = (clickedValue: string) => {
+    const categoriesQuery = useGetAllCapabilitiesQuery();
+
+
+    const handleClick = (clickedValue: number) => {
         if (props.value.includes(clickedValue))
             props.onChange?.(props.value.filter(v => v !== clickedValue));
         else
@@ -21,7 +24,7 @@ export default function CapabilitiesInput(props: Props) {
 
     return (
         <div className="flex flex-wrap gap-8">
-            {false ?
+            {categoriesQuery.loading ?
                 Array(10).fill(0).map((_, idx) =>
                     <div
                         key={idx}
@@ -29,63 +32,24 @@ export default function CapabilitiesInput(props: Props) {
                         <span className='invisible'>{"loading category skeleton".slice(random(6, 12))}</span>
                     </div>)
                 :
-                data.map(item =>
+                categoriesQuery.data?.getAllCapabilities.map(item =>
                     <Button
-                        key={item.text}
+                        key={item.id}
                         color='none'
                         size='sm'
                         className={`
                         border border-gray-200
-                        ${props.value.includes(item.text) ?
+                        ${props.value.includes(item.id) ?
                                 'text-primary-600 bg-primary-100'
                                 :
                                 "bg-gray-100"
                             }
                         `}
-                        onClick={() => handleClick(item.text)}
+                        onClick={() => handleClick(item.id)}
                     >
-                        {item.icon} {item.text}
+                        {item.icon} {item.title}
                     </Button>)
             }
         </div>
     )
-}
-
-const data = [
-    {
-        text: 'Mobile',
-        icon: '📱'
-    },
-    {
-        text: 'Web',
-        icon: '💻'
-    },
-    {
-        text: 'WebLN',
-        icon: '🎛️'
-    },
-    {
-        text: 'LNURL-auth',
-        icon: '🔑️️'
-    },
-    {
-        text: 'LNURL-pay',
-        icon: '💸'
-    },
-    {
-        text: 'LNURL-channel',
-        icon: '🕳️️'
-    },
-    {
-        text: 'LNURL-withdraw',
-        icon: '🎬️'
-    },
-    {
-        text: 'BOLT 11',
-        icon: '⚡'
-    },
-    {
-        text: 'BOLT 12',
-        icon: '⚡'
-    },
-]
+} 
\ No newline at end of file
diff --git a/src/features/Projects/pages/ListProjectPage/Components/CapabilitiesInput/getAllCapabilities.graphql b/src/features/Projects/pages/ListProjectPage/Components/CapabilitiesInput/getAllCapabilities.graphql
new file mode 100644
index 0000000..37e4b3f
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/CapabilitiesInput/getAllCapabilities.graphql
@@ -0,0 +1,7 @@
+query GetAllCapabilities {
+  getAllCapabilities {
+    id
+    title
+    icon
+  }
+}
diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
index d969109..6ec8abc 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -46,8 +46,10 @@ const schema: yup.SchemaOf<IListProjectForm> = yup.object({
     twitter: yup.string().url(),
     discord: yup.string().url(),
     github: yup.string().url(),
+    slack: yup.string().url(),
+    telegram: yup.string().url(),
     category_id: yup.number().required("Please choose a category"),
-    capabilities: yup.array().of(yup.string().required()).default([]),
+    capabilities: yup.array().of(yup.number().required()).default([]),
     screenshots: yup.array().of(imageSchema.required()).default([]),
     members: yup.array().of(yup.object() as any).default([]),
     recruit_roles: yup.array().of(yup.number().required()).default([]),
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
index bc7d3c8..6845dac 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
@@ -1,6 +1,6 @@
 import { Controller, useFormContext } from "react-hook-form"
 import Card from "src/Components/Card/Card";
-import { FaDiscord } from "react-icons/fa";
+import { FaDiscord, FaSlack, FaTelegram } from "react-icons/fa";
 import { FiCamera, FiGithub, FiTwitter } from "react-icons/fi";
 import CategoriesInput from "../CategoriesInput/CategoriesInput";
 import CapabilitiesInput from "../CapabilitiesInput/CapabilitiesInput";
@@ -178,6 +178,34 @@ export default function ProjectDetailsTab(props: Props) {
                             {errors.github.message}
                         </p>}
                     </div>
+                    <div>
+                        <div className="input-wrapper mt-8 relative">
+                            <FaSlack className="text-yellow-500 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />
+                            <input
+                                type='text'
+                                className="input-text"
+                                placeholder='https://slack.com/'
+                                {...register("slack")}
+                            />
+                        </div>
+                        {errors.slack && <p className="input-error">
+                            {errors.slack.message}
+                        </p>}
+                    </div>
+                    <div>
+                        <div className="input-wrapper mt-8 relative">
+                            <FaTelegram className="text-teal-500 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />
+                            <input
+                                type='text'
+                                className="input-text"
+                                placeholder='https://t.me/XXXXXX'
+                                {...register("telegram")}
+                            />
+                        </div>
+                        {errors.telegram && <p className="input-error">
+                            {errors.telegram.message}
+                        </p>}
+                    </div>
                 </div>
             </Card>
 
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index 2e364f0..059173f 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -91,6 +91,13 @@ export type BountyApplication = {
   workplan: Scalars['String'];
 };
 
+export type Capability = {
+  __typename?: 'Capability';
+  icon: Scalars['String'];
+  id: Scalars['Int'];
+  title: Scalars['String'];
+};
+
 export type Category = {
   __typename?: 'Category';
   apps_count: Scalars['Int'];
@@ -103,7 +110,7 @@ export type Category = {
 };
 
 export type CreateProjectInput = {
-  capabilities: Array<Scalars['String']>;
+  capabilities: Array<Scalars['Int']>;
   category_id: Scalars['Int'];
   cover_image: ImageInput;
   description: Scalars['String'];
@@ -115,7 +122,9 @@ export type CreateProjectInput = {
   members: Array<TeamMemberInput>;
   recruit_roles: Array<Scalars['Int']>;
   screenshots: Array<ImageInput>;
+  slack?: InputMaybe<Scalars['String']>;
   tagline: Scalars['String'];
+  telegram?: InputMaybe<Scalars['String']>;
   thumbnail_image: ImageInput;
   title: Scalars['String'];
   tournaments: Array<Scalars['Int']>;
@@ -414,6 +423,7 @@ export type Query = {
   __typename?: 'Query';
   allCategories: Array<Category>;
   allProjects: Array<Project>;
+  getAllCapabilities: Array<Capability>;
   getAllHackathons: Array<Hackathon>;
   getAllMakersRoles: Array<GenericMakerRole>;
   getAllMakersSkills: Array<MakerSkill>;
@@ -719,7 +729,7 @@ export type TournamentProjectsResponse = {
 };
 
 export type UpdateProjectInput = {
-  capabilities: Array<Scalars['String']>;
+  capabilities: Array<Scalars['Int']>;
   category_id: Scalars['Int'];
   cover_image: ImageInput;
   description: Scalars['String'];
@@ -731,7 +741,9 @@ export type UpdateProjectInput = {
   members: Array<TeamMemberInput>;
   recruit_roles: Array<Scalars['Int']>;
   screenshots: Array<ImageInput>;
+  slack?: InputMaybe<Scalars['String']>;
   tagline: Scalars['String'];
+  telegram?: InputMaybe<Scalars['String']>;
   thumbnail_image: ImageInput;
   title: Scalars['String'];
   tournaments: Array<Scalars['Int']>;
@@ -989,6 +1001,11 @@ export type HottestProjectsQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type HottestProjectsQuery = { __typename?: 'Query', hottestProjects: Array<{ __typename?: 'Project', id: number, thumbnail_image: string, title: string, votes_count: number, category: { __typename?: 'Category', title: string, id: number } }> };
 
+export type GetAllCapabilitiesQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetAllCapabilitiesQuery = { __typename?: 'Query', getAllCapabilities: Array<{ __typename?: 'Capability', id: number, title: string, icon: string }> };
+
 export type CreateProjectMutationVariables = Exact<{
   input: InputMaybe<CreateProjectInput>;
 }>;
@@ -2373,6 +2390,42 @@ export function useHottestProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOp
 export type HottestProjectsQueryHookResult = ReturnType<typeof useHottestProjectsQuery>;
 export type HottestProjectsLazyQueryHookResult = ReturnType<typeof useHottestProjectsLazyQuery>;
 export type HottestProjectsQueryResult = Apollo.QueryResult<HottestProjectsQuery, HottestProjectsQueryVariables>;
+export const GetAllCapabilitiesDocument = gql`
+    query GetAllCapabilities {
+  getAllCapabilities {
+    id
+    title
+    icon
+  }
+}
+    `;
+
+/**
+ * __useGetAllCapabilitiesQuery__
+ *
+ * To run a query within a React component, call `useGetAllCapabilitiesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetAllCapabilitiesQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetAllCapabilitiesQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetAllCapabilitiesQuery(baseOptions?: Apollo.QueryHookOptions<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>(GetAllCapabilitiesDocument, options);
+      }
+export function useGetAllCapabilitiesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>(GetAllCapabilitiesDocument, options);
+        }
+export type GetAllCapabilitiesQueryHookResult = ReturnType<typeof useGetAllCapabilitiesQuery>;
+export type GetAllCapabilitiesLazyQueryHookResult = ReturnType<typeof useGetAllCapabilitiesLazyQuery>;
+export type GetAllCapabilitiesQueryResult = Apollo.QueryResult<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>;
 export const CreateProjectDocument = gql`
     mutation CreateProject($input: CreateProjectInput) {
   createProject(input: $input) {

From 61b2e38651d0480f1eb178c8d1780adb5158ee2a Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sun, 18 Sep 2022 15:51:42 +0300
Subject: [PATCH 26/53] feat: add makers resolver to project query api

---
 api/functions/graphql/nexus-typegen.ts | 14 ++++++++++++++
 api/functions/graphql/schema.graphql   |  6 ++++++
 api/functions/graphql/types/project.js | 26 ++++++++++++++++++++++++++
 3 files changed, 46 insertions(+)

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index aa1dc62..4a12155 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -279,6 +279,10 @@ export interface NexusGenObjects {
     votes_count: number; // Int!
     website: string; // String!
   }
+  ProjectMember: { // root type
+    role: NexusGenEnums['TEAM_MEMBER_ROLE']; // TEAM_MEMBER_ROLE!
+    user: NexusGenRootTypes['User']; // User!
+  }
   Query: {};
   Question: { // root type
     body: string; // String!
@@ -564,6 +568,7 @@ export interface NexusGenFieldTypes {
     id: number; // Int!
     lightning_address: string | null; // String
     lnurl_callback_url: string | null; // String
+    memebrs: NexusGenRootTypes['ProjectMember'][]; // [ProjectMember!]!
     recruit_roles: NexusGenRootTypes['MakerRole'][]; // [MakerRole!]!
     screenshots: string[]; // [String!]!
     tags: NexusGenRootTypes['Tag'][]; // [Tag!]!
@@ -572,6 +577,10 @@ export interface NexusGenFieldTypes {
     votes_count: number; // Int!
     website: string; // String!
   }
+  ProjectMember: { // field return type
+    role: NexusGenEnums['TEAM_MEMBER_ROLE']; // TEAM_MEMBER_ROLE!
+    user: NexusGenRootTypes['User']; // User!
+  }
   Query: { // field return type
     allCategories: NexusGenRootTypes['Category'][]; // [Category!]!
     allProjects: NexusGenRootTypes['Project'][]; // [Project!]!
@@ -934,6 +943,7 @@ export interface NexusGenFieldTypeNames {
     id: 'Int'
     lightning_address: 'String'
     lnurl_callback_url: 'String'
+    memebrs: 'ProjectMember'
     recruit_roles: 'MakerRole'
     screenshots: 'String'
     tags: 'Tag'
@@ -942,6 +952,10 @@ export interface NexusGenFieldTypeNames {
     votes_count: 'Int'
     website: 'String'
   }
+  ProjectMember: { // field return type name
+    role: 'TEAM_MEMBER_ROLE'
+    user: 'User'
+  }
   Query: { // field return type name
     allCategories: 'Category'
     allProjects: 'Project'
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index 31785f1..ce17919 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -288,6 +288,7 @@ type Project {
   id: Int!
   lightning_address: String
   lnurl_callback_url: String
+  memebrs: [ProjectMember!]!
   recruit_roles: [MakerRole!]!
   screenshots: [String!]!
   tags: [Tag!]!
@@ -302,6 +303,11 @@ enum ProjectLaunchStatusEnum {
   WIP
 }
 
+type ProjectMember {
+  role: TEAM_MEMBER_ROLE!
+  user: User!
+}
+
 type Query {
   allCategories: [Category!]!
   allProjects(skip: Int = 0, take: Int = 50): [Project!]!
diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index a332569..1c9c981 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -17,6 +17,7 @@ const { ImageInput } = require('./misc');
 const { MakerRole } = require('./users');
 
 
+
 const Project = objectType({
     name: 'Project',
     definition(t) {
@@ -73,6 +74,20 @@ const Project = objectType({
             }
         })
 
+        t.nonNull.list.nonNull.field('memebrs', {
+            type: ProjectMember,
+            resolve: (parent) => {
+                return prisma.projectMember.findMany({
+                    where: {
+                        projectId: parent.id
+                    },
+                    include: {
+                        user: true
+                    }
+                })
+            }
+        })
+
         t.nonNull.list.nonNull.field('recruit_roles', {
             type: MakerRole,
             resolve: async (parent) => {
@@ -102,6 +117,17 @@ const TEAM_MEMBER_ROLE = enumType({
     members: ['Admin', 'Maker'],
 });
 
+const ProjectMember = objectType({
+    name: "ProjectMember",
+    definition(t) {
+        t.nonNull.field('user', {
+            type: "User"
+        })
+        t.nonNull.field("role", {
+            type: TEAM_MEMBER_ROLE
+        })
+    }
+})
 
 
 const Award = objectType({

From 7f08bdaa1e63ec031def1976b859a50285212a9f Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sun, 18 Sep 2022 16:03:30 +0300
Subject: [PATCH 27/53] update: add extra fields to project query api

---
 api/functions/graphql/nexus-typegen.ts        | 21 +++++++++++++++++
 api/functions/graphql/schema.graphql          |  7 ++++++
 api/functions/graphql/types/project.js        | 23 +++++++++++++++++++
 .../ProjectDetailsCard/ProjectDetails.graphql |  8 +++++++
 4 files changed, 59 insertions(+)

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index 4a12155..b4a7328 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -272,10 +272,17 @@ export interface NexusGenObjects {
   }
   Project: { // root type
     description: string; // String!
+    discord?: string | null; // String
+    github?: string | null; // String
     id: number; // Int!
+    launch_status: NexusGenEnums['ProjectLaunchStatusEnum']; // ProjectLaunchStatusEnum!
     lightning_address?: string | null; // String
     lnurl_callback_url?: string | null; // String
+    slack?: string | null; // String
+    tagline: string; // String!
+    telegram?: string | null; // String
     title: string; // String!
+    twitter?: string | null; // String
     votes_count: number; // Int!
     website: string; // String!
   }
@@ -565,15 +572,22 @@ export interface NexusGenFieldTypes {
     category: NexusGenRootTypes['Category']; // Category!
     cover_image: string; // String!
     description: string; // String!
+    discord: string | null; // String
+    github: string | null; // String
     id: number; // Int!
+    launch_status: NexusGenEnums['ProjectLaunchStatusEnum']; // ProjectLaunchStatusEnum!
     lightning_address: string | null; // String
     lnurl_callback_url: string | null; // String
     memebrs: NexusGenRootTypes['ProjectMember'][]; // [ProjectMember!]!
     recruit_roles: NexusGenRootTypes['MakerRole'][]; // [MakerRole!]!
     screenshots: string[]; // [String!]!
+    slack: string | null; // String
+    tagline: string; // String!
     tags: NexusGenRootTypes['Tag'][]; // [Tag!]!
+    telegram: string | null; // String
     thumbnail_image: string; // String!
     title: string; // String!
+    twitter: string | null; // String
     votes_count: number; // Int!
     website: string; // String!
   }
@@ -940,15 +954,22 @@ export interface NexusGenFieldTypeNames {
     category: 'Category'
     cover_image: 'String'
     description: 'String'
+    discord: 'String'
+    github: 'String'
     id: 'Int'
+    launch_status: 'ProjectLaunchStatusEnum'
     lightning_address: 'String'
     lnurl_callback_url: 'String'
     memebrs: 'ProjectMember'
     recruit_roles: 'MakerRole'
     screenshots: 'String'
+    slack: 'String'
+    tagline: 'String'
     tags: 'Tag'
+    telegram: 'String'
     thumbnail_image: 'String'
     title: 'String'
+    twitter: 'String'
     votes_count: 'Int'
     website: 'String'
   }
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index ce17919..574f846 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -285,15 +285,22 @@ type Project {
   category: Category!
   cover_image: String!
   description: String!
+  discord: String
+  github: String
   id: Int!
+  launch_status: ProjectLaunchStatusEnum!
   lightning_address: String
   lnurl_callback_url: String
   memebrs: [ProjectMember!]!
   recruit_roles: [MakerRole!]!
   screenshots: [String!]!
+  slack: String
+  tagline: String!
   tags: [Tag!]!
+  telegram: String
   thumbnail_image: String!
   title: String!
+  twitter: String
   votes_count: Int!
   website: String!
 }
diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index 1c9c981..3899614 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -23,6 +23,7 @@ const Project = objectType({
     definition(t) {
         t.nonNull.int('id');
         t.nonNull.string('title');
+        t.nonNull.string('tagline');
         t.nonNull.string('description');
         t.nonNull.string('cover_image', {
             async resolve(parent) {
@@ -34,6 +35,14 @@ const Project = objectType({
                 return prisma.project.findUnique({ where: { id: parent.id } }).thumbnail_image_rel().then(resolveImgObjectToUrl)
             }
         });
+        t.nonNull.field('launch_status', {
+            type: ProjectLaunchStatusEnum
+        });
+        t.string('twitter');
+        t.string('discord');
+        t.string('github');
+        t.string('slack');
+        t.string('telegram');
         t.nonNull.list.nonNull.string('screenshots', {
             async resolve(parent) {
                 if (!parent.screenshots_ids) return null
@@ -88,6 +97,20 @@ const Project = objectType({
             }
         })
 
+        t.nonNull.list.nonNull.field('memebrs', {
+            type: ProjectMember,
+            resolve: (parent) => {
+                return prisma.projectMember.findMany({
+                    where: {
+                        projectId: parent.id
+                    },
+                    include: {
+                        user: true
+                    }
+                })
+            }
+        })
+
         t.nonNull.list.nonNull.field('recruit_roles', {
             type: MakerRole,
             resolve: async (parent) => {
diff --git a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql
index d8203e8..c0d4731 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql
@@ -14,6 +14,14 @@ query ProjectDetails($projectId: Int!) {
       id
       title
     }
+    memebrs {
+      role
+      user {
+        id
+        name
+        avatar
+      }
+    }
     awards {
       title
       image

From 558ecf7a9ea817180c75a85bd9afea686d21a2b1 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sun, 18 Sep 2022 17:26:48 +0300
Subject: [PATCH 28/53] feat: base re-design of project details modal

---
 api/functions/graphql/nexus-typegen.ts        |   6 +-
 api/functions/graphql/schema.graphql          |   3 +-
 api/functions/graphql/types/project.js        |  18 +-
 .../ProjectDetailsCard/ProjectDetails.graphql |  23 ++-
 .../ProjectDetailsCard.Skeleton.tsx           |  37 ++--
 .../ProjectDetailsCard/ProjectDetailsCard.tsx | 175 +++++++++++++-----
 src/graphql/index.tsx                         |  45 ++++-
 7 files changed, 228 insertions(+), 79 deletions(-)

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index b4a7328..0b1d32b 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -569,6 +569,7 @@ export interface NexusGenFieldTypes {
   }
   Project: { // field return type
     awards: NexusGenRootTypes['Award'][]; // [Award!]!
+    capabilities: NexusGenRootTypes['Capability'][]; // [Capability!]!
     category: NexusGenRootTypes['Category']; // Category!
     cover_image: string; // String!
     description: string; // String!
@@ -578,7 +579,7 @@ export interface NexusGenFieldTypes {
     launch_status: NexusGenEnums['ProjectLaunchStatusEnum']; // ProjectLaunchStatusEnum!
     lightning_address: string | null; // String
     lnurl_callback_url: string | null; // String
-    memebrs: NexusGenRootTypes['ProjectMember'][]; // [ProjectMember!]!
+    members: NexusGenRootTypes['ProjectMember'][]; // [ProjectMember!]!
     recruit_roles: NexusGenRootTypes['MakerRole'][]; // [MakerRole!]!
     screenshots: string[]; // [String!]!
     slack: string | null; // String
@@ -951,6 +952,7 @@ export interface NexusGenFieldTypeNames {
   }
   Project: { // field return type name
     awards: 'Award'
+    capabilities: 'Capability'
     category: 'Category'
     cover_image: 'String'
     description: 'String'
@@ -960,7 +962,7 @@ export interface NexusGenFieldTypeNames {
     launch_status: 'ProjectLaunchStatusEnum'
     lightning_address: 'String'
     lnurl_callback_url: 'String'
-    memebrs: 'ProjectMember'
+    members: 'ProjectMember'
     recruit_roles: 'MakerRole'
     screenshots: 'String'
     slack: 'String'
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index 574f846..b9a82aa 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -282,6 +282,7 @@ input ProfileRolesInput {
 
 type Project {
   awards: [Award!]!
+  capabilities: [Capability!]!
   category: Category!
   cover_image: String!
   description: String!
@@ -291,7 +292,7 @@ type Project {
   launch_status: ProjectLaunchStatusEnum!
   lightning_address: String
   lnurl_callback_url: String
-  memebrs: [ProjectMember!]!
+  members: [ProjectMember!]!
   recruit_roles: [MakerRole!]!
   screenshots: [String!]!
   slack: String
diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index 3899614..2a02efc 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -83,7 +83,7 @@ const Project = objectType({
             }
         })
 
-        t.nonNull.list.nonNull.field('memebrs', {
+        t.nonNull.list.nonNull.field('members', {
             type: ProjectMember,
             resolve: (parent) => {
                 return prisma.projectMember.findMany({
@@ -97,17 +97,11 @@ const Project = objectType({
             }
         })
 
-        t.nonNull.list.nonNull.field('memebrs', {
-            type: ProjectMember,
-            resolve: (parent) => {
-                return prisma.projectMember.findMany({
-                    where: {
-                        projectId: parent.id
-                    },
-                    include: {
-                        user: true
-                    }
-                })
+
+        t.nonNull.list.nonNull.field('capabilities', {
+            type: Capability,
+            resolve: async (parent) => {
+                return prisma.project.findUnique({ where: { id: parent.id } }).capabilities()
             }
         })
 
diff --git a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql
index c0d4731..1f0c2f1 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql
@@ -2,19 +2,26 @@ query ProjectDetails($projectId: Int!) {
   getProject(id: $projectId) {
     id
     title
+    tagline
     description
     cover_image
     thumbnail_image
+    launch_status
+    twitter
+    discord
+    github
+    slack
+    telegram
     screenshots
     website
     lightning_address
-    lnurl_callback_url
     votes_count
     category {
       id
+      icon
       title
     }
-    memebrs {
+    members {
       role
       user {
         id
@@ -32,5 +39,17 @@ query ProjectDetails($projectId: Int!) {
       id
       title
     }
+    recruit_roles {
+      id
+      title
+      icon
+      level
+    }
+
+    capabilities {
+      id
+      title
+      icon
+    }
   }
 }
diff --git a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.Skeleton.tsx b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.Skeleton.tsx
index 8da03ca..619ae57 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.Skeleton.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.Skeleton.tsx
@@ -5,6 +5,7 @@ import Skeleton from 'react-loading-skeleton';
 import Badge from 'src/Components/Badge/Badge';
 import { useMediaQuery } from 'src/utils/hooks';
 import { MEDIA_QUERIES } from 'src/utils/theme';
+import Button from 'src/Components/Button/Button';
 
 
 interface Props extends ModalCard {
@@ -29,27 +30,37 @@ export default function ProjectDetailsCardSkeleton({ onClose, direction, ...prop
             className={`modal-card max-w-[768px] ${props.isPageModal && !isMdScreen && 'rounded-0 w-full min-h-screen'}`}
 
         >
-            <div className="relative h-[80px] lg:h-[152px]">
+            <div className="relative h-[100px] lg:h-[80px]">
                 <Skeleton height='100%' className='!leading-inherit' />
-                <button className="w-40 h-40 md:w-48 md:h-48 bg-white z-10 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>
+                <button className="w-32 h-32  bg-gray-600 bg-opacity-80 text-white absolute top-24 right-24 rounded-full hover:bg-gray-800 text-center" onClick={onClose}><MdClose className=' inline-block' /></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">
-                        <Skeleton height='100%' />
+                <div className="flex flex-col mt-[-80px] md:flex-row md:mt-0 gap-24 items-start relative">
+                    <div className="flex-shrink-0 w-[108px] h-[108px] ">
+                        <Skeleton height='100%' className='rounded-24 border-2 border-white' />
                     </div>
-                    <div className='flex flex-col items-start justify-between self-stretch'>
-                        <h3 className="text-h3 font-regular"> <Skeleton width='13ch' /></h3>
-                        <span className="text-blue-400 font-regular text-body4"  > <Skeleton width='6ch' /></span>
-                        <div className='flex gap-8'>
-                            <Badge size='sm' isLoading />
-                            <Badge size='sm' isLoading />
+                    <div className='flex flex-col gap-8 items-start justify-between'>
+                        <h3 className="text-body1 font-bold"><Skeleton width='13ch' /></h3>
+                        <p className="text-body4 text-gray-600"><Skeleton width='30ch' /></p>
+                        <div>
+                            <span className="font-medium text-body4 text-gray-600"><Skeleton width='10ch' /></span>
                         </div>
                     </div>
 
+                    <div className="flex-shrink-0 w-full md:w-auto  md:flex ml-auto gap-16 self-stretch">
+                        {/* <Button color='primary' size='md' className=" my-16" href={project.website} newTab >Visit <BsJoystick /></Button> */}
+                        {/* <VoteButton  onVote={onVote} /> */}
+                        {/* <VoteButton fullWidth votes={project.votes_count} direction='vertical' onVote={onVote} /> */}
+                        {/* {isWalletConnected ?
+                            :
+                            <Button onClick={onConnectWallet} size='md' className="border border-gray-200 bg-gray-100 hover:bg-gray-50 active:bg-gray-100 my-16"><AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> Connect Wallet to Vote</Button>
+                        } */}
+                        <Button fullWidth variant='outline' color='gray' className='!px-8'>
+                            <p className='opacity-0'>votes</p>
+                        </Button>
+                    </div>
                 </div>
                 <p className="mt-40 text-body4 leading-normal h-[120px]">
-
                     <Skeleton width='98%' />
                     <Skeleton width='90%' />
                     <Skeleton width='70%' />
@@ -57,8 +68,6 @@ export default function ProjectDetailsCardSkeleton({ onClose, direction, ...prop
                 </p>
 
                 <div className="mt-40">
-                    <h3 className="text-h5 font-bold mb-16">Screenshots</h3>
-
                     <div className="grid grid-cols-2 md:grid-cols-4 gap-8 justify-items-center">
                         {
                             Array(4).fill(0).map((_, idx) => <div key={idx} className="w-full relative pt-[56%] cursor-pointer bg-gray-200 shadow-sm rounded-10 overflow-hidden">
diff --git a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
index 6d8b40b..aaca8ee 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
@@ -8,8 +8,8 @@ import { setProject } from 'src/redux/features/project.slice';
 import Button from 'src/Components/Button/Button';
 import { AiFillThunderbolt } from 'react-icons/ai';
 import ProjectCardSkeleton from './ProjectDetailsCard.Skeleton'
-import VoteButton from 'src/features/Projects/pages/ProjectPage/VoteButton/VoteButton';
-import { Wallet_Service } from 'src/services'
+// import VoteButton from 'src/features/Projects/pages/ProjectPage/VoteButton/VoteButton';
+import { NotificationsService, Wallet_Service } from 'src/services'
 import { useProjectDetailsQuery } from 'src/graphql';
 import Lightbox from 'src/Components/Lightbox/Lightbox'
 import linkifyHtml from 'linkify-html';
@@ -17,6 +17,13 @@ import ErrorMessage from 'src/Components/Errors/ErrorMessage/ErrorMessage';
 import { setVoteAmount } from 'src/redux/features/vote.slice';
 import { numberFormatter } from 'src/utils/helperFunctions';
 import { MEDIA_QUERIES } from 'src/utils/theme';
+import { FaDiscord } from 'react-icons/fa';
+import { FiGithub, FiGlobe, FiTwitter } from 'react-icons/fi';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import Badge from 'src/Components/Badge/Badge';
+import Avatar from 'src/features/Profiles/Components/Avatar/Avatar';
+import { Link } from 'react-router-dom';
+import { createRoute } from 'src/utils/routing';
 
 
 interface Props extends ModalCard {
@@ -29,13 +36,12 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
     const [screenshotsOpen, setScreenshotsOpen] = useState(-1);
 
 
-    const { isWalletConnected, project } = useAppSelector(state => ({
+    const { isWalletConnected } = useAppSelector(state => ({
         isWalletConnected: state.wallet.isConnected,
-        project: state.project.project
     }));
     const isMdScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
 
-    const { loading, error } = useProjectDetailsQuery({
+    const { data, loading, error } = useProjectDetailsQuery({
         variables: { projectId: projectId! },
         onCompleted: data => {
             dispatch(setProject(data.getProject))
@@ -65,13 +71,45 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
             </div>
         </div>
 
-    if (loading || !project)
+    if (loading || !data?.getProject)
         return <ProjectCardSkeleton onClose={closeModal} direction={direction} isPageModal={props.isPageModal} />;
 
     const onConnectWallet = async () => {
         Wallet_Service.connectWallet()
     }
 
+    const project = data.getProject;
+
+    const links = [
+        {
+            value: project.discord,
+            text: project.discord,
+            icon: FaDiscord,
+            colors: "bg-violet-100 text-violet-900",
+        },
+        {
+            value: project.website,
+            text: project.website?.replace(/(^\w+:|^)\/\//, '').replace(/\/$/, ""),
+            icon: FiGlobe,
+            colors: "bg-gray-100 text-gray-900",
+            url: project.website
+        },
+        {
+            value: project.twitter,
+            text: project.twitter,
+            icon: FiTwitter,
+            colors: "bg-blue-100 text-blue-500",
+            url: project.twitter
+        },
+        {
+            value: project.github,
+            text: project.github,
+            icon: FiGithub,
+            colors: "bg-pink-100 text-pink-600",
+            url: project.github
+        },
+    ];
+
     const onVote = (votes?: number) => {
         dispatch(setVoteAmount(votes ?? 10));
         dispatch(openModal({
@@ -99,55 +137,83 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
 
     return (
         <div
-            className={`modal-card max-w-[768px] ${(props.isPageModal && !isMdScreen) && '!rounded-0 w-full min-h-screen'}`}
+            className={`modal-card max-w-[676px] ${(props.isPageModal && !isMdScreen) && '!rounded-0 w-full min-h-screen'}`}
         >
-            <div className="relative h-[80px] lg:h-[152px]">
+            {/* Cover Image */}
+            <div className="relative h-[100px] lg:h-[80px]">
                 <img className="w-full h-full object-cover" src={project.cover_image} alt="" />
-                <button className="w-40 h-40 md:w-48 md:h-48 bg-white absolute top-1/2 left-32 -translate-y-1/2 rounded-full hover:bg-gray-200 text-center" onClick={closeModal}><MdClose className=' inline-block text-body2 lg:text-body1' /></button>
+                <button className="w-32 h-32  bg-gray-600 bg-opacity-80 text-white absolute top-24 right-24 rounded-full hover:bg-gray-800 text-center" onClick={closeModal}><MdClose className=' inline-block' /></button>
             </div>
-            <div className="p-24">
-                <div className="flex gap-24 items-start">
-                    <div className="flex-shrink-0 w-[93px] h-[93px]">
-                        <img className="w-full h-full rounded-md border" src={project?.thumbnail_image} alt="" />
+            <div className="p-24 flex flex-col gap-24">
+                {/* Title & Basic Info */}
+                <div className="flex flex-col mt-[-80px] md:flex-row md:mt-0 gap-24 items-start relative">
+                    <div className="flex-shrink-0 w-[108px] h-[108px]">
+                        <img className="w-full h-full border-2 border-white rounded-24" 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 truncate max-w-[20ch]" target='_blank' rel="noreferrer" href={project?.website}>{project?.website?.replace(/(^\w+:|^)\/\//, '').replace(/\/$/, "")}</a>
+                    <div className='flex flex-col gap-8 items-start justify-between'>
+                        <h3 className="text-body1 font-bold">{project.title}</h3>
+                        <p className="text-body4 text-gray-600">{project.tagline}</p>
                         <div>
-                            <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' /> {numberFormatter(project?.votes_count)}</span>
-
+                            <span className="font-medium text-body4 text-gray-600">{project.category.icon} {project.category.title}</span>
                         </div>
                     </div>
-                    <div className="flex-shrink-0  hidden md:flex ml-auto gap-16">
-                        <Button color='primary' size='md' className=" my-16" href={project.website} newTab >Visit <BsJoystick /></Button>
-                        {isWalletConnected ?
-                            <VoteButton onVote={onVote} />
+                    <div className="flex-shrink-0 w-full md:w-auto  md:flex ml-auto gap-16 self-stretch">
+                        {/* <Button color='primary' size='md' className=" my-16" href={project.website} newTab >Visit <BsJoystick /></Button> */}
+                        {/* <VoteButton  onVote={onVote} /> */}
+                        {/* <VoteButton fullWidth votes={project.votes_count} direction='vertical' onVote={onVote} /> */}
+                        {/* {isWalletConnected ?
                             :
                             <Button onClick={onConnectWallet} size='md' className="border border-gray-200 bg-gray-100 hover:bg-gray-50 active:bg-gray-100 my-16"><AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> Connect Wallet to Vote</Button>
-                        }
+                        } */}
+                        <Button fullWidth variant='outline' color='gray' className='!px-8' onClick={() => onVote()}>
+                            <div className="flex justify-center items-center gap-8 md:flex-col ">
+                                <MdLocalFireDepartment />{<span className="align-middle w-[4ch]"> {numberFormatter(project.votes_count)}</span>}
+                            </div>
+                        </Button>
                     </div>
                 </div>
-                <p className="mt-40 text-body4 leading-normal whitespace-pre-line" dangerouslySetInnerHTML={{
-                    __html: linkifyHtml(project?.description, {
-                        className: ' text-blue-500 underline',
-                        defaultProtocol: 'https',
-                        target: "_blank",
-                        rel: 'noreferrer'
-                    })
-                }}></p>
-                <div className="md:hidden">
-                    <Button color='primary' size='md' fullWidth href={project.website} newTab className="w-full mt-24 mb-16">Visit <BsJoystick /></Button>
-                    {isWalletConnected ?
-                        <VoteButton fullWidth onVote={onVote} />
-                        :
-                        <Button size='md' fullWidth className="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>
-                    }
+
+                {/* About */}
+                <div>
+                    <p className="text-body5 text-gray-400 mb-8">About</p>
+                    <div className=" text-body4 text-gray-600 leading-normal whitespace-pre-line" dangerouslySetInnerHTML={{
+                        __html: linkifyHtml(project.description, {
+                            className: ' text-blue-500 underline',
+                            defaultProtocol: 'https',
+                            target: "_blank",
+                            rel: 'noreferrer'
+                        })
+                    }}></div>
+
+                    {/* Links */}
+                    <div className="mt-16 flex flex-wrap gap-16">
+                        {links.filter(link => !!link.value).map((link, idx) =>
+                        (link.url ? <a
+                            key={idx}
+                            href={link.url!}
+                            className={`w-40 aspect-square rounded-full flex justify-center items-center ${link.colors}`}
+                            target='_blank'
+                            rel="noreferrer">
+                            <link.icon className="scale-125" />
+                        </a>
+                            :
+                            <CopyToClipboard
+                                text={link.value!}
+                                onCopy={() => NotificationsService.info(" Copied to clipboard", { icon: "📋" })}
+                            >
+                                <button
+                                    key={idx}
+                                    onClick={() => { }}
+                                    className={`w-40 aspect-square rounded-full flex justify-center items-center ${link.colors}`}
+                                >
+                                    <link.icon className="scale-125" />
+                                </button>
+                            </CopyToClipboard>
+                        ))}
+                    </div>
                 </div>
                 {project.screenshots.length > 0 && <>
-                    <div className="mt-40">
-                        <h3 className="text-h5 font-bold mb-16">Screenshots</h3>
+                    <div className="">
                         <div className="grid grid-cols-2 md:grid-cols-4 gap-8 justify-items-center">
                             {project.screenshots.slice(0, 4).map((screenshot, idx) => <div
                                 key={idx}
@@ -165,9 +231,26 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
                         onClose={() => setScreenshotsOpen(-1)}
                     />
                 </>}
-                <hr className="my-40" />
-                <div className="text-center">
-                    <h3 className="text-body4 font-regular">Are you the creator of this project?</h3>
+
+                {project.capabilities.length > 0 &&
+                    <div>
+                        <p className="text-body5 text-gray-400 mb-8">CAPABILITIES</p>
+                        <div className="flex flex-wrap gap-8">
+                            {project.capabilities.map(cap => <Badge key={cap.id} size='sm'>{cap.icon} {cap.title}</Badge>)}
+                        </div>
+                    </div>}
+                <hr className="" />
+                {project.members.length > 0 &&
+                    <div>
+                        <p className="text-body5 text-gray-400 mb-8">MAKERS</p>
+                        <div className="flex flex-wrap gap-8">
+                            {project.members.map(m => <Link key={m.user.id} to={createRoute({ type: "profile", id: m.user.id, username: m.user.name })}>
+                                <Avatar width={40} src={m.user.avatar} />
+                            </Link>)}
+                        </div>
+                    </div>}
+                {/* <div className="text-center">
+                    <h3 className="text-body4 font-regular">Are you the creator of this project</h3>
                     <Button
                         color='gray'
                         size='md'
@@ -176,7 +259,7 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
                         newTab
                     // onClick={onClaim}
                     >Claim 🖐</Button>
-                </div>
+                </div> */}
             </div>
         </div>
     )
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index 059173f..76de547 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -399,17 +399,26 @@ export type ProfileRolesInput = {
 export type Project = {
   __typename?: 'Project';
   awards: Array<Award>;
+  capabilities: Array<Capability>;
   category: Category;
   cover_image: Scalars['String'];
   description: Scalars['String'];
+  discord: Maybe<Scalars['String']>;
+  github: Maybe<Scalars['String']>;
   id: Scalars['Int'];
+  launch_status: ProjectLaunchStatusEnum;
   lightning_address: Maybe<Scalars['String']>;
   lnurl_callback_url: Maybe<Scalars['String']>;
+  members: Array<ProjectMember>;
   recruit_roles: Array<MakerRole>;
   screenshots: Array<Scalars['String']>;
+  slack: Maybe<Scalars['String']>;
+  tagline: Scalars['String'];
   tags: Array<Tag>;
+  telegram: Maybe<Scalars['String']>;
   thumbnail_image: Scalars['String'];
   title: Scalars['String'];
+  twitter: Maybe<Scalars['String']>;
   votes_count: Scalars['Int'];
   website: Scalars['String'];
 };
@@ -419,6 +428,12 @@ export enum ProjectLaunchStatusEnum {
   Wip = 'WIP'
 }
 
+export type ProjectMember = {
+  __typename?: 'ProjectMember';
+  role: Team_Member_Role;
+  user: User;
+};
+
 export type Query = {
   __typename?: 'Query';
   allCategories: Array<Category>;
@@ -1025,7 +1040,7 @@ export type ProjectDetailsQueryVariables = Exact<{
 }>;
 
 
-export type ProjectDetailsQuery = { __typename?: 'Query', getProject: { __typename?: 'Project', id: number, title: string, description: string, cover_image: string, thumbnail_image: string, screenshots: Array<string>, website: string, lightning_address: string | null, lnurl_callback_url: string | null, votes_count: number, category: { __typename?: 'Category', id: number, title: string }, awards: Array<{ __typename?: 'Award', title: string, image: string, url: string, id: number }>, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } };
+export type ProjectDetailsQuery = { __typename?: 'Query', getProject: { __typename?: 'Project', id: number, title: string, tagline: string, description: string, cover_image: string, thumbnail_image: string, launch_status: ProjectLaunchStatusEnum, twitter: string | null, discord: string | null, github: string | null, slack: string | null, telegram: string | null, screenshots: Array<string>, website: string, lightning_address: string | null, votes_count: number, category: { __typename?: 'Category', id: number, icon: string | null, title: string }, members: Array<{ __typename?: 'ProjectMember', role: Team_Member_Role, user: { __typename?: 'User', id: number, name: string, avatar: string } }>, awards: Array<{ __typename?: 'Award', title: string, image: string, url: string, id: number }>, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }>, capabilities: Array<{ __typename?: 'Capability', id: number, title: string, icon: string }> } };
 
 export type GetAllRolesQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -2551,18 +2566,33 @@ export const ProjectDetailsDocument = gql`
   getProject(id: $projectId) {
     id
     title
+    tagline
     description
     cover_image
     thumbnail_image
+    launch_status
+    twitter
+    discord
+    github
+    slack
+    telegram
     screenshots
     website
     lightning_address
-    lnurl_callback_url
     votes_count
     category {
       id
+      icon
       title
     }
+    members {
+      role
+      user {
+        id
+        name
+        avatar
+      }
+    }
     awards {
       title
       image
@@ -2573,6 +2603,17 @@ export const ProjectDetailsDocument = gql`
       id
       title
     }
+    recruit_roles {
+      id
+      title
+      icon
+      level
+    }
+    capabilities {
+      id
+      title
+      icon
+    }
   }
 }
     `;

From a24d94f4b400aa46098e747bfcddc44d4dd7f0b0 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 19 Sep 2022 10:53:08 +0300
Subject: [PATCH 29/53] update: remove extra tournaments badges from
 list-project page

---
 .../TournamentsInput/TournamentsInput.tsx          | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.tsx b/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.tsx
index 50248f4..7ed5dbb 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.tsx
@@ -52,18 +52,6 @@ export default function TournamentsInput(props: Props) {
 const data = [
     {
         id: 1,
-        title: 'ShockTheWeb3',
-    },
-    {
-        id: 2,
-        title: 'Adopting Bitcoin 2022',
-    },
-    {
-        id: 3,
-        title: 'TabConf',
-    },
-    {
-        id: 4,
-        title: 'Blockstream',
+        title: 'Legends of Lightning',
     },
 ]

From fa8c74b8de35979c29068fe142e327b6f7456dfe Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 19 Sep 2022 11:13:49 +0300
Subject: [PATCH 30/53] feat: add api query to get tournament open for
 registeration

---
 api/functions/graphql/nexus-typegen.ts        |  2 +
 api/functions/graphql/schema.graphql          |  1 +
 api/functions/graphql/types/tournament.js     | 23 +++++++++
 .../TournamentsInput/TournamentsInput.tsx     | 49 ++++++++++---------
 .../tournamentsToRegister.graphql             |  6 +++
 .../ProjectDetailsCard/ProjectDetailsCard.tsx |  2 -
 src/graphql/index.tsx                         | 41 ++++++++++++++++
 7 files changed, 99 insertions(+), 25 deletions(-)
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/tournamentsToRegister.graphql

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index 0b1d32b..448a3db 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -613,6 +613,7 @@ export interface NexusGenFieldTypes {
     getProject: NexusGenRootTypes['Project']; // Project!
     getProjectsInTournament: NexusGenRootTypes['TournamentProjectsResponse']; // TournamentProjectsResponse!
     getTournamentById: NexusGenRootTypes['Tournament']; // Tournament!
+    getTournamentToRegister: NexusGenRootTypes['Tournament'][]; // [Tournament!]!
     getTrendingPosts: NexusGenRootTypes['Post'][]; // [Post!]!
     hottestProjects: NexusGenRootTypes['Project'][]; // [Project!]!
     me: NexusGenRootTypes['MyProfile'] | null; // MyProfile
@@ -996,6 +997,7 @@ export interface NexusGenFieldTypeNames {
     getProject: 'Project'
     getProjectsInTournament: 'TournamentProjectsResponse'
     getTournamentById: 'Tournament'
+    getTournamentToRegister: 'Tournament'
     getTrendingPosts: 'Post'
     hottestProjects: 'Project'
     me: 'MyProfile'
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index b9a82aa..4ec2313 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -333,6 +333,7 @@ type Query {
   getProject(id: Int!): Project!
   getProjectsInTournament(roleId: Int, search: String, skip: Int = 0, take: Int = 10, tournamentId: Int!): TournamentProjectsResponse!
   getTournamentById(id: Int!): Tournament!
+  getTournamentToRegister: [Tournament!]!
   getTrendingPosts: [Post!]!
   hottestProjects(skip: Int = 0, take: Int = 50): [Project!]!
   me: MyProfile
diff --git a/api/functions/graphql/types/tournament.js b/api/functions/graphql/types/tournament.js
index 7e05b78..5d9102b 100644
--- a/api/functions/graphql/types/tournament.js
+++ b/api/functions/graphql/types/tournament.js
@@ -214,6 +214,28 @@ const getTournamentById = extendType({
     }
 })
 
+
+const getTournamentToRegister = extendType({
+    type: "Query",
+    definition(t) {
+        t.nonNull.list.nonNull.field('getTournamentToRegister', {
+            type: Tournament,
+            args: {
+            },
+            resolve() {
+
+                return prisma.tournament.findMany({
+                    where: {
+                        end_date: {
+                            gt: new Date()
+                        },
+                    }
+                })
+            }
+        })
+    }
+})
+
 const ParticipationInfo = objectType({
     name: "ParticipationInfo",
     definition(t) {
@@ -538,6 +560,7 @@ module.exports = {
     getMakersInTournament,
     getProjectsInTournament,
     tournamentParticipationInfo,
+    getTournamentToRegister,
 
     // Mutations
     registerInTournament,
diff --git a/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.tsx b/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.tsx
index 7ed5dbb..edf6b75 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/TournamentsInput.tsx
@@ -1,4 +1,5 @@
 import Button from 'src/Components/Button/Button';
+import { useGetTournamentsToRegisterQuery } from 'src/graphql';
 import { random } from 'src/utils/helperFunctions';
 
 interface Props {
@@ -8,6 +9,8 @@ interface Props {
 
 export default function TournamentsInput(props: Props) {
 
+    const query = useGetTournamentsToRegisterQuery();
+
 
     const handleClick = (clickedValue: number) => {
         if (props.value.includes(clickedValue))
@@ -19,39 +22,39 @@ export default function TournamentsInput(props: Props) {
 
     return (
         <div className="flex flex-wrap gap-8">
-            {false ?
-                Array(10).fill(0).map((_, idx) =>
+            {query.loading ?
+                Array(4).fill(0).map((_, idx) =>
                     <div
                         key={idx}
                         className="bg-gray-100 border border-gray-200 p-8 rounded-10">
                         <span className='invisible'>{"loading category skeleton".slice(random(6, 12))}</span>
                     </div>)
                 :
-                data.map(item =>
-                    <Button
-                        key={item.id}
-                        color='none'
-                        size='sm'
-                        className={`
-                        border border-gray-200
+                ((query.data?.getTournamentToRegister && query.data?.getTournamentToRegister.length < 0) ?
+                    query.data?.getTournamentToRegister.map(item =>
+                        <Button
+                            key={item.id}
+                            color='none'
+                            size='sm'
+                            className={`
+                        border text-gray-800
                         ${props.value.includes(item.id) ?
-                                'title-primary-600 bg-primary-100'
-                                :
-                                "bg-gray-100"
-                            }
+                                    'title-primary-600 bg-primary-100 border-primary-200'
+                                    :
+                                    "bg-gray-100 border-gray-200"
+                                }
                         `}
-                        onClick={() => handleClick(item.id)}
-                    >
-                        {item.title}
-                    </Button>)
+                            onClick={() => handleClick(item.id)}
+                        >
+                            {item.title}
+                        </Button>)
+                    :
+                    <p className='text-gray-400 font-medium'>
+                        There is no running tournaments currently.
+                    </p>)
             }
         </div>
     )
 }
 
-const data = [
-    {
-        id: 1,
-        title: 'Legends of Lightning',
-    },
-]
+
diff --git a/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/tournamentsToRegister.graphql b/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/tournamentsToRegister.graphql
new file mode 100644
index 0000000..84c0927
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/TournamentsInput/tournamentsToRegister.graphql
@@ -0,0 +1,6 @@
+query GetTournamentsToRegister {
+  getTournamentToRegister {
+    id
+    title
+  }
+}
diff --git a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
index aaca8ee..cc5e5a0 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
@@ -1,12 +1,10 @@
 import { useEffect, useState } from 'react'
-import { BsJoystick } from 'react-icons/bs'
 import { MdClose, MdLocalFireDepartment } from 'react-icons/md';
 import { ModalCard } from 'src/Components/Modals/ModalsContainer/ModalsContainer';
 import { useAppDispatch, useAppSelector, useMediaQuery } from 'src/utils/hooks';
 import { openModal, scheduleModal } from 'src/redux/features/modals.slice';
 import { setProject } from 'src/redux/features/project.slice';
 import Button from 'src/Components/Button/Button';
-import { AiFillThunderbolt } from 'react-icons/ai';
 import ProjectCardSkeleton from './ProjectDetailsCard.Skeleton'
 // import VoteButton from 'src/features/Projects/pages/ProjectPage/VoteButton/VoteButton';
 import { NotificationsService, Wallet_Service } from 'src/services'
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index 76de547..176c020 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -452,6 +452,7 @@ export type Query = {
   getProject: Project;
   getProjectsInTournament: TournamentProjectsResponse;
   getTournamentById: Tournament;
+  getTournamentToRegister: Array<Tournament>;
   getTrendingPosts: Array<Post>;
   hottestProjects: Array<Project>;
   me: Maybe<MyProfile>;
@@ -1035,6 +1036,11 @@ export type UpdateProjectMutationVariables = Exact<{
 
 export type UpdateProjectMutation = { __typename?: 'Mutation', updateProject: { __typename?: 'CreateProjectResponse', project: { __typename?: 'Project', id: number, title: string, description: string, cover_image: string, thumbnail_image: string, screenshots: Array<string>, website: string, lightning_address: string | null, lnurl_callback_url: string | null, votes_count: number, category: { __typename?: 'Category', id: number, title: string, icon: string | null }, tags: Array<{ __typename?: 'Tag', id: number, title: string, icon: string | null }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> } } | null };
 
+export type GetTournamentsToRegisterQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetTournamentsToRegisterQuery = { __typename?: 'Query', getTournamentToRegister: Array<{ __typename?: 'Tournament', id: number, title: string }> };
+
 export type ProjectDetailsQueryVariables = Exact<{
   projectId: Scalars['Int'];
 }>;
@@ -2561,6 +2567,41 @@ export function useUpdateProjectMutation(baseOptions?: Apollo.MutationHookOption
 export type UpdateProjectMutationHookResult = ReturnType<typeof useUpdateProjectMutation>;
 export type UpdateProjectMutationResult = Apollo.MutationResult<UpdateProjectMutation>;
 export type UpdateProjectMutationOptions = Apollo.BaseMutationOptions<UpdateProjectMutation, UpdateProjectMutationVariables>;
+export const GetTournamentsToRegisterDocument = gql`
+    query GetTournamentsToRegister {
+  getTournamentToRegister {
+    id
+    title
+  }
+}
+    `;
+
+/**
+ * __useGetTournamentsToRegisterQuery__
+ *
+ * To run a query within a React component, call `useGetTournamentsToRegisterQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetTournamentsToRegisterQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetTournamentsToRegisterQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetTournamentsToRegisterQuery(baseOptions?: Apollo.QueryHookOptions<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>(GetTournamentsToRegisterDocument, options);
+      }
+export function useGetTournamentsToRegisterLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>(GetTournamentsToRegisterDocument, options);
+        }
+export type GetTournamentsToRegisterQueryHookResult = ReturnType<typeof useGetTournamentsToRegisterQuery>;
+export type GetTournamentsToRegisterLazyQueryHookResult = ReturnType<typeof useGetTournamentsToRegisterLazyQuery>;
+export type GetTournamentsToRegisterQueryResult = Apollo.QueryResult<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>;
 export const ProjectDetailsDocument = gql`
     query ProjectDetails($projectId: Int!) {
   getProject(id: $projectId) {

From f5e05e7a1213e8d3607d6ce4c07abeece7434e97 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 19 Sep 2022 12:44:23 +0300
Subject: [PATCH 31/53] feat: add edit project functionality, unique hashtag
 validation

---
 api/functions/graphql/nexus-typegen.ts        |   9 ++
 api/functions/graphql/schema.graphql          |   2 +
 api/functions/graphql/types/project.js        |  37 ++++++-
 .../ScreenshotsInput/ScreenshotThumbnail.tsx  |   2 +-
 .../FormContainer/FormContainer.tsx           |  74 ++++++++++++-
 .../FormContainer/listProject.graphql         |  47 +++++++-
 .../ProjectDetailsTab/ProjectDetailsTab.tsx   |   3 +-
 .../checkValidProjectHashtag.graphql          |   3 +
 .../ProjectDetailsCard/ProjectDetails.graphql |   2 +
 src/graphql/index.tsx                         | 102 ++++++++++++++++--
 10 files changed, 262 insertions(+), 19 deletions(-)
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/checkValidProjectHashtag.graphql

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index 448a3db..88ea58a 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -274,6 +274,7 @@ export interface NexusGenObjects {
     description: string; // String!
     discord?: string | null; // String
     github?: string | null; // String
+    hashtag: string; // String!
     id: number; // Int!
     launch_status: NexusGenEnums['ProjectLaunchStatusEnum']; // ProjectLaunchStatusEnum!
     lightning_address?: string | null; // String
@@ -575,6 +576,7 @@ export interface NexusGenFieldTypes {
     description: string; // String!
     discord: string | null; // String
     github: string | null; // String
+    hashtag: string; // String!
     id: number; // Int!
     launch_status: NexusGenEnums['ProjectLaunchStatusEnum']; // ProjectLaunchStatusEnum!
     lightning_address: string | null; // String
@@ -599,6 +601,7 @@ export interface NexusGenFieldTypes {
   Query: { // field return type
     allCategories: NexusGenRootTypes['Category'][]; // [Category!]!
     allProjects: NexusGenRootTypes['Project'][]; // [Project!]!
+    checkValidProjectHashtag: boolean; // Boolean!
     getAllCapabilities: NexusGenRootTypes['Capability'][]; // [Capability!]!
     getAllHackathons: NexusGenRootTypes['Hackathon'][]; // [Hackathon!]!
     getAllMakersRoles: NexusGenRootTypes['GenericMakerRole'][]; // [GenericMakerRole!]!
@@ -959,6 +962,7 @@ export interface NexusGenFieldTypeNames {
     description: 'String'
     discord: 'String'
     github: 'String'
+    hashtag: 'String'
     id: 'Int'
     launch_status: 'ProjectLaunchStatusEnum'
     lightning_address: 'String'
@@ -983,6 +987,7 @@ export interface NexusGenFieldTypeNames {
   Query: { // field return type name
     allCategories: 'Category'
     allProjects: 'Project'
+    checkValidProjectHashtag: 'Boolean'
     getAllCapabilities: 'Capability'
     getAllHackathons: 'Hackathon'
     getAllMakersRoles: 'GenericMakerRole'
@@ -1238,6 +1243,10 @@ export interface NexusGenArgTypes {
       skip?: number | null; // Int
       take: number | null; // Int
     }
+    checkValidProjectHashtag: { // args
+      hashtag: string; // String!
+      projectId?: number | null; // Int
+    }
     getAllHackathons: { // args
       sortBy?: string | null; // String
       tag?: number | null; // Int
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index 4ec2313..920321b 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -288,6 +288,7 @@ type Project {
   description: String!
   discord: String
   github: String
+  hashtag: String!
   id: Int!
   launch_status: ProjectLaunchStatusEnum!
   lightning_address: String
@@ -319,6 +320,7 @@ type ProjectMember {
 type Query {
   allCategories: [Category!]!
   allProjects(skip: Int = 0, take: Int = 50): [Project!]!
+  checkValidProjectHashtag(hashtag: String!, projectId: Int): Boolean!
   getAllCapabilities: [Capability!]!
   getAllHackathons(sortBy: String, tag: Int): [Hackathon!]!
   getAllMakersRoles: [GenericMakerRole!]!
diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index 2a02efc..4ac2e98 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -24,7 +24,9 @@ const Project = objectType({
         t.nonNull.int('id');
         t.nonNull.string('title');
         t.nonNull.string('tagline');
+        t.nonNull.string('website');
         t.nonNull.string('description');
+        t.nonNull.string('hashtag');
         t.nonNull.string('cover_image', {
             async resolve(parent) {
                 return prisma.project.findUnique({ where: { id: parent.id } }).cover_image_rel().then(resolveImgObjectToUrl)
@@ -57,7 +59,6 @@ const Project = objectType({
                 });
             }
         });
-        t.nonNull.string('website');
         t.string('lightning_address');
         t.string('lnurl_callback_url');
         t.nonNull.int('votes_count');
@@ -173,6 +174,39 @@ const Capability = objectType({
     }
 })
 
+const checkValidProjectHashtag = extendType({
+    type: "Query",
+    definition(t) {
+        t.nonNull.boolean('checkValidProjectHashtag', {
+            args: {
+                hashtag: nonNull(stringArg()),
+                projectId: intArg(),
+            },
+            async resolve(parent, args, context) {
+                if (args.projectId) {
+                    return !(await prisma.project.findFirst({
+                        where: {
+                            id: {
+                                not: args.projectId,
+                            },
+                            hashtag: {
+                                equals: args.hashtag
+                            }
+                        }
+                    }))
+                }
+                return !(await prisma.project.findFirst({
+                    where: {
+                        hashtag: {
+                            equals: args.hashtag
+                        }
+                    }
+                }))
+            }
+        })
+    }
+})
+
 const getAllCapabilities = extendType({
     type: "Query",
     definition(t) {
@@ -533,6 +567,7 @@ module.exports = {
     projectsByCategory,
     getLnurlDetailsForProject,
     getAllCapabilities,
+    checkValidProjectHashtag,
 
     // Mutations
     createProject,
diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotThumbnail.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotThumbnail.tsx
index 0003c43..a7d3199 100644
--- a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotThumbnail.tsx
+++ b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotThumbnail.tsx
@@ -45,7 +45,7 @@ export default function ScreenshotThumbnail({ url, isLoading, isError, onCancel
                     Failed...
                 </div>}
             {!isEmpty &&
-                <button className="absolute bg-gray-900 hover:bg-opacity-100 bg-opacity-60 text-white rounded-full w-32 h-32 top-8 right-8" onClick={() => onCancel?.()}><FaTimes /></button>
+                <button className="absolute bg-gray-900 hover:bg-opacity-100 bg-opacity-60 text-white rounded-full w-32 h-32 top-8 right-8 flex flex-col justify-center items-center" onClick={() => onCancel?.()}><FaTimes /></button>
             }
         </div>
     )
diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
index 6ec8abc..3dcf312 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -1,12 +1,14 @@
 import { FormProvider, NestedValue, Resolver, SubmitHandler, useForm } from "react-hook-form"
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { ProjectLaunchStatusEnum, Team_Member_Role, UpdateProjectInput } from "src/graphql";
-import { PropsWithChildren, useEffect } from "react";
+import { IsValidProjectHashtagDocument, ProjectLaunchStatusEnum, Team_Member_Role, UpdateProjectInput, useProjectDetailsQuery } from "src/graphql";
+import { PropsWithChildren } from "react";
 import { useSearchParams } from "react-router-dom";
 import { usePrompt } from "src/utils/hooks";
 import { imageSchema } from "src/utils/validation";
 import { Override } from "src/utils/interfaces";
+import LoadingPage from "src/Components/LoadingPage/LoadingPage";
+import { apolloClient } from "src/utils/apollo";
 
 
 interface Props {
@@ -37,7 +39,27 @@ const schema: yup.SchemaOf<IListProjectForm> = yup.object({
         .matches(
             /^(?:#)([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:(?!))){0,28}(?:[A-Za-z0-9_]))?)((?: #)([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:\.(?!\.))){0,28}(?:[A-Za-z0-9_]))?))*$/,
             "Invalid format for hashtag"
-        ),
+        )
+        .test({
+            name: "is unique hashtag",
+            test: async (value, context) => {
+                // TODO: debounce this validation function
+                try {
+                    const res = await apolloClient.query({
+                        query: IsValidProjectHashtagDocument,
+                        variables: {
+                            hashtag: value,
+                            projectId: context.parent.id
+                        }
+                    })
+                    if (res.data.checkValidProjectHashtag) return true;
+                    return false;
+                } catch (error) {
+                    return false;
+                }
+            },
+            message: "This hashtag is already used by another project"
+        }),
     website: yup.string().trim().url().required().label("project's link"),
     tagline: yup.string().trim().required().min(10),
     description: yup.string().trim().required().min(50, 'Write at least 10 words descriping your project'),
@@ -61,11 +83,16 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
 
     const [params] = useSearchParams();
 
+    const id = Number(params.get('id'));
+    const isUpdating = !Number.isNaN(id);
+
+
+
     const methods = useForm<IListProjectForm>({
         defaultValues: {
             cover_image: undefined,
             thumbnail_image: undefined,
-            id: !!params.get('id') ? Number(params.get('id')) : undefined,
+            id: isUpdating ? id : undefined,
             title: "",
             website: "",
             tagline: "",
@@ -85,11 +112,50 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
     });
 
 
+    const query = useProjectDetailsQuery({
+        variables: {
+            projectId: id
+        },
+        skip: !isUpdating,
+        onCompleted: (res) => {
+            if (res.getProject) {
+                const data = res.getProject
+                methods.reset({
+                    id: data.id,
+                    title: data.title,
+                    cover_image: { url: data.cover_image },
+                    thumbnail_image: { url: data.thumbnail_image },
+                    tagline: data.tagline,
+                    website: data.website,
+                    description: data.description,
+                    hashtag: data.hashtag,
+                    twitter: data.twitter,
+                    discord: data.discord,
+                    slack: data.slack,
+                    telegram: data.telegram,
+                    github: data.github,
+                    category_id: data.category.id,
+                    capabilities: data.capabilities.map(c => c.id),
+                    screenshots: data.screenshots.map(url => ({ url })),
+
+                    members: data.members.map(({ role, user }) => ({ role, id: user.id, avatar: user.avatar, name: user.name, jobTitle: user.jobTitle })),
+                    recruit_roles: data.recruit_roles.map(r => r.id),
+
+                    tournaments: [],
+                    launch_status: data.launch_status,
+                })
+            }
+        }
+    })
+
+
     usePrompt('You may have some unsaved changes. You still want to leave?', methods.formState.isDirty)
 
     const onSubmit: SubmitHandler<IListProjectForm> = data => console.log(data);
 
 
+    if (query.loading)
+        return <LoadingPage />
 
     return (
         <FormProvider {...methods} >
diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/listProject.graphql b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/listProject.graphql
index eaef155..a3f58c6 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/listProject.graphql
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/listProject.graphql
@@ -13,13 +13,26 @@ mutation CreateProject($input: CreateProjectInput) {
       votes_count
       category {
         id
-        title
         icon
+        title
+      }
+      members {
+        role
+        user {
+          id
+          name
+          avatar
+        }
+      }
+      awards {
+        title
+        image
+        url
+        id
       }
       tags {
         id
         title
-        icon
       }
       recruit_roles {
         id
@@ -27,6 +40,12 @@ mutation CreateProject($input: CreateProjectInput) {
         icon
         level
       }
+
+      capabilities {
+        id
+        title
+        icon
+      }
     }
   }
 }
@@ -44,15 +63,29 @@ mutation UpdateProject($input: UpdateProjectInput) {
       lightning_address
       lnurl_callback_url
       votes_count
+
       category {
         id
-        title
         icon
+        title
+      }
+      members {
+        role
+        user {
+          id
+          name
+          avatar
+        }
+      }
+      awards {
+        title
+        image
+        url
+        id
       }
       tags {
         id
         title
-        icon
       }
       recruit_roles {
         id
@@ -60,6 +93,12 @@ mutation UpdateProject($input: UpdateProjectInput) {
         icon
         level
       }
+
+      capabilities {
+        id
+        title
+        icon
+      }
     }
   }
 }
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
index 6845dac..de05c4a 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
@@ -103,8 +103,7 @@ export default function ProjectDetailsTab(props: Props) {
                     </p>
                     <div className="input-wrapper mt-8 relative">
                         <textarea
-
-                            rows={3}
+                            rows={5}
                             className="input-text !px-16 !py-12"
                             placeholder='Provide a short description your product...'
                             {...register("description")}
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/checkValidProjectHashtag.graphql b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/checkValidProjectHashtag.graphql
new file mode 100644
index 0000000..a24cee3
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/checkValidProjectHashtag.graphql
@@ -0,0 +1,3 @@
+query IsValidProjectHashtag($hashtag: String!, $projectId: Int) {
+  checkValidProjectHashtag(hashtag: $hashtag, projectId: $projectId)
+}
diff --git a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql
index 1f0c2f1..dc3cda9 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql
@@ -4,6 +4,7 @@ query ProjectDetails($projectId: Int!) {
     title
     tagline
     description
+    hashtag
     cover_image
     thumbnail_image
     launch_status
@@ -26,6 +27,7 @@ query ProjectDetails($projectId: Int!) {
       user {
         id
         name
+        jobTitle
         avatar
       }
     }
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index 176c020..6ea3c8b 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -405,6 +405,7 @@ export type Project = {
   description: Scalars['String'];
   discord: Maybe<Scalars['String']>;
   github: Maybe<Scalars['String']>;
+  hashtag: Scalars['String'];
   id: Scalars['Int'];
   launch_status: ProjectLaunchStatusEnum;
   lightning_address: Maybe<Scalars['String']>;
@@ -438,6 +439,7 @@ export type Query = {
   __typename?: 'Query';
   allCategories: Array<Category>;
   allProjects: Array<Project>;
+  checkValidProjectHashtag: Scalars['Boolean'];
   getAllCapabilities: Array<Capability>;
   getAllHackathons: Array<Hackathon>;
   getAllMakersRoles: Array<GenericMakerRole>;
@@ -474,6 +476,12 @@ export type QueryAllProjectsArgs = {
 };
 
 
+export type QueryCheckValidProjectHashtagArgs = {
+  hashtag: Scalars['String'];
+  projectId: InputMaybe<Scalars['Int']>;
+};
+
+
 export type QueryGetAllHackathonsArgs = {
   sortBy: InputMaybe<Scalars['String']>;
   tag: InputMaybe<Scalars['Int']>;
@@ -1027,14 +1035,22 @@ export type CreateProjectMutationVariables = Exact<{
 }>;
 
 
-export type CreateProjectMutation = { __typename?: 'Mutation', createProject: { __typename?: 'CreateProjectResponse', project: { __typename?: 'Project', id: number, title: string, description: string, cover_image: string, thumbnail_image: string, screenshots: Array<string>, website: string, lightning_address: string | null, lnurl_callback_url: string | null, votes_count: number, category: { __typename?: 'Category', id: number, title: string, icon: string | null }, tags: Array<{ __typename?: 'Tag', id: number, title: string, icon: string | null }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> } } | null };
+export type CreateProjectMutation = { __typename?: 'Mutation', createProject: { __typename?: 'CreateProjectResponse', project: { __typename?: 'Project', id: number, title: string, description: string, cover_image: string, thumbnail_image: string, screenshots: Array<string>, website: string, lightning_address: string | null, lnurl_callback_url: string | null, votes_count: number, category: { __typename?: 'Category', id: number, icon: string | null, title: string }, members: Array<{ __typename?: 'ProjectMember', role: Team_Member_Role, user: { __typename?: 'User', id: number, name: string, avatar: string } }>, awards: Array<{ __typename?: 'Award', title: string, image: string, url: string, id: number }>, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }>, capabilities: Array<{ __typename?: 'Capability', id: number, title: string, icon: string }> } } | null };
 
 export type UpdateProjectMutationVariables = Exact<{
   input: InputMaybe<UpdateProjectInput>;
 }>;
 
 
-export type UpdateProjectMutation = { __typename?: 'Mutation', updateProject: { __typename?: 'CreateProjectResponse', project: { __typename?: 'Project', id: number, title: string, description: string, cover_image: string, thumbnail_image: string, screenshots: Array<string>, website: string, lightning_address: string | null, lnurl_callback_url: string | null, votes_count: number, category: { __typename?: 'Category', id: number, title: string, icon: string | null }, tags: Array<{ __typename?: 'Tag', id: number, title: string, icon: string | null }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }> } } | null };
+export type UpdateProjectMutation = { __typename?: 'Mutation', updateProject: { __typename?: 'CreateProjectResponse', project: { __typename?: 'Project', id: number, title: string, description: string, cover_image: string, thumbnail_image: string, screenshots: Array<string>, website: string, lightning_address: string | null, lnurl_callback_url: string | null, votes_count: number, category: { __typename?: 'Category', id: number, icon: string | null, title: string }, members: Array<{ __typename?: 'ProjectMember', role: Team_Member_Role, user: { __typename?: 'User', id: number, name: string, avatar: string } }>, awards: Array<{ __typename?: 'Award', title: string, image: string, url: string, id: number }>, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }>, capabilities: Array<{ __typename?: 'Capability', id: number, title: string, icon: string }> } } | null };
+
+export type IsValidProjectHashtagQueryVariables = Exact<{
+  hashtag: Scalars['String'];
+  projectId: InputMaybe<Scalars['Int']>;
+}>;
+
+
+export type IsValidProjectHashtagQuery = { __typename?: 'Query', checkValidProjectHashtag: boolean };
 
 export type GetTournamentsToRegisterQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -1046,7 +1062,7 @@ export type ProjectDetailsQueryVariables = Exact<{
 }>;
 
 
-export type ProjectDetailsQuery = { __typename?: 'Query', getProject: { __typename?: 'Project', id: number, title: string, tagline: string, description: string, cover_image: string, thumbnail_image: string, launch_status: ProjectLaunchStatusEnum, twitter: string | null, discord: string | null, github: string | null, slack: string | null, telegram: string | null, screenshots: Array<string>, website: string, lightning_address: string | null, votes_count: number, category: { __typename?: 'Category', id: number, icon: string | null, title: string }, members: Array<{ __typename?: 'ProjectMember', role: Team_Member_Role, user: { __typename?: 'User', id: number, name: string, avatar: string } }>, awards: Array<{ __typename?: 'Award', title: string, image: string, url: string, id: number }>, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }>, capabilities: Array<{ __typename?: 'Capability', id: number, title: string, icon: string }> } };
+export type ProjectDetailsQuery = { __typename?: 'Query', getProject: { __typename?: 'Project', id: number, title: string, tagline: string, description: string, hashtag: string, cover_image: string, thumbnail_image: string, launch_status: ProjectLaunchStatusEnum, twitter: string | null, discord: string | null, github: string | null, slack: string | null, telegram: string | null, screenshots: Array<string>, website: string, lightning_address: string | null, votes_count: number, category: { __typename?: 'Category', id: number, icon: string | null, title: string }, members: Array<{ __typename?: 'ProjectMember', role: Team_Member_Role, user: { __typename?: 'User', id: number, name: string, jobTitle: string | null, avatar: string } }>, awards: Array<{ __typename?: 'Award', title: string, image: string, url: string, id: number }>, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }>, capabilities: Array<{ __typename?: 'Capability', id: number, title: string, icon: string }> } };
 
 export type GetAllRolesQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -2463,13 +2479,26 @@ export const CreateProjectDocument = gql`
       votes_count
       category {
         id
-        title
         icon
+        title
+      }
+      members {
+        role
+        user {
+          id
+          name
+          avatar
+        }
+      }
+      awards {
+        title
+        image
+        url
+        id
       }
       tags {
         id
         title
-        icon
       }
       recruit_roles {
         id
@@ -2477,6 +2506,11 @@ export const CreateProjectDocument = gql`
         icon
         level
       }
+      capabilities {
+        id
+        title
+        icon
+      }
     }
   }
 }
@@ -2523,13 +2557,26 @@ export const UpdateProjectDocument = gql`
       votes_count
       category {
         id
-        title
         icon
+        title
+      }
+      members {
+        role
+        user {
+          id
+          name
+          avatar
+        }
+      }
+      awards {
+        title
+        image
+        url
+        id
       }
       tags {
         id
         title
-        icon
       }
       recruit_roles {
         id
@@ -2537,6 +2584,11 @@ export const UpdateProjectDocument = gql`
         icon
         level
       }
+      capabilities {
+        id
+        title
+        icon
+      }
     }
   }
 }
@@ -2567,6 +2619,40 @@ export function useUpdateProjectMutation(baseOptions?: Apollo.MutationHookOption
 export type UpdateProjectMutationHookResult = ReturnType<typeof useUpdateProjectMutation>;
 export type UpdateProjectMutationResult = Apollo.MutationResult<UpdateProjectMutation>;
 export type UpdateProjectMutationOptions = Apollo.BaseMutationOptions<UpdateProjectMutation, UpdateProjectMutationVariables>;
+export const IsValidProjectHashtagDocument = gql`
+    query IsValidProjectHashtag($hashtag: String!, $projectId: Int) {
+  checkValidProjectHashtag(hashtag: $hashtag, projectId: $projectId)
+}
+    `;
+
+/**
+ * __useIsValidProjectHashtagQuery__
+ *
+ * To run a query within a React component, call `useIsValidProjectHashtagQuery` and pass it any options that fit your needs.
+ * When your component renders, `useIsValidProjectHashtagQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useIsValidProjectHashtagQuery({
+ *   variables: {
+ *      hashtag: // value for 'hashtag'
+ *      projectId: // value for 'projectId'
+ *   },
+ * });
+ */
+export function useIsValidProjectHashtagQuery(baseOptions: Apollo.QueryHookOptions<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>(IsValidProjectHashtagDocument, options);
+      }
+export function useIsValidProjectHashtagLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>(IsValidProjectHashtagDocument, options);
+        }
+export type IsValidProjectHashtagQueryHookResult = ReturnType<typeof useIsValidProjectHashtagQuery>;
+export type IsValidProjectHashtagLazyQueryHookResult = ReturnType<typeof useIsValidProjectHashtagLazyQuery>;
+export type IsValidProjectHashtagQueryResult = Apollo.QueryResult<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>;
 export const GetTournamentsToRegisterDocument = gql`
     query GetTournamentsToRegister {
   getTournamentToRegister {
@@ -2609,6 +2695,7 @@ export const ProjectDetailsDocument = gql`
     title
     tagline
     description
+    hashtag
     cover_image
     thumbnail_image
     launch_status
@@ -2631,6 +2718,7 @@ export const ProjectDetailsDocument = gql`
       user {
         id
         name
+        jobTitle
         avatar
       }
     }

From b52d4912a3c9bb911c5f2559899ff48db1756c88 Mon Sep 17 00:00:00 2001
From: Dolu <doludev@protonmail.com>
Date: Mon, 19 Sep 2022 14:24:46 +0200
Subject: [PATCH 32/53] feat: add basic project creation api

---
 api/functions/graphql/nexus-typegen.ts    |  15 +++
 api/functions/graphql/schema.graphql      |   6 ++
 api/functions/graphql/types/project.js    | 126 ++++++++++++++++++++--
 api/functions/graphql/types/tournament.js |   9 +-
 4 files changed, 149 insertions(+), 7 deletions(-)

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index 88ea58a..1b60a3f 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -283,6 +283,7 @@ export interface NexusGenObjects {
     tagline: string; // String!
     telegram?: string | null; // String
     title: string; // String!
+    tournaments?: NexusGenRootTypes['TournamentProject'][] | null; // [TournamentProject!]
     twitter?: string | null; // String
     votes_count: number; // Int!
     website: string; // String!
@@ -360,6 +361,10 @@ export interface NexusGenObjects {
     amount: string; // String!
     title: string; // String!
   }
+  TournamentProject: { // root type
+    project: NexusGenRootTypes['Project']; // Project!
+    tournament: NexusGenRootTypes['Tournament']; // Tournament!
+  }
   TournamentProjectsResponse: { // root type
     hasNext?: boolean | null; // Boolean
     hasPrev?: boolean | null; // Boolean
@@ -590,6 +595,7 @@ export interface NexusGenFieldTypes {
     telegram: string | null; // String
     thumbnail_image: string; // String!
     title: string; // String!
+    tournaments: NexusGenRootTypes['TournamentProject'][] | null; // [TournamentProject!]
     twitter: string | null; // String
     votes_count: number; // Int!
     website: string; // String!
@@ -720,6 +726,10 @@ export interface NexusGenFieldTypes {
     image: string; // String!
     title: string; // String!
   }
+  TournamentProject: { // field return type
+    project: NexusGenRootTypes['Project']; // Project!
+    tournament: NexusGenRootTypes['Tournament']; // Tournament!
+  }
   TournamentProjectsResponse: { // field return type
     hasNext: boolean | null; // Boolean
     hasPrev: boolean | null; // Boolean
@@ -976,6 +986,7 @@ export interface NexusGenFieldTypeNames {
     telegram: 'String'
     thumbnail_image: 'String'
     title: 'String'
+    tournaments: 'TournamentProject'
     twitter: 'String'
     votes_count: 'Int'
     website: 'String'
@@ -1106,6 +1117,10 @@ export interface NexusGenFieldTypeNames {
     image: 'String'
     title: 'String'
   }
+  TournamentProject: { // field return type name
+    project: 'Project'
+    tournament: 'Tournament'
+  }
   TournamentProjectsResponse: { // field return type name
     hasNext: 'Boolean'
     hasPrev: 'Boolean'
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index 920321b..0edf119 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -302,6 +302,7 @@ type Project {
   telegram: String
   thumbnail_image: String!
   title: String!
+  tournaments: [TournamentProject!]
   twitter: String
   votes_count: Int!
   website: String!
@@ -494,6 +495,11 @@ type TournamentPrize {
   title: String!
 }
 
+type TournamentProject {
+  project: Project!
+  tournament: Tournament!
+}
+
 type TournamentProjectsResponse {
   hasNext: Boolean
   hasPrev: Boolean
diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index 4ac2e98..f2f1edb 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -14,6 +14,7 @@ const { resolveImgObjectToUrl } = require('../../../utils/resolveImageUrl');
 
 const { paginationArgs, getLnurlDetails, lightningAddressToLnurl } = require('./helpers');
 const { ImageInput } = require('./misc');
+const { TournamentProject } = require('./tournament');
 const { MakerRole } = require('./users');
 
 
@@ -98,6 +99,9 @@ const Project = objectType({
             }
         })
 
+        t.list.nonNull.field('tournaments', {
+            type: TournamentProject
+        })
 
         t.nonNull.list.nonNull.field('capabilities', {
             type: Capability,
@@ -467,6 +471,8 @@ const createProject = extendType({
                     cover_image,
                     discord,
                     github,
+                    slack,
+                    telegram,
                     twitter,
                     website,
                     launch_status,
@@ -476,15 +482,123 @@ const createProject = extendType({
                     thumbnail_image,
                     tournaments,
                 } = args.input
-                console.log(launch_status);
-                const user = await getUserByPubKey(ctx.userPubKey);
+
+                const user = await getUserByPubKey(ctx.userPubKey)
 
                 // Do some validation
-                if (!user)
-                    throw new ApolloError("Not Authenticated");
+                if (!user) throw new ApolloError('Not Authenticated')
 
-                // TODO Create project
-            }
+                const coverImage = await prisma.hostedImage.findFirst({
+                    where: {
+                        provider_image_id: cover_image.id,
+                    },
+                })
+
+                const coverImageRel = coverImage
+                    ? {
+                          cover_image_rel: {
+                              connect: {
+                                  id: coverImage ? coverImage.id : null,
+                              },
+                          },
+                      }
+                    : {}
+
+                const thumbnailImage = await prisma.hostedImage.findFirst({
+                    where: {
+                        provider_image_id: thumbnail_image.id,
+                    },
+                })
+
+                const thumbnailImageRel = thumbnailImage
+                    ? {
+                          thumbnail_image_rel: {
+                              connect: {
+                                  id: thumbnailImage ? thumbnailImage.id : null,
+                              },
+                          },
+                      }
+                    : {}
+
+                const screenshots_ids = await prisma.hostedImage.findMany({
+                    where: {
+                        provider_image_id: {
+                            in: screenshots.map((s) => s.id),
+                        },
+                    },
+                    select: {
+                        id: true,
+                    },
+                })
+
+                return await prisma.project.create({
+                    data: {
+                        title,
+                        description,
+                        tagline,
+                        hashtag,
+                        website,
+                        discord,
+                        github,
+                        twitter,
+                        slack,
+                        telegram,
+                        launch_status,
+
+                        ...coverImageRel,
+                        ...thumbnailImageRel,
+                        screenshots_ids: screenshots_ids.map((s) => s.id),
+
+                        category: {
+                            connect: {
+                                id: category_id,
+                            },
+                        },
+                        members: {
+                            create: members.map((member) => {
+                                return {
+                                    role: member.role,
+                                    user: {
+                                        connect: {
+                                            id: member.id,
+                                        },
+                                    },
+                                }
+                            }),
+                        },
+                        recruit_roles: {
+                            create: recruit_roles.map((role) => {
+                                return {
+                                    level: 0,
+                                    role: {
+                                        connect: {
+                                            id: role,
+                                        },
+                                    },
+                                }
+                            }),
+                        },
+                        tournaments: {
+                            create: tournaments.map((tournament) => {
+                                return {
+                                    tournament: {
+                                        connect: {
+                                            id: tournament,
+                                        },
+                                    },
+                                }
+                            }),
+                        },
+                        capabilities: {
+                            connect: capabilities.map((c) => {
+                                return {
+                                    id: c,
+                                }
+                            }),
+                        },
+                    },
+                })
+            },
         })
     },
 })
diff --git a/api/functions/graphql/types/tournament.js b/api/functions/graphql/types/tournament.js
index 5d9102b..5f4f41b 100644
--- a/api/functions/graphql/types/tournament.js
+++ b/api/functions/graphql/types/tournament.js
@@ -76,7 +76,13 @@ const TournamentMakerHackingStatusEnum = enumType({
     },
 });
 
-
+const TournamentProject = objectType({
+    name: "TournamentProject",
+    definition(t) {
+        t.nonNull.field('project', { type: "Project" });
+        t.nonNull.field('tournament', { type: "Tournament" })
+    }
+});
 
 const TournamentEvent = objectType({
     name: 'TournamentEvent',
@@ -551,6 +557,7 @@ const updateTournamentRegistration = extendType({
 module.exports = {
     // Types 
     Tournament,
+    TournamentProject,
 
     // Enums
     TournamentEventTypeEnum,

From 628b405e39d35fb700d654a23288d63abb94ad70 Mon Sep 17 00:00:00 2001
From: Dolu <doludev@protonmail.com>
Date: Wed, 21 Sep 2022 17:43:21 +0200
Subject: [PATCH 33/53] feat: add create and update project mutations

---
 api/functions/graphql/nexus-typegen.ts |   2 +-
 api/functions/graphql/schema.graphql   |   1 +
 api/functions/graphql/types/project.js | 340 +++++++++++++++++++++++--
 src/graphql/index.tsx                  |   1 +
 4 files changed, 315 insertions(+), 29 deletions(-)

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index 1b60a3f..1087a1b 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -132,7 +132,7 @@ export interface NexusGenEnums {
   POST_TYPE: "Bounty" | "Question" | "Story"
   ProjectLaunchStatusEnum: "Launched" | "WIP"
   RoleLevelEnum: 3 | 0 | 1 | 2 | 4
-  TEAM_MEMBER_ROLE: "Admin" | "Maker"
+  TEAM_MEMBER_ROLE: "Admin" | "Maker" | "Owner"
   TournamentEventTypeEnum: 2 | 3 | 0 | 1
   TournamentMakerHackingStatusEnum: 1 | 0
   VOTE_ITEM_TYPE: "Bounty" | "PostComment" | "Project" | "Question" | "Story" | "User"
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index 0edf119..8d25bdb 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -407,6 +407,7 @@ input StoryInputType {
 enum TEAM_MEMBER_ROLE {
   Admin
   Maker
+  Owner
 }
 
 type Tag {
diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index f2f1edb..2ab5fac 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -10,6 +10,8 @@ const {
 } = require('nexus');
 const { getUserByPubKey } = require('../../../auth/utils/helperFuncs');
 const { prisma } = require('../../../prisma');
+const { deleteImage } = require('../../../services/imageUpload.service');
+const { logError } = require('../../../utils/logger');
 const { resolveImgObjectToUrl } = require('../../../utils/resolveImageUrl');
 
 const { paginationArgs, getLnurlDetails, lightningAddressToLnurl } = require('./helpers');
@@ -134,9 +136,13 @@ const Project = objectType({
     }
 })
 
+const ROLE_OWNER = 'Owner'
+const ROLE_ADMIN = 'Admin'
+const ROLE_MAKER = 'Maker'
+
 const TEAM_MEMBER_ROLE = enumType({
     name: 'TEAM_MEMBER_ROLE',
-    members: ['Admin', 'Maker'],
+    members: [ROLE_OWNER, ROLE_ADMIN, ROLE_MAKER],
 });
 
 const ProjectMember = objectType({
@@ -454,6 +460,8 @@ const CreateProjectResponse = objectType({
     }
 })
 
+
+
 const createProject = extendType({
     type: 'Mutation',
     definition(t) {
@@ -461,7 +469,7 @@ const createProject = extendType({
             type: CreateProjectResponse,
             args: { input: CreateProjectInput },
             async resolve(_root, args, ctx) {
-                const {
+                let {
                     title,
                     tagline,
                     hashtag,
@@ -488,6 +496,21 @@ const createProject = extendType({
                 // Do some validation
                 if (!user) throw new ApolloError('Not Authenticated')
 
+                // Many Owners found. Throw an error
+                if (members.filter((m) => m.role === ROLE_OWNER).length > 1) {
+                    throw new ApolloError('Only 1 owner can be defined.')
+                }
+
+                // No owner found. Set the current user as Owner
+                if (!members.find((m) => m.role === ROLE_OWNER)) {
+                    const currentUser = members.find((m) => m.id === user.id)
+                    if (currentUser) {
+                        currentUser.role = ROLE_OWNER
+                    } else {
+                        members = [{ id: user.id, role: ROLE_OWNER }, ...members]
+                    }
+                }
+
                 const coverImage = await prisma.hostedImage.findFirst({
                     where: {
                         provider_image_id: cover_image.id,
@@ -531,7 +554,7 @@ const createProject = extendType({
                     },
                 })
 
-                return await prisma.project.create({
+                const project = await prisma.project.create({
                     data: {
                         title,
                         description,
@@ -598,46 +621,63 @@ const createProject = extendType({
                         },
                     },
                 })
+
+                await prisma.hostedImage
+                    .updateMany({
+                        where: {
+                            id: {
+                                in: [coverImage.id, thumbnailImage.id, ...screenshots_ids.map((s) => s.id)],
+                            },
+                        },
+                        data: {
+                            is_used: true,
+                        },
+                    })
+                    .catch((error) => {
+                        logError(error)
+                        throw new ApolloError('Unexpected error happened...')
+                    })
+
+                return { project }
             },
         })
     },
 })
 
-
 const UpdateProjectInput = inputObjectType({
     name: 'UpdateProjectInput',
     definition(t) {
         t.int('id')
-        t.nonNull.string('title');
-        t.nonNull.string('hashtag');
-        t.nonNull.string('website');
-        t.nonNull.string('tagline');
-        t.nonNull.string('description');
+        t.nonNull.string('title')
+        t.nonNull.string('hashtag')
+        t.nonNull.string('website')
+        t.nonNull.string('tagline')
+        t.nonNull.string('description')
         t.nonNull.field('thumbnail_image', {
-            type: ImageInput
+            type: ImageInput,
         })
         t.nonNull.field('cover_image', {
-            type: ImageInput
+            type: ImageInput,
         })
-        t.string('twitter');
-        t.string('discord');
-        t.string('github');
-        t.string('slack');
-        t.string('telegram');
-        t.nonNull.int('category_id');
-        t.nonNull.list.nonNull.int('capabilities');
+        t.string('twitter')
+        t.string('discord')
+        t.string('github')
+        t.string('slack')
+        t.string('telegram')
+        t.nonNull.int('category_id')
+        t.nonNull.list.nonNull.int('capabilities')
         t.nonNull.list.nonNull.field('screenshots', {
-            type: ImageInput
-        });
+            type: ImageInput,
+        })
         t.nonNull.list.nonNull.field('members', {
-            type: TeamMemberInput
-        });
-        t.nonNull.list.nonNull.int('recruit_roles'); // ids
+            type: TeamMemberInput,
+        })
+        t.nonNull.list.nonNull.int('recruit_roles') // ids
         t.nonNull.field('launch_status', {
-            type: ProjectLaunchStatusEnum
-        });
-        t.nonNull.list.nonNull.int('tournaments'); // ids
-    }
+            type: ProjectLaunchStatusEnum,
+        })
+        t.nonNull.list.nonNull.int('tournaments') // ids
+    },
 })
 
 const updateProject = extendType({
@@ -647,8 +687,252 @@ const updateProject = extendType({
             type: CreateProjectResponse,
             args: { input: UpdateProjectInput },
             async resolve(_root, args, ctx) {
+                const {
+                    id,
+                    title,
+                    tagline,
+                    hashtag,
+                    description,
+                    capabilities,
+                    category_id,
+                    cover_image,
+                    discord,
+                    github,
+                    slack,
+                    telegram,
+                    twitter,
+                    website,
+                    launch_status,
+                    members,
+                    recruit_roles,
+                    screenshots,
+                    thumbnail_image,
+                    tournaments,
+                } = args.input
 
-            }
+                const user = await getUserByPubKey(ctx.userPubKey)
+
+                // Do some validation
+                if (!user) throw new ApolloError('Not Authenticated')
+
+                const project = await prisma.project.findFirst({
+                    where: {
+                        id,
+                    },
+                    include: {
+                        members: true,
+                    },
+                })
+
+                // Maker can't project info
+                if (project.members.find((m) => m.userId === user.id)?.role === ROLE_MAKER) {
+                    throw new ApolloError("Makers can't change project info")
+                }
+
+                let newMembers = []
+
+                // Admin can only change makers
+                if (project.members.find((m) => m.userId === user.id)?.role === ROLE_ADMIN) {
+                    // Changing Makers
+                    const newMakers = members.filter((m) => m.role === ROLE_MAKER)
+
+                    // Set old Admins and Owner using current project.memebers because Admin can't change these Roles
+                    const currentAdminsOwner = project.members
+                        .filter((m) => m.role === ROLE_ADMIN || m.role === ROLE_OWNER)
+                        .map((m) => ({ id: m.userId, role: m.role }))
+
+                    newMembers = [...newMakers, ...currentAdminsOwner]
+                } else {
+                    // Curent user is Owner. Can change all users roles
+                    newMembers = members
+                }
+
+                let imagesToDelete = []
+                let imagesToAdd = []
+
+                let coverImageRel = {}
+                if (cover_image.id) {
+                    const coverImage = await prisma.hostedImage.findFirst({
+                        where: {
+                            provider_image_id: cover_image.id,
+                        },
+                    })
+
+                    coverImageRel = coverImage
+                        ? {
+                              cover_image_rel: {
+                                  connect: {
+                                      id: coverImage ? coverImage.id : null,
+                                  },
+                              },
+                          }
+                        : {}
+
+                    if (coverImage) {
+                        imagesToAdd.push(coverImage.id)
+                    }
+
+                    imagesToDelete.push(project.cover_image_id)
+                }
+
+                let thumbnailImageRel = {}
+                if (thumbnail_image.id) {
+                    const thumbnailImage = await prisma.hostedImage.findFirst({
+                        where: {
+                            provider_image_id: thumbnail_image.id,
+                        },
+                    })
+
+                    thumbnailImageRel = thumbnailImage
+                        ? {
+                              thumbnail_image_rel: {
+                                  connect: {
+                                      id: thumbnailImage ? thumbnailImage.id : null,
+                                  },
+                              },
+                          }
+                        : {}
+
+                    if (thumbnailImage) {
+                        imagesToAdd.push(thumbnailImage.id)
+                    }
+
+                    imagesToDelete.push(project.thumbnail_image_id)
+                }
+
+                let screenshots_ids = []
+                for (const screenshot of screenshots) {
+                    if (screenshot.id) {
+                        const newScreenshot = await prisma.hostedImage.findFirst({
+                            where: {
+                                provider_image_id: screenshot.id,
+                            },
+                            select: {
+                                id: true,
+                            },
+                        })
+                        if (newScreenshot) {
+                            screenshots_ids.push(newScreenshot.id)
+                            imagesToAdd.push(newScreenshot.id)
+                        }
+                    } else {
+                        const newScreenshot = await prisma.hostedImage.findFirst({
+                            where: {
+                                url: screenshot.url,
+                            },
+                            select: {
+                                id: true,
+                            },
+                        })
+                        if (newScreenshot) {
+                            screenshots_ids.push(newScreenshot.id)
+                        }
+                    }
+                }
+                const screenshotsIdsToDelete = project.screenshots_ids.filter((x) => !screenshots_ids.includes(x))
+                imagesToDelete = [...imagesToDelete, ...screenshotsIdsToDelete]
+
+                const updatedProject = await prisma.project
+                    .update({
+                        where: {
+                            id,
+                        },
+                        data: {
+                            title,
+                            description,
+                            tagline,
+                            hashtag,
+                            website,
+                            discord,
+                            github,
+                            twitter,
+                            slack,
+                            telegram,
+                            launch_status,
+
+                            ...coverImageRel,
+                            ...thumbnailImageRel,
+                            screenshots_ids,
+
+                            category: {
+                                connect: {
+                                    id: category_id,
+                                },
+                            },
+                            members: {
+                                deleteMany: {},
+                                create: newMembers.map((member) => {
+                                    return {
+                                        role: member.role,
+                                        user: {
+                                            connect: {
+                                                id: member.id,
+                                            },
+                                        },
+                                    }
+                                }),
+                            },
+                            recruit_roles: {
+                                deleteMany: {},
+                                create: recruit_roles.map((role) => {
+                                    return {
+                                        level: 0,
+                                        role: {
+                                            connect: {
+                                                id: role,
+                                            },
+                                        },
+                                    }
+                                }),
+                            },
+                            tournaments: {
+                                deleteMany: {},
+                                create: tournaments.map((tournament) => {
+                                    return {
+                                        tournament: {
+                                            connect: {
+                                                id: tournament,
+                                            },
+                                        },
+                                    }
+                                }),
+                            },
+                            capabilities: {
+                                set: capabilities.map((c) => {
+                                    return {
+                                        id: c,
+                                    }
+                                }),
+                            },
+                        },
+                    })
+                    .catch((error) => {
+                        logError(error)
+                        throw new ApolloError('Unexpected error happened...')
+                    })
+
+                if (imagesToAdd.length > 0) {
+                    await prisma.hostedImage
+                        .updateMany({
+                            where: {
+                                id: {
+                                    in: imagesToAdd,
+                                },
+                            },
+                            data: {
+                                is_used: true,
+                            },
+                        })
+                        .catch((error) => {
+                            logError(error)
+                            throw new ApolloError('Unexpected error happened...')
+                        })
+                }
+
+                imagesToDelete.map(async (i) => await deleteImage(i))
+
+                return { project: updatedProject }
+            },
         })
     },
 })
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index 6ea3c8b..09a77b7 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -647,6 +647,7 @@ export type StoryInputType = {
 };
 
 export enum Team_Member_Role {
+  Owner = 'Owner',
   Admin = 'Admin',
   Maker = 'Maker'
 }

From 97a4469781b40905e56de62229f7649cd93b5839 Mon Sep 17 00:00:00 2001
From: Dolu <doludev@protonmail.com>
Date: Wed, 21 Sep 2022 18:28:06 +0200
Subject: [PATCH 34/53] feat: add deleteProject mutation

---
 api/functions/graphql/nexus-typegen.ts |  4 +-
 api/functions/graphql/schema.graphql   |  2 +-
 api/functions/graphql/types/project.js | 73 ++++++++++++++++++++++++--
 3 files changed, 73 insertions(+), 6 deletions(-)

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index 1087a1b..1ec8a37 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -523,7 +523,7 @@ export interface NexusGenFieldTypes {
     confirmVote: NexusGenRootTypes['Vote']; // Vote!
     createProject: NexusGenRootTypes['CreateProjectResponse'] | null; // CreateProjectResponse
     createStory: NexusGenRootTypes['Story'] | null; // Story
-    deleteProject: NexusGenRootTypes['CreateProjectResponse'] | null; // CreateProjectResponse
+    deleteProject: NexusGenRootTypes['Project'] | null; // Project
     deleteStory: NexusGenRootTypes['Story'] | null; // Story
     donate: NexusGenRootTypes['Donation']; // Donation!
     registerInTournament: NexusGenRootTypes['User'] | null; // User
@@ -914,7 +914,7 @@ export interface NexusGenFieldTypeNames {
     confirmVote: 'Vote'
     createProject: 'CreateProjectResponse'
     createStory: 'Story'
-    deleteProject: 'CreateProjectResponse'
+    deleteProject: 'Project'
     deleteStory: 'Story'
     donate: 'Donation'
     registerInTournament: 'User'
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index 8d25bdb..efd2546 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -187,7 +187,7 @@ type Mutation {
   confirmVote(payment_request: String!, preimage: String!): Vote!
   createProject(input: CreateProjectInput): CreateProjectResponse
   createStory(data: StoryInputType): Story
-  deleteProject(id: Int!): CreateProjectResponse
+  deleteProject(id: Int!): Project
   deleteStory(id: Int!): Story
   donate(amount_in_sat: Int!): Donation!
   registerInTournament(data: RegisterInTournamentInput, tournament_id: Int!): User
diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index 2ab5fac..f16eed7 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -941,11 +941,78 @@ const deleteProject = extendType({
     type: 'Mutation',
     definition(t) {
         t.field('deleteProject', {
-            type: CreateProjectResponse,
+            type: 'Project',
             args: { id: nonNull(intArg()) },
             async resolve(_root, args, ctx) {
-                // ...
-            }
+                const { id } = args
+                const user = await getUserByPubKey(ctx.userPubKey)
+
+                // Do some validation
+                if (!user) throw new ApolloError('Not Authenticated')
+
+                const project = await prisma.project.findFirst({
+                    where: { id },
+                    include: {
+                        members: true,
+                    },
+                })
+
+                if (!project) throw new ApolloError('Project not found')
+
+                if (project.members.find((m) => m.userId === user.id)?.role !== ROLE_OWNER)
+                    throw new ApolloError("You don't have the right to delete this project")
+
+                // Award is not implemented yet
+                // await prisma.award.deleteMany({
+                //     where: {
+                //         projectId: project.id
+                //     }
+                // })
+
+                await prisma.projectRecruitRoles.deleteMany({
+                    where: {
+                        projectId: project.id,
+                    },
+                })
+
+                await prisma.projectMember.deleteMany({
+                    where: {
+                        projectId: project.id,
+                    },
+                })
+
+                await prisma.tournamentProject.deleteMany({
+                    where: {
+                        project_id: project.id,
+                    },
+                })
+
+                const deletedProject = await prisma.project.delete({
+                    where: {
+                        id,
+                    },
+                })
+
+                const imagesToDelete = await prisma.hostedImage.findMany({
+                    where: {
+                        OR: [
+                            { id: project.cover_image_id },
+                            { id: project.thumbnail_image_id },
+                            {
+                                id: {
+                                    in: project.screenshots_ids,
+                                },
+                            },
+                        ],
+                    },
+                    select: {
+                        id: true,
+                    },
+                })
+                imagesToDelete.map(async (i) => await deleteImage(i.id))
+
+                return deletedProject
+            },
         })
     },
 })

From a01c8dfa159dbd97c2561be6b3ae8ad8a77e9e0b Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sun, 25 Sep 2022 10:36:44 +0300
Subject: [PATCH 35/53] update: project tournamet api

---
 api/functions/graphql/types/project.js     | 64 +++++++++++++---------
 api/functions/graphql/types/tournament.js  |  9 ---
 api/functions/graphql/types/tournaments.js |  0
 3 files changed, 37 insertions(+), 36 deletions(-)
 delete mode 100644 api/functions/graphql/types/tournaments.js

diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index f16eed7..7972883 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -13,10 +13,9 @@ const { prisma } = require('../../../prisma');
 const { deleteImage } = require('../../../services/imageUpload.service');
 const { logError } = require('../../../utils/logger');
 const { resolveImgObjectToUrl } = require('../../../utils/resolveImageUrl');
-
 const { paginationArgs, getLnurlDetails, lightningAddressToLnurl } = require('./helpers');
 const { ImageInput } = require('./misc');
-const { TournamentProject } = require('./tournament');
+const { Tournament } = require('./tournament');
 const { MakerRole } = require('./users');
 
 
@@ -101,8 +100,19 @@ const Project = objectType({
             }
         })
 
+
+        // No need to create this "middle" kind of relations
+        // Instead, just return tournaments
         t.list.nonNull.field('tournaments', {
-            type: TournamentProject
+            type: Tournament,
+            resolve: (parent) => {
+                return prisma.tournamentProject.findMany({
+                    where: { project_id: parent.id },
+                    include: {
+                        tournament: true
+                    }
+                }).then(res => res.map(item => item.tournament))
+            }
         })
 
         t.nonNull.list.nonNull.field('capabilities', {
@@ -519,12 +529,12 @@ const createProject = extendType({
 
                 const coverImageRel = coverImage
                     ? {
-                          cover_image_rel: {
-                              connect: {
-                                  id: coverImage ? coverImage.id : null,
-                              },
-                          },
-                      }
+                        cover_image_rel: {
+                            connect: {
+                                id: coverImage ? coverImage.id : null,
+                            },
+                        },
+                    }
                     : {}
 
                 const thumbnailImage = await prisma.hostedImage.findFirst({
@@ -535,12 +545,12 @@ const createProject = extendType({
 
                 const thumbnailImageRel = thumbnailImage
                     ? {
-                          thumbnail_image_rel: {
-                              connect: {
-                                  id: thumbnailImage ? thumbnailImage.id : null,
-                              },
-                          },
-                      }
+                        thumbnail_image_rel: {
+                            connect: {
+                                id: thumbnailImage ? thumbnailImage.id : null,
+                            },
+                        },
+                    }
                     : {}
 
                 const screenshots_ids = await prisma.hostedImage.findMany({
@@ -760,12 +770,12 @@ const updateProject = extendType({
 
                     coverImageRel = coverImage
                         ? {
-                              cover_image_rel: {
-                                  connect: {
-                                      id: coverImage ? coverImage.id : null,
-                                  },
-                              },
-                          }
+                            cover_image_rel: {
+                                connect: {
+                                    id: coverImage ? coverImage.id : null,
+                                },
+                            },
+                        }
                         : {}
 
                     if (coverImage) {
@@ -785,12 +795,12 @@ const updateProject = extendType({
 
                     thumbnailImageRel = thumbnailImage
                         ? {
-                              thumbnail_image_rel: {
-                                  connect: {
-                                      id: thumbnailImage ? thumbnailImage.id : null,
-                                  },
-                              },
-                          }
+                            thumbnail_image_rel: {
+                                connect: {
+                                    id: thumbnailImage ? thumbnailImage.id : null,
+                                },
+                            },
+                        }
                         : {}
 
                     if (thumbnailImage) {
diff --git a/api/functions/graphql/types/tournament.js b/api/functions/graphql/types/tournament.js
index 5f4f41b..196f376 100644
--- a/api/functions/graphql/types/tournament.js
+++ b/api/functions/graphql/types/tournament.js
@@ -76,14 +76,6 @@ const TournamentMakerHackingStatusEnum = enumType({
     },
 });
 
-const TournamentProject = objectType({
-    name: "TournamentProject",
-    definition(t) {
-        t.nonNull.field('project', { type: "Project" });
-        t.nonNull.field('tournament', { type: "Tournament" })
-    }
-});
-
 const TournamentEvent = objectType({
     name: 'TournamentEvent',
     definition(t) {
@@ -557,7 +549,6 @@ const updateTournamentRegistration = extendType({
 module.exports = {
     // Types 
     Tournament,
-    TournamentProject,
 
     // Enums
     TournamentEventTypeEnum,
diff --git a/api/functions/graphql/types/tournaments.js b/api/functions/graphql/types/tournaments.js
deleted file mode 100644
index e69de29..0000000

From 4b4036fc571a88e01fd9ae531f65b60856978b79 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sun, 25 Sep 2022 11:30:29 +0300
Subject: [PATCH 36/53] update: add permissions to project

---
 api/functions/graphql/types/project.js        | 37 ++++++++++++++++---
 .../pages/ExplorePage/Header/Header.tsx       |  3 +-
 .../ProjectDetailsCard/ProjectDetails.graphql |  1 +
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index 7972883..957f294 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -15,7 +15,6 @@ const { logError } = require('../../../utils/logger');
 const { resolveImgObjectToUrl } = require('../../../utils/resolveImageUrl');
 const { paginationArgs, getLnurlDetails, lightningAddressToLnurl } = require('./helpers');
 const { ImageInput } = require('./misc');
-const { Tournament } = require('./tournament');
 const { MakerRole } = require('./users');
 
 
@@ -101,10 +100,8 @@ const Project = objectType({
         })
 
 
-        // No need to create this "middle" kind of relations
-        // Instead, just return tournaments
-        t.list.nonNull.field('tournaments', {
-            type: Tournament,
+        t.nonNull.list.nonNull.field('tournaments', {
+            type: "Tournament",
             resolve: (parent) => {
                 return prisma.tournamentProject.findMany({
                     where: { project_id: parent.id },
@@ -143,6 +140,24 @@ const Project = objectType({
                 })
             }
         })
+
+        t.nonNull.list.nonNull.field('permissions', {
+            type: ProjectPermissionEnum,
+            resolve: async (parent, _, ctx) => {
+                const user = await getUserByPubKey(ctx.userPubKey)
+                if (!user) return [];
+
+                const role = (await prisma.projectMember.findUnique({ where: { projectId_userId: { projectId: parent.id, userId: user.id } } }))?.role;
+
+                if (!role) return [];
+
+                if (role === ROLE_ADMIN) return [PROJECT_PERMISSIONS.UpdateMembers, PROJECT_PERMISSIONS.UpdateInfo];
+
+                if (role === ROLE_OWNER) return Object.values(PROJECT_PERMISSIONS);
+
+                return []
+            }
+        })
     }
 })
 
@@ -155,6 +170,18 @@ const TEAM_MEMBER_ROLE = enumType({
     members: [ROLE_OWNER, ROLE_ADMIN, ROLE_MAKER],
 });
 
+const PROJECT_PERMISSIONS = {
+    UpdateInfo: "UpdateInfo",
+    DeleteProject: "DeleteProject",
+    UpdateAdmins: "UpdateAdmins",
+    UpdateMembers: "UpdateMembers",
+}
+
+const ProjectPermissionEnum = enumType({
+    name: 'ProjectPermissionEnum',
+    members: PROJECT_PERMISSIONS,
+});
+
 const ProjectMember = objectType({
     name: "ProjectMember",
     definition(t) {
diff --git a/src/features/Projects/pages/ExplorePage/Header/Header.tsx b/src/features/Projects/pages/ExplorePage/Header/Header.tsx
index c289d1e..dcfd708 100644
--- a/src/features/Projects/pages/ExplorePage/Header/Header.tsx
+++ b/src/features/Projects/pages/ExplorePage/Header/Header.tsx
@@ -19,6 +19,7 @@ export const bannerData = {
   link: {
     content: "Register Now",
     url: createRoute({ type: "tournament", id: 1 }),
+    newTab: false
   },
 }
 
@@ -91,7 +92,7 @@ export default function Header() {
             <div className="max-w-[90%]">
               {headerLinks[1].title}
             </div>
-            <Button color="white" href={headerLinks[1].link.url} newTab={headerLinks[1].link.newTab} className="mt-24">
+            <Button color="white" href={headerLinks[1].link.url} newTab={headerLinks[1].link.newTab ?? false} className="mt-24">
               {headerLinks[1].link.content}
             </Button>
           </div>
diff --git a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql
index dc3cda9..66ea49e 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetails.graphql
@@ -22,6 +22,7 @@ query ProjectDetails($projectId: Int!) {
       icon
       title
     }
+    permissions
     members {
       role
       user {

From 3fd0b27a84622db0bdcaeb022a15b0106696e7df Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sun, 25 Sep 2022 12:07:30 +0300
Subject: [PATCH 37/53] fix: handle different prisma clients types

---
 api/functions/graphql/nexus-typegen.ts | 20 +++++---------------
 api/functions/graphql/schema.graphql   | 15 +++++++++------
 api/prisma/index.js                    | 14 ++++++++++----
 src/graphql/index.tsx                  | 18 ++++++++++++++----
 4 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index 1ec8a37..cba6ab8 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -131,6 +131,7 @@ export interface NexusGenInputs {
 export interface NexusGenEnums {
   POST_TYPE: "Bounty" | "Question" | "Story"
   ProjectLaunchStatusEnum: "Launched" | "WIP"
+  ProjectPermissionEnum: "DeleteProject" | "UpdateAdmins" | "UpdateInfo" | "UpdateMembers"
   RoleLevelEnum: 3 | 0 | 1 | 2 | 4
   TEAM_MEMBER_ROLE: "Admin" | "Maker" | "Owner"
   TournamentEventTypeEnum: 2 | 3 | 0 | 1
@@ -283,7 +284,6 @@ export interface NexusGenObjects {
     tagline: string; // String!
     telegram?: string | null; // String
     title: string; // String!
-    tournaments?: NexusGenRootTypes['TournamentProject'][] | null; // [TournamentProject!]
     twitter?: string | null; // String
     votes_count: number; // Int!
     website: string; // String!
@@ -361,10 +361,6 @@ export interface NexusGenObjects {
     amount: string; // String!
     title: string; // String!
   }
-  TournamentProject: { // root type
-    project: NexusGenRootTypes['Project']; // Project!
-    tournament: NexusGenRootTypes['Tournament']; // Tournament!
-  }
   TournamentProjectsResponse: { // root type
     hasNext?: boolean | null; // Boolean
     hasPrev?: boolean | null; // Boolean
@@ -587,6 +583,7 @@ export interface NexusGenFieldTypes {
     lightning_address: string | null; // String
     lnurl_callback_url: string | null; // String
     members: NexusGenRootTypes['ProjectMember'][]; // [ProjectMember!]!
+    permissions: NexusGenEnums['ProjectPermissionEnum'][]; // [ProjectPermissionEnum!]!
     recruit_roles: NexusGenRootTypes['MakerRole'][]; // [MakerRole!]!
     screenshots: string[]; // [String!]!
     slack: string | null; // String
@@ -595,7 +592,7 @@ export interface NexusGenFieldTypes {
     telegram: string | null; // String
     thumbnail_image: string; // String!
     title: string; // String!
-    tournaments: NexusGenRootTypes['TournamentProject'][] | null; // [TournamentProject!]
+    tournaments: NexusGenRootTypes['Tournament'][]; // [Tournament!]!
     twitter: string | null; // String
     votes_count: number; // Int!
     website: string; // String!
@@ -726,10 +723,6 @@ export interface NexusGenFieldTypes {
     image: string; // String!
     title: string; // String!
   }
-  TournamentProject: { // field return type
-    project: NexusGenRootTypes['Project']; // Project!
-    tournament: NexusGenRootTypes['Tournament']; // Tournament!
-  }
   TournamentProjectsResponse: { // field return type
     hasNext: boolean | null; // Boolean
     hasPrev: boolean | null; // Boolean
@@ -978,6 +971,7 @@ export interface NexusGenFieldTypeNames {
     lightning_address: 'String'
     lnurl_callback_url: 'String'
     members: 'ProjectMember'
+    permissions: 'ProjectPermissionEnum'
     recruit_roles: 'MakerRole'
     screenshots: 'String'
     slack: 'String'
@@ -986,7 +980,7 @@ export interface NexusGenFieldTypeNames {
     telegram: 'String'
     thumbnail_image: 'String'
     title: 'String'
-    tournaments: 'TournamentProject'
+    tournaments: 'Tournament'
     twitter: 'String'
     votes_count: 'Int'
     website: 'String'
@@ -1117,10 +1111,6 @@ export interface NexusGenFieldTypeNames {
     image: 'String'
     title: 'String'
   }
-  TournamentProject: { // field return type name
-    project: 'Project'
-    tournament: 'Tournament'
-  }
   TournamentProjectsResponse: { // field return type name
     hasNext: 'Boolean'
     hasPrev: 'Boolean'
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index efd2546..cfaf122 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -294,6 +294,7 @@ type Project {
   lightning_address: String
   lnurl_callback_url: String
   members: [ProjectMember!]!
+  permissions: [ProjectPermissionEnum!]!
   recruit_roles: [MakerRole!]!
   screenshots: [String!]!
   slack: String
@@ -302,7 +303,7 @@ type Project {
   telegram: String
   thumbnail_image: String!
   title: String!
-  tournaments: [TournamentProject!]
+  tournaments: [Tournament!]!
   twitter: String
   votes_count: Int!
   website: String!
@@ -318,6 +319,13 @@ type ProjectMember {
   user: User!
 }
 
+enum ProjectPermissionEnum {
+  DeleteProject
+  UpdateAdmins
+  UpdateInfo
+  UpdateMembers
+}
+
 type Query {
   allCategories: [Category!]!
   allProjects(skip: Int = 0, take: Int = 50): [Project!]!
@@ -496,11 +504,6 @@ type TournamentPrize {
   title: String!
 }
 
-type TournamentProject {
-  project: Project!
-  tournament: Tournament!
-}
-
 type TournamentProjectsResponse {
   hasNext: Boolean
   hasPrev: Boolean
diff --git a/api/prisma/index.js b/api/prisma/index.js
index 1ad9482..5a77a71 100644
--- a/api/prisma/index.js
+++ b/api/prisma/index.js
@@ -1,15 +1,21 @@
-const { PrismaClient } = require('@prisma/client/edge');
+const { PrismaClient } = process.env.NODE_ENV === 'development' ? require('@prisma/client') : require('@prisma/client/edge');
 const createGlobalModule = require('../utils/createGlobalModule');
 
+
 const createPrismaClient = () => {
     console.log("New Prisma Client");
-    return new PrismaClient({
-        log: ["info"],
-    });
+    try {
+        return new PrismaClient({
+            log: ["info"],
+        });
+    } catch (error) {
+        console.log(error);
+    }
 }
 
 const prisma = createGlobalModule('prisma', createPrismaClient)
 
+
 module.exports = {
     prisma
 }
\ No newline at end of file
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index 09a77b7..b6756d2 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -219,7 +219,7 @@ export type Mutation = {
   confirmVote: Vote;
   createProject: Maybe<CreateProjectResponse>;
   createStory: Maybe<Story>;
-  deleteProject: Maybe<CreateProjectResponse>;
+  deleteProject: Maybe<Project>;
   deleteStory: Maybe<Story>;
   donate: Donation;
   registerInTournament: Maybe<User>;
@@ -411,6 +411,7 @@ export type Project = {
   lightning_address: Maybe<Scalars['String']>;
   lnurl_callback_url: Maybe<Scalars['String']>;
   members: Array<ProjectMember>;
+  permissions: Array<ProjectPermissionEnum>;
   recruit_roles: Array<MakerRole>;
   screenshots: Array<Scalars['String']>;
   slack: Maybe<Scalars['String']>;
@@ -419,6 +420,7 @@ export type Project = {
   telegram: Maybe<Scalars['String']>;
   thumbnail_image: Scalars['String'];
   title: Scalars['String'];
+  tournaments: Array<Tournament>;
   twitter: Maybe<Scalars['String']>;
   votes_count: Scalars['Int'];
   website: Scalars['String'];
@@ -435,6 +437,13 @@ export type ProjectMember = {
   user: User;
 };
 
+export enum ProjectPermissionEnum {
+  DeleteProject = 'DeleteProject',
+  UpdateAdmins = 'UpdateAdmins',
+  UpdateInfo = 'UpdateInfo',
+  UpdateMembers = 'UpdateMembers'
+}
+
 export type Query = {
   __typename?: 'Query';
   allCategories: Array<Category>;
@@ -647,9 +656,9 @@ export type StoryInputType = {
 };
 
 export enum Team_Member_Role {
-  Owner = 'Owner',
   Admin = 'Admin',
-  Maker = 'Maker'
+  Maker = 'Maker',
+  Owner = 'Owner'
 }
 
 export type Tag = {
@@ -1063,7 +1072,7 @@ export type ProjectDetailsQueryVariables = Exact<{
 }>;
 
 
-export type ProjectDetailsQuery = { __typename?: 'Query', getProject: { __typename?: 'Project', id: number, title: string, tagline: string, description: string, hashtag: string, cover_image: string, thumbnail_image: string, launch_status: ProjectLaunchStatusEnum, twitter: string | null, discord: string | null, github: string | null, slack: string | null, telegram: string | null, screenshots: Array<string>, website: string, lightning_address: string | null, votes_count: number, category: { __typename?: 'Category', id: number, icon: string | null, title: string }, members: Array<{ __typename?: 'ProjectMember', role: Team_Member_Role, user: { __typename?: 'User', id: number, name: string, jobTitle: string | null, avatar: string } }>, awards: Array<{ __typename?: 'Award', title: string, image: string, url: string, id: number }>, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }>, capabilities: Array<{ __typename?: 'Capability', id: number, title: string, icon: string }> } };
+export type ProjectDetailsQuery = { __typename?: 'Query', getProject: { __typename?: 'Project', id: number, title: string, tagline: string, description: string, hashtag: string, cover_image: string, thumbnail_image: string, launch_status: ProjectLaunchStatusEnum, twitter: string | null, discord: string | null, github: string | null, slack: string | null, telegram: string | null, screenshots: Array<string>, website: string, lightning_address: string | null, votes_count: number, permissions: Array<ProjectPermissionEnum>, category: { __typename?: 'Category', id: number, icon: string | null, title: string }, members: Array<{ __typename?: 'ProjectMember', role: Team_Member_Role, user: { __typename?: 'User', id: number, name: string, jobTitle: string | null, avatar: string } }>, awards: Array<{ __typename?: 'Award', title: string, image: string, url: string, id: number }>, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }>, capabilities: Array<{ __typename?: 'Capability', id: number, title: string, icon: string }> } };
 
 export type GetAllRolesQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -2714,6 +2723,7 @@ export const ProjectDetailsDocument = gql`
       icon
       title
     }
+    permissions
     members {
       role
       user {

From 8b3c0df5be03807d676f36b57162ebfdf83cad12 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sun, 25 Sep 2022 13:34:07 +0300
Subject: [PATCH 38/53] fix: images bugs & improvements, project details card
 reactivity, edit project link

---
 .../ScreenshotsInput/ImagePreviews.tsx        |  13 +-
 .../ScreenshotsInput/ScreenshotThumbnail.tsx  |   2 +-
 .../ScreenshotsInput/ScreenshotsInput.tsx     |  29 ++--
 .../FormContainer/FormContainer.tsx           |  10 +-
 .../FormContainer/listProject.graphql         | 150 +++++++----------
 .../ProjectDetailsCard.Skeleton.tsx           |   4 +-
 .../ProjectDetailsCard/ProjectDetailsCard.tsx |  14 +-
 src/graphql/index.tsx                         | 157 ++++++++----------
 src/utils/helperFunctions.tsx                 |   5 +
 9 files changed, 166 insertions(+), 218 deletions(-)

diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ImagePreviews.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ImagePreviews.tsx
index 74d4d64..2917436 100644
--- a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ImagePreviews.tsx
+++ b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ImagePreviews.tsx
@@ -1,5 +1,5 @@
 import UploadPreview, { PreviewComponentProps, PreviewMethods } from '@rpldy/upload-preview'
-import { useAbortItem, useItemAbortListener, useItemCancelListener, useItemErrorListener, useItemProgressListener } from '@rpldy/uploady';
+import { useAbortItem, useItemAbortListener, useItemCancelListener, useItemErrorListener, useItemFinishListener, useItemProgressListener } from '@rpldy/uploady';
 import { useState } from 'react'
 import ScreenShotsThumbnail from './ScreenshotThumbnail'
 
@@ -20,15 +20,11 @@ function CustomImagePreview({ id, url }: PreviewComponentProps) {
     useItemProgressListener(item => {
         if (item.completed > progress) {
             setProgress(() => item.completed);
-
-            if (item.completed === 100) {
-                setItemState(STATES.DONE)
-            } else {
-                setItemState(STATES.PROGRESS)
-            }
         }
     }, id);
 
+    useItemFinishListener(() => setItemState(STATES.DONE), id)
+
 
 
     useItemAbortListener(item => {
@@ -41,7 +37,10 @@ function CustomImagePreview({ id, url }: PreviewComponentProps) {
     }, id);
 
     useItemErrorListener(item => {
+        console.log(item);
+
         setItemState(STATES.ERROR);
+        setTimeout(() => setItemState(STATES.CANCELLED), 2000)
     }, id);
 
     if (itemState === STATES.DONE || itemState === STATES.CANCELLED)
diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotThumbnail.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotThumbnail.tsx
index a7d3199..5f64ac6 100644
--- a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotThumbnail.tsx
+++ b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotThumbnail.tsx
@@ -45,7 +45,7 @@ export default function ScreenshotThumbnail({ url, isLoading, isError, onCancel
                     Failed...
                 </div>}
             {!isEmpty &&
-                <button className="absolute bg-gray-900 hover:bg-opacity-100 bg-opacity-60 text-white rounded-full w-32 h-32 top-8 right-8 flex flex-col justify-center items-center" onClick={() => onCancel?.()}><FaTimes /></button>
+                <button type='button' className="absolute bg-gray-900 hover:bg-opacity-100 bg-opacity-60 text-white rounded-full w-32 h-32 top-8 right-8 flex flex-col justify-center items-center" onClick={() => onCancel?.()}><FaTimes /></button>
             }
         </div>
     )
diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx
index 4893118..d4481e7 100644
--- a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx
+++ b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx
@@ -13,6 +13,7 @@ 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";
 
 
 
@@ -43,6 +44,7 @@ export default function ScreenshotsInput(props: Props) {
 
     return (
         <Uploady
+            accept="image/*"
             multiple={true}
             inputFieldName='file'
             grouped={false}
@@ -53,31 +55,24 @@ export default function ScreenshotsInput(props: Props) {
                 [UPLOADER_EVENTS.ITEM_FINALIZE]: () => setUploadingCount(v => v - 1),
                 [UPLOADER_EVENTS.ITEM_FINISH]: (item) => {
 
-                    // Just for mocking purposes
-                    const dataUrl = URL.createObjectURL(item.file);
+                    const { id, filename, variants } = item?.uploadResponse?.data?.result;
 
-                    const { id, filename, variants } = item?.uploadResponse?.data?.result ?? {
-                        id: Math.random().toString(),
-                        filename: item.file.name,
-                        variants: [
-                            "",
-                            dataUrl
-                        ]
-                    }
-                    if (id) {
-                        onChange([...uploadedFiles, { id, name: filename, url: variants[1] }].slice(-MAX_UPLOAD_COUNT))
+                    const url = (variants as string[]).find(v => v.includes('public'));
+
+                    if (id && url) {
+                        onChange([...uploadedFiles, { id, name: filename, url: url }].slice(-MAX_UPLOAD_COUNT))
                     }
                 }
             }}
         >
 
             <div className="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-16 mt-24">
-                {canUploadMore && <DropZoneButton />}
-                {uploadedFiles.map(f => <ScreenshotThumbnail
+                <DropZoneButton extraProps={{ canUploadMore }} />
+                {uploadedFiles.map((f, idx) => <ScreenshotThumbnail
                     key={f.id}
                     url={f.url}
                     onCancel={() => {
-                        onChange(uploadedFiles.filter(file => file.id !== f.id))
+                        onChange(removeArrayItemAtIndex(uploadedFiles, idx))
                     }} />)}
                 <ImagePreviews />
                 {(placeholdersCount > 0) &&
@@ -88,7 +83,7 @@ export default function ScreenshotsInput(props: Props) {
 }
 
 const DropZone = forwardRef<any, any>((props, ref) => {
-    const { onClick, ...buttonProps } = props;
+    const { canUploadMore, onClick, ...buttonProps } = props;
 
 
     useRequestPreSend(async (data) => {
@@ -115,6 +110,8 @@ const DropZone = forwardRef<any, any>((props, ref) => {
         [onClick]
     );
 
+    if (!canUploadMore) return null
+
     return <UploadDropZone
         {...buttonProps}
         ref={ref}
diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
index 3dcf312..a80cc57 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -65,11 +65,11 @@ const schema: yup.SchemaOf<IListProjectForm> = yup.object({
     description: yup.string().trim().required().min(50, 'Write at least 10 words descriping your project'),
     thumbnail_image: imageSchema.required("Please pick a thumbnail image").default(undefined),
     cover_image: imageSchema.required("Please pick a cover image").default(undefined),
-    twitter: yup.string().url(),
-    discord: yup.string().url(),
-    github: yup.string().url(),
-    slack: yup.string().url(),
-    telegram: yup.string().url(),
+    twitter: yup.string().url().nullable(),
+    discord: yup.string().url().nullable(),
+    github: yup.string().url().nullable(),
+    slack: yup.string().url().nullable(),
+    telegram: yup.string().url().nullable(),
     category_id: yup.number().required("Please choose a category"),
     capabilities: yup.array().of(yup.number().required()).default([]),
     screenshots: yup.array().of(imageSchema.required()).default([]),
diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/listProject.graphql b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/listProject.graphql
index a3f58c6..6eb9015 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/listProject.graphql
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/listProject.graphql
@@ -1,51 +1,64 @@
+fragment ProjectDetails on Project {
+  id
+  title
+  tagline
+  description
+  hashtag
+  cover_image
+  thumbnail_image
+  launch_status
+  twitter
+  discord
+  github
+  slack
+  telegram
+  screenshots
+  website
+  lightning_address
+  votes_count
+  category {
+    id
+    icon
+    title
+  }
+  permissions
+  members {
+    role
+    user {
+      id
+      name
+      jobTitle
+      avatar
+    }
+  }
+  awards {
+    title
+    image
+    url
+    id
+  }
+  tags {
+    id
+    title
+  }
+  recruit_roles {
+    id
+    title
+    icon
+    level
+  }
+
+  capabilities {
+    id
+    title
+    icon
+  }
+}
+
 mutation CreateProject($input: CreateProjectInput) {
   createProject(input: $input) {
     project {
-      id
-      title
-      description
-      cover_image
-      thumbnail_image
-      screenshots
-      website
-      lightning_address
-      lnurl_callback_url
-      votes_count
-      category {
-        id
-        icon
-        title
-      }
-      members {
-        role
-        user {
-          id
-          name
-          avatar
-        }
-      }
-      awards {
-        title
-        image
-        url
-        id
-      }
-      tags {
-        id
-        title
-      }
-      recruit_roles {
-        id
-        title
-        icon
-        level
-      }
-
-      capabilities {
-        id
-        title
-        icon
-      }
+      ...ProjectDetails
     }
   }
 }
@@ -53,52 +66,7 @@ mutation CreateProject($input: CreateProjectInput) {
 mutation UpdateProject($input: UpdateProjectInput) {
   updateProject(input: $input) {
     project {
-      id
-      title
-      description
-      cover_image
-      thumbnail_image
-      screenshots
-      website
-      lightning_address
-      lnurl_callback_url
-      votes_count
-
-      category {
-        id
-        icon
-        title
-      }
-      members {
-        role
-        user {
-          id
-          name
-          avatar
-        }
-      }
-      awards {
-        title
-        image
-        url
-        id
-      }
-      tags {
-        id
-        title
-      }
-      recruit_roles {
-        id
-        title
-        icon
-        level
-      }
-
-      capabilities {
-        id
-        title
-        icon
-      }
+      ...ProjectDetails
     }
   }
 }
diff --git a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.Skeleton.tsx b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.Skeleton.tsx
index 619ae57..2501813 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.Skeleton.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.Skeleton.tsx
@@ -18,8 +18,6 @@ export default function ProjectDetailsCardSkeleton({ onClose, direction, ...prop
     const isMdScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
 
 
-
-
     return (
         <motion.div
             custom={direction}
@@ -27,7 +25,7 @@ export default function ProjectDetailsCardSkeleton({ onClose, direction, ...prop
             initial='initial'
             animate="animate"
             exit='exit'
-            className={`modal-card max-w-[768px] ${props.isPageModal && !isMdScreen && 'rounded-0 w-full min-h-screen'}`}
+            className={`modal-card max-w-[676px] ${props.isPageModal && !isMdScreen && 'rounded-0 w-full min-h-screen'}`}
 
         >
             <div className="relative h-[100px] lg:h-[80px]">
diff --git a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
index cc5e5a0..5e14a66 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { MdClose, MdLocalFireDepartment } from 'react-icons/md';
+import { MdClose, MdEdit, MdLocalFireDepartment } from 'react-icons/md';
 import { ModalCard } from 'src/Components/Modals/ModalsContainer/ModalsContainer';
 import { useAppDispatch, useAppSelector, useMediaQuery } from 'src/utils/hooks';
 import { openModal, scheduleModal } from 'src/redux/features/modals.slice';
@@ -8,7 +8,7 @@ import Button from 'src/Components/Button/Button';
 import ProjectCardSkeleton from './ProjectDetailsCard.Skeleton'
 // import VoteButton from 'src/features/Projects/pages/ProjectPage/VoteButton/VoteButton';
 import { NotificationsService, Wallet_Service } from 'src/services'
-import { useProjectDetailsQuery } from 'src/graphql';
+import { ProjectPermissionEnum, useProjectDetailsQuery } from 'src/graphql';
 import Lightbox from 'src/Components/Lightbox/Lightbox'
 import linkifyHtml from 'linkify-html';
 import ErrorMessage from 'src/Components/Errors/ErrorMessage/ErrorMessage';
@@ -108,6 +108,8 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
         },
     ];
 
+    const canEdit = project.permissions.includes(ProjectPermissionEnum.UpdateInfo);
+
     const onVote = (votes?: number) => {
         dispatch(setVoteAmount(votes ?? 10));
         dispatch(openModal({
@@ -140,9 +142,14 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
             {/* Cover Image */}
             <div className="relative h-[100px] lg:h-[80px]">
                 <img className="w-full h-full object-cover" src={project.cover_image} alt="" />
-                <button className="w-32 h-32  bg-gray-600 bg-opacity-80 text-white absolute top-24 right-24 rounded-full hover:bg-gray-800 text-center" onClick={closeModal}><MdClose className=' inline-block' /></button>
+                <button className="w-32 h-32  bg-gray-600 bg-opacity-80 text-white absolute top-24 right-24 rounded-full hover:bg-gray-800 text-center flex flex-col justify-center items-center" onClick={closeModal}><MdClose className=' inline-block' /></button>
             </div>
             <div className="p-24 flex flex-col gap-24">
+
+                <div className='flex justify-end'>
+                    <Button color='gray' size='sm' className='ml-auto' onClick={() => props.onClose?.()} href={createRoute({ type: "edit-project", id: project.id })}>Edit Project</Button>
+                </div>
+
                 {/* Title & Basic Info */}
                 <div className="flex flex-col mt-[-80px] md:flex-row md:mt-0 gap-24 items-start relative">
                     <div className="flex-shrink-0 w-[108px] h-[108px]">
@@ -171,6 +178,7 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
                     </div>
                 </div>
 
+
                 {/* About */}
                 <div>
                     <p className="text-body5 text-gray-400 mb-8">About</p>
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index b6756d2..370c99a 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -1040,19 +1040,21 @@ export type GetAllCapabilitiesQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type GetAllCapabilitiesQuery = { __typename?: 'Query', getAllCapabilities: Array<{ __typename?: 'Capability', id: number, title: string, icon: string }> };
 
+export type ProjectDetailsFragment = { __typename?: 'Project', id: number, title: string, tagline: string, description: string, hashtag: string, cover_image: string, thumbnail_image: string, launch_status: ProjectLaunchStatusEnum, twitter: string | null, discord: string | null, github: string | null, slack: string | null, telegram: string | null, screenshots: Array<string>, website: string, lightning_address: string | null, votes_count: number, permissions: Array<ProjectPermissionEnum>, category: { __typename?: 'Category', id: number, icon: string | null, title: string }, members: Array<{ __typename?: 'ProjectMember', role: Team_Member_Role, user: { __typename?: 'User', id: number, name: string, jobTitle: string | null, avatar: string } }>, awards: Array<{ __typename?: 'Award', title: string, image: string, url: string, id: number }>, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }>, capabilities: Array<{ __typename?: 'Capability', id: number, title: string, icon: string }> };
+
 export type CreateProjectMutationVariables = Exact<{
   input: InputMaybe<CreateProjectInput>;
 }>;
 
 
-export type CreateProjectMutation = { __typename?: 'Mutation', createProject: { __typename?: 'CreateProjectResponse', project: { __typename?: 'Project', id: number, title: string, description: string, cover_image: string, thumbnail_image: string, screenshots: Array<string>, website: string, lightning_address: string | null, lnurl_callback_url: string | null, votes_count: number, category: { __typename?: 'Category', id: number, icon: string | null, title: string }, members: Array<{ __typename?: 'ProjectMember', role: Team_Member_Role, user: { __typename?: 'User', id: number, name: string, avatar: string } }>, awards: Array<{ __typename?: 'Award', title: string, image: string, url: string, id: number }>, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }>, capabilities: Array<{ __typename?: 'Capability', id: number, title: string, icon: string }> } } | null };
+export type CreateProjectMutation = { __typename?: 'Mutation', createProject: { __typename?: 'CreateProjectResponse', project: { __typename?: 'Project', id: number, title: string, tagline: string, description: string, hashtag: string, cover_image: string, thumbnail_image: string, launch_status: ProjectLaunchStatusEnum, twitter: string | null, discord: string | null, github: string | null, slack: string | null, telegram: string | null, screenshots: Array<string>, website: string, lightning_address: string | null, votes_count: number, permissions: Array<ProjectPermissionEnum>, category: { __typename?: 'Category', id: number, icon: string | null, title: string }, members: Array<{ __typename?: 'ProjectMember', role: Team_Member_Role, user: { __typename?: 'User', id: number, name: string, jobTitle: string | null, avatar: string } }>, awards: Array<{ __typename?: 'Award', title: string, image: string, url: string, id: number }>, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }>, capabilities: Array<{ __typename?: 'Capability', id: number, title: string, icon: string }> } } | null };
 
 export type UpdateProjectMutationVariables = Exact<{
   input: InputMaybe<UpdateProjectInput>;
 }>;
 
 
-export type UpdateProjectMutation = { __typename?: 'Mutation', updateProject: { __typename?: 'CreateProjectResponse', project: { __typename?: 'Project', id: number, title: string, description: string, cover_image: string, thumbnail_image: string, screenshots: Array<string>, website: string, lightning_address: string | null, lnurl_callback_url: string | null, votes_count: number, category: { __typename?: 'Category', id: number, icon: string | null, title: string }, members: Array<{ __typename?: 'ProjectMember', role: Team_Member_Role, user: { __typename?: 'User', id: number, name: string, avatar: string } }>, awards: Array<{ __typename?: 'Award', title: string, image: string, url: string, id: number }>, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }>, capabilities: Array<{ __typename?: 'Capability', id: number, title: string, icon: string }> } } | null };
+export type UpdateProjectMutation = { __typename?: 'Mutation', updateProject: { __typename?: 'CreateProjectResponse', project: { __typename?: 'Project', id: number, title: string, tagline: string, description: string, hashtag: string, cover_image: string, thumbnail_image: string, launch_status: ProjectLaunchStatusEnum, twitter: string | null, discord: string | null, github: string | null, slack: string | null, telegram: string | null, screenshots: Array<string>, website: string, lightning_address: string | null, votes_count: number, permissions: Array<ProjectPermissionEnum>, category: { __typename?: 'Category', id: number, icon: string | null, title: string }, members: Array<{ __typename?: 'ProjectMember', role: Team_Member_Role, user: { __typename?: 'User', id: number, name: string, jobTitle: string | null, avatar: string } }>, awards: Array<{ __typename?: 'Award', title: string, image: string, url: string, id: number }>, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, recruit_roles: Array<{ __typename?: 'MakerRole', id: number, title: string, icon: string, level: RoleLevelEnum }>, capabilities: Array<{ __typename?: 'Capability', id: number, title: string, icon: string }> } } | null };
 
 export type IsValidProjectHashtagQueryVariables = Exact<{
   hashtag: Scalars['String'];
@@ -1181,6 +1183,63 @@ export const UserRolesSkillsFragmentDoc = gql`
   }
 }
     `;
+export const ProjectDetailsFragmentDoc = gql`
+    fragment ProjectDetails on Project {
+  id
+  title
+  tagline
+  description
+  hashtag
+  cover_image
+  thumbnail_image
+  launch_status
+  twitter
+  discord
+  github
+  slack
+  telegram
+  screenshots
+  website
+  lightning_address
+  votes_count
+  category {
+    id
+    icon
+    title
+  }
+  permissions
+  members {
+    role
+    user {
+      id
+      name
+      jobTitle
+      avatar
+    }
+  }
+  awards {
+    title
+    image
+    url
+    id
+  }
+  tags {
+    id
+    title
+  }
+  recruit_roles {
+    id
+    title
+    icon
+    level
+  }
+  capabilities {
+    id
+    title
+    icon
+  }
+}
+    `;
 export const OfficialTagsDocument = gql`
     query OfficialTags {
   officialTags {
@@ -2477,54 +2536,11 @@ export const CreateProjectDocument = gql`
     mutation CreateProject($input: CreateProjectInput) {
   createProject(input: $input) {
     project {
-      id
-      title
-      description
-      cover_image
-      thumbnail_image
-      screenshots
-      website
-      lightning_address
-      lnurl_callback_url
-      votes_count
-      category {
-        id
-        icon
-        title
-      }
-      members {
-        role
-        user {
-          id
-          name
-          avatar
-        }
-      }
-      awards {
-        title
-        image
-        url
-        id
-      }
-      tags {
-        id
-        title
-      }
-      recruit_roles {
-        id
-        title
-        icon
-        level
-      }
-      capabilities {
-        id
-        title
-        icon
-      }
+      ...ProjectDetails
     }
   }
 }
-    `;
+    ${ProjectDetailsFragmentDoc}`;
 export type CreateProjectMutationFn = Apollo.MutationFunction<CreateProjectMutation, CreateProjectMutationVariables>;
 
 /**
@@ -2555,54 +2571,11 @@ export const UpdateProjectDocument = gql`
     mutation UpdateProject($input: UpdateProjectInput) {
   updateProject(input: $input) {
     project {
-      id
-      title
-      description
-      cover_image
-      thumbnail_image
-      screenshots
-      website
-      lightning_address
-      lnurl_callback_url
-      votes_count
-      category {
-        id
-        icon
-        title
-      }
-      members {
-        role
-        user {
-          id
-          name
-          avatar
-        }
-      }
-      awards {
-        title
-        image
-        url
-        id
-      }
-      tags {
-        id
-        title
-      }
-      recruit_roles {
-        id
-        title
-        icon
-        level
-      }
-      capabilities {
-        id
-        title
-        icon
-      }
+      ...ProjectDetails
     }
   }
 }
-    `;
+    ${ProjectDetailsFragmentDoc}`;
 export type UpdateProjectMutationFn = Apollo.MutationFunction<UpdateProjectMutation, UpdateProjectMutationVariables>;
 
 /**
diff --git a/src/utils/helperFunctions.tsx b/src/utils/helperFunctions.tsx
index 69bf086..09cd597 100644
--- a/src/utils/helperFunctions.tsx
+++ b/src/utils/helperFunctions.tsx
@@ -182,3 +182,8 @@ export const getSpanDate = (_date1: string, _date2: string) => {
   return `${dayjs(_date1).format('H:mm')} - ${dayjs(_date2).format('H:mm, Do MMM')}`
 
 }
+
+
+export function removeArrayItemAtIndex<T>(arr: T[], indexToRemove: number) {
+  return [...arr.slice(0, indexToRemove), ...arr.slice(indexToRemove + 1)]
+}
\ No newline at end of file

From 96dac5fbf604ebe460fc704684e98f3cc495b83f Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sun, 25 Sep 2022 15:16:42 +0300
Subject: [PATCH 39/53] update: members permissions UIs

---
 .../ProjectCardMini.Skeleton.tsx              |   2 +-
 .../FormContainer/FormContainer.tsx           | 109 ++++++++++++------
 .../FormContainer/updateProjectContext.tsx    |  31 +++++
 .../Components/TeamMembersInput/MemberRow.tsx |  56 +++++++++
 .../TeamMembersInput/TeamMembersInput.tsx     |  64 +++++-----
 .../Components/TeamTab/TeamTab.tsx            |   5 +-
 .../pages/ListProjectPage/ListProjectPage.tsx |  10 ++
 .../ProjectDetailsCard/ProjectDetailsCard.tsx |   7 +-
 src/utils/routing/routes.ts                   |   6 +
 9 files changed, 212 insertions(+), 78 deletions(-)
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/FormContainer/updateProjectContext.tsx
 create mode 100644 src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx

diff --git a/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.Skeleton.tsx b/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.Skeleton.tsx
index 0fe212d..d4824d8 100644
--- a/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.Skeleton.tsx
+++ b/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.Skeleton.tsx
@@ -3,7 +3,7 @@ import Skeleton from 'react-loading-skeleton'
 
 export default function ProjectCardMiniSkeleton() {
     return (
-        <div className="bg-gray-25 select-none px-16 py-16 flex min-w-[300px] gap-16 border border-gray-200 rounded-10 items-center" >
+        <div className="bg-gray-25 select-none px-16 py-16 flex flex-[0_0_100%] max-w-[296px] gap-16 border border-gray-200 rounded-10 items-center" >
             <Skeleton circle width={64} height={64} containerClassName='flex-shrink-0' />
             <div className="justify-around items-start min-w-0">
                 <p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap"><Skeleton width="15ch" /></p>
diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
index a80cc57..8d69855 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -1,7 +1,7 @@
 import { FormProvider, NestedValue, Resolver, SubmitHandler, useForm } from "react-hook-form"
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { IsValidProjectHashtagDocument, ProjectLaunchStatusEnum, Team_Member_Role, UpdateProjectInput, useProjectDetailsQuery } from "src/graphql";
+import { IsValidProjectHashtagDocument, ProjectDetailsQuery, ProjectLaunchStatusEnum, ProjectPermissionEnum, Team_Member_Role, UpdateProjectInput, useProjectDetailsQuery } from "src/graphql";
 import { PropsWithChildren } from "react";
 import { useSearchParams } from "react-router-dom";
 import { usePrompt } from "src/utils/hooks";
@@ -9,6 +9,10 @@ import { imageSchema } from "src/utils/validation";
 import { Override } from "src/utils/interfaces";
 import LoadingPage from "src/Components/LoadingPage/LoadingPage";
 import { apolloClient } from "src/utils/apollo";
+import { store } from "src/redux/store";
+import UpdateProjectContextProvider from './updateProjectContext'
+import { useNavigate } from 'react-router-dom'
+import { createRoute } from 'src/utils/routing'
 
 
 interface Props {
@@ -16,13 +20,7 @@ interface Props {
 }
 
 export type IListProjectForm = Override<UpdateProjectInput, {
-    members: NestedValue<{
-        id: number,
-        name: string,
-        jobTitle: string | null,
-        avatar: string,
-        role: Team_Member_Role,
-    }[]>
+    members: NestedValue<ProjectMember[]>
     capabilities: NestedValue<UpdateProjectInput['capabilities']>
     recruit_roles: NestedValue<UpdateProjectInput['recruit_roles']>
     tournaments: NestedValue<UpdateProjectInput['tournaments']>
@@ -30,6 +28,14 @@ export type IListProjectForm = Override<UpdateProjectInput, {
     thumbnail_image: NestedValue<UpdateProjectInput['thumbnail_image']>
 }>
 
+export type ProjectMember = {
+    id: number,
+    name: string,
+    jobTitle: string | null,
+    avatar: string,
+    role: Team_Member_Role,
+}
+
 const schema: yup.SchemaOf<IListProjectForm> = yup.object({
     id: yup.number().optional(),
     title: yup.string().trim().required().min(2),
@@ -85,7 +91,7 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
 
     const id = Number(params.get('id'));
     const isUpdating = !Number.isNaN(id);
-
+    const navigate = useNavigate()
 
 
     const methods = useForm<IListProjectForm>({
@@ -103,7 +109,7 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
             category_id: undefined,
             capabilities: [],
             screenshots: [],
-            members: [],
+            members: prepareMembers([]),
             recruit_roles: [],
             launch_status: ProjectLaunchStatusEnum.Wip,
             tournaments: [],
@@ -120,30 +126,33 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
         onCompleted: (res) => {
             if (res.getProject) {
                 const data = res.getProject
-                methods.reset({
-                    id: data.id,
-                    title: data.title,
-                    cover_image: { url: data.cover_image },
-                    thumbnail_image: { url: data.thumbnail_image },
-                    tagline: data.tagline,
-                    website: data.website,
-                    description: data.description,
-                    hashtag: data.hashtag,
-                    twitter: data.twitter,
-                    discord: data.discord,
-                    slack: data.slack,
-                    telegram: data.telegram,
-                    github: data.github,
-                    category_id: data.category.id,
-                    capabilities: data.capabilities.map(c => c.id),
-                    screenshots: data.screenshots.map(url => ({ url })),
+                if (!res.getProject.permissions.includes(ProjectPermissionEnum.UpdateInfo))
+                    navigate({ pathname: createRoute({ type: "projects-page" }) })
+                else
+                    methods.reset({
+                        id: data.id,
+                        title: data.title,
+                        cover_image: { url: data.cover_image },
+                        thumbnail_image: { url: data.thumbnail_image },
+                        tagline: data.tagline,
+                        website: data.website,
+                        description: data.description,
+                        hashtag: data.hashtag,
+                        twitter: data.twitter,
+                        discord: data.discord,
+                        slack: data.slack,
+                        telegram: data.telegram,
+                        github: data.github,
+                        category_id: data.category.id,
+                        capabilities: data.capabilities.map(c => c.id),
+                        screenshots: data.screenshots.map(url => ({ url })),
 
-                    members: data.members.map(({ role, user }) => ({ role, id: user.id, avatar: user.avatar, name: user.name, jobTitle: user.jobTitle })),
-                    recruit_roles: data.recruit_roles.map(r => r.id),
+                        members: prepareMembers(data.members),
+                        recruit_roles: data.recruit_roles.map(r => r.id),
 
-                    tournaments: [],
-                    launch_status: data.launch_status,
-                })
+                        tournaments: [],
+                        launch_status: data.launch_status,
+                    })
             }
         }
     })
@@ -159,9 +168,39 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
 
     return (
         <FormProvider {...methods} >
-            <form onSubmit={methods.handleSubmit(onSubmit)}>
-                {props.children}
-            </form>
+            <UpdateProjectContextProvider permissions={query.data?.getProject.permissions ?? Object.values(ProjectPermissionEnum)}>
+                <form onSubmit={methods.handleSubmit(onSubmit)}>
+                    {props.children}
+                </form>
+            </UpdateProjectContextProvider>
         </FormProvider>
     )
 }
+
+
+function prepareMembers(members: ProjectDetailsQuery['getProject']['members']): ProjectMember[] {
+
+    const me = store.getState().user.me;
+
+    if (!me) {
+        window.location.href = '/login';
+        return [];
+    }
+
+    if (members.length === 0)
+        return [{
+            id: me.id,
+            avatar: me.avatar,
+            name: me.name,
+            jobTitle: me.jobTitle,
+            role: Team_Member_Role.Owner,
+        }]
+
+    const _members = members.map(({ role, user }) => ({ role, id: user.id, avatar: user.avatar, name: user.name, jobTitle: user.jobTitle }))
+
+    const myMember = _members.find(m => m.id === me.id);
+
+    if (!myMember) throw new Error("Not a member of the project")
+
+    return [myMember, ..._members.filter(m => m.id !== me.id)]
+}
\ No newline at end of file
diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/updateProjectContext.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/updateProjectContext.tsx
new file mode 100644
index 0000000..08144b9
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/updateProjectContext.tsx
@@ -0,0 +1,31 @@
+import React, { PropsWithChildren } from 'react'
+import { ProjectDetailsQuery } from 'src/graphql'
+
+interface Props {
+    permissions: ProjectDetailsQuery['getProject']['permissions']
+}
+
+interface State {
+    permissions: ProjectDetailsQuery['getProject']['permissions']
+}
+
+const context = React.createContext<State | undefined>(undefined)
+
+const UpdateProjectContextProvider = React.memo(function (props: PropsWithChildren<Props>) {
+
+    return (
+        <context.Provider value={{ permissions: props.permissions }}>
+            {props.children}
+        </context.Provider>
+    )
+})
+
+export default UpdateProjectContextProvider;
+
+export const useUpdateProjectContext = () => {
+    const res = React.useContext(context);
+
+    if (!res) throw new Error("No context provider was found for useUpdateProjectContext")
+
+    return res;
+}
diff --git a/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx
new file mode 100644
index 0000000..b606cc9
--- /dev/null
+++ b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx
@@ -0,0 +1,56 @@
+import { Menu, MenuButton, MenuItem } from '@szhsin/react-menu';
+import { ComponentProps } from 'react'
+import { NestedValue } from 'react-hook-form'
+import { FaChevronDown, FaRegTrashAlt, } from 'react-icons/fa';
+import UsersInput from 'src/Components/Inputs/UsersInput/UsersInput'
+import Avatar from 'src/features/Profiles/Components/Avatar/Avatar';
+import { Team_Member_Role } from 'src/graphql';
+import { Value } from './TeamMembersInput'
+
+interface Props {
+    user: Value[number]
+    onRemove: () => void;
+    onUpdateRole: (role: Team_Member_Role) => void
+    disabled?: boolean;
+    canUpdateRole?: boolean;
+    canDelete?: boolean;
+
+}
+
+export default function MemberRow({ user, onRemove, onUpdateRole, disabled, canUpdateRole, canDelete }: Props) {
+    return (
+        <div
+            key={user.id}
+            className="border-b py-16 last-of-type:border-b-0 flex gap-16 items-center">
+
+            <Avatar width={40} src={user.avatar} />
+            <div className='grow overflow-hidden'>
+                <p className="font-medium self-center overflow-hidden text-ellipsis whitespace-nowrap">
+                    {user.name}
+                </p>
+                <p className="text-body5 text-gray-500 overflow-hidden text-ellipsis whitespace-nowrap">
+                    {user.jobTitle}
+                </p>
+            </div>
+
+            <div className="ml-auto flex gap-12 md:gap-16 shrink-0">
+                {canUpdateRole ? <Menu
+                    offsetY={12}
+                    align='end'
+                    menuButton={<MenuButton className='border border-gray-200 p-8 rounded-8 text-gray-500'>{user.role} <FaChevronDown className='ml-4 text-gray-400' /></MenuButton>} transition>
+                    {[Team_Member_Role.Admin, Team_Member_Role.Maker].map(role =>
+                        <MenuItem
+                            onClick={() => onUpdateRole(role)}
+                            key={role}>{role}</MenuItem>
+                    )}
+                </Menu>
+                    :
+                    <span className="text-gray-500">{user.role}</span>
+                }
+                {canDelete && <button onClick={() => onRemove()} className=''>
+                    <FaRegTrashAlt className='text-red-400' />
+                </button>}
+            </div>
+        </div>
+    )
+}
diff --git a/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.tsx b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.tsx
index 28f6f37..d4895ab 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/TeamMembersInput.tsx
@@ -1,13 +1,13 @@
-import { Menu, MenuButton, MenuItem } from '@szhsin/react-menu';
+
 import { ComponentProps } from 'react'
 import { NestedValue } from 'react-hook-form'
-import { FaChevronDown, FaRegTrashAlt, } from 'react-icons/fa';
 import UsersInput from 'src/Components/Inputs/UsersInput/UsersInput'
-import Avatar from 'src/features/Profiles/Components/Avatar/Avatar';
-import { Team_Member_Role } from 'src/graphql';
+import { ProjectPermissionEnum, Team_Member_Role } from 'src/graphql';
 import { IListProjectForm } from '../FormContainer/FormContainer';
+import { useUpdateProjectContext } from '../FormContainer/updateProjectContext';
+import MemberRow from './MemberRow';
 
-type Value = IListProjectForm['members'] extends NestedValue<infer U> ? U : never;
+export type Value = IListProjectForm['members'] extends NestedValue<infer U> ? U : never;
 
 type Props = {
     value: Value,
@@ -16,6 +16,13 @@ type Props = {
 
 export default function TeamMembersInput({ value, onChange = () => { } }: Props) {
 
+
+    const { permissions } = useUpdateProjectContext()
+
+    const canAddNew = permissions.includes(ProjectPermissionEnum.UpdateAdmins)
+    const canUpdateMembers = permissions.includes(ProjectPermissionEnum.UpdateMembers)
+    const canUpdateAdmins = permissions.includes(ProjectPermissionEnum.UpdateAdmins)
+
     const addMember: ComponentProps<typeof UsersInput>['onSelect'] = (user) => {
         if (value.some(u => u.id === user.id))
             return;
@@ -40,45 +47,30 @@ export default function TeamMembersInput({ value, onChange = () => { } }: Props)
         }))
     }
 
-    const removeMemeber = (id: number) => {
+    const removeMember = (id: number) => {
         onChange(value.filter(u => u.id !== id));
     }
 
     return (
         <>
-            <UsersInput onSelect={addMember} />
+            {canAddNew && <UsersInput onSelect={addMember} />}
             {value.length > 0 &&
                 <div className='flex flex-col mt-24'>
-                    {value.map(user => {
-                        return <div
-                            key={user.id}
-                            className="border-b py-16 last-of-type:border-b-0 flex gap-16 items-center">
+                    {value.map(member => {
 
-                            <Avatar width={40} src={user.avatar} />
-                            <div className='grow overflow-hidden'>
-                                <p className="font-medium self-center overflow-hidden text-ellipsis whitespace-nowrap">
-                                    {user.name}
-                                </p>
-                                <p className="text-body5 text-gray-500 overflow-hidden text-ellipsis whitespace-nowrap">
-                                    {user.jobTitle}
-                                </p>
-                            </div>
-                            <div className="ml-auto flex gap-12 md:gap-16 shrink-0">
-                                <Menu
-                                    offsetY={12}
-                                    align='end'
-                                    menuButton={<MenuButton className='border border-gray-200 p-8 rounded-8 text-gray-500'>{user.role} <FaChevronDown className='ml-4 text-gray-400' /></MenuButton>} transition>
-                                    {Object.values(Team_Member_Role).map(role =>
-                                        <MenuItem
-                                            onClick={() => setMemberRole(user.id, role)}
-                                            key={role}>{role}</MenuItem>
-                                    )}
-                                </Menu>
-                                <button onClick={() => removeMemeber(user.id)} className=''>
-                                    <FaRegTrashAlt className='text-red-400' />
-                                </button>
-                            </div>
-                        </div>
+                        let canEdit = false;
+
+                        if (member.role === Team_Member_Role.Admin) canEdit = canUpdateAdmins;
+                        if (member.role === Team_Member_Role.Maker) canEdit = canUpdateMembers;
+
+                        return <MemberRow
+                            key={member.id}
+                            user={member}
+                            canUpdateRole={canEdit}
+                            canDelete={canEdit}
+                            onRemove={() => removeMember(member.id)}
+                            onUpdateRole={role => setMemberRole(member.id, role)}
+                        />
                     })}
                 </div>}
         </>
diff --git a/src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.tsx
index d94a888..d11470c 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.tsx
@@ -8,7 +8,7 @@ import { IListProjectForm } from "../FormContainer/FormContainer";
 interface Props {
 }
 
-export default function TeamTab(props: Props) {
+export default function TeamTab() {
 
     const { formState: { errors, }, control } = useFormContext<IListProjectForm>();
 
@@ -16,8 +16,6 @@ export default function TeamTab(props: Props) {
 
     return (
         <div className="flex flex-col gap-24">
-
-
             <Card >
                 <h2 className="text-body2 font-bolder">⚡️  Team</h2>
                 <p className="text-body4 font-light text-gray-600 mt-8">Let us know who is on this product’s team.</p>
@@ -29,6 +27,7 @@ export default function TeamTab(props: Props) {
                             <TeamMembersInput
                                 value={value}
                                 onChange={onChange}
+
                             />
                         )}
                     />
diff --git a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
index 9f70496..0129d15 100644
--- a/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
+++ b/src/features/Projects/pages/ListProjectPage/ListProjectPage.tsx
@@ -2,12 +2,15 @@ import { useCarousel, useMediaQuery, } from "src/utils/hooks";
 import { Helmet } from 'react-helmet'
 import { MEDIA_QUERIES } from "src/utils/theme";
 import Card from "src/Components/Card/Card";
+import LoadingPage from "src/Components/LoadingPage/LoadingPage";
 import ProjectDetailsTab from "./Components/ProjectDetailsTab/ProjectDetailsTab";
 import TeamTab from "./Components/TeamTab/TeamTab";
 import ExtrasTab from "./Components/ExtrasTab/ExtrasTab";
 import FormContainer from "./Components/FormContainer/FormContainer";
 import { useState } from "react";
 import SaveChangesCard from "./Components/SaveChangesCard/SaveChangesCard";
+import { useMeQuery } from "src/graphql";
+import { Navigate, useLocation } from 'react-router-dom'
 
 
 export const tabs = {
@@ -38,8 +41,15 @@ export default function ListProjectPage() {
         align: 'start', slidesToScroll: 2,
         containScroll: "trimSnaps",
     })
+    const location = useLocation()
 
+    const meQuery = useMeQuery({
 
+    });
+
+    if (meQuery.loading) return <LoadingPage />
+
+    if (meQuery.error || !meQuery.data?.me) return <Navigate to={'/login'} state={{ from: location.pathname }} />
 
     return (
         <>
diff --git a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
index 5e14a66..a70ec37 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
@@ -146,9 +146,10 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
             </div>
             <div className="p-24 flex flex-col gap-24">
 
-                <div className='flex justify-end'>
-                    <Button color='gray' size='sm' className='ml-auto' onClick={() => props.onClose?.()} href={createRoute({ type: "edit-project", id: project.id })}>Edit Project</Button>
-                </div>
+                {project.permissions.includes(ProjectPermissionEnum.UpdateInfo) &&
+                    <div className='flex justify-end'>
+                        <Button color='gray' size='sm' className='ml-auto' onClick={() => props.onClose?.()} href={createRoute({ type: "edit-project", id: project.id })}>Edit Project</Button>
+                    </div>}
 
                 {/* Title & Basic Info */}
                 <div className="flex flex-col mt-[-80px] md:flex-row md:mt-0 gap-24 items-start relative">
diff --git a/src/utils/routing/routes.ts b/src/utils/routing/routes.ts
index 329bdfe..91b514d 100644
--- a/src/utils/routing/routes.ts
+++ b/src/utils/routing/routes.ts
@@ -35,6 +35,9 @@ type RouteOptions =
         id: string | number,
         username?: string,
     }
+    | {
+        type: "projects-page"
+    }
     | {
         type: "edit-project",
         id?: number,
@@ -82,6 +85,9 @@ export function createRoute(options: RouteOptions) {
     if (options.type === 'tournament')
         return `/tournaments/${options.id}` + (options.tab ? `/${options.tab}` : "")
 
+    if (options.type === 'projects-page')
+        return '/projects'
+
     if (options.type === 'edit-project')
         return `/projects/list-project` + (options.id ? `?id=${options.id}` : '')
 

From d3e36950274b38a09f05711ee4619da8749e4d33 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sun, 25 Sep 2022 16:12:25 +0300
Subject: [PATCH 40/53] feat: add lightning_address to project, add tooltips to
 makers avatars in project details card

---
 api/functions/graphql/nexus-typegen.ts        |  2 ++
 api/functions/graphql/schema.graphql          |  2 ++
 api/functions/graphql/types/project.js        |  6 ++++
 .../Profiles/Components/Avatar/Avatar.tsx     | 34 ++++++++++++++++---
 .../FormContainer/FormContainer.tsx           | 24 +++++++++++--
 .../ProjectDetailsTab/ProjectDetailsTab.tsx   | 17 +++++++++-
 .../ProjectDetailsCard/ProjectDetailsCard.tsx | 16 +++++++--
 src/graphql/index.tsx                         |  2 ++
 8 files changed, 92 insertions(+), 11 deletions(-)

diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index cba6ab8..7120730 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -38,6 +38,7 @@ export interface NexusGenInputs {
     hashtag: string; // String!
     id?: number | null; // Int
     launch_status: NexusGenEnums['ProjectLaunchStatusEnum']; // ProjectLaunchStatusEnum!
+    lightning_address?: string | null; // String
     members: NexusGenInputs['TeamMemberInput'][]; // [TeamMemberInput!]!
     recruit_roles: number[]; // [Int!]!
     screenshots: NexusGenInputs['ImageInput'][]; // [ImageInput!]!
@@ -106,6 +107,7 @@ export interface NexusGenInputs {
     hashtag: string; // String!
     id?: number | null; // Int
     launch_status: NexusGenEnums['ProjectLaunchStatusEnum']; // ProjectLaunchStatusEnum!
+    lightning_address?: string | null; // String
     members: NexusGenInputs['TeamMemberInput'][]; // [TeamMemberInput!]!
     recruit_roles: number[]; // [Int!]!
     screenshots: NexusGenInputs['ImageInput'][]; // [ImageInput!]!
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index cfaf122..2481ecb 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -93,6 +93,7 @@ input CreateProjectInput {
   hashtag: String!
   id: Int
   launch_status: ProjectLaunchStatusEnum!
+  lightning_address: String
   members: [TeamMemberInput!]!
   recruit_roles: [Int!]!
   screenshots: [ImageInput!]!
@@ -520,6 +521,7 @@ input UpdateProjectInput {
   hashtag: String!
   id: Int
   launch_status: ProjectLaunchStatusEnum!
+  lightning_address: String
   members: [TeamMemberInput!]!
   recruit_roles: [Int!]!
   screenshots: [ImageInput!]!
diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index 957f294..42d56be 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -474,6 +474,7 @@ const CreateProjectInput = inputObjectType({
         t.string('github');
         t.string('slack');
         t.string('telegram');
+        t.string('lightning_address');
         t.nonNull.int('category_id');
         t.nonNull.list.nonNull.int('capabilities'); // ids
         t.nonNull.list.nonNull.field('screenshots', {
@@ -511,6 +512,7 @@ const createProject = extendType({
                     tagline,
                     hashtag,
                     description,
+                    lightning_address,
                     capabilities,
                     category_id,
                     cover_image,
@@ -595,6 +597,7 @@ const createProject = extendType({
                     data: {
                         title,
                         description,
+                        lightning_address,
                         tagline,
                         hashtag,
                         website,
@@ -701,6 +704,7 @@ const UpdateProjectInput = inputObjectType({
         t.string('github')
         t.string('slack')
         t.string('telegram')
+        t.string('lightning_address');
         t.nonNull.int('category_id')
         t.nonNull.list.nonNull.int('capabilities')
         t.nonNull.list.nonNull.field('screenshots', {
@@ -730,6 +734,7 @@ const updateProject = extendType({
                     tagline,
                     hashtag,
                     description,
+                    lightning_address,
                     capabilities,
                     category_id,
                     cover_image,
@@ -877,6 +882,7 @@ const updateProject = extendType({
                         data: {
                             title,
                             description,
+                            lightning_address,
                             tagline,
                             hashtag,
                             website,
diff --git a/src/features/Profiles/Components/Avatar/Avatar.tsx b/src/features/Profiles/Components/Avatar/Avatar.tsx
index 3864a52..5ceae65 100644
--- a/src/features/Profiles/Components/Avatar/Avatar.tsx
+++ b/src/features/Profiles/Components/Avatar/Avatar.tsx
@@ -1,16 +1,40 @@
+import { usePopperTooltip } from "react-popper-tooltip";
 
 interface Props {
     src: string;
     alt?: string;
     width?: number | string;
     className?: string
+    renderTooltip?: () => JSX.Element
 }
 
-export default function Avatar({ src, alt, className, width = 40 }: Props) {
+export default function Avatar({ src, alt, className, width = 40, renderTooltip }: Props) {
+
+    const {
+        getArrowProps,
+        getTooltipProps,
+        setTooltipRef,
+        setTriggerRef,
+        visible,
+    } = usePopperTooltip();
+
     return (
-        <img src={src} className={`shrink-0 rounded-full object-cover border-2 bg-white border-gray-100 ${className}`} style={{
-            width: width,
-            aspectRatio: '1/1'
-        }} alt={alt ?? "avatar"} />
+        <>
+            <img ref={setTriggerRef} src={src} className={`shrink-0 rounded-full object-cover border-2 bg-white border-gray-100 ${className}`} style={{
+                width: width,
+                aspectRatio: '1/1'
+            }} alt={alt ?? "avatar"} />
+            {
+                (renderTooltip && visible) && (
+                    <div
+                        ref={setTooltipRef}
+                        {...getTooltipProps({ className: 'tooltip-container' })}
+                    >
+                        <div {...getArrowProps({ className: 'tooltip-arrow' })} />
+                        {renderTooltip()}
+                    </div>
+                )
+            }
+        </>
     )
 }
diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
index 8d69855..28db98e 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -69,6 +69,26 @@ const schema: yup.SchemaOf<IListProjectForm> = yup.object({
     website: yup.string().trim().url().required().label("project's link"),
     tagline: yup.string().trim().required().min(10),
     description: yup.string().trim().required().min(50, 'Write at least 10 words descriping your project'),
+    lightning_address: yup
+        .string()
+        .test({
+            name: "is valid lightning_address",
+            test: async value => {
+                try {
+                    if (value) {
+                        const [name, domain] = value.split("@");
+                        const lnurl = `https://${domain}/.well-known/lnurlp/${name}`;
+                        const res = await fetch(lnurl);
+                        if (res.status === 200) return true;
+                    }
+                    return true;
+                } catch (error) {
+                    return false;
+                }
+            }
+        })
+        .nullable()
+        .label("lightning address"),
     thumbnail_image: imageSchema.required("Please pick a thumbnail image").default(undefined),
     cover_image: imageSchema.required("Please pick a cover image").default(undefined),
     twitter: yup.string().url().nullable(),
@@ -103,9 +123,6 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
             website: "",
             tagline: "",
             description: "",
-            twitter: "",
-            discord: "",
-            github: "",
             category_id: undefined,
             capabilities: [],
             screenshots: [],
@@ -143,6 +160,7 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
                         slack: data.slack,
                         telegram: data.telegram,
                         github: data.github,
+                        lightning_address:data.lightning_address,
                         category_id: data.category.id,
                         capabilities: data.capabilities.map(c => c.id),
                         screenshots: data.screenshots.map(url => ({ url })),
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
index de05c4a..9e83163 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
@@ -8,6 +8,7 @@ import { IListProjectForm } from "../FormContainer/FormContainer";
 import AvatarInput from "src/Components/Inputs/FilesInputs/AvatarInput/AvatarInput";
 import CoverImageInput from "src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput";
 import ScreenshotsInput from "src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput";
+import { BsLightningChargeFill } from "react-icons/bs";
 
 interface Props { }
 
@@ -179,7 +180,7 @@ export default function ProjectDetailsTab(props: Props) {
                     </div>
                     <div>
                         <div className="input-wrapper mt-8 relative">
-                            <FaSlack className="text-yellow-500 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />
+                            <FaSlack className="text-pink-500 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />
                             <input
                                 type='text'
                                 className="input-text"
@@ -205,6 +206,20 @@ export default function ProjectDetailsTab(props: Props) {
                             {errors.telegram.message}
                         </p>}
                     </div>
+                    <div>
+                        <div className="input-wrapper mt-8 relative">
+                            <BsLightningChargeFill className="text-yellow-400 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />
+                            <input
+                                type='text'
+                                className="input-text"
+                                placeholder='lightning_address@XXX.com'
+                                {...register("lightning_address")}
+                            />
+                        </div>
+                        {errors.lightning_address && <p className="input-error">
+                            {errors.lightning_address.message}
+                        </p>}
+                    </div>
                 </div>
             </Card>
 
diff --git a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
index a70ec37..a786074 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { MdClose, MdEdit, MdLocalFireDepartment } from 'react-icons/md';
+import { MdClose, MdLocalFireDepartment } from 'react-icons/md';
 import { ModalCard } from 'src/Components/Modals/ModalsContainer/ModalsContainer';
 import { useAppDispatch, useAppSelector, useMediaQuery } from 'src/utils/hooks';
 import { openModal, scheduleModal } from 'src/redux/features/modals.slice';
@@ -108,6 +108,8 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
         },
     ];
 
+
+
     const canEdit = project.permissions.includes(ProjectPermissionEnum.UpdateInfo);
 
     const onVote = (votes?: number) => {
@@ -252,7 +254,17 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
                         <p className="text-body5 text-gray-400 mb-8">MAKERS</p>
                         <div className="flex flex-wrap gap-8">
                             {project.members.map(m => <Link key={m.user.id} to={createRoute({ type: "profile", id: m.user.id, username: m.user.name })}>
-                                <Avatar width={40} src={m.user.avatar} />
+                                <Avatar
+                                    width={40}
+                                    src={m.user.avatar}
+                                    renderTooltip={() => <div className='bg-white px-12 py-8 border border-gray-200 rounded-12 flex flex-wrap gap-12 shadow-lg'>
+                                        <Avatar width={48} src={m.user.avatar} />
+                                        <div className='overflow-hidden'>
+                                            <p className={`text-black font-medium overflow-hidden text-ellipsis`}>{m.user.name}</p>
+                                            <p className={`text-body6 text-gray-600`}>{m.user.jobTitle}</p>
+                                        </div>
+                                    </div>}
+                                />
                             </Link>)}
                         </div>
                     </div>}
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index 370c99a..4cb9902 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -119,6 +119,7 @@ export type CreateProjectInput = {
   hashtag: Scalars['String'];
   id?: InputMaybe<Scalars['Int']>;
   launch_status: ProjectLaunchStatusEnum;
+  lightning_address?: InputMaybe<Scalars['String']>;
   members: Array<TeamMemberInput>;
   recruit_roles: Array<Scalars['Int']>;
   screenshots: Array<ImageInput>;
@@ -772,6 +773,7 @@ export type UpdateProjectInput = {
   hashtag: Scalars['String'];
   id?: InputMaybe<Scalars['Int']>;
   launch_status: ProjectLaunchStatusEnum;
+  lightning_address?: InputMaybe<Scalars['String']>;
   members: Array<TeamMemberInput>;
   recruit_roles: Array<Scalars['Int']>;
   screenshots: Array<ImageInput>;

From 3677b2efb97f5bcac770a0bcc64d29e2d8a8c3e8 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sun, 25 Sep 2022 16:18:08 +0300
Subject: [PATCH 41/53] update: close icon on project details modal

---
 .../ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
index a786074..e06628a 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { MdClose, MdLocalFireDepartment } from 'react-icons/md';
+import { MdLocalFireDepartment } from 'react-icons/md';
 import { ModalCard } from 'src/Components/Modals/ModalsContainer/ModalsContainer';
 import { useAppDispatch, useAppSelector, useMediaQuery } from 'src/utils/hooks';
 import { openModal, scheduleModal } from 'src/redux/features/modals.slice';
@@ -15,7 +15,7 @@ import ErrorMessage from 'src/Components/Errors/ErrorMessage/ErrorMessage';
 import { setVoteAmount } from 'src/redux/features/vote.slice';
 import { numberFormatter } from 'src/utils/helperFunctions';
 import { MEDIA_QUERIES } from 'src/utils/theme';
-import { FaDiscord } from 'react-icons/fa';
+import { FaDiscord, FaTimes } from 'react-icons/fa';
 import { FiGithub, FiGlobe, FiTwitter } from 'react-icons/fi';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import Badge from 'src/Components/Badge/Badge';
@@ -144,7 +144,7 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
             {/* Cover Image */}
             <div className="relative h-[100px] lg:h-[80px]">
                 <img className="w-full h-full object-cover" src={project.cover_image} alt="" />
-                <button className="w-32 h-32  bg-gray-600 bg-opacity-80 text-white absolute top-24 right-24 rounded-full hover:bg-gray-800 text-center flex flex-col justify-center items-center" onClick={closeModal}><MdClose className=' inline-block' /></button>
+                <button className="w-32 h-32  bg-gray-600 bg-opacity-80 text-white absolute top-24 right-24 rounded-full hover:bg-gray-800 text-center flex flex-col justify-center items-center" onClick={closeModal}><FaTimes className=' inline-block' /></button>
             </div>
             <div className="p-24 flex flex-col gap-24">
 

From ec4eaca2174b6614ab3893cf242ef0c7fd59fc37 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sun, 25 Sep 2022 17:02:20 +0300
Subject: [PATCH 42/53] fix: screenshots keys, show warning on updating
 project's hashtag

---
 .../ScreenshotsInput/ScreenshotsInput.tsx     |  14 +-
 .../FormContainer/FormContainer.tsx           |   5 +-
 .../ProjectDetailsTab/ProjectDetailsTab.tsx   |   7 +-
 src/graphql/index.tsx                         | 426 +++++++++---------
 4 files changed, 230 insertions(+), 222 deletions(-)

diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx
index d4481e7..c1b8aa2 100644
--- a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx
+++ b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx
@@ -24,9 +24,13 @@ const mockSenderEnhancer = getMockSenderEnhancer({
 const MAX_UPLOAD_COUNT = 4 as const;
 
 
+interface Image extends ImageInput {
+    local_id?: string
+}
+
 interface Props {
-    value: ImageInput[],
-    onChange: (new_value: ImageInput[]) => void
+    value: Image[],
+    onChange: (new_value: Image[]) => void
 }
 
 
@@ -56,11 +60,9 @@ export default function ScreenshotsInput(props: Props) {
                 [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, name: filename, url: url }].slice(-MAX_UPLOAD_COUNT))
+                        onChange([...uploadedFiles, { id, local_id: id, name: filename, url: url }].slice(-MAX_UPLOAD_COUNT))
                     }
                 }
             }}
@@ -69,7 +71,7 @@ export default function ScreenshotsInput(props: Props) {
             <div className="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-16 mt-24">
                 <DropZoneButton extraProps={{ canUploadMore }} />
                 {uploadedFiles.map((f, idx) => <ScreenshotThumbnail
-                    key={f.id}
+                    key={f.local_id}
                     url={f.url}
                     onCancel={() => {
                         onChange(removeArrayItemAtIndex(uploadedFiles, idx))
diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
index 28db98e..2b05766 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -13,6 +13,7 @@ import { store } from "src/redux/store";
 import UpdateProjectContextProvider from './updateProjectContext'
 import { useNavigate } from 'react-router-dom'
 import { createRoute } from 'src/utils/routing'
+import { nanoid } from "@reduxjs/toolkit";
 
 
 interface Props {
@@ -160,10 +161,10 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
                         slack: data.slack,
                         telegram: data.telegram,
                         github: data.github,
-                        lightning_address:data.lightning_address,
+                        lightning_address: data.lightning_address,
                         category_id: data.category.id,
                         capabilities: data.capabilities.map(c => c.id),
-                        screenshots: data.screenshots.map(url => ({ url })),
+                        screenshots: data.screenshots.map(url => ({ url, local_id: nanoid(5), })),
 
                         members: prepareMembers(data.members),
                         recruit_roles: data.recruit_roles.map(r => r.id),
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
index 9e83163..5b01022 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
@@ -14,7 +14,9 @@ interface Props { }
 
 export default function ProjectDetailsTab(props: Props) {
 
-    const { register, formState: { errors, }, control, getValues } = useFormContext<IListProjectForm>();
+    const { register, formState: { errors, dirtyFields }, control, getValues } = useFormContext<IListProjectForm>();
+
+    const isUpdating = !!getValues('id');
 
     return (
         <div className="md:col-span-2 flex flex-col gap-24">
@@ -124,6 +126,9 @@ export default function ProjectDetailsTab(props: Props) {
                             {...register("hashtag")}
                         />
                     </div>
+                    {(isUpdating && dirtyFields.hashtag) && <p className="text-body5 text-orange-500 mt-8">
+                        <span className="font-bolder text-orange-400">Warning:</span> changing the hashtag of the project will break all the old links for the project.
+                    </p>}
                     {errors.hashtag && <p className="input-error">
                         {errors.hashtag.message}
                     </p>}
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index 4cb9902..3e1b397 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -1269,13 +1269,13 @@ export const OfficialTagsDocument = gql`
  * });
  */
 export function useOfficialTagsQuery(baseOptions?: Apollo.QueryHookOptions<OfficialTagsQuery, OfficialTagsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<OfficialTagsQuery, OfficialTagsQueryVariables>(OfficialTagsDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<OfficialTagsQuery, OfficialTagsQueryVariables>(OfficialTagsDocument, options);
+}
 export function useOfficialTagsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<OfficialTagsQuery, OfficialTagsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<OfficialTagsQuery, OfficialTagsQueryVariables>(OfficialTagsDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<OfficialTagsQuery, OfficialTagsQueryVariables>(OfficialTagsDocument, options);
+}
 export type OfficialTagsQueryHookResult = ReturnType<typeof useOfficialTagsQuery>;
 export type OfficialTagsLazyQueryHookResult = ReturnType<typeof useOfficialTagsLazyQuery>;
 export type OfficialTagsQueryResult = Apollo.QueryResult<OfficialTagsQuery, OfficialTagsQueryVariables>;
@@ -1307,13 +1307,13 @@ export const SearchUsersDocument = gql`
  * });
  */
 export function useSearchUsersQuery(baseOptions: Apollo.QueryHookOptions<SearchUsersQuery, SearchUsersQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<SearchUsersQuery, SearchUsersQueryVariables>(SearchUsersDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<SearchUsersQuery, SearchUsersQueryVariables>(SearchUsersDocument, options);
+}
 export function useSearchUsersLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<SearchUsersQuery, SearchUsersQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<SearchUsersQuery, SearchUsersQueryVariables>(SearchUsersDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<SearchUsersQuery, SearchUsersQueryVariables>(SearchUsersDocument, options);
+}
 export type SearchUsersQueryHookResult = ReturnType<typeof useSearchUsersQuery>;
 export type SearchUsersLazyQueryHookResult = ReturnType<typeof useSearchUsersLazyQuery>;
 export type SearchUsersQueryResult = Apollo.QueryResult<SearchUsersQuery, SearchUsersQueryVariables>;
@@ -1344,13 +1344,13 @@ export const NavCategoriesDocument = gql`
  * });
  */
 export function useNavCategoriesQuery(baseOptions?: Apollo.QueryHookOptions<NavCategoriesQuery, NavCategoriesQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<NavCategoriesQuery, NavCategoriesQueryVariables>(NavCategoriesDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<NavCategoriesQuery, NavCategoriesQueryVariables>(NavCategoriesDocument, options);
+}
 export function useNavCategoriesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<NavCategoriesQuery, NavCategoriesQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<NavCategoriesQuery, NavCategoriesQueryVariables>(NavCategoriesDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<NavCategoriesQuery, NavCategoriesQueryVariables>(NavCategoriesDocument, options);
+}
 export type NavCategoriesQueryHookResult = ReturnType<typeof useNavCategoriesQuery>;
 export type NavCategoriesLazyQueryHookResult = ReturnType<typeof useNavCategoriesLazyQuery>;
 export type NavCategoriesQueryResult = Apollo.QueryResult<NavCategoriesQuery, NavCategoriesQueryVariables>;
@@ -1385,13 +1385,13 @@ export const SearchProjectsDocument = gql`
  * });
  */
 export function useSearchProjectsQuery(baseOptions: Apollo.QueryHookOptions<SearchProjectsQuery, SearchProjectsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<SearchProjectsQuery, SearchProjectsQueryVariables>(SearchProjectsDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<SearchProjectsQuery, SearchProjectsQueryVariables>(SearchProjectsDocument, options);
+}
 export function useSearchProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<SearchProjectsQuery, SearchProjectsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<SearchProjectsQuery, SearchProjectsQueryVariables>(SearchProjectsDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<SearchProjectsQuery, SearchProjectsQueryVariables>(SearchProjectsDocument, options);
+}
 export type SearchProjectsQueryHookResult = ReturnType<typeof useSearchProjectsQuery>;
 export type SearchProjectsLazyQueryHookResult = ReturnType<typeof useSearchProjectsLazyQuery>;
 export type SearchProjectsQueryResult = Apollo.QueryResult<SearchProjectsQuery, SearchProjectsQueryVariables>;
@@ -1424,13 +1424,13 @@ export const MeDocument = gql`
  * });
  */
 export function useMeQuery(baseOptions?: Apollo.QueryHookOptions<MeQuery, MeQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<MeQuery, MeQueryVariables>(MeDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<MeQuery, MeQueryVariables>(MeDocument, options);
+}
 export function useMeLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MeQuery, MeQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<MeQuery, MeQueryVariables>(MeDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<MeQuery, MeQueryVariables>(MeDocument, options);
+}
 export type MeQueryHookResult = ReturnType<typeof useMeQuery>;
 export type MeLazyQueryHookResult = ReturnType<typeof useMeLazyQuery>;
 export type MeQueryResult = Apollo.QueryResult<MeQuery, MeQueryVariables>;
@@ -1461,13 +1461,13 @@ export const DonationsStatsDocument = gql`
  * });
  */
 export function useDonationsStatsQuery(baseOptions?: Apollo.QueryHookOptions<DonationsStatsQuery, DonationsStatsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<DonationsStatsQuery, DonationsStatsQueryVariables>(DonationsStatsDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<DonationsStatsQuery, DonationsStatsQueryVariables>(DonationsStatsDocument, options);
+}
 export function useDonationsStatsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<DonationsStatsQuery, DonationsStatsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<DonationsStatsQuery, DonationsStatsQueryVariables>(DonationsStatsDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<DonationsStatsQuery, DonationsStatsQueryVariables>(DonationsStatsDocument, options);
+}
 export type DonationsStatsQueryHookResult = ReturnType<typeof useDonationsStatsQuery>;
 export type DonationsStatsLazyQueryHookResult = ReturnType<typeof useDonationsStatsLazyQuery>;
 export type DonationsStatsQueryResult = Apollo.QueryResult<DonationsStatsQuery, DonationsStatsQueryVariables>;
@@ -1501,9 +1501,9 @@ export type DonateMutationFn = Apollo.MutationFunction<DonateMutation, DonateMut
  * });
  */
 export function useDonateMutation(baseOptions?: Apollo.MutationHookOptions<DonateMutation, DonateMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useMutation<DonateMutation, DonateMutationVariables>(DonateDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<DonateMutation, DonateMutationVariables>(DonateDocument, options);
+}
 export type DonateMutationHookResult = ReturnType<typeof useDonateMutation>;
 export type DonateMutationResult = Apollo.MutationResult<DonateMutation>;
 export type DonateMutationOptions = Apollo.BaseMutationOptions<DonateMutation, DonateMutationVariables>;
@@ -1537,9 +1537,9 @@ export type ConfirmDonationMutationFn = Apollo.MutationFunction<ConfirmDonationM
  * });
  */
 export function useConfirmDonationMutation(baseOptions?: Apollo.MutationHookOptions<ConfirmDonationMutation, ConfirmDonationMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useMutation<ConfirmDonationMutation, ConfirmDonationMutationVariables>(ConfirmDonationDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<ConfirmDonationMutation, ConfirmDonationMutationVariables>(ConfirmDonationDocument, options);
+}
 export type ConfirmDonationMutationHookResult = ReturnType<typeof useConfirmDonationMutation>;
 export type ConfirmDonationMutationResult = Apollo.MutationResult<ConfirmDonationMutation>;
 export type ConfirmDonationMutationOptions = Apollo.BaseMutationOptions<ConfirmDonationMutation, ConfirmDonationMutationVariables>;
@@ -1581,13 +1581,13 @@ export const GetHackathonsDocument = gql`
  * });
  */
 export function useGetHackathonsQuery(baseOptions?: Apollo.QueryHookOptions<GetHackathonsQuery, GetHackathonsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<GetHackathonsQuery, GetHackathonsQueryVariables>(GetHackathonsDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<GetHackathonsQuery, GetHackathonsQueryVariables>(GetHackathonsDocument, options);
+}
 export function useGetHackathonsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetHackathonsQuery, GetHackathonsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<GetHackathonsQuery, GetHackathonsQueryVariables>(GetHackathonsDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<GetHackathonsQuery, GetHackathonsQueryVariables>(GetHackathonsDocument, options);
+}
 export type GetHackathonsQueryHookResult = ReturnType<typeof useGetHackathonsQuery>;
 export type GetHackathonsLazyQueryHookResult = ReturnType<typeof useGetHackathonsLazyQuery>;
 export type GetHackathonsQueryResult = Apollo.QueryResult<GetHackathonsQuery, GetHackathonsQueryVariables>;
@@ -1638,13 +1638,13 @@ export const TrendingPostsDocument = gql`
  * });
  */
 export function useTrendingPostsQuery(baseOptions?: Apollo.QueryHookOptions<TrendingPostsQuery, TrendingPostsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<TrendingPostsQuery, TrendingPostsQueryVariables>(TrendingPostsDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<TrendingPostsQuery, TrendingPostsQueryVariables>(TrendingPostsDocument, options);
+}
 export function useTrendingPostsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<TrendingPostsQuery, TrendingPostsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<TrendingPostsQuery, TrendingPostsQueryVariables>(TrendingPostsDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<TrendingPostsQuery, TrendingPostsQueryVariables>(TrendingPostsDocument, options);
+}
 export type TrendingPostsQueryHookResult = ReturnType<typeof useTrendingPostsQuery>;
 export type TrendingPostsLazyQueryHookResult = ReturnType<typeof useTrendingPostsLazyQuery>;
 export type TrendingPostsQueryResult = Apollo.QueryResult<TrendingPostsQuery, TrendingPostsQueryVariables>;
@@ -1687,13 +1687,13 @@ export const GetMyDraftsDocument = gql`
  * });
  */
 export function useGetMyDraftsQuery(baseOptions: Apollo.QueryHookOptions<GetMyDraftsQuery, GetMyDraftsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<GetMyDraftsQuery, GetMyDraftsQueryVariables>(GetMyDraftsDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<GetMyDraftsQuery, GetMyDraftsQueryVariables>(GetMyDraftsDocument, options);
+}
 export function useGetMyDraftsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetMyDraftsQuery, GetMyDraftsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<GetMyDraftsQuery, GetMyDraftsQueryVariables>(GetMyDraftsDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<GetMyDraftsQuery, GetMyDraftsQueryVariables>(GetMyDraftsDocument, options);
+}
 export type GetMyDraftsQueryHookResult = ReturnType<typeof useGetMyDraftsQuery>;
 export type GetMyDraftsLazyQueryHookResult = ReturnType<typeof useGetMyDraftsLazyQuery>;
 export type GetMyDraftsQueryResult = Apollo.QueryResult<GetMyDraftsQuery, GetMyDraftsQueryVariables>;
@@ -1735,9 +1735,9 @@ export type CreateStoryMutationFn = Apollo.MutationFunction<CreateStoryMutation,
  * });
  */
 export function useCreateStoryMutation(baseOptions?: Apollo.MutationHookOptions<CreateStoryMutation, CreateStoryMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useMutation<CreateStoryMutation, CreateStoryMutationVariables>(CreateStoryDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<CreateStoryMutation, CreateStoryMutationVariables>(CreateStoryDocument, options);
+}
 export type CreateStoryMutationHookResult = ReturnType<typeof useCreateStoryMutation>;
 export type CreateStoryMutationResult = Apollo.MutationResult<CreateStoryMutation>;
 export type CreateStoryMutationOptions = Apollo.BaseMutationOptions<CreateStoryMutation, CreateStoryMutationVariables>;
@@ -1768,9 +1768,9 @@ export type DeleteStoryMutationFn = Apollo.MutationFunction<DeleteStoryMutation,
  * });
  */
 export function useDeleteStoryMutation(baseOptions?: Apollo.MutationHookOptions<DeleteStoryMutation, DeleteStoryMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useMutation<DeleteStoryMutation, DeleteStoryMutationVariables>(DeleteStoryDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<DeleteStoryMutation, DeleteStoryMutationVariables>(DeleteStoryDocument, options);
+}
 export type DeleteStoryMutationHookResult = ReturnType<typeof useDeleteStoryMutation>;
 export type DeleteStoryMutationResult = Apollo.MutationResult<DeleteStoryMutation>;
 export type DeleteStoryMutationOptions = Apollo.BaseMutationOptions<DeleteStoryMutation, DeleteStoryMutationVariables>;
@@ -1800,13 +1800,13 @@ export const PopularTagsDocument = gql`
  * });
  */
 export function usePopularTagsQuery(baseOptions?: Apollo.QueryHookOptions<PopularTagsQuery, PopularTagsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<PopularTagsQuery, PopularTagsQueryVariables>(PopularTagsDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<PopularTagsQuery, PopularTagsQueryVariables>(PopularTagsDocument, options);
+}
 export function usePopularTagsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PopularTagsQuery, PopularTagsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<PopularTagsQuery, PopularTagsQueryVariables>(PopularTagsDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<PopularTagsQuery, PopularTagsQueryVariables>(PopularTagsDocument, options);
+}
 export type PopularTagsQueryHookResult = ReturnType<typeof usePopularTagsQuery>;
 export type PopularTagsLazyQueryHookResult = ReturnType<typeof usePopularTagsLazyQuery>;
 export type PopularTagsQueryResult = Apollo.QueryResult<PopularTagsQuery, PopularTagsQueryVariables>;
@@ -1897,13 +1897,13 @@ export const FeedDocument = gql`
  * });
  */
 export function useFeedQuery(baseOptions?: Apollo.QueryHookOptions<FeedQuery, FeedQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<FeedQuery, FeedQueryVariables>(FeedDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<FeedQuery, FeedQueryVariables>(FeedDocument, options);
+}
 export function useFeedLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<FeedQuery, FeedQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<FeedQuery, FeedQueryVariables>(FeedDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<FeedQuery, FeedQueryVariables>(FeedDocument, options);
+}
 export type FeedQueryHookResult = ReturnType<typeof useFeedQuery>;
 export type FeedLazyQueryHookResult = ReturnType<typeof useFeedLazyQuery>;
 export type FeedQueryResult = Apollo.QueryResult<FeedQuery, FeedQueryVariables>;
@@ -2002,13 +2002,13 @@ export const PostDetailsDocument = gql`
  * });
  */
 export function usePostDetailsQuery(baseOptions: Apollo.QueryHookOptions<PostDetailsQuery, PostDetailsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<PostDetailsQuery, PostDetailsQueryVariables>(PostDetailsDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<PostDetailsQuery, PostDetailsQueryVariables>(PostDetailsDocument, options);
+}
 export function usePostDetailsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PostDetailsQuery, PostDetailsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<PostDetailsQuery, PostDetailsQueryVariables>(PostDetailsDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<PostDetailsQuery, PostDetailsQueryVariables>(PostDetailsDocument, options);
+}
 export type PostDetailsQueryHookResult = ReturnType<typeof usePostDetailsQuery>;
 export type PostDetailsLazyQueryHookResult = ReturnType<typeof usePostDetailsLazyQuery>;
 export type PostDetailsQueryResult = Apollo.QueryResult<PostDetailsQuery, PostDetailsQueryVariables>;
@@ -2037,13 +2037,13 @@ export const MyProfileAboutDocument = gql`
  * });
  */
 export function useMyProfileAboutQuery(baseOptions?: Apollo.QueryHookOptions<MyProfileAboutQuery, MyProfileAboutQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<MyProfileAboutQuery, MyProfileAboutQueryVariables>(MyProfileAboutDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<MyProfileAboutQuery, MyProfileAboutQueryVariables>(MyProfileAboutDocument, options);
+}
 export function useMyProfileAboutLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MyProfileAboutQuery, MyProfileAboutQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<MyProfileAboutQuery, MyProfileAboutQueryVariables>(MyProfileAboutDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<MyProfileAboutQuery, MyProfileAboutQueryVariables>(MyProfileAboutDocument, options);
+}
 export type MyProfileAboutQueryHookResult = ReturnType<typeof useMyProfileAboutQuery>;
 export type MyProfileAboutLazyQueryHookResult = ReturnType<typeof useMyProfileAboutLazyQuery>;
 export type MyProfileAboutQueryResult = Apollo.QueryResult<MyProfileAboutQuery, MyProfileAboutQueryVariables>;
@@ -2075,9 +2075,9 @@ export type UpdateProfileAboutMutationFn = Apollo.MutationFunction<UpdateProfile
  * });
  */
 export function useUpdateProfileAboutMutation(baseOptions?: Apollo.MutationHookOptions<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useMutation<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>(UpdateProfileAboutDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>(UpdateProfileAboutDocument, options);
+}
 export type UpdateProfileAboutMutationHookResult = ReturnType<typeof useUpdateProfileAboutMutation>;
 export type UpdateProfileAboutMutationResult = Apollo.MutationResult<UpdateProfileAboutMutation>;
 export type UpdateProfileAboutMutationOptions = Apollo.BaseMutationOptions<UpdateProfileAboutMutation, UpdateProfileAboutMutationVariables>;
@@ -2112,13 +2112,13 @@ export const MyProfilePreferencesDocument = gql`
  * });
  */
 export function useMyProfilePreferencesQuery(baseOptions?: Apollo.QueryHookOptions<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>(MyProfilePreferencesDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>(MyProfilePreferencesDocument, options);
+}
 export function useMyProfilePreferencesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>(MyProfilePreferencesDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>(MyProfilePreferencesDocument, options);
+}
 export type MyProfilePreferencesQueryHookResult = ReturnType<typeof useMyProfilePreferencesQuery>;
 export type MyProfilePreferencesLazyQueryHookResult = ReturnType<typeof useMyProfilePreferencesLazyQuery>;
 export type MyProfilePreferencesQueryResult = Apollo.QueryResult<MyProfilePreferencesQuery, MyProfilePreferencesQueryVariables>;
@@ -2155,9 +2155,9 @@ export type UpdateUserPreferencesMutationFn = Apollo.MutationFunction<UpdateUser
  * });
  */
 export function useUpdateUserPreferencesMutation(baseOptions?: Apollo.MutationHookOptions<UpdateUserPreferencesMutation, UpdateUserPreferencesMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useMutation<UpdateUserPreferencesMutation, UpdateUserPreferencesMutationVariables>(UpdateUserPreferencesDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<UpdateUserPreferencesMutation, UpdateUserPreferencesMutationVariables>(UpdateUserPreferencesDocument, options);
+}
 export type UpdateUserPreferencesMutationHookResult = ReturnType<typeof useUpdateUserPreferencesMutation>;
 export type UpdateUserPreferencesMutationResult = Apollo.MutationResult<UpdateUserPreferencesMutation>;
 export type UpdateUserPreferencesMutationOptions = Apollo.BaseMutationOptions<UpdateUserPreferencesMutation, UpdateUserPreferencesMutationVariables>;
@@ -2195,13 +2195,13 @@ export const MyProfileRolesSkillsDocument = gql`
  * });
  */
 export function useMyProfileRolesSkillsQuery(baseOptions?: Apollo.QueryHookOptions<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>(MyProfileRolesSkillsDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>(MyProfileRolesSkillsDocument, options);
+}
 export function useMyProfileRolesSkillsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>(MyProfileRolesSkillsDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>(MyProfileRolesSkillsDocument, options);
+}
 export type MyProfileRolesSkillsQueryHookResult = ReturnType<typeof useMyProfileRolesSkillsQuery>;
 export type MyProfileRolesSkillsLazyQueryHookResult = ReturnType<typeof useMyProfileRolesSkillsLazyQuery>;
 export type MyProfileRolesSkillsQueryResult = Apollo.QueryResult<MyProfileRolesSkillsQuery, MyProfileRolesSkillsQueryVariables>;
@@ -2242,9 +2242,9 @@ export type UpdateUserRolesSkillsMutationFn = Apollo.MutationFunction<UpdateUser
  * });
  */
 export function useUpdateUserRolesSkillsMutation(baseOptions?: Apollo.MutationHookOptions<UpdateUserRolesSkillsMutation, UpdateUserRolesSkillsMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useMutation<UpdateUserRolesSkillsMutation, UpdateUserRolesSkillsMutationVariables>(UpdateUserRolesSkillsDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<UpdateUserRolesSkillsMutation, UpdateUserRolesSkillsMutationVariables>(UpdateUserRolesSkillsDocument, options);
+}
 export type UpdateUserRolesSkillsMutationHookResult = ReturnType<typeof useUpdateUserRolesSkillsMutation>;
 export type UpdateUserRolesSkillsMutationResult = Apollo.MutationResult<UpdateUserRolesSkillsMutation>;
 export type UpdateUserRolesSkillsMutationOptions = Apollo.BaseMutationOptions<UpdateUserRolesSkillsMutation, UpdateUserRolesSkillsMutationVariables>;
@@ -2298,13 +2298,13 @@ ${UserRolesSkillsFragmentDoc}`;
  * });
  */
 export function useProfileQuery(baseOptions: Apollo.QueryHookOptions<ProfileQuery, ProfileQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<ProfileQuery, ProfileQueryVariables>(ProfileDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<ProfileQuery, ProfileQueryVariables>(ProfileDocument, options);
+}
 export function useProfileLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProfileQuery, ProfileQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<ProfileQuery, ProfileQueryVariables>(ProfileDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<ProfileQuery, ProfileQueryVariables>(ProfileDocument, options);
+}
 export type ProfileQueryHookResult = ReturnType<typeof useProfileQuery>;
 export type ProfileLazyQueryHookResult = ReturnType<typeof useProfileLazyQuery>;
 export type ProfileQueryResult = Apollo.QueryResult<ProfileQuery, ProfileQueryVariables>;
@@ -2346,13 +2346,13 @@ export const CategoryPageDocument = gql`
  * });
  */
 export function useCategoryPageQuery(baseOptions: Apollo.QueryHookOptions<CategoryPageQuery, CategoryPageQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<CategoryPageQuery, CategoryPageQueryVariables>(CategoryPageDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<CategoryPageQuery, CategoryPageQueryVariables>(CategoryPageDocument, options);
+}
 export function useCategoryPageLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<CategoryPageQuery, CategoryPageQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<CategoryPageQuery, CategoryPageQueryVariables>(CategoryPageDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<CategoryPageQuery, CategoryPageQueryVariables>(CategoryPageDocument, options);
+}
 export type CategoryPageQueryHookResult = ReturnType<typeof useCategoryPageQuery>;
 export type CategoryPageLazyQueryHookResult = ReturnType<typeof useCategoryPageLazyQuery>;
 export type CategoryPageQueryResult = Apollo.QueryResult<CategoryPageQuery, CategoryPageQueryVariables>;
@@ -2382,13 +2382,13 @@ export const AllCategoriesDocument = gql`
  * });
  */
 export function useAllCategoriesQuery(baseOptions?: Apollo.QueryHookOptions<AllCategoriesQuery, AllCategoriesQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<AllCategoriesQuery, AllCategoriesQueryVariables>(AllCategoriesDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<AllCategoriesQuery, AllCategoriesQueryVariables>(AllCategoriesDocument, options);
+}
 export function useAllCategoriesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AllCategoriesQuery, AllCategoriesQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<AllCategoriesQuery, AllCategoriesQueryVariables>(AllCategoriesDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<AllCategoriesQuery, AllCategoriesQueryVariables>(AllCategoriesDocument, options);
+}
 export type AllCategoriesQueryHookResult = ReturnType<typeof useAllCategoriesQuery>;
 export type AllCategoriesLazyQueryHookResult = ReturnType<typeof useAllCategoriesLazyQuery>;
 export type AllCategoriesQueryResult = Apollo.QueryResult<AllCategoriesQuery, AllCategoriesQueryVariables>;
@@ -2447,13 +2447,13 @@ export const ExploreProjectsDocument = gql`
  * });
  */
 export function useExploreProjectsQuery(baseOptions?: Apollo.QueryHookOptions<ExploreProjectsQuery, ExploreProjectsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<ExploreProjectsQuery, ExploreProjectsQueryVariables>(ExploreProjectsDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<ExploreProjectsQuery, ExploreProjectsQueryVariables>(ExploreProjectsDocument, options);
+}
 export function useExploreProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExploreProjectsQuery, ExploreProjectsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<ExploreProjectsQuery, ExploreProjectsQueryVariables>(ExploreProjectsDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<ExploreProjectsQuery, ExploreProjectsQueryVariables>(ExploreProjectsDocument, options);
+}
 export type ExploreProjectsQueryHookResult = ReturnType<typeof useExploreProjectsQuery>;
 export type ExploreProjectsLazyQueryHookResult = ReturnType<typeof useExploreProjectsLazyQuery>;
 export type ExploreProjectsQueryResult = Apollo.QueryResult<ExploreProjectsQuery, ExploreProjectsQueryVariables>;
@@ -2488,13 +2488,13 @@ export const HottestProjectsDocument = gql`
  * });
  */
 export function useHottestProjectsQuery(baseOptions?: Apollo.QueryHookOptions<HottestProjectsQuery, HottestProjectsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<HottestProjectsQuery, HottestProjectsQueryVariables>(HottestProjectsDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<HottestProjectsQuery, HottestProjectsQueryVariables>(HottestProjectsDocument, options);
+}
 export function useHottestProjectsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<HottestProjectsQuery, HottestProjectsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<HottestProjectsQuery, HottestProjectsQueryVariables>(HottestProjectsDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<HottestProjectsQuery, HottestProjectsQueryVariables>(HottestProjectsDocument, options);
+}
 export type HottestProjectsQueryHookResult = ReturnType<typeof useHottestProjectsQuery>;
 export type HottestProjectsLazyQueryHookResult = ReturnType<typeof useHottestProjectsLazyQuery>;
 export type HottestProjectsQueryResult = Apollo.QueryResult<HottestProjectsQuery, HottestProjectsQueryVariables>;
@@ -2524,13 +2524,13 @@ export const GetAllCapabilitiesDocument = gql`
  * });
  */
 export function useGetAllCapabilitiesQuery(baseOptions?: Apollo.QueryHookOptions<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>(GetAllCapabilitiesDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>(GetAllCapabilitiesDocument, options);
+}
 export function useGetAllCapabilitiesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>(GetAllCapabilitiesDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>(GetAllCapabilitiesDocument, options);
+}
 export type GetAllCapabilitiesQueryHookResult = ReturnType<typeof useGetAllCapabilitiesQuery>;
 export type GetAllCapabilitiesLazyQueryHookResult = ReturnType<typeof useGetAllCapabilitiesLazyQuery>;
 export type GetAllCapabilitiesQueryResult = Apollo.QueryResult<GetAllCapabilitiesQuery, GetAllCapabilitiesQueryVariables>;
@@ -2563,9 +2563,9 @@ export type CreateProjectMutationFn = Apollo.MutationFunction<CreateProjectMutat
  * });
  */
 export function useCreateProjectMutation(baseOptions?: Apollo.MutationHookOptions<CreateProjectMutation, CreateProjectMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useMutation<CreateProjectMutation, CreateProjectMutationVariables>(CreateProjectDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<CreateProjectMutation, CreateProjectMutationVariables>(CreateProjectDocument, options);
+}
 export type CreateProjectMutationHookResult = ReturnType<typeof useCreateProjectMutation>;
 export type CreateProjectMutationResult = Apollo.MutationResult<CreateProjectMutation>;
 export type CreateProjectMutationOptions = Apollo.BaseMutationOptions<CreateProjectMutation, CreateProjectMutationVariables>;
@@ -2598,9 +2598,9 @@ export type UpdateProjectMutationFn = Apollo.MutationFunction<UpdateProjectMutat
  * });
  */
 export function useUpdateProjectMutation(baseOptions?: Apollo.MutationHookOptions<UpdateProjectMutation, UpdateProjectMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useMutation<UpdateProjectMutation, UpdateProjectMutationVariables>(UpdateProjectDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<UpdateProjectMutation, UpdateProjectMutationVariables>(UpdateProjectDocument, options);
+}
 export type UpdateProjectMutationHookResult = ReturnType<typeof useUpdateProjectMutation>;
 export type UpdateProjectMutationResult = Apollo.MutationResult<UpdateProjectMutation>;
 export type UpdateProjectMutationOptions = Apollo.BaseMutationOptions<UpdateProjectMutation, UpdateProjectMutationVariables>;
@@ -2628,13 +2628,13 @@ export const IsValidProjectHashtagDocument = gql`
  * });
  */
 export function useIsValidProjectHashtagQuery(baseOptions: Apollo.QueryHookOptions<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>(IsValidProjectHashtagDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>(IsValidProjectHashtagDocument, options);
+}
 export function useIsValidProjectHashtagLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>(IsValidProjectHashtagDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>(IsValidProjectHashtagDocument, options);
+}
 export type IsValidProjectHashtagQueryHookResult = ReturnType<typeof useIsValidProjectHashtagQuery>;
 export type IsValidProjectHashtagLazyQueryHookResult = ReturnType<typeof useIsValidProjectHashtagLazyQuery>;
 export type IsValidProjectHashtagQueryResult = Apollo.QueryResult<IsValidProjectHashtagQuery, IsValidProjectHashtagQueryVariables>;
@@ -2663,13 +2663,13 @@ export const GetTournamentsToRegisterDocument = gql`
  * });
  */
 export function useGetTournamentsToRegisterQuery(baseOptions?: Apollo.QueryHookOptions<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>(GetTournamentsToRegisterDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>(GetTournamentsToRegisterDocument, options);
+}
 export function useGetTournamentsToRegisterLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>(GetTournamentsToRegisterDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>(GetTournamentsToRegisterDocument, options);
+}
 export type GetTournamentsToRegisterQueryHookResult = ReturnType<typeof useGetTournamentsToRegisterQuery>;
 export type GetTournamentsToRegisterLazyQueryHookResult = ReturnType<typeof useGetTournamentsToRegisterLazyQuery>;
 export type GetTournamentsToRegisterQueryResult = Apollo.QueryResult<GetTournamentsToRegisterQuery, GetTournamentsToRegisterQueryVariables>;
@@ -2750,13 +2750,13 @@ export const ProjectDetailsDocument = gql`
  * });
  */
 export function useProjectDetailsQuery(baseOptions: Apollo.QueryHookOptions<ProjectDetailsQuery, ProjectDetailsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<ProjectDetailsQuery, ProjectDetailsQueryVariables>(ProjectDetailsDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<ProjectDetailsQuery, ProjectDetailsQueryVariables>(ProjectDetailsDocument, options);
+}
 export function useProjectDetailsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProjectDetailsQuery, ProjectDetailsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<ProjectDetailsQuery, ProjectDetailsQueryVariables>(ProjectDetailsDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<ProjectDetailsQuery, ProjectDetailsQueryVariables>(ProjectDetailsDocument, options);
+}
 export type ProjectDetailsQueryHookResult = ReturnType<typeof useProjectDetailsQuery>;
 export type ProjectDetailsLazyQueryHookResult = ReturnType<typeof useProjectDetailsLazyQuery>;
 export type ProjectDetailsQueryResult = Apollo.QueryResult<ProjectDetailsQuery, ProjectDetailsQueryVariables>;
@@ -2786,13 +2786,13 @@ export const GetAllRolesDocument = gql`
  * });
  */
 export function useGetAllRolesQuery(baseOptions?: Apollo.QueryHookOptions<GetAllRolesQuery, GetAllRolesQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<GetAllRolesQuery, GetAllRolesQueryVariables>(GetAllRolesDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<GetAllRolesQuery, GetAllRolesQueryVariables>(GetAllRolesDocument, options);
+}
 export function useGetAllRolesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetAllRolesQuery, GetAllRolesQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<GetAllRolesQuery, GetAllRolesQueryVariables>(GetAllRolesDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<GetAllRolesQuery, GetAllRolesQueryVariables>(GetAllRolesDocument, options);
+}
 export type GetAllRolesQueryHookResult = ReturnType<typeof useGetAllRolesQuery>;
 export type GetAllRolesLazyQueryHookResult = ReturnType<typeof useGetAllRolesLazyQuery>;
 export type GetAllRolesQueryResult = Apollo.QueryResult<GetAllRolesQuery, GetAllRolesQueryVariables>;
@@ -2856,13 +2856,13 @@ export const GetMakersInTournamentDocument = gql`
  * });
  */
 export function useGetMakersInTournamentQuery(baseOptions: Apollo.QueryHookOptions<GetMakersInTournamentQuery, GetMakersInTournamentQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<GetMakersInTournamentQuery, GetMakersInTournamentQueryVariables>(GetMakersInTournamentDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<GetMakersInTournamentQuery, GetMakersInTournamentQueryVariables>(GetMakersInTournamentDocument, options);
+}
 export function useGetMakersInTournamentLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetMakersInTournamentQuery, GetMakersInTournamentQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<GetMakersInTournamentQuery, GetMakersInTournamentQueryVariables>(GetMakersInTournamentDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<GetMakersInTournamentQuery, GetMakersInTournamentQueryVariables>(GetMakersInTournamentDocument, options);
+}
 export type GetMakersInTournamentQueryHookResult = ReturnType<typeof useGetMakersInTournamentQuery>;
 export type GetMakersInTournamentLazyQueryHookResult = ReturnType<typeof useGetMakersInTournamentLazyQuery>;
 export type GetMakersInTournamentQueryResult = Apollo.QueryResult<GetMakersInTournamentQuery, GetMakersInTournamentQueryVariables>;
@@ -2919,13 +2919,13 @@ export const GetProjectsInTournamentDocument = gql`
  * });
  */
 export function useGetProjectsInTournamentQuery(baseOptions: Apollo.QueryHookOptions<GetProjectsInTournamentQuery, GetProjectsInTournamentQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<GetProjectsInTournamentQuery, GetProjectsInTournamentQueryVariables>(GetProjectsInTournamentDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<GetProjectsInTournamentQuery, GetProjectsInTournamentQueryVariables>(GetProjectsInTournamentDocument, options);
+}
 export function useGetProjectsInTournamentLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetProjectsInTournamentQuery, GetProjectsInTournamentQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<GetProjectsInTournamentQuery, GetProjectsInTournamentQueryVariables>(GetProjectsInTournamentDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<GetProjectsInTournamentQuery, GetProjectsInTournamentQueryVariables>(GetProjectsInTournamentDocument, options);
+}
 export type GetProjectsInTournamentQueryHookResult = ReturnType<typeof useGetProjectsInTournamentQuery>;
 export type GetProjectsInTournamentLazyQueryHookResult = ReturnType<typeof useGetProjectsInTournamentLazyQuery>;
 export type GetProjectsInTournamentQueryResult = Apollo.QueryResult<GetProjectsInTournamentQuery, GetProjectsInTournamentQueryVariables>;
@@ -2959,9 +2959,9 @@ export type UpdateTournamentRegistrationMutationFn = Apollo.MutationFunction<Upd
  * });
  */
 export function useUpdateTournamentRegistrationMutation(baseOptions?: Apollo.MutationHookOptions<UpdateTournamentRegistrationMutation, UpdateTournamentRegistrationMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useMutation<UpdateTournamentRegistrationMutation, UpdateTournamentRegistrationMutationVariables>(UpdateTournamentRegistrationDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<UpdateTournamentRegistrationMutation, UpdateTournamentRegistrationMutationVariables>(UpdateTournamentRegistrationDocument, options);
+}
 export type UpdateTournamentRegistrationMutationHookResult = ReturnType<typeof useUpdateTournamentRegistrationMutation>;
 export type UpdateTournamentRegistrationMutationResult = Apollo.MutationResult<UpdateTournamentRegistrationMutation>;
 export type UpdateTournamentRegistrationMutationOptions = Apollo.BaseMutationOptions<UpdateTournamentRegistrationMutation, UpdateTournamentRegistrationMutationVariables>;
@@ -2994,9 +2994,9 @@ export type RegisterInTournamentMutationFn = Apollo.MutationFunction<RegisterInT
  * });
  */
 export function useRegisterInTournamentMutation(baseOptions?: Apollo.MutationHookOptions<RegisterInTournamentMutation, RegisterInTournamentMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useMutation<RegisterInTournamentMutation, RegisterInTournamentMutationVariables>(RegisterInTournamentDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<RegisterInTournamentMutation, RegisterInTournamentMutationVariables>(RegisterInTournamentDocument, options);
+}
 export type RegisterInTournamentMutationHookResult = ReturnType<typeof useRegisterInTournamentMutation>;
 export type RegisterInTournamentMutationResult = Apollo.MutationResult<RegisterInTournamentMutation>;
 export type RegisterInTournamentMutationOptions = Apollo.BaseMutationOptions<RegisterInTournamentMutation, RegisterInTournamentMutationVariables>;
@@ -3036,13 +3036,13 @@ export const MeTournamentDocument = gql`
  * });
  */
 export function useMeTournamentQuery(baseOptions: Apollo.QueryHookOptions<MeTournamentQuery, MeTournamentQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<MeTournamentQuery, MeTournamentQueryVariables>(MeTournamentDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<MeTournamentQuery, MeTournamentQueryVariables>(MeTournamentDocument, options);
+}
 export function useMeTournamentLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MeTournamentQuery, MeTournamentQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<MeTournamentQuery, MeTournamentQueryVariables>(MeTournamentDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<MeTournamentQuery, MeTournamentQueryVariables>(MeTournamentDocument, options);
+}
 export type MeTournamentQueryHookResult = ReturnType<typeof useMeTournamentQuery>;
 export type MeTournamentLazyQueryHookResult = ReturnType<typeof useMeTournamentLazyQuery>;
 export type MeTournamentQueryResult = Apollo.QueryResult<MeTournamentQuery, MeTournamentQueryVariables>;
@@ -3130,13 +3130,13 @@ export const GetTournamentByIdDocument = gql`
  * });
  */
 export function useGetTournamentByIdQuery(baseOptions: Apollo.QueryHookOptions<GetTournamentByIdQuery, GetTournamentByIdQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<GetTournamentByIdQuery, GetTournamentByIdQueryVariables>(GetTournamentByIdDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useQuery<GetTournamentByIdQuery, GetTournamentByIdQueryVariables>(GetTournamentByIdDocument, options);
+}
 export function useGetTournamentByIdLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetTournamentByIdQuery, GetTournamentByIdQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<GetTournamentByIdQuery, GetTournamentByIdQueryVariables>(GetTournamentByIdDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useLazyQuery<GetTournamentByIdQuery, GetTournamentByIdQueryVariables>(GetTournamentByIdDocument, options);
+}
 export type GetTournamentByIdQueryHookResult = ReturnType<typeof useGetTournamentByIdQuery>;
 export type GetTournamentByIdLazyQueryHookResult = ReturnType<typeof useGetTournamentByIdLazyQuery>;
 export type GetTournamentByIdQueryResult = Apollo.QueryResult<GetTournamentByIdQuery, GetTournamentByIdQueryVariables>;
@@ -3175,9 +3175,9 @@ export type VoteMutationFn = Apollo.MutationFunction<VoteMutation, VoteMutationV
  * });
  */
 export function useVoteMutation(baseOptions?: Apollo.MutationHookOptions<VoteMutation, VoteMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useMutation<VoteMutation, VoteMutationVariables>(VoteDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<VoteMutation, VoteMutationVariables>(VoteDocument, options);
+}
 export type VoteMutationHookResult = ReturnType<typeof useVoteMutation>;
 export type VoteMutationResult = Apollo.MutationResult<VoteMutation>;
 export type VoteMutationOptions = Apollo.BaseMutationOptions<VoteMutation, VoteMutationVariables>;
@@ -3215,9 +3215,9 @@ export type ConfirmVoteMutationFn = Apollo.MutationFunction<ConfirmVoteMutation,
  * });
  */
 export function useConfirmVoteMutation(baseOptions?: Apollo.MutationHookOptions<ConfirmVoteMutation, ConfirmVoteMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useMutation<ConfirmVoteMutation, ConfirmVoteMutationVariables>(ConfirmVoteDocument, options);
-      }
+  const options = { ...defaultOptions, ...baseOptions }
+  return Apollo.useMutation<ConfirmVoteMutation, ConfirmVoteMutationVariables>(ConfirmVoteDocument, options);
+}
 export type ConfirmVoteMutationHookResult = ReturnType<typeof useConfirmVoteMutation>;
 export type ConfirmVoteMutationResult = Apollo.MutationResult<ConfirmVoteMutation>;
 export type ConfirmVoteMutationOptions = Apollo.BaseMutationOptions<ConfirmVoteMutation, ConfirmVoteMutationVariables>;
\ No newline at end of file

From 38641be9ab6519bef2cdb5fa39e187f3ceab1e9f Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Sun, 25 Sep 2022 18:04:14 +0300
Subject: [PATCH 43/53] fix: remove extra field from screenshots input

---
 .../Components/SaveChangesCard/SaveChangesCard.tsx  | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
index 14ced48..e8d9dd5 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
@@ -8,7 +8,7 @@ import { tabs } from '../../ListProjectPage'
 import { NotificationsService } from 'src/services'
 import { useAppDispatch } from 'src/utils/hooks';
 import { openModal } from 'src/redux/features/modals.slice';
-import { useCreateProjectMutation, useUpdateProjectMutation } from 'src/graphql'
+import { useCreateProjectMutation, useUpdateProjectMutation, UpdateProjectInput } from 'src/graphql'
 
 interface Props {
     currentTab: keyof typeof tabs
@@ -38,9 +38,16 @@ export default function SaveChangesCard(props: Props) {
 
     const clickSubmit = handleSubmit<IListProjectForm>(async data => {
         try {
+
+            const input: UpdateProjectInput = {
+                ...data,
+                members: data.members.map(m => ({ id: m.id, role: m.role })),
+                screenshots: data.screenshots.map(s => ({ id: s.id, name: s.name, url: s.url }))
+            }
+
             await (isUpdating ?
-                update({ variables: { input: { ...data, members: data.members.map(m => ({ id: m.id, role: m.role })) } } })
-                : create({ variables: { input: { ...data, members: data.members.map(m => ({ id: m.id, role: m.role })) } } })
+                update({ variables: { input } })
+                : create({ variables: { input } })
             )
         } catch (error) {
             NotificationsService.error("A network error happened...");

From 942bb8f114a686a06f7873f2f22b217632c4506f Mon Sep 17 00:00:00 2001
From: Dolu <doludev@protonmail.com>
Date: Sun, 25 Sep 2022 17:09:01 +0200
Subject: [PATCH 44/53] fix: add verification that current user is a member of
 the project

---
 api/functions/graphql/types/project.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index 42d56be..ef7bf46 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -766,7 +766,12 @@ const updateProject = extendType({
                     },
                 })
 
-                // Maker can't project info
+                // Verifying current user is a member
+                if (!project.members.some((m) => m.userId === user.id)) {
+                    throw new ApolloError("You don't have permission to update this project")
+                }
+
+                // Maker can't change project info
                 if (project.members.find((m) => m.userId === user.id)?.role === ROLE_MAKER) {
                     throw new ApolloError("Makers can't change project info")
                 }

From 1745a386ea44e84a4f1d8828858a9548f6119944 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 26 Sep 2022 17:05:23 +0300
Subject: [PATCH 45/53] update: use prisma client according to env

---
 api/prisma/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/api/prisma/index.js b/api/prisma/index.js
index 5a77a71..a63f077 100644
--- a/api/prisma/index.js
+++ b/api/prisma/index.js
@@ -1,13 +1,11 @@
-const { PrismaClient } = process.env.NODE_ENV === 'development' ? require('@prisma/client') : require('@prisma/client/edge');
+const { PrismaClient } = process.env.PRISMA_GENERATE_DATAPROXY ? require('@prisma/client/edge') : require('@prisma/client');
 const createGlobalModule = require('../utils/createGlobalModule');
 
 
 const createPrismaClient = () => {
     console.log("New Prisma Client");
     try {
-        return new PrismaClient({
-            log: ["info"],
-        });
+        return new PrismaClient();
     } catch (error) {
         console.log(error);
     }

From bda00aabcc5f89cf84d3f129987b906823eefd76 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 26 Sep 2022 17:53:00 +0300
Subject: [PATCH 46/53] update: change save btn text on loading

---
 .../Components/SaveChangesCard/SaveChangesCard.tsx           | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
index e8d9dd5..c3b6256 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/SaveChangesCard/SaveChangesCard.tsx
@@ -49,6 +49,7 @@ export default function SaveChangesCard(props: Props) {
                 update({ variables: { input } })
                 : create({ variables: { input } })
             )
+            reset(data)
         } catch (error) {
             NotificationsService.error("A network error happened...");
             return;
@@ -82,7 +83,7 @@ export default function SaveChangesCard(props: Props) {
                 onClick={clickSubmit}
                 disabled={!isDirty || isLoading}
             >
-                Save Changes
+                {isLoading ? "Saving..." : "Save Changes"}
             </Button>
         else if (props.currentTab === 'project-details')
             return <Button
@@ -107,7 +108,7 @@ export default function SaveChangesCard(props: Props) {
                 onClick={clickSubmit}
                 disabled={!isDirty || isLoading}
             >
-                List your product
+                {isLoading ? "Listing your product..." : "List your product"}
             </Button>
     }, [clickSubmit, isDirty, isLoading, isUpdating, props.currentTab, props.onNext])
 

From bad8ef339323e0216abd962b4f953ab5386be778 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 27 Sep 2022 12:28:20 +0300
Subject: [PATCH 47/53] update: improve the error messages working in listing
 project page

---
 .../FormContainer/FormContainer.tsx           | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
index 2b05766..c3e7776 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -39,13 +39,13 @@ export type ProjectMember = {
 
 const schema: yup.SchemaOf<IListProjectForm> = yup.object({
     id: yup.number().optional(),
-    title: yup.string().trim().required().min(2),
+    title: yup.string().trim().required("please provide a title").min(2),
     hashtag: yup
         .string()
-        .required()
+        .required("please provide a hashtag")
         .matches(
             /^(?:#)([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:(?!))){0,28}(?:[A-Za-z0-9_]))?)((?: #)([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:\.(?!\.))){0,28}(?:[A-Za-z0-9_]))?))*$/,
-            "Invalid format for hashtag"
+            "a hashtag should only contain letters, numbers, & underscores"
         )
         .test({
             name: "is unique hashtag",
@@ -65,11 +65,11 @@ const schema: yup.SchemaOf<IListProjectForm> = yup.object({
                     return false;
                 }
             },
-            message: "This hashtag is already used by another project"
+            message: "this hashtag is already used by another project"
         }),
     website: yup.string().trim().url().required().label("project's link"),
-    tagline: yup.string().trim().required().min(10),
-    description: yup.string().trim().required().min(50, 'Write at least 10 words descriping your project'),
+    tagline: yup.string().trim().required("please provide a tagline").min(10),
+    description: yup.string().trim().required("please provide a description for your project").min(50, 'Write at least 10 words descriping your project'),
     lightning_address: yup
         .string()
         .test({
@@ -86,18 +86,19 @@ const schema: yup.SchemaOf<IListProjectForm> = yup.object({
                 } catch (error) {
                     return false;
                 }
-            }
+            },
+            message: "this lightning address isn't valid"
         })
         .nullable()
         .label("lightning address"),
-    thumbnail_image: imageSchema.required("Please pick a thumbnail image").default(undefined),
-    cover_image: imageSchema.required("Please pick a cover image").default(undefined),
+    thumbnail_image: imageSchema.required("please pick a thumbnail image").default(undefined),
+    cover_image: imageSchema.required("please pick a cover image").default(undefined),
     twitter: yup.string().url().nullable(),
     discord: yup.string().url().nullable(),
     github: yup.string().url().nullable(),
     slack: yup.string().url().nullable(),
     telegram: yup.string().url().nullable(),
-    category_id: yup.number().required("Please choose a category"),
+    category_id: yup.number().required("please choose a category"),
     capabilities: yup.array().of(yup.number().required()).default([]),
     screenshots: yup.array().of(imageSchema.required()).default([]),
     members: yup.array().of(yup.object() as any).default([]),

From d9eb69ff5b5b515fe8653dc892f47150e5cd5ead Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 27 Sep 2022 15:42:30 +0300
Subject: [PATCH 48/53] fix: QA improvements to project modal

---
 .../ProjectDetailsCard/ProjectDetailsCard.tsx |  34 +-
 src/mocks/data/projects.ts                    | 654 +++++++++++++++++-
 2 files changed, 644 insertions(+), 44 deletions(-)

diff --git a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
index e06628a..879360b 100644
--- a/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
+++ b/src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
@@ -8,20 +8,21 @@ import Button from 'src/Components/Button/Button';
 import ProjectCardSkeleton from './ProjectDetailsCard.Skeleton'
 // import VoteButton from 'src/features/Projects/pages/ProjectPage/VoteButton/VoteButton';
 import { NotificationsService, Wallet_Service } from 'src/services'
-import { ProjectPermissionEnum, useProjectDetailsQuery } from 'src/graphql';
+import { ProjectLaunchStatusEnum, ProjectPermissionEnum, useProjectDetailsQuery } from 'src/graphql';
 import Lightbox from 'src/Components/Lightbox/Lightbox'
 import linkifyHtml from 'linkify-html';
 import ErrorMessage from 'src/Components/Errors/ErrorMessage/ErrorMessage';
 import { setVoteAmount } from 'src/redux/features/vote.slice';
 import { numberFormatter } from 'src/utils/helperFunctions';
 import { MEDIA_QUERIES } from 'src/utils/theme';
-import { FaDiscord, FaTimes } from 'react-icons/fa';
-import { FiGithub, FiGlobe, FiTwitter } from 'react-icons/fi';
+import { FaDiscord, } from 'react-icons/fa';
+import { FiEdit2, FiGithub, FiGlobe, FiTwitter } from 'react-icons/fi';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import Badge from 'src/Components/Badge/Badge';
 import Avatar from 'src/features/Profiles/Components/Avatar/Avatar';
 import { Link } from 'react-router-dom';
 import { createRoute } from 'src/utils/routing';
+import { IoMdClose } from 'react-icons/io';
 
 
 interface Props extends ModalCard {
@@ -142,24 +143,27 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
             className={`modal-card max-w-[676px] ${(props.isPageModal && !isMdScreen) && '!rounded-0 w-full min-h-screen'}`}
         >
             {/* Cover Image */}
-            <div className="relative h-[100px] lg:h-[80px]">
+            <div className="relative h-[120px] lg:h-[80px]">
                 <img className="w-full h-full object-cover" src={project.cover_image} alt="" />
-                <button className="w-32 h-32  bg-gray-600 bg-opacity-80 text-white absolute top-24 right-24 rounded-full hover:bg-gray-800 text-center flex flex-col justify-center items-center" onClick={closeModal}><FaTimes className=' inline-block' /></button>
+                <div className="absolute top-16 md:top-24 left-24 flex gap-8 bg-gray-800 bg-opacity-60 text-white rounded-48 py-4 px-12 text-body6 font-medium">
+                    {project.launch_status === ProjectLaunchStatusEnum.Launched && `🚀 Launched`}
+                    {project.launch_status === ProjectLaunchStatusEnum.Wip && `🔧 WIP`}
+                </div>
+                <div className="absolute top-16 md:top-24 right-24 flex gap-8">
+                    {project.permissions.includes(ProjectPermissionEnum.UpdateInfo) &&
+                        <Link className="w-32 h-32  bg-gray-800 bg-opacity-60 text-white rounded-full hover:bg-opacity-40 text-center flex flex-col justify-center items-center" onClick={() => props.onClose?.()} to={createRoute({ type: "edit-project", id: project.id })}><FiEdit2 /></Link>}
+                    <button className="w-32 h-32  bg-gray-800 bg-opacity-60 text-white rounded-full hover:bg-opacity-40 text-center flex flex-col justify-center items-center" onClick={closeModal}><IoMdClose className=' inline-block' /></button>
+                </div>
             </div>
             <div className="p-24 flex flex-col gap-24">
 
-                {project.permissions.includes(ProjectPermissionEnum.UpdateInfo) &&
-                    <div className='flex justify-end'>
-                        <Button color='gray' size='sm' className='ml-auto' onClick={() => props.onClose?.()} href={createRoute({ type: "edit-project", id: project.id })}>Edit Project</Button>
-                    </div>}
-
                 {/* Title & Basic Info */}
-                <div className="flex flex-col mt-[-80px] md:flex-row md:mt-0 gap-24 items-start relative">
+                <div className="flex flex-col mt-[-80px] md:flex-row md:mt-0 gap-24 md:items-center relative">
                     <div className="flex-shrink-0 w-[108px] h-[108px]">
                         <img className="w-full h-full border-2 border-white rounded-24" src={project.thumbnail_image} alt="" />
                     </div>
                     <div className='flex flex-col gap-8 items-start justify-between'>
-                        <h3 className="text-body1 font-bold">{project.title}</h3>
+                        <a href={project.website} target='_blank' rel="noreferrer"><h3 className="text-body1 font-bold">{project.title}</h3></a>
                         <p className="text-body4 text-gray-600">{project.tagline}</p>
                         <div>
                             <span className="font-medium text-body4 text-gray-600">{project.category.icon} {project.category.title}</span>
@@ -184,7 +188,7 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
 
                 {/* About */}
                 <div>
-                    <p className="text-body5 text-gray-400 mb-8">About</p>
+                    <p className="text-body6 uppercase font-medium text-gray-400 mb-8">About</p>
                     <div className=" text-body4 text-gray-600 leading-normal whitespace-pre-line" dangerouslySetInnerHTML={{
                         __html: linkifyHtml(project.description, {
                             className: ' text-blue-500 underline',
@@ -243,7 +247,7 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
 
                 {project.capabilities.length > 0 &&
                     <div>
-                        <p className="text-body5 text-gray-400 mb-8">CAPABILITIES</p>
+                        <p className="text-body6 uppercase font-medium text-gray-400 mb-8">CAPABILITIES</p>
                         <div className="flex flex-wrap gap-8">
                             {project.capabilities.map(cap => <Badge key={cap.id} size='sm'>{cap.icon} {cap.title}</Badge>)}
                         </div>
@@ -251,7 +255,7 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
                 <hr className="" />
                 {project.members.length > 0 &&
                     <div>
-                        <p className="text-body5 text-gray-400 mb-8">MAKERS</p>
+                        <p className="text-body6 uppercase font-medium text-gray-400 mb-8">MAKERS</p>
                         <div className="flex flex-wrap gap-8">
                             {project.members.map(m => <Link key={m.user.id} to={createRoute({ type: "profile", id: m.user.id, username: m.user.name })}>
                                 <Avatar
diff --git a/src/mocks/data/projects.ts b/src/mocks/data/projects.ts
index df71fc1..1394b8e 100644
--- a/src/mocks/data/projects.ts
+++ b/src/mocks/data/projects.ts
@@ -1,4 +1,5 @@
-import { Project, ProjectCategory } from "src/utils/interfaces";
+import { Project, ProjectPermissionEnum } from "src/graphql";
+import { ProjectCategory } from "src/utils/interfaces";
 
 
 export let categories = [
@@ -93,9 +94,29 @@ export let projects = [
         "lightning_address": "hello@getalby.com",
         "votes_count": 335,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 9,
-            "title": "Misc / Other"
+            "title": "Misc / Other",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -109,9 +130,29 @@ export let projects = [
         "lightning_address": "divineorgan67@walletofsatoshi.com",
         "votes_count": 232,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 1,
-            "title": "Finance"
+            "title": "Finance",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -129,9 +170,29 @@ export let projects = [
         "lightning_address": "johns@getalby.com",
         "votes_count": 220,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 1,
-            "title": "Finance"
+            "title": "Finance",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -145,9 +206,29 @@ export let projects = [
         "lightning_address": "moritz@getalby.com",
         "votes_count": 205,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 7,
-            "title": "Media & News"
+            "title": "Media & News",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -161,9 +242,29 @@ export let projects = [
         "lightning_address": "moritz@getalby.com",
         "votes_count": 45,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 7,
-            "title": "Media & News"
+            "title": "Media & News",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -177,9 +278,29 @@ export let projects = [
         "lightning_address": "moritz@getalby.com",
         "votes_count": 25,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 8,
-            "title": "Shopping"
+            "title": "Shopping",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -193,9 +314,29 @@ export let projects = [
         "lightning_address": "johns@getalby.com",
         "votes_count": 11,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 3,
-            "title": "Art & Collectibles"
+            "title": "Art & Collectibles",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -209,9 +350,29 @@ export let projects = [
         "lightning_address": "moritz@getalby.com",
         "votes_count": 10,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 4,
-            "title": "Gaming"
+            "title": "Gaming",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -225,9 +386,29 @@ export let projects = [
         "lightning_address": "moritz@getalby.com",
         "votes_count": 10,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 9,
             "title": "Misc / Other",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
 
         }
     },
@@ -242,9 +423,29 @@ export let projects = [
         "lightning_address": "moritz@getalby.com",
         "votes_count": 10,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 8,
-            "title": "Shopping"
+            "title": "Shopping",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -258,9 +459,29 @@ export let projects = [
         "lightning_address": "moritz@getalby.com",
         "votes_count": 5,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 4,
-            "title": "Gaming"
+            "title": "Gaming",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -278,9 +499,29 @@ export let projects = [
         "lightning_address": "subirachs@getalby.com",
         "votes_count": 0,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 11,
-            "title": "Shock the Web ⚡️"
+            "title": "Shock the Web ⚡️",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -296,9 +537,29 @@ export let projects = [
         "lightning_address": "kiwiidb@getalby.com",
         "votes_count": 0,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 11,
-            "title": "Shock the Web ⚡️"
+            "title": "Shock the Web ⚡️",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -315,9 +576,29 @@ export let projects = [
         "lightning_address": "tobitcoin@getalby.com",
         "votes_count": 0,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 11,
-            "title": "Shock the Web ⚡️"
+            "title": "Shock the Web ⚡️",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -341,9 +622,29 @@ export let projects = [
         "lightning_address": "atlantabitdevs@getalby.com",
         "votes_count": 0,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 11,
-            "title": "Shock the Web ⚡️"
+            "title": "Shock the Web ⚡️",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -359,9 +660,29 @@ export let projects = [
         "lightning_address": "reneaaron@getalby.com",
         "votes_count": 0,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 11,
-            "title": "Shock the Web ⚡️"
+            "title": "Shock the Web ⚡️",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -382,9 +703,29 @@ export let projects = [
         "lightning_address": "alivesession77@walletofsatoshi.com",
         "votes_count": 0,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 11,
-            "title": "Shock the Web ⚡️"
+            "title": "Shock the Web ⚡️",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -398,9 +739,44 @@ export let projects = [
         "lightning_address": "johns@getalby.com",
         "votes_count": 0,
         tags: [],
+        awards: [],
+        capabilities: [{
+            id: 1,
+            title: "Lnurl",
+            icon: "🎛️",
+        },
+        {
+            id: 2,
+            title: "Ln-Auth",
+            icon: "🔑",
+        },
+        {
+            id: 3,
+            title: "Ln-Pay",
+            icon: "💳",
+        },
+        ],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 1,
-            "title": "Finance"
+            "title": "Finance",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -420,9 +796,29 @@ export let projects = [
         "lightning_address": "divineorgan67@walletofsatoshi.com",
         "votes_count": 0,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 11,
-            "title": "Shock the Web ⚡️"
+            "title": "Shock the Web ⚡️",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -436,9 +832,29 @@ export let projects = [
         "lightning_address": "moritz@getalby.com",
         "votes_count": 0,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 1,
-            "title": "Finance"
+            "title": "Finance",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -452,9 +868,29 @@ export let projects = [
         "lightning_address": "moritz@getalby.com",
         "votes_count": 0,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 9,
-            "title": "Misc / Other"
+            "title": "Misc / Other",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -468,9 +904,29 @@ export let projects = [
         "lightning_address": "moritz@getalby.com",
         "votes_count": 0,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 3,
-            "title": "Art & Collectibles"
+            "title": "Art & Collectibles",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -484,9 +940,29 @@ export let projects = [
         "lightning_address": "moritz@getalby.com",
         "votes_count": 0,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 7,
-            "title": "Media & News"
+            "title": "Media & News",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -500,9 +976,29 @@ export let projects = [
         "lightning_address": "moritz@geralby.com",
         "votes_count": 0,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 7,
-            "title": "Media & News"
+            "title": "Media & News",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -516,9 +1012,29 @@ export let projects = [
         "lightning_address": "moritz@getalby.com",
         "votes_count": 0,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 6,
-            "title": "Analytics"
+            "title": "Analytics",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -532,9 +1048,29 @@ export let projects = [
         "lightning_address": "moritz@getalby.com",
         "votes_count": 0,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 2,
-            "title": "Social"
+            "title": "Social",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -548,9 +1084,29 @@ export let projects = [
         "lightning_address": "moritz@getalby.com",
         "votes_count": 0,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 8,
-            "title": "Shopping"
+            "title": "Shopping",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -564,9 +1120,29 @@ export let projects = [
         "lightning_address": "moritz@getalby.com",
         "votes_count": 0,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 4,
-            "title": "Gaming"
+            "title": "Gaming",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     },
     {
@@ -580,9 +1156,29 @@ export let projects = [
         "lightning_address": "moritz@getalby.com",
         "votes_count": 0,
         tags: [],
+        awards: [],
+        capabilities: [],
+        discord: "https://discord.com",
+        github: null,
+        hashtag: "#hashtag",
+        launch_status: "Launched",
+        members: [],
+        permissions: Object.values(ProjectPermissionEnum),
+        recruit_roles: [],
+        slack: null,
+        telegram: null,
+        twitter: null,
+        tournaments: [],
+        tagline: "My project tagline",
+        lnurl_callback_url: "",
         "category": {
             "id": 4,
-            "title": "Gaming"
+            "title": "Gaming",
+            icon: "🎁",
+            apps_count: 0,
+            cover_image: "null",
+            project: [],
+            votes_sum: 100,
         }
     }
 ] as Project[]

From 71ca526fbe958d127ece89bda7e60d523f71e364 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 27 Sep 2022 16:16:27 +0300
Subject: [PATCH 49/53] update: improve UX of project tag, decrease font size
 of member role

---
 .../Components/FormContainer/FormContainer.tsx  |  8 +++++---
 .../ProjectDetailsTab/ProjectDetailsTab.tsx     | 17 +++++++++++++----
 .../Components/TeamMembersInput/MemberRow.tsx   |  1 +
 .../Components/TeamTab/TeamTab.tsx              |  2 +-
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
index c3e7776..3c1f62c 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -42,11 +42,13 @@ const schema: yup.SchemaOf<IListProjectForm> = yup.object({
     title: yup.string().trim().required("please provide a title").min(2),
     hashtag: yup
         .string()
-        .required("please provide a hashtag")
+        .required("please provide a project tag")
+        .matches(/^#/, "a hashtag has to start with '#'")
         .matches(
-            /^(?:#)([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:(?!))){0,28}(?:[A-Za-z0-9_]))?)((?: #)([A-Za-z0-9_](?:(?:[A-Za-z0-9_]|(?:\.(?!\.))){0,28}(?:[A-Za-z0-9_]))?))*$/,
-            "a hashtag should only contain letters, numbers, & underscores"
+            /^#[^ !@#$%^&*(),.?":{}|<>]*$/,
+            "your project's tag can only contain letters, numbers and '_’"
         )
+        .max(35, 'Your project tag must be shorter than 35 characters.')
         .test({
             name: "is unique hashtag",
             test: async (value, context) => {
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
index 5b01022..669e46c 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
@@ -9,6 +9,7 @@ import AvatarInput from "src/Components/Inputs/FilesInputs/AvatarInput/AvatarInp
 import CoverImageInput from "src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput";
 import ScreenshotsInput from "src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput";
 import { BsLightningChargeFill } from "react-icons/bs";
+import InfoCard from "src/Components/InfoCard/InfoCard";
 
 interface Props { }
 
@@ -116,7 +117,7 @@ export default function ProjectDetailsTab(props: Props) {
                         {errors.description.message}
                     </p>}
                     <p className="text-body5 font-medium mt-16">
-                        Hashtag<sup className="text-red-500">*</sup>
+                        Project tag<sup className="text-red-500">*</sup>
                     </p>
                     <div className="input-wrapper mt-8 relative">
                         <input
@@ -126,12 +127,20 @@ export default function ProjectDetailsTab(props: Props) {
                             {...register("hashtag")}
                         />
                     </div>
-                    {(isUpdating && dirtyFields.hashtag) && <p className="text-body5 text-orange-500 mt-8">
-                        <span className="font-bolder text-orange-400">Warning:</span> changing the hashtag of the project will break all the old links for the project.
-                    </p>}
                     {errors.hashtag && <p className="input-error">
                         {errors.hashtag.message}
                     </p>}
+                    {(isUpdating && dirtyFields.hashtag) &&
+                        <InfoCard className="mt-8 bg-warning-50 border-warning-100">
+                            <span className="font-medium text-orange-600">⚠️ Warning:</span> when you change the tag of your project, existing links that use this tag will no longer work & will need to be updateded.
+                        </InfoCard>}
+                    {!isUpdating &&
+                        <InfoCard className="mt-8">
+                            <span className="font-medium text-gray-900">ℹ️ Project tag</span>  allows you to mention your project in stories, or across other platforms like Discord. <br />
+                            You can change your project’s tag later, but links that use the old tag will no longer work & need to be updated.
+                        </InfoCard>
+                    }
+
                 </div>
             </Card>
             <Card className="">
diff --git a/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx
index b606cc9..00cca48 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx
@@ -40,6 +40,7 @@ export default function MemberRow({ user, onRemove, onUpdateRole, disabled, canU
                     menuButton={<MenuButton className='border border-gray-200 p-8 rounded-8 text-gray-500'>{user.role} <FaChevronDown className='ml-4 text-gray-400' /></MenuButton>} transition>
                     {[Team_Member_Role.Admin, Team_Member_Role.Maker].map(role =>
                         <MenuItem
+                            className={'text-body5'}
                             onClick={() => onUpdateRole(role)}
                             key={role}>{role}</MenuItem>
                     )}
diff --git a/src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.tsx
index d11470c..aaba86f 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/TeamTab/TeamTab.tsx
@@ -35,7 +35,7 @@ export default function TeamTab() {
                 </div>
                 <div className="bg-gray-50 p-16 rounded-12 border border-gray-200 mt-24">
                     <p className="text-body5">
-                        <span className="font-bold">💡 Onboard your team:</span> Make sure you onboard any other team members so they can help you manage this project.
+                        <span className="font-bold">ℹ️ Onboard your team:</span> Make sure you onboard any other team members so they can help you manage this project and its development progress. To add them, they will first need to create a maker profile.
                     </p>
                 </div>
             </Card>

From 500de25bd407221f6735585f89651d2ec87b6312 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 27 Sep 2022 22:21:21 +0300
Subject: [PATCH 50/53] feat: make the # a prefix of the input, remove
 breakline from info box, make validation triggeres on touch

---
 .../Components/FormContainer/FormContainer.tsx   | 16 +++++++++-------
 .../ProjectDetailsTab/ProjectDetailsTab.tsx      |  8 ++++----
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
index 3c1f62c..cceed97 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/FormContainer/FormContainer.tsx
@@ -43,12 +43,13 @@ const schema: yup.SchemaOf<IListProjectForm> = yup.object({
     hashtag: yup
         .string()
         .required("please provide a project tag")
-        .matches(/^#/, "a hashtag has to start with '#'")
+        .transform(v => v ? '#' + v : undefined)
         .matches(
             /^#[^ !@#$%^&*(),.?":{}|<>]*$/,
             "your project's tag can only contain letters, numbers and '_’"
         )
-        .max(35, 'Your project tag must be shorter than 35 characters.')
+        .min(3, "your project tag must be longer than 2 characters.")
+        .max(35, 'your project tag must be shorter than 35 characters.')
         .test({
             name: "is unique hashtag",
             test: async (value, context) => {
@@ -113,8 +114,9 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
 
     const [params] = useSearchParams();
 
-    const id = Number(params.get('id'));
-    const isUpdating = !Number.isNaN(id);
+    const id = params.get('id') ? Number(params.get('id')) : null;
+
+    const isUpdating = !!id;
     const navigate = useNavigate()
 
 
@@ -136,12 +138,12 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
             tournaments: [],
         },
         resolver: yupResolver(schema) as Resolver<IListProjectForm>,
+        mode: 'onTouched'
     });
 
-
     const query = useProjectDetailsQuery({
         variables: {
-            projectId: id
+            projectId: id!
         },
         skip: !isUpdating,
         onCompleted: (res) => {
@@ -158,7 +160,7 @@ export default function FormContainer(props: PropsWithChildren<Props>) {
                         tagline: data.tagline,
                         website: data.website,
                         description: data.description,
-                        hashtag: data.hashtag,
+                        hashtag: data.hashtag.slice(1),
                         twitter: data.twitter,
                         discord: data.discord,
                         slack: data.slack,
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
index 669e46c..d04305a 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
@@ -120,10 +120,11 @@ export default function ProjectDetailsTab(props: Props) {
                         Project tag<sup className="text-red-500">*</sup>
                     </p>
                     <div className="input-wrapper mt-8 relative">
+                        <span className="flex flex-col justify-center pl-16 shrink-0">#</span>
                         <input
                             type='text'
-                            className="input-text"
-                            placeholder='#my_awesome_app'
+                            className="input-text pl-8"
+                            placeholder='my_project_name'
                             {...register("hashtag")}
                         />
                     </div>
@@ -136,8 +137,7 @@ export default function ProjectDetailsTab(props: Props) {
                         </InfoCard>}
                     {!isUpdating &&
                         <InfoCard className="mt-8">
-                            <span className="font-medium text-gray-900">ℹ️ Project tag</span>  allows you to mention your project in stories, or across other platforms like Discord. <br />
-                            You can change your project’s tag later, but links that use the old tag will no longer work & need to be updated.
+                            <span className="font-medium text-gray-900">ℹ️ Project tag</span>  allows you to mention your project in stories, or across other platforms like Discord. You can change your project’s tag later, but links that use the old tag will no longer work & need to be updated.
                         </InfoCard>
                     }
 

From 24b50e50e33a73abeeb05d3f303b1461e33e0c94 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Wed, 28 Sep 2022 20:29:16 +0300
Subject: [PATCH 51/53] feat: create new TextInput & TextareaInput components,
 create error state for inputs

---
 src/Components/Inputs/TextInput/TextInput.tsx |  32 +++
 .../Inputs/TextareaInput/TextareaInput.tsx    |  27 +++
 .../ProjectDetailsTab/ProjectDetailsTab.tsx   | 182 ++++++++----------
 3 files changed, 140 insertions(+), 101 deletions(-)
 create mode 100644 src/Components/Inputs/TextInput/TextInput.tsx
 create mode 100644 src/Components/Inputs/TextareaInput/TextareaInput.tsx

diff --git a/src/Components/Inputs/TextInput/TextInput.tsx b/src/Components/Inputs/TextInput/TextInput.tsx
new file mode 100644
index 0000000..56eca6f
--- /dev/null
+++ b/src/Components/Inputs/TextInput/TextInput.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+type Props = {
+    isError?: boolean;
+    className?: string;
+    inputClass?: string;
+    renderBefore?: () => JSX.Element
+    renderAfter?: () => JSX.Element
+} & React.ComponentPropsWithoutRef<'input'>
+
+export default React.forwardRef<HTMLInputElement, Props>(function TextInput({ className, inputClass, isError, renderBefore, renderAfter, ...props }, ref) {
+
+    return (
+        <div className={`
+        relative w-full border bg-white rounded-12 flex 
+        focus-within:ring focus-within:ring-opacity-50
+        ${isError ?
+                "border-red-300 focus-within:border-red-300 focus-within:outline-red-400 focus-within:ring-red-200"
+                :
+                "border-gray-300 focus-within:border-primary-300 focus-within:outline-primary-400 focus-within:ring-primary-200"}
+        ${className}`}>
+            {renderBefore?.()}
+            <input
+                type='text'
+                className={`input-text ${inputClass}`}
+                ref={ref}
+                {...props}
+            />
+            {renderAfter?.()}
+        </div>
+    )
+})
diff --git a/src/Components/Inputs/TextareaInput/TextareaInput.tsx b/src/Components/Inputs/TextareaInput/TextareaInput.tsx
new file mode 100644
index 0000000..09eb276
--- /dev/null
+++ b/src/Components/Inputs/TextareaInput/TextareaInput.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+type Props = {
+    isError?: boolean;
+    className?: string;
+    inputClass?: string
+} & React.ComponentPropsWithoutRef<'textarea'>
+
+export default React.forwardRef<HTMLTextAreaElement, Props>(function TextareaInput({ className, inputClass, isError, ...props }, ref) {
+
+    return (
+        <div className={`
+        relative w-full border bg-white rounded-12 flex 
+        focus-within:ring focus-within:ring-opacity-50
+        ${isError ?
+                "border-red-300 focus-within:border-red-300 focus-within:outline-red-400 focus-within:ring-red-200"
+                :
+                "border-gray-300 focus-within:border-primary-300 focus-within:outline-primary-400 focus-within:ring-primary-200"}
+        ${className}`}>
+            <textarea
+                className={`input-text ${inputClass}`}
+                ref={ref}
+                {...props}
+            />
+        </div>
+    )
+})
diff --git a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
index d04305a..9fcdb01 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/ProjectDetailsTab/ProjectDetailsTab.tsx
@@ -10,6 +10,8 @@ import CoverImageInput from "src/Components/Inputs/FilesInputs/CoverImageInput/C
 import ScreenshotsInput from "src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput";
 import { BsLightningChargeFill } from "react-icons/bs";
 import InfoCard from "src/Components/InfoCard/InfoCard";
+import TextInput from "src/Components/Inputs/TextInput/TextInput";
+import TextareaInput from "src/Components/Inputs/TextareaInput/TextareaInput";
 
 interface Props { }
 
@@ -19,6 +21,7 @@ export default function ProjectDetailsTab(props: Props) {
 
     const isUpdating = !!getValues('id');
 
+
     return (
         <div className="md:col-span-2 flex flex-col gap-24">
             <Card className="" defaultPadding={false}>
@@ -59,75 +62,63 @@ export default function ProjectDetailsTab(props: Props) {
                     <p className="text-body5 font-medium">
                         Project name<sup className="text-red-500">*</sup>
                     </p>
-                    <div className="input-wrapper mt-8 relative">
-                        <input
-                            autoFocus
-                            type='text'
-                            className="input-text"
-                            placeholder='e.g BOLT🔩FUN'
-                            {...register("title")}
-                        />
-                    </div>
+                    <TextInput
+                        className="mt-8"
+                        isError={!!errors.title}
+                        placeholder='e.g BOLT🔩FUN'
+                        {...register("title")}
+                    />
                     {errors.title && <p className="input-error">
                         {errors.title.message}
                     </p>}
                     <p className="text-body5 mt-16 font-medium">
                         Project link<sup className="text-red-500">*</sup>
                     </p>
-                    <div className="input-wrapper mt-8 relative">
-                        <input
-
-                            type='text'
-                            className="input-text"
-                            placeholder='https://lightning.xyz'
-                            {...register("website")}
-                        />
-                    </div>
+                    <TextInput
+                        className="mt-8"
+                        isError={!!errors.website}
+                        placeholder='https://lightning.xyz'
+                        {...register("website")}
+                    />
                     {errors.website && <p className="input-error">
                         {errors.website.message}
                     </p>}
                     <p className="text-body5 mt-16 font-medium">
                         Tagline<sup className="text-red-500">*</sup>
                     </p>
-                    <div className="input-wrapper mt-8 relative">
-                        <input
-                            maxLength={32}
-                            type='text'
-                            className="input-text"
-                            placeholder='Your product’s one liner'
-                            {...register("tagline")}
-                        />
-                        <span className="h-full shrink-0 px-12 text-gray-400 text-body6 font-medium self-center">{getValues('tagline').length} / 32</span>
-                    </div>
+                    <TextInput
+                        className="mt-8"
+                        isError={!!errors.tagline}
+                        placeholder='Your product’s one liner'
+                        {...register("tagline")}
+                    />
                     {errors.tagline && <p className="input-error">
                         {errors.tagline.message}
                     </p>}
                     <p className="text-body5 mt-16 font-medium">
                         Description<sup className="text-red-500">*</sup>
                     </p>
-                    <div className="input-wrapper mt-8 relative">
-                        <textarea
-                            rows={5}
-                            className="input-text !px-16 !py-12"
-                            placeholder='Provide a short description your product...'
-                            {...register("description")}
-                        />
-                    </div>
+                    <TextareaInput
+                        className="mt-8"
+                        isError={!!errors.description}
+                        rows={5}
+                        placeholder='Provide a short description your product...'
+                        {...register("description")}
+                    />
                     {errors.description && <p className="input-error">
                         {errors.description.message}
                     </p>}
                     <p className="text-body5 font-medium mt-16">
                         Project tag<sup className="text-red-500">*</sup>
                     </p>
-                    <div className="input-wrapper mt-8 relative">
-                        <span className="flex flex-col justify-center pl-16 shrink-0">#</span>
-                        <input
-                            type='text'
-                            className="input-text pl-8"
-                            placeholder='my_project_name'
-                            {...register("hashtag")}
-                        />
-                    </div>
+                    <TextInput
+                        className="mt-8"
+                        isError={!!errors.hashtag}
+                        placeholder='my_project_name'
+                        inputClass="pl-8"
+                        renderBefore={() => <span className="flex flex-col justify-center pl-16 shrink-0">#</span>}
+                        {...register("hashtag")}
+                    />
                     {errors.hashtag && <p className="input-error">
                         {errors.hashtag.message}
                     </p>}
@@ -149,93 +140,82 @@ export default function ProjectDetailsTab(props: Props) {
                 <div className="flex flex-col gap-8 mt-24">
 
                     <div>
-                        <div className="input-wrapper mt-8 relative">
-                            <FiTwitter className="text-blue-400 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />
-                            <input
-                                type='text'
-                                className="input-text"
-                                placeholder='https://twitter.com/'
-                                {...register("twitter")}
-                            />
-                        </div>
+                        <TextInput
+                            className="mt-8"
+                            isError={!!errors.twitter}
+                            renderBefore={() => <FiTwitter className="text-blue-400 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />}
+                            placeholder='https://twitter.com/project_handle'
+                            {...register("twitter")}
+                        />
                         {errors.twitter && <p className="input-error">
                             {errors.twitter.message}
                         </p>}
                     </div>
 
                     <div>
-                        <div className="input-wrapper mt-8 relative">
-                            <FaDiscord className="text-violet-500 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />
-                            <input
-                                type='text'
-                                className="input-text"
-                                placeholder='https://discord.com/'
-                                {...register("discord")}
-                            />
-                        </div>
+                        <TextInput
+                            className="mt-8"
+                            isError={!!errors.discord}
+                            renderBefore={() => <FaDiscord className="text-violet-500 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />}
+                            placeholder='https://discord.com/'
+                            {...register("discord")}
+                        />
                         {errors.discord && <p className="input-error">
                             {errors.discord.message}
                         </p>}
                     </div>
 
                     <div>
-                        <div className="input-wrapper mt-8 relative">
-                            <FiGithub className="text-gray-700 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />
-                            <input
-                                type='text'
-                                className="input-text"
-                                placeholder='https://github.com/'
-                                {...register("github")}
-                            />
-                        </div>
+                        <TextInput
+                            className="mt-8"
+                            isError={!!errors.github}
+                            renderBefore={() => <FiGithub className="text-gray-700 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />}
+                            placeholder='https://github.com/'
+                            {...register("github")}
+                        />
                         {errors.github && <p className="input-error">
                             {errors.github.message}
                         </p>}
                     </div>
                     <div>
-                        <div className="input-wrapper mt-8 relative">
-                            <FaSlack className="text-pink-500 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />
-                            <input
-                                type='text'
-                                className="input-text"
-                                placeholder='https://slack.com/'
-                                {...register("slack")}
-                            />
-                        </div>
+                        <TextInput
+                            className="mt-8"
+                            isError={!!errors.slack}
+                            renderBefore={() => <FaSlack className="text-pink-500 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />}
+                            placeholder='https://slack.com/'
+                            {...register("slack")}
+                        />
                         {errors.slack && <p className="input-error">
                             {errors.slack.message}
                         </p>}
                     </div>
                     <div>
-                        <div className="input-wrapper mt-8 relative">
-                            <FaTelegram className="text-teal-500 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />
-                            <input
-                                type='text'
-                                className="input-text"
-                                placeholder='https://t.me/XXXXXX'
-                                {...register("telegram")}
-                            />
-                        </div>
+                        <TextInput
+                            className="mt-8"
+                            isError={!!errors.telegram}
+                            renderBefore={() => <FaTelegram className="text-teal-500 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />}
+                            placeholder='https://t.me/XXXXXX'
+                            {...register("telegram")}
+                        />
                         {errors.telegram && <p className="input-error">
                             {errors.telegram.message}
                         </p>}
                     </div>
                     <div>
-                        <div className="input-wrapper mt-8 relative">
-                            <BsLightningChargeFill className="text-yellow-400 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />
-                            <input
-                                type='text'
-                                className="input-text"
-                                placeholder='lightning_address@XXX.com'
-                                {...register("lightning_address")}
-                            />
-                        </div>
+
+                        <TextInput
+                            className="mt-8"
+                            isError={!!errors.lightning_address}
+                            renderBefore={() => <BsLightningChargeFill className="text-yellow-400 text-body2 pl-16 py-0 w-auto shrink-0 self-center" />}
+                            placeholder='lightning_address@XXX.com'
+                            {...register("lightning_address")}
+                        />
                         {errors.lightning_address && <p className="input-error">
                             {errors.lightning_address.message}
                         </p>}
                     </div>
                 </div>
-            </Card>
+            </Card >
 
             <Card>
                 <h2 className="text-body2 font-bolder">🌶️ Category<sup className="text-red-500">*</sup></h2>
@@ -292,6 +272,6 @@ export default function ProjectDetailsTab(props: Props) {
                     {errors.capabilities && <p className='input-error'>{errors.capabilities?.message}</p>}
                 </div>
             </Card>
-        </div>
+        </div >
     )
 }

From cdcb1bfb555f60576b60c3e6a515928ecc1ef5b1 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Wed, 28 Sep 2022 20:34:53 +0300
Subject: [PATCH 52/53] update: reduce size of role drop-down

---
 .../ListProjectPage/Components/TeamMembersInput/MemberRow.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx
index 00cca48..21f2644 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx
@@ -37,10 +37,10 @@ export default function MemberRow({ user, onRemove, onUpdateRole, disabled, canU
                 {canUpdateRole ? <Menu
                     offsetY={12}
                     align='end'
-                    menuButton={<MenuButton className='border border-gray-200 p-8 rounded-8 text-gray-500'>{user.role} <FaChevronDown className='ml-4 text-gray-400' /></MenuButton>} transition>
+                    menuButton={<MenuButton className='border text-body6 border-gray-200 p-8 rounded-8 text-gray-500'>{user.role} <FaChevronDown className='ml-4 text-gray-400' /></MenuButton>} transition>
                     {[Team_Member_Role.Admin, Team_Member_Role.Maker].map(role =>
                         <MenuItem
-                            className={'text-body5'}
+                            className={'text-body6'}
                             onClick={() => onUpdateRole(role)}
                             key={role}>{role}</MenuItem>
                     )}

From 784f512558ea356e46d0175b48d5d52199d28799 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Wed, 28 Sep 2022 22:08:20 +0300
Subject: [PATCH 53/53] update: member role font size

---
 .../ListProjectPage/Components/TeamMembersInput/MemberRow.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx
index 21f2644..2a64cd7 100644
--- a/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx
+++ b/src/features/Projects/pages/ListProjectPage/Components/TeamMembersInput/MemberRow.tsx
@@ -37,10 +37,10 @@ export default function MemberRow({ user, onRemove, onUpdateRole, disabled, canU
                 {canUpdateRole ? <Menu
                     offsetY={12}
                     align='end'
-                    menuButton={<MenuButton className='border text-body6 border-gray-200 p-8 rounded-8 text-gray-500'>{user.role} <FaChevronDown className='ml-4 text-gray-400' /></MenuButton>} transition>
+                    menuButton={<MenuButton className='border text-body5 border-gray-200 p-8 rounded-8 text-gray-500'>{user.role} <FaChevronDown className='ml-4 text-gray-400' /></MenuButton>} transition>
                     {[Team_Member_Role.Admin, Team_Member_Role.Maker].map(role =>
                         <MenuItem
-                            className={'text-body6'}
+                            className={'text-body5'}
                             onClick={() => onUpdateRole(role)}
                             key={role}>{role}</MenuItem>
                     )}