From 0ea312fecc201f2fc7eba649d36c3b9264f710de Mon Sep 17 00:00:00 2001 From: loks0n <22452787+loks0n@users.noreply.github.com> Date: Wed, 7 Jun 2023 11:30:20 +0100 Subject: [PATCH 1/2] feat: use QwikCity Link component over nav --- src/components/layout/Group.tsx | 10 +-- src/components/layout/Header.tsx | 30 +++---- src/components/layout/Project.tsx | 42 ++++------ src/components/layout/ProjectFeatured.tsx | 15 ++-- src/components/layout/ProjectList.tsx | 19 ++--- src/components/layout/ProjectTags.tsx | 99 ++++++++++------------- src/components/layout/Service.tsx | 10 +-- src/components/layout/Tag.tsx | 10 +-- src/routes/projects/[projectId]/index.tsx | 11 +-- src/routes/search/index.tsx | 13 +-- 10 files changed, 100 insertions(+), 159 deletions(-) diff --git a/src/components/layout/Group.tsx b/src/components/layout/Group.tsx index 8564cc7..e92e546 100644 --- a/src/components/layout/Group.tsx +++ b/src/components/layout/Group.tsx @@ -1,20 +1,16 @@ import { Slot, component$ } from "@builder.io/qwik"; -import { useNavigate } from "@builder.io/qwik-city"; +import { Link } from "@builder.io/qwik-city"; export default component$((props: { title: string; href?: string }) => { - const nav = useNavigate(); return (

{props.title}

{props.href && ( - + )}
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index ea95255..899cd51 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -1,7 +1,7 @@ import type { Signal } from "@builder.io/qwik"; import { useContext } from "@builder.io/qwik"; import { $, component$, useSignal } from "@builder.io/qwik"; -import { useNavigate } from "@builder.io/qwik-city"; +import { Link } from "@builder.io/qwik-city"; import type { Models } from "appwrite"; import { AppwriteService } from "~/AppwriteService"; import { SearchModalContext, ThemeContext } from "~/routes/layout"; @@ -9,8 +9,6 @@ import Cookies from "js-cookie"; export default component$( (props: { account: Signal> }) => { - const nav = useNavigate(); - const searchModal = useContext(SearchModalContext); const links = [ @@ -52,8 +50,8 @@ export default component$( )} - + -
await nav(`/projects/${project.$id}`)} - > + -
+
{ - const nav = useNavigate(); const { project } = props; return (
- +
- + { - const nav = useNavigate(); - return (
{props.projects.slice(0, 3).map((project) => ( @@ -26,26 +24,21 @@ export default component$(

- +
)} {props.projects.length >= 1 && props.href && ( - + )}
); diff --git a/src/components/layout/ProjectTags.tsx b/src/components/layout/ProjectTags.tsx index f8b80f8..cf678e3 100644 --- a/src/components/layout/ProjectTags.tsx +++ b/src/components/layout/ProjectTags.tsx @@ -1,11 +1,9 @@ import { component$ } from "@builder.io/qwik"; -import { useNavigate } from "@builder.io/qwik-city"; +import { Link } from "@builder.io/qwik-city"; import type { Project } from "~/AppwriteService"; import { Config } from "~/Config"; export default component$((props: { project: Project }) => { - const nav = useNavigate(); - const services = { databases: { used: props.project.hasDatabases, @@ -39,78 +37,65 @@ export default component$((props: { project: Project }) => { return ( <> {platform && ( - + {platform.iconClass && ( + + )} + {platform.name && {platform.name}} + )} - + + {(Config.useCases as any)[props.project.useCase].name} + + {props.project.framework && ( - + + {(Config.frameworks as any)[props.project.framework].name} + + )} {props.project.uiLibrary && ( - + + {(Config.uiLibraries as any)[props.project.uiLibrary].name} + + )} {Object.keys(services) .filter((service) => (services as any)[service].used) .map((service) => ( - + + {(services as any)[service].name} + ))} ); diff --git a/src/components/layout/Service.tsx b/src/components/layout/Service.tsx index 05b0c98..866ae97 100644 --- a/src/components/layout/Service.tsx +++ b/src/components/layout/Service.tsx @@ -1,14 +1,12 @@ import { Slot, component$ } from "@builder.io/qwik"; -import { useNavigate } from "@builder.io/qwik-city"; +import { Link } from "@builder.io/qwik-city"; export default component$((props: { id: string; name: string }) => { - const nav = useNavigate(); - return ( - + ); }); diff --git a/src/components/layout/Tag.tsx b/src/components/layout/Tag.tsx index eb08f43..020d1c6 100644 --- a/src/components/layout/Tag.tsx +++ b/src/components/layout/Tag.tsx @@ -1,14 +1,10 @@ import { component$ } from "@builder.io/qwik"; -import { useNavigate } from "@builder.io/qwik-city"; +import { Link } from "@builder.io/qwik-city"; export default component$( (props: { id: string; name: string; description: string; total: number }) => { - const nav = useNavigate(); return ( -
await nav(`/search?useCase=${props.id}`)} - > +
- + ); } ); diff --git a/src/routes/projects/[projectId]/index.tsx b/src/routes/projects/[projectId]/index.tsx index f9b480d..0edce5c 100644 --- a/src/routes/projects/[projectId]/index.tsx +++ b/src/routes/projects/[projectId]/index.tsx @@ -1,7 +1,7 @@ import { component$, useVisibleTask$ } from "@builder.io/qwik"; import { AppwriteService } from "~/AppwriteService"; import type { DocumentHead } from "@builder.io/qwik-city"; -import { routeLoader$, useNavigate } from "@builder.io/qwik-city"; +import { routeLoader$, Link } from "@builder.io/qwik-city"; import { marked } from "marked"; import ProjectTags from "~/components/layout/ProjectTags"; import Upvote from "~/components/blocks/Upvote"; @@ -36,7 +36,6 @@ export const head: DocumentHead = ({ resolveValue }) => { }; export default component$(() => { - const nav = useNavigate(); const projectData = useProjectData(); const html = marked(projectData.value.project.description, { @@ -63,14 +62,10 @@ export default component$(() => { <>