feat: update functions structure, re-enable project details info section

.gitignore

@@ -1,6 +1,7 @@
 .netlify
 .env
 build
+environments
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies

functions/graphql/nexus-typegen.ts

@@ -40,12 +40,6 @@ export interface NexusGenObjects {
     id: number; // Int!
     title: string; // String!
   }
-  HottestProjectsPage: { // root type
-    apps_count: number; // Int!
-    cover_image: string; // String!
-    project: NexusGenRootTypes['Project'][]; // [Project!]!
-    title: string; // String!
-  }
   LnurlDetails: { // root type
     commentAllowed?: number | null; // Int
     maxSendable?: number | null; // Int
@@ -106,12 +100,6 @@ export interface NexusGenFieldTypes {
     title: string; // String!
     votes_sum: number; // Int!
   }
-  HottestProjectsPage: { // field return type
-    apps_count: number; // Int!
-    cover_image: string; // String!
-    project: NexusGenRootTypes['Project'][]; // [Project!]!
-    title: string; // String!
-  }
   LnurlDetails: { // field return type
     commentAllowed: number | null; // Int
     maxSendable: number | null; // Int
@@ -143,7 +131,7 @@ export interface NexusGenFieldTypes {
     getCategory: NexusGenRootTypes['Category']; // Category!
     getLnurlDetailsForProject: NexusGenRootTypes['LnurlDetails']; // LnurlDetails!
     getProject: NexusGenRootTypes['Project']; // Project!
-    hottestProjects: NexusGenRootTypes['HottestProjectsPage']; // HottestProjectsPage!
+    hottestProjects: NexusGenRootTypes['Project'][]; // [Project!]!
     newProjects: NexusGenRootTypes['Project'][]; // [Project!]!
     projectsByCategory: NexusGenRootTypes['Project'][]; // [Project!]!
     searchProjects: NexusGenRootTypes['Project'][]; // [Project!]!
@@ -180,12 +168,6 @@ export interface NexusGenFieldTypeNames {
     title: 'String'
     votes_sum: 'Int'
   }
-  HottestProjectsPage: { // field return type name
-    apps_count: 'Int'
-    cover_image: 'String'
-    project: 'Project'
-    title: 'String'
-  }
   LnurlDetails: { // field return type name
     commentAllowed: 'Int'
     maxSendable: 'Int'
@@ -217,7 +199,7 @@ export interface NexusGenFieldTypeNames {
     getCategory: 'Category'
     getLnurlDetailsForProject: 'LnurlDetails'
     getProject: 'Project'
-    hottestProjects: 'HottestProjectsPage'
+    hottestProjects: 'Project'
     newProjects: 'Project'
     projectsByCategory: 'Project'
     searchProjects: 'Project'

functions/graphql/schema.graphql

@@ -20,13 +20,6 @@ type Category {
   votes_sum: Int!
 }
 
-type HottestProjectsPage {
-  apps_count: Int!
-  cover_image: String!
-  project: [Project!]!
-  title: String!
-}
-
 type LnurlDetails {
   commentAllowed: Int
   maxSendable: Int
@@ -61,7 +54,7 @@ type Query {
   getCategory(id: Int!): Category!
   getLnurlDetailsForProject(project_id: Int!): LnurlDetails!
   getProject(id: Int!): Project!
-  hottestProjects(skip: Int = 0, take: Int = 50): HottestProjectsPage!
+  hottestProjects(skip: Int = 0, take: Int = 50): [Project!]!
   newProjects(skip: Int = 0, take: Int = 50): [Project!]!
   projectsByCategory(category_id: Int!, skip: Int = 0, take: Int = 10): [Project!]!
   searchProjects(search: String!, skip: Int = 0, take: Int = 50): [Project!]!

functions/graphql/schema/index.js

@@ -1,6 +1,6 @@
 const { makeSchema } = require('nexus');
 const { join } = require('path');
-const types = require('../services')
+const types = require('../types')
 
 
 const schema = makeSchema({

functions/graphql/types/project.js

@@ -132,36 +132,19 @@ const newProjects = extendType({
     }
 })
 
-const HottestProjectsPage = objectType({
-    name: "HottestProjectsPage",
-    definition(t) {
-        t.nonNull.string('title');
-        t.nonNull.string('cover_image');
-        t.nonNull.int('apps_count');
-        t.nonNull.list.nonNull.field("project", {
-            type: "Project",
-        })
-    }
-})
 
 const hottestProjects = extendType({
     type: "Query",
     definition(t) {
-        t.nonNull.field('hottestProjects', {
-            type: "HottestProjectsPage",
+        t.nonNull.list.nonNull.field('hottestProjects', {
+            type: "Project",
             args: paginationArgs({ take: 50 }),
             async resolve(_, { take, skip }) {
-                const projects = await prisma.project.findMany({
+                return prisma.project.findMany({
                     orderBy: { votes_count: "desc" },
                     skip,
                     take,
                 });
-                return {
-                    title: "Hottest",
-                    apps_count: projects.length,
-                    cover_image: "https://via.placeholder.com/1280x729.png?text=Hottest+Cover+Image",
-                    project: projects
-                }
             }
         })
     }
@@ -271,7 +254,6 @@ const getLnurlDetailsForProject = extendType({
 module.exports = {
     // Types
     Project,
-    HottestProjectsPage,
     Award,
     Tag,
     // Queries

package.json

@@ -19,6 +19,7 @@
     "apollo-server": "^3.5.0",
     "apollo-server-lambda": "^3.5.0",
     "axios": "^0.24.0",
+    "env-cmd": "^10.1.0",
     "framer-motion": "^5.3.0",
     "graphql": "^16.0.1",
     "invoices": "^2.0.2",
@@ -44,17 +45,23 @@
     "webln": "^0.2.2"
   },
   "scripts": {
-    "start": "craco start",
+    "client:prod-server": "env-cmd -f ./environments/.dev.prod-server.env craco start",
+    "client:mocks": "env-cmd -f ./environments/.dev.mock-server.env craco start",
+    "client:dev-server": "env-cmd -f ./environments/.dev.server.env craco start",
+    "server:dev": "serverless offline",
     "build": "craco build",
-    "build-dev": "REACT_APP_ENABLE_MOCKS=true craco build",
+    "build:mocks": "env-cmd -f ./environments/.prod.mock-server.env craco build", 
     "test": "craco test",
     "eject": "react-scripts eject",
-    "predeploy": "set REACT_APP_FOR_GITHUB=true&& npm run build",
+
+    "predeploy": "env-cmd -f ./environments/.prod.github.env npm run build",
     "deploy": "gh-pages -d build",
     "only-deploy": "gh-pages -d build",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
-    "db:init": "prisma migrate dev",
+    "storybook": "env-cmd -f ./environments/.dev.mock-server.env start-storybook -p 6006 -s public",
+    "build-storybook": "env-cmd -f ./environments/.prod.mock-server.env build-storybook -s public",
+
+    "db:migrate-dev": "prisma migrate dev",
+    "db:migrate-deploy": "prisma migrate deploy",
     "db:reset": "prisma migrate reset",
     "db:seed": "prisma db seed",
     "db:gui": "prisma studio",
@@ -111,6 +118,7 @@
     "msw": "^0.39.1",
     "netlify-cli": "^8.15.0",
     "postcss": "^7.0.39",
+    "serverless-offline": "^8.5.0",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
   },
   "msw": {

serverless.yml

@@ -0,0 +1,23 @@
+custom:
+  serverless-offline:
+    httpPort: 8888
+
+plugins:
+  - serverless-offline
+service: serverless-graphql
+provider:
+  name: aws
+  runtime: nodejs12.x
+  region: ap-southeast-2
+functions:
+  graphql:
+    handler: functions/graphql/index.handler
+    events:
+      - http:
+          path: graphql
+          method: post
+          cors: true
+      - http:
+          path: graphql
+          method: get
+          cors: true

src/pages/CategoryPage/HeaderImage/HeaderImage.tsx

@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom'
 type Props = {
     isLoading: boolean
     title: string
-    apps_count: number
+    apps_count?: number
     img: string
 }
 
@@ -37,9 +37,9 @@ export default function HeaderImage(props: Props) {
             <h1
                 className='text-white text-[24px] md:text-[40px]  '
             >{title}</h1>
-            <p
+            {typeof apps_count === 'number' && <p
                 className='text-white text-body4'
-            >{apps_count} apps</p>
+            >{apps_count} apps</p>}
         </div>
     )
 }

src/pages/ExplorePage/ProjectsSection/ProjectsSection.tsx

@@ -18,7 +18,7 @@ export default function ProjectsSection() {
 
     return (
         <div className='mt-32 lg:mt-48'>
-            <ProjectsRow title={<><span className="align-middle mr-8">Newest</span> <MdLocalFireDepartment className='inline-block text-fire align-bottom scale-125 origin-bottom' /></>}
+            <ProjectsRow title={<><span className="align-middle mr-8">Newest</span> <MdLocalFireDepartment className='inline-block text-fire scale-125 ' /></>}
                 categoryId={0}
                 projects={data.newProjects} />
             {data.allCategories.map(({ id, title, project, }) => {

src/pages/HottestPage/HottestPage.tsx

@@ -1,5 +1,6 @@
 import { useQuery } from '@apollo/client';
-import { useParams, Navigate } from 'react-router-dom'
+import ASSETS from 'src/assets';
+
 import ErrorMessage from 'src/Components/ErrorMessage/ErrorMessage';
 import HeaderImage from 'src/pages/CategoryPage/HeaderImage/HeaderImage';
 import ProjectsGrid from 'src/pages/CategoryPage/ProjectsGrid/ProjectsGrid';
@@ -25,14 +26,13 @@ export default function HottestPage() {
         <div className='px-32'>
             <HeaderImage
                 isLoading={loading}
-                title={data?.hottestProjects.title!}
-                img={data?.hottestProjects.cover_image!}
-                apps_count={data?.hottestProjects.apps_count!}
+                title={"Hottest Projects"}
+                img={ASSETS.Image_Hottest_Header}
             />
             <div className="mt-40">
                 <ProjectsGrid
                     isLoading={loading}
-                    projects={data?.hottestProjects?.project!}
+                    projects={data?.hottestProjects!}
                 />
             </div>
         </div>

src/pages/HottestPage/query.ts

@@ -1,16 +1,10 @@
 import { gql } from "@apollo/client";
-import { ProjectCard, ProjectCategory } from "src/utils/interfaces";
+import { ProjectCard } from "src/utils/interfaces";
 
 export const HOTTEST_PROJECTS_QUERY = gql`
 query HOTTEST_PROJECTS {
 
   hottestProjects {
-    
-    title 
-    cover_image
-    apps_count
-
-    project{
       id
       thumbnail_image
       title
@@ -19,8 +13,6 @@ query HOTTEST_PROJECTS {
           title
           id
       }
-    }
-
   }
 }
 `
@@ -29,10 +21,5 @@ export type HOTTEST_PROJECTS_QUERY_VARS = {
 
 export type HOTTEST_PROJECTS_QUERY_RES_TYPE = {
 
-  hottestProjects: {
-    title: ProjectCategory['title']
-    cover_image: ProjectCategory['cover_image']
-    apps_count: ProjectCategory['apps_count'],
-    project: ProjectCard[]
-  }
+  hottestProjects: ProjectCard[]
 }

src/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.Skeleton.tsx

@@ -51,29 +51,24 @@ export default function ProjectDetailsCardSkeleton({ onClose, direction, ...prop
                 </div>
                 <p className="mt-40 text-body4 leading-normal h-[120px]">
 
-                    {/* <Skeleton width='98%' />
+                    <Skeleton width='98%' />
                     <Skeleton width='90%' />
                     <Skeleton width='70%' />
-                    <Skeleton width='40%' /> */}
+                    <Skeleton width='40%' />
                 </p>
 
-                {/* <div className="mt-40">
+                <div className="mt-40">
                     <h3 className="text-h5 font-bold mb-16">Screenshots</h3>
                     <div className="grid grid-cols-2 gap-12 justify-items-center md:gap-24">
+
                         <div className="w-full relative pt-[56%]">
-                            <div className="absolute top-0 left-0 w-full h-full object-cover bg-gray-300 rounded-xl"></div>
+                            <div className="absolute top-0 left-0 w-full h-full object-cover bg-gray-200 rounded-xl"></div>
                         </div>
                         <div className="w-full relative pt-[56%]">
-                            <div className="absolute top-0 left-0 w-full h-full object-cover bg-gray-300 rounded-xl"></div>
-                        </div>
-                        <div className="w-full relative pt-[56%]">
-                            <div className="absolute top-0 left-0 w-full h-full object-cover bg-gray-300 rounded-xl"></div>
-                        </div>
-                        <div className="w-full relative pt-[56%]">
-                            <div className="absolute top-0 left-0 w-full h-full object-cover bg-gray-300 rounded-xl"></div>
+                            <div className="absolute top-0 left-0 w-full h-full object-cover bg-gray-200 rounded-xl"></div>
                         </div>
                     </div>
-                </div> */}
+                </div>
 
             </div>
         </motion.div>

src/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx

@@ -113,14 +113,14 @@ export default function ProjectDetailsCard({ onClose, direction, projectId, ...p
                         <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>
                     }
                 </div>
-                <div className="mt-40">
+                {project.screenshots.length > 0 && <div className="mt-40">
                     <h3 className="text-h5 font-bold mb-16">Screenshots</h3>
                     <div className="grid grid-cols-2 gap-12 justify-items-center md:gap-24">
                         {project.screenshots.map((screenshot, idx) => <div key={idx} className="w-full relative pt-[56%]">
                             <img src={screenshot} className="absolute top-0 left-0 w-full h-full object-cover bg-gray-300 rounded-xl" alt='' />
                         </div>)}
                     </div>
-                </div>
+                </div>}
                 <hr className="my-40" />
                 <div className="text-center">
                     <h3 className="text-body4 font-regular">Are you the creator of this project?</h3>

src/utils/Wrapper.tsx

@@ -1,5 +1,4 @@
 import { store } from '../redux/store';
-import { QueryClient, QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom'
 
@@ -18,11 +17,17 @@ import { useCallback, useLayoutEffect } from 'react';
 import { setIsMobileScreen } from 'src/redux/features/ui.slice';
 import { isMobileScreen } from './helperFunctions';
 
+let apiClientUri = '/.netlify/functions/graphql';
+
+if (process.env.REACT_APP_API_END_POINT)
+    apiClientUri = process.env.REACT_APP_API_END_POINT
+
+
 const client = new ApolloClient({
-    uri: 'http://localhost:8888/.netlify/functions/graphql',
+    uri: apiClientUri,
     cache: new InMemoryCache()
 });
-const queryClient = new QueryClient()
+
 
 let basename = '/';
 
@@ -52,13 +57,11 @@ export default function Wrapper(props: any) {
 
     return (
         <ApolloProvider client={client}>
-            <QueryClientProvider client={queryClient}>
-                <Provider store={store}>
-                    <BrowserRouter basename={basename}>
-                        {props.children}
-                    </BrowserRouter>
-                </Provider>
-            </QueryClientProvider>
+            <Provider store={store}>
+                <BrowserRouter basename={basename}>
+                    {props.children}
+                </BrowserRouter>
+            </Provider>
         </ApolloProvider>
     )
 }