From 2734e8abe49b70e7f04da8c3947aef4d50b6a98e Mon Sep 17 00:00:00 2001 From: loks0n <22452787+loks0n@users.noreply.github.com> Date: Thu, 15 Jun 2023 11:23:49 +0100 Subject: [PATCH 1/4] feat: project 404 page --- src/routes/projects/[projectId]/index.tsx | 136 +++++++++++++--------- 1 file changed, 79 insertions(+), 57 deletions(-) diff --git a/src/routes/projects/[projectId]/index.tsx b/src/routes/projects/[projectId]/index.tsx index 0edce5c..1140864 100644 --- a/src/routes/projects/[projectId]/index.tsx +++ b/src/routes/projects/[projectId]/index.tsx @@ -7,38 +7,70 @@ import ProjectTags from "~/components/layout/ProjectTags"; import Upvote from "~/components/blocks/Upvote"; import Socials from "~/components/blocks/Socials"; -export const useProjectData = routeLoader$(async ({ params }) => { - return { - project: await AppwriteService.getProject(params.projectId), - }; +export const useProjectData = routeLoader$(async ({ params, status }) => { + try { + return { + project: await AppwriteService.getProject(params.projectId), + }; + } catch { + status(404); + return { project: null }; + } }); export const head: DocumentHead = ({ resolveValue }) => { - const projectData = resolveValue(useProjectData); + const { project } = resolveValue(useProjectData); + + if (!project) + return { + title: "Project not found | Built with Appwrite", + }; return { - title: `${projectData.project.name} | Built with Appwrite`, + title: `${project.name} | Built with Appwrite`, meta: [ { name: "description", - content: projectData.project.tagline, + content: project.tagline, }, { name: "og:title", - content: `${projectData.project.name} | Built with Appwrite`, + content: `${project.name} | Built with Appwrite`, }, { name: "og:description", - content: projectData.project.tagline, + content: project.tagline, }, ], }; }; export default component$(() => { - const projectData = useProjectData(); + const { project } = useProjectData().value; - const html = marked(projectData.value.project.description, { + if (!project) { + return ( + <> + + + ); + } + + const html = marked(project.description, { mangle: false, headerIds: false, }); @@ -48,7 +80,7 @@ export default component$(() => { localStorage.getItem("visitedProjects") ?? "[]" ) as string[]; - visitedProjects.unshift(projectData.value.project.$id); + visitedProjects.unshift(project.$id); const visitedProjectsUnique = [...new Set(visitedProjects)]; @@ -68,30 +100,24 @@ export default component$(() => {
-

{projectData.value.project.name}

- +

{project.name}

+
-

- {projectData.value.project.tagline} -

+

{project.tagline}

- {(projectData.value.project.urlGooglePlay || - projectData.value.project.urlAppStore || - projectData.value.project.urlMacOs || - projectData.value.project.urlWindows || - projectData.value.project.urlLinux) && ( + {(project.urlGooglePlay || + project.urlAppStore || + project.urlMacOs || + project.urlWindows || + project.urlLinux) && (

Download the Application

- {projectData.value.project.urlGooglePlay && ( + {project.urlGooglePlay && ( @@ -100,9 +126,9 @@ export default component$(() => { )} - {projectData.value.project.urlWindows && ( + {project.urlWindows && ( @@ -111,9 +137,9 @@ export default component$(() => { )} - {projectData.value.project.urlLinux && ( + {project.urlLinux && ( @@ -122,9 +148,9 @@ export default component$(() => { )} - {projectData.value.project.urlAppStore && ( + {project.urlAppStore && ( @@ -133,9 +159,9 @@ export default component$(() => { )} - {projectData.value.project.urlMacOs && ( + {project.urlMacOs && ( @@ -147,17 +173,17 @@ export default component$(() => {
)} - {(projectData.value.project.urlWebsite || - projectData.value.project.urlGitHub || - projectData.value.project.urlTwitter || - projectData.value.project.urlArticle) && ( + {(project.urlWebsite || + project.urlGitHub || + project.urlTwitter || + project.urlArticle) && (

Stay in Touch

- {projectData.value.project.urlWebsite && ( + {project.urlWebsite && ( @@ -166,9 +192,9 @@ export default component$(() => { )} - {projectData.value.project.urlGitHub && ( + {project.urlGitHub && ( @@ -176,9 +202,9 @@ export default component$(() => {

View on GitHub

 )} - {projectData.value.project.urlTwitter && ( + {project.urlTwitter && ( @@ -187,9 +213,9 @@ export default component$(() => { )} - {projectData.value.project.urlArticle && ( + {project.urlArticle && ( @@ -204,7 +230,7 @@ export default component$(() => {

Tags

- +
@@ -214,20 +240,16 @@ export default component$(() => { >

Share

- +
From 67348660604b92e770ca85ee95ff5047784020e6 Mon Sep 17 00:00:00 2001 From: loks0n <22452787+loks0n@users.noreply.github.com> Date: Thu, 15 Jun 2023 11:37:24 +0100 Subject: [PATCH 2/4] feat: app 404 --- src/routes/404.tsx | 21 +++++++++++++++++ src/routes/projects/[projectId]/index.tsx | 28 +++++++++++------------ 2 files changed, 34 insertions(+), 15 deletions(-) create mode 100644 src/routes/404.tsx diff --git a/src/routes/404.tsx b/src/routes/404.tsx new file mode 100644 index 0000000..b62cec6 --- /dev/null +++ b/src/routes/404.tsx @@ -0,0 +1,21 @@ +import { component$ } from "@builder.io/qwik"; +import { Link } from "@builder.io/qwik-city"; + +export default component$(() => { + return ( + + ); +}); diff --git a/src/routes/projects/[projectId]/index.tsx b/src/routes/projects/[projectId]/index.tsx index 1140864..2d516db 100644 --- a/src/routes/projects/[projectId]/index.tsx +++ b/src/routes/projects/[projectId]/index.tsx @@ -50,23 +50,21 @@ export default component$(() => { if (!project) { return ( - <> - ); } From b8a93dd23270ea11aab48304ce2be1165bf236ad Mon Sep 17 00:00:00 2001 From: loks0n <22452787+loks0n@users.noreply.github.com> Date: Thu, 15 Jun 2023 11:43:22 +0100 Subject: [PATCH 3/4] fix: revert AppwriteService --- src/AppwriteService.ts | 36 +++++++++++++----------------------- 1 file changed, 13 insertions(+), 23 deletions(-) diff --git a/src/AppwriteService.ts b/src/AppwriteService.ts index 53fa9eb..d39a8b5 100644 --- a/src/AppwriteService.ts +++ b/src/AppwriteService.ts @@ -73,7 +73,6 @@ export const AppwriteService = { } }, countProjects: async (queries: string[]) => { - console.log("Counting projects..."); const hasIsPublished = queries.find((query) => query.startsWith('equal("isPublished') ); @@ -90,17 +89,14 @@ export const AppwriteService = { if (!hasCreatedAtSort) { queries.push(Query.orderDesc("$createdAt")); } - try { - const response = await databases.listDocuments( - "main", - "projects", - queries - ); - return response.total; - } catch (error) { - console.error(`Error counting projects: ${error}`); - } + const response = await databases.listDocuments( + "main", + "projects", + queries + ); + + return response.total; }, getProject: async (projectId: string) => { const project = await databases.getDocument( @@ -111,7 +107,6 @@ export const AppwriteService = { return project; }, listProjects: async (queries: string[]) => { - console.log("Listing projects..."); const hasIsPublished = queries.find((query) => query.startsWith('equal("isPublished') ); @@ -129,18 +124,13 @@ export const AppwriteService = { queries.push(Query.orderDesc("$createdAt")); } - try { - const { documents: projects } = await databases.listDocuments( - "main", - "projects", - queries - ); + const { documents: projects } = await databases.listDocuments( + "main", + "projects", + queries + ); - return projects; - } catch (error) { - console.error("Listing projects failed: " + error); - return []; - } + return projects; }, searchProjects: async (searchQuery: string) => { const { documents: projects } = await databases.listDocuments( From e3373ab0739847498a79d3bd06e123171a506d14 Mon Sep 17 00:00:00 2001 From: loks0n <22452787+loks0n@users.noreply.github.com> Date: Thu, 15 Jun 2023 12:03:59 +0100 Subject: [PATCH 4/4] feat: handle many error codes --- src/routes/404.tsx | 6 ++-- src/routes/projects/[projectId]/index.tsx | 38 +++++++++++++++++------ 2 files changed, 31 insertions(+), 13 deletions(-) diff --git a/src/routes/404.tsx b/src/routes/404.tsx index b62cec6..4b38aa9 100644 --- a/src/routes/404.tsx +++ b/src/routes/404.tsx @@ -7,12 +7,12 @@ export default component$(() => {
- Back to Home + Back to Projects
-

Not Found

+

404

- This page does not exist. + Page not found.

diff --git a/src/routes/projects/[projectId]/index.tsx b/src/routes/projects/[projectId]/index.tsx index 2d516db..564b5bb 100644 --- a/src/routes/projects/[projectId]/index.tsx +++ b/src/routes/projects/[projectId]/index.tsx @@ -6,25 +6,44 @@ import { marked } from "marked"; import ProjectTags from "~/components/layout/ProjectTags"; import Upvote from "~/components/blocks/Upvote"; import Socials from "~/components/blocks/Socials"; +import { AppwriteException } from "appwrite"; export const useProjectData = routeLoader$(async ({ params, status }) => { try { return { project: await AppwriteService.getProject(params.projectId), + error: null, }; - } catch { - status(404); - return { project: null }; + } catch (error) { + if (error instanceof AppwriteException) { + status(error.code); + return { project: null, error }; + } } + + return { + project: null, + error: { + code: 500, + message: "Internal Server Error", + }, + }; }); export const head: DocumentHead = ({ resolveValue }) => { - const { project } = resolveValue(useProjectData); + const { project, error } = resolveValue(useProjectData); - if (!project) + if (error?.code === 500) { + return { + title: "Something went wrong | Built with Appwrite", + }; + } + + if (!project) { return { title: "Project not found | Built with Appwrite", }; + } return { title: `${project.name} | Built with Appwrite`, @@ -46,9 +65,9 @@ export const head: DocumentHead = ({ resolveValue }) => { }; export default component$(() => { - const { project } = useProjectData().value; + const { project, error } = useProjectData().value; - if (!project) { + if (error) { return (
    @@ -56,11 +75,10 @@ export default component$(() => { Back to Projects -
    -

    Not Found

    +

    {error.code}

    - This project does not exist. + {error.message}