Fetch tasks from API

.graphqlrc.yml

@@ -1,2 +1,2 @@
-schema: './apps/api/schema.gql'
-documents: './apps/web/**/*.gql'
+schema: './apps/api/schema.graphql'
+documents: './apps/web/**/*.graphql'

apps/api/index.ts

@@ -7,7 +7,7 @@ import { schemaAsString } from './src/graphql';
 
 const main = async () => {
 	try {
-		await writeFile('./schema.gql', schemaAsString);
+		await writeFile('./schema.graphql', schemaAsString);
 		server.listen({ port: env.PORT });
 
 		logger.success(`🚀 Server ready at http://localhost:${env.PORT}`);

apps/api/schema.gql → apps/api/schema.graphql

@@ -1,6 +1,8 @@
-"""Auth0 user info"""
+"""
+Auth0 user info
+"""
 type AuthInfo {
-  sub: String
+	sub: String
 }
 
 """
@@ -9,8 +11,8 @@ A date string, such as 2007-12-03, compliant with the `full-date` format outline
 scalar Date
 
 input DateRangeInput {
-  gte: Date
-  lte: Date
+	gte: Date
+	lte: Date
 }
 
 """
@@ -19,55 +21,57 @@ A date-time string at UTC, such as 2007-12-03T10:15:30Z, compliant with the `dat
 scalar DateTime
 
 input NumberRangeInput {
-  gte: Int
-  lte: Int
+	gte: Int
+	lte: Int
 }
 
 input PaginationInput {
-  page: Int = 1
-  perPage: Int = 10
+	page: Int = 1
+	perPage: Int = 10
 }
 
 type Query {
-  """Auth0 context info"""
-  authInfo: AuthInfo
-  tasks(filter: TaskFilterInput, pagination: PaginationInput): [Task!]!
+	"""
+	Auth0 context info
+	"""
+	authInfo: AuthInfo
+	tasks(filter: TaskFilterInput, pagination: PaginationInput): [Task!]!
 }
 
 scalar SearchString
 
 type Task {
-  author: User!
-  description: String!
-  difficulty: String!
-  id: ID!
-  rating: Int!
-  status: String!
-  thumbnailUrl: String!
-  title: String!
+	author: User!
+	description: String!
+	difficulty: String!
+	id: ID!
+	rating: Int!
+	status: String!
+	thumbnailUrl: String!
+	title: String!
 }
 
 enum TaskDifficulty {
-  ADVANCED
-  BEGINNER
-  INTERMEDIATE
+	ADVANCED
+	BEGINNER
+	INTERMEDIATE
 }
 
 input TaskFilterInput {
-  created_at: DateRangeInput
-  description: SearchString
-  difficulty: TaskDifficulty
-  status: TaskStatus = ACTIVE
-  title: SearchString
-  updated_at: DateRangeInput
+	created_at: DateRangeInput
+	description: SearchString
+	difficulty: TaskDifficulty
+	status: TaskStatus = ACTIVE
+	title: SearchString
+	updated_at: DateRangeInput
 }
 
 enum TaskStatus {
-  ACTIVE
-  IN_REVIEW
-  REJECTED
+	ACTIVE
+	IN_REVIEW
+	REJECTED
 }
 
 type User {
-  id: ID!
-}
+	id: ID!
+}

apps/web/components/molecules/challengeItem/challengeItem.tsx

@@ -1,18 +1,28 @@
-import { Card, Heading, Text, CategoryTag } from 'ui';
+import { Card, Heading, Text } from 'ui';
 import { ChartBarIcon } from '@heroicons/react/20/solid';
 import Image from 'next/image';
-import type { Challenge } from '../../../types/types';
 import clsx from 'clsx';
+import type { Task } from 'generated';
 
-type TaskItemProps = Challenge;
+type TaskItemProps = Task;
 
+const translateToPolish = (difficulty: string) => {
+	switch (difficulty) {
+		case 'ADVANCED':
+			return 'Zaawansowany';
+		case 'BEGINNER':
+			return 'Początkujący';
+		case 'INTERMEDIATE':
+			return 'Mid';
+	}
+};
 export const ChallengeItem = ({
 	id,
 	title,
-	image,
+	thumbnailUrl: image,
 	description,
 	difficulty,
-	tags,
+	// tags,
 	rating,
 }: TaskItemProps) => {
 	return (
@@ -23,9 +33,9 @@ export const ChallengeItem = ({
 						<Image
 							src={image}
 							alt=""
-							width="120"
-							height="120"
-							className="w-full h-full rounded-lg"
+							width="1000"
+							height="1000"
+							className="w-full h-full rounded-lg md:w-1/3"
 						/>
 						<div className="lg:px-5">
 							<Heading tag="h2" size="large" className="font-bold	">
@@ -39,7 +49,7 @@ export const ChallengeItem = ({
 					<div className="flex items-center">
 						<ChartBarIcon className="h-5 w-5 mr-1" />
 						<Text size="medium" variant="default" tag="p" position="left">
-							{difficulty}
+							{translateToPolish(difficulty)}
 						</Text>
 						<div className="flex items-center">
 							{Array.from({ length: 5 }, (_, i) => {
@@ -54,7 +64,6 @@ export const ChallengeItem = ({
 										xmlns="http://www.w3.org/2000/svg"
 										key={i}
 									>
-										{/*<title>First star</title>*/}
 										<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
 									</svg>
 								);
@@ -66,9 +75,9 @@ export const ChallengeItem = ({
 						</Text>
 					</div>
 					<ul className="flex flex-wrap">
-						{tags.map((tag) => {
-							return <CategoryTag key={tag} label={tag} />;
-						})}
+						{/*{tags.map((tag) => {*/}
+						{/*	return <CategoryTag key={tag} label={tag} />;*/}
+						{/*})}*/}
 					</ul>
 				</Card>
 			</a>

apps/web/components/molecules/filters/filters.tsx

@@ -1,5 +1,5 @@
 import { Disclosure } from '@headlessui/react';
-import { Text, Checkbox, Heading } from 'ui';
+import { Checkbox, Heading, Text } from 'ui';
 import { MinusIcon, PlusIcon } from '@heroicons/react/20/solid';
 import type { Filter } from '../../../types/types';
 
@@ -35,7 +35,7 @@ export const Filters = ({ filters }: FiltersProps) => {
 								<div className="space-y-6">
 									{section.options.map((option) => (
 										<div key={option.value} className="flex items-center">
-											<Checkbox label={option.label} />
+											<Checkbox label={option.label} checked={option.checked} />
 										</div>
 									))}
 								</div>

apps/web/components/organisms/challengesList/challengesList.tsx

@@ -1,9 +1,10 @@
 import { ChallengeItem } from 'molecules/challengeItem/challengeItem';
-import type { Challenge } from '../../../types/types';
+import type { GetTaskWithPaginationQueryHookResult } from 'generated';
 
 type TasksListProps = {
-	challenges: Challenge[];
+	challenges: GetTaskWithPaginationQueryHookResult['data']['tasks'][];
 };
+
 export const ChallengesList = ({ challenges }: TasksListProps) => {
 	return (
 		<div className="flex flex-col justify-between lg:col-span-3">
@@ -12,10 +13,6 @@ export const ChallengesList = ({ challenges }: TasksListProps) => {
 					return <ChallengeItem key={challenge.id} {...challenge} />;
 				})}
 			</ul>
-
-			{/*<div className="h-96 rounded-lg border-4 border-dashed border-gray-200 lg:h-full">*/}
-			{/*	Zadania*/}
-			{/*</div>*/}
 		</div>
 	);
 };

apps/web/components/templates/challenges/all/allChallenges.tsx

@@ -1,13 +1,13 @@
-import { Heading, VisuallyHidden } from 'ui';
+import { Heading, Spinner, VisuallyHidden } from 'ui';
 import { ChallengesList } from 'organisms/challengesList/challengesList';
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
-import type { Challenge, Filter, SortOption } from '../../../../types/types';
-import { useState } from 'react';
+import type { Filter, SortOption } from '../../../../types/types';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { FunnelIcon } from '@heroicons/react/20/solid';
 import { Filters } from 'molecules/filters/filters';
 import { SortMenu } from 'organisms/sortMenu/sortMenu';
+import { useGetTaskWithPaginationQuery } from 'generated';
 
 const sortOptions: SortOption[] = [
 	{ name: 'Difficulty', value: 'difficulty', href: '#', current: true },
@@ -17,45 +17,26 @@ const sortOptions: SortOption[] = [
 const filters: Filter[] = [
 	{
 		id: 'difficulty',
-		name: 'Difficulty',
+		name: 'Poziom trudności',
 		options: [
-			{ value: 'easy', label: 'Easy', checked: false },
-			{ value: 'medium', label: 'Medium', checked: true },
-			{ value: 'hard', label: 'Hard', checked: false },
+			{ value: 'INTERMEDIATE', label: 'Mid', checked: false },
+			{ value: 'BEGINNER', label: 'Początkujący', checked: false },
+			{ value: 'ADVANCED', label: 'Zaawansowany', checked: false },
 		],
 	},
 	{ id: 'category', name: 'Category', options: [] },
 ];
 
-export const challenges: Challenge[] = [
-	{
-		id: '1',
-		title: 'First Challenge',
-		description:
-			'This is example of challenge. In hac habitasse platea dictumst. Praesent eu auctor velit. Cras mattis gravida odio euismod placerat. Morbi vestibulum dapibus diam, a lacinia felis porttitor vel. Ut sodales tincidunt orci, vel condimentum nibh. Fusce in elit euismod, laoreet felis vel, rutrum lacus.',
-		designs: '',
-		difficulty: 'medium',
-		image:
-			'https://images.unsplash.com/photo-1498008122250-bcb854c8462d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80',
-		rating: 5,
-		tags: ['TypeScript'],
-	},
-	{
-		id: '2',
-		title: 'Second Challenge',
-		description:
-			'This is example of challenge. In hac habitasse platea dictumst. Praesent eu auctor velit. Cras mattis gravida odio euismod placerat. Morbi vestibulum dapibus diam, a lacinia felis porttitor vel. Ut sodales tincidunt orci, vel condimentum nibh. Fusce in elit euismod, laoreet felis vel, rutrum lacus.',
-
-		designs: '',
-		difficulty: 'advanced',
-		image:
-			'https://cdn.pixabay.com/photo/2020/11/28/06/15/cold-5783718_1280.jpg',
-		rating: 3.26,
-		tags: ['JavaScript', 'React'],
-	},
-];
 export const AllChallengesPage = () => {
 	const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const [page, setPage] = useState(1);
+
+	const { data, loading } = useGetTaskWithPaginationQuery({
+		variables: { page },
+	});
+
+	const challenges = data?.tasks || [];
 
 	return (
 		<>
@@ -100,7 +81,6 @@ export const AllChallengesPage = () => {
 									</button>
 								</div>
 
-								{/* Filters */}
 								<form className="mt-4 border-t border-gray-200">
 									<VisuallyHidden>Filtry</VisuallyHidden>
 									<Filters filters={filters} />
@@ -136,12 +116,11 @@ export const AllChallengesPage = () => {
 					<VisuallyHidden>Zadania</VisuallyHidden>
 
 					<div className="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-4">
-						{/* Filters */}
 						<form className="hidden lg:block">
 							<VisuallyHidden>Filters</VisuallyHidden>
 							<Filters filters={filters} />
 						</form>
-						<ChallengesList challenges={challenges} />
+						{loading ? <Spinner /> : <ChallengesList challenges={challenges} />}
 					</div>
 				</section>
 			</main>

apps/web/components/templates/challenges/all/getAllTasks.graphql

@@ -0,0 +1,21 @@
+query GetAllActiveTasks {
+	tasks(filter: { status: ACTIVE }) {
+		id
+		title
+		description
+		difficulty
+		thumbnailUrl
+		rating
+	}
+}
+
+query GetTaskWithPagination($page: Int) {
+	tasks(filter: { status: ACTIVE }, pagination: { page: $page, perPage: 3 }) {
+		id
+		title
+		description
+		difficulty
+		thumbnailUrl
+		rating
+	}
+}

apps/web/next.config.js

@@ -3,6 +3,7 @@ const nextConfig = {
 	images: {
 		domains: [
 			'avatars.githubusercontent.com',
+			'loremflickr.com',
 			'images.unsplash.com',
 			'cdn.pixabay.com',
 		],