Merge pull request #44 from plezanje-net/route-page-structure

Route page structure

src/app/[lang]/components/latest-ascents.tsx

@@ -1,7 +1,7 @@
-import { Activity, HomeLatestAscentsDocument } from "../../../graphql/generated";
+import { Activity, HomeLatestAscentsDocument } from "@/graphql/generated";
 import LatestAscentsActivity from "./latest-ascents/latest-ascents-activity";
 import LatestAscentsActivitySkeleton from "./latest-ascents/latest-ascents-activity-skeleton";
-import urqlServer from "../../../graphql/urql-server";
+import urqlServer from "@/graphql/urql-server";
 import { gql } from "@urql/core";
 
 async function LatestAscents() {

src/app/[lang]/components/latest-ascents/latest-ascents-activity.tsx

@@ -1,12 +1,12 @@
 "use client";
 import { useState } from "react";
-import { Activity } from "../../../../graphql/generated";
-import displayDate from "../../../../utils/display-date";
-import CragLink from "../../../../components/crag-link";
-import Grade from "../../../../components/grade";
-import RouteLink from "../../../../components/route-link";
-import IconCollapse from "../../../../components/ui/icons/collapse";
-import IconExpand from "../../../../components/ui/icons/expand";
+import { Activity } from "@/graphql/generated";
+import displayDate from "@/utils/display-date";
+import CragLink from "@/components/crag-link";
+import Grade from "@/components/grade";
+import RouteLink from "@/components/route-link";
+import IconCollapse from "@/components/ui/icons/collapse";
+import IconExpand from "@/components/ui/icons/expand";
 
 type Params = {
   activity: Activity;

src/app/[lang]/components/latest-difficulty-votes.tsx

@@ -2,10 +2,10 @@ import { gql } from "@urql/core";
 import {
   DifficultyVote,
   HomeLatestDifficultyVotesDocument,
-} from "../../../graphql/generated";
+} from "@/graphql/generated";
 import LatestDifficultyVote from "./latest-difficulty-votes/latest-difficulty-vote";
 import LatestDifficultyVoteSkeleton from "./latest-difficulty-votes/latest-difficulty-vote-skeleton";
-import urqlServer from "../../../graphql/urql-server";
+import urqlServer from "@/graphql/urql-server";
 
 async function LatestDifficultyVotes() {
   const { data } = await urqlServer().query(HomeLatestDifficultyVotesDocument, {

src/app/[lang]/components/latest-difficulty-votes/latest-difficulty-vote-skeleton.tsx

@@ -1,4 +1,4 @@
-import IconRight from "../../../../components/ui/icons/right";
+import IconRight from "@/components/ui/icons/right";
 
 function LatestDifficultyVoteSkeleton() {
   return (

src/app/[lang]/components/latest-difficulty-votes/latest-difficulty-vote.tsx

@@ -1,13 +1,13 @@
 "use client";
 import { useState } from "react";
-import { Activity, DifficultyVote } from "../../../../graphql/generated";
-import displayDate from "../../../../utils/display-date";
-import CragLink from "../../../../components/crag-link";
-import Grade from "../../../../components/grade";
-import RouteLink from "../../../../components/route-link";
-import IconCollapse from "../../../../components/ui/icons/collapse";
-import IconExpand from "../../../../components/ui/icons/expand";
-import IconRight from "../../../../components/ui/icons/right";
+import { Activity, DifficultyVote } from "@/graphql/generated";
+import displayDate from "@/utils/display-date";
+import CragLink from "@/components/crag-link";
+import Grade from "@/components/grade";
+import RouteLink from "@/components/route-link";
+import IconCollapse from "@/components/ui/icons/collapse";
+import IconExpand from "@/components/ui/icons/expand";
+import IconRight from "@/components/ui/icons/right";
 
 type Params = {
   difficultyVote: DifficultyVote;

src/app/[lang]/crag/[cragSlug]/comments/components/add-comment-form.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/comments/components/add-comment-form.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { useState } from "react";
-import Button from "../../../../../../components/ui/button";
-import TextArea from "../../../../../../components/ui/text-area";
-import { Radio, RadioGroup } from "../../../../../../components/ui/radio-group";
+import Button from "@/components/ui/button";
+import TextArea from "@/components/ui/text-area";
+import { Radio, RadioGroup } from "@/components/ui/radio-group";
 import createCommentAction from "./server-actions/create-comment-action";
 import { useRouter } from "next/navigation";
-import { User } from "../../../../../../graphql/generated";
+import { User } from "@/graphql/generated";
 
 interface Props {
   cragId: string;

src/app/[lang]/crag/[cragSlug]/comments/components/comment-actions.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/comments/components/comment-actions.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import Dialog, { DialogSize } from "../../../../../../components/ui/dialog";
-import Link from "../../../../../../components/ui/link";
+import Dialog, { DialogSize } from "@/components/ui/dialog";
+import Link from "@/components/ui/link";
 import updateCommentAction from "./server-actions/update-comment-action";
 import deleteCommentAction from "./server-actions/delete-comment-action";
-import TextArea from "../../../../../../components/ui/text-area";
-import { Radio, RadioGroup } from "../../../../../../components/ui/radio-group";
+import TextArea from "@/components/ui/text-area";
+import { Radio, RadioGroup } from "@/components/ui/radio-group";
 import { useState } from "react";
 import { CommentType } from "./comment";
 

src/app/[lang]/crag/[cragSlug]/comments/components/comment.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/comments/components/comment.tsx

@@ -1,4 +1,4 @@
-import { User } from "../../../../../../graphql/generated";
+import { User } from "@/graphql/generated";
 import CommentActions from "./comment-actions";
 
 interface CommentProps {

src/app/[lang]/crag/[cragSlug]/comments/components/server-actions/create-comment-action.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/comments/components/server-actions/create-comment-action.tsx

@@ -1,8 +1,8 @@
 "use server";
 
 import { gql } from "urql/core";
-import { CreateCommentDocument } from "../../../../../../../graphql/generated";
-import urqlServer from "../../../../../../../graphql/urql-server";
+import { CreateCommentDocument } from "@/graphql/generated";
+import urqlServer from "@/graphql/urql-server";
 
 async function createCommentAction(formData: FormData) {
   const result = await urqlServer().mutation(CreateCommentDocument, {

src/app/[lang]/crag/[cragSlug]/comments/components/server-actions/delete-comment-action.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/comments/components/server-actions/delete-comment-action.tsx

@@ -1,8 +1,8 @@
 "use server";
 
 import { gql } from "urql/core";
-import { DeleteCommentDocument } from "../../../../../../../graphql/generated";
-import urqlServer from "../../../../../../../graphql/urql-server";
+import { DeleteCommentDocument } from "@/graphql/generated";
+import urqlServer from "@/graphql/urql-server";
 
 async function deleteCommentAction(commentId: string) {
   const result = await urqlServer().mutation(DeleteCommentDocument, {

src/app/[lang]/crag/[cragSlug]/comments/components/server-actions/update-comment-action.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/comments/components/server-actions/update-comment-action.tsx

@@ -1,8 +1,8 @@
 "use server";
 
 import { gql } from "urql/core";
-import { UpdateCommentDocument } from "../../../../../../../graphql/generated";
-import urqlServer from "../../../../../../../graphql/urql-server";
+import { UpdateCommentDocument } from "@/graphql/generated";
+import urqlServer from "@/graphql/urql-server";
 import { CommentType } from "../comment";
 
 async function updateCommentAction(

src/app/[lang]/crag/[cragSlug]/comments/page.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/comments/page.tsx

@@ -1,9 +1,9 @@
 import { gql } from "urql/core";
-import urqlServer from "../../../../../graphql/urql-server";
-import { Crag, CragCommentsDocument } from "../../../../../graphql/generated";
+import urqlServer from "@/graphql/urql-server";
+import { Crag, CragCommentsDocument } from "@/graphql/generated";
 import Comment, { CommentType } from "./components/comment";
 import AddCommentForm from "./components/add-comment-form";
-import authStatus from "../../../../../utils/auth/auth-status";
+import authStatus from "@/utils/auth/auth-status";
 
 interface Params {
   cragSlug: string;

src/app/[lang]/crag/[cragSlug]/components/crag-header.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/components/crag-header.tsx

@@ -1,5 +1,5 @@
-import { Crag } from "../../../../../graphql/generated";
-import { Breadcrumb, Breadcrumbs } from "../../../../../components/breadcrumbs";
+import { Crag } from "@/graphql/generated";
+import { Breadcrumb, Breadcrumbs } from "@/components/breadcrumbs";
 import CragTabMenu from "./crag-header/crag-tab-menu";
 
 interface Props {

src/app/[lang]/crag/[cragSlug]/components/crag-header/crag-tab-menu.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/components/crag-header/crag-tab-menu.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { Crag } from "../../../../../../graphql/generated";
-import { useI18nPathname } from "../../../../../../utils/hooks/use-i18n-pathname";
-import IconComment from "../../../../../../components/ui/icons/comment";
-import IconGallery from "../../../../../../components/ui/icons/gallery";
-import IconInfo from "../../../../../../components/ui/icons/info";
-import IconRoutes from "../../../../../../components/ui/icons/routes";
-import TabMenu, { TabMenuItem } from "../../../../../../components/ui/tab-menu";
+import { Crag } from "@/graphql/generated";
+import { useI18nPathname } from "@/utils/hooks/use-i18n-pathname";
+import IconComment from "@/components/ui/icons/comment";
+import IconGallery from "@/components/ui/icons/gallery";
+import IconInfo from "@/components/ui/icons/info";
+import IconRoutes from "@/components/ui/icons/routes";
+import TabMenu, { TabMenuItem } from "@/components/ui/tab-menu";
 import { IconSize } from "@/components/ui/icons/icon-size";
 
 interface Props {

src/app/[lang]/crag/[cragSlug]/components/crag-routes.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/components/crag-routes.tsx

@@ -1,10 +1,5 @@
 "use client";
-import {
-  ActivityRoute,
-  Crag,
-  Route,
-  Sector,
-} from "../../../../../graphql/generated";
+import { ActivityRoute, Crag, Route, Sector } from "@/graphql/generated";
 import { createContext, useCallback, useLayoutEffect, useState } from "react";
 import CragRouteList from "./crag-routes/crag-route-list";
 import CragSector from "./crag-routes/crag-sector";

src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/components/crag-routes/crag-route-list.tsx

@@ -1,10 +1,10 @@
 import { useContext } from "react";
-import { Crag, Route } from "../../../../../../graphql/generated";
+import { Crag, Route } from "@/graphql/generated";
 import CragRoute, { CragRouteCompact } from "./crag-route-list/crag-route";
 import { CragRoutesContext, FilterOptions, SortOptions } from "../crag-routes";
-import IconStarFull from "../../../../../../components/ui/icons/star-full";
-import IconComment from "../../../../../../components/ui/icons/comment";
-import IconCheck from "../../../../../../components/ui/icons/check";
+import IconStarFull from "@/components/ui/icons/star-full";
+import IconComment from "@/components/ui/icons/comment";
+import IconCheck from "@/components/ui/icons/check";
 import { IconSize } from "@/components/ui/icons/icon-size";
 import { filterEntitiesBySearchTerm } from "@/utils/search-helpers";
 

src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/components/crag-routes/crag-route-list/crag-route.tsx

@@ -1,14 +1,14 @@
 import { useContext } from "react";
-import { Crag, Route } from "../../../../../../../graphql/generated";
-import RouteLink from "../../../../../../../components/route-link";
-import AscentIcon from "../../../../../../../components/ui/ascent-icon";
+import { Crag, Route } from "@/graphql/generated";
+import RouteLink from "@/components/route-link";
+import AscentIcon from "@/components/ui/ascent-icon";
 import { IconSize } from "@/components/ui/icons/icon-size";
-import IconComment from "../../../../../../../components/ui/icons/comment";
-import IconStarEmpty from "../../../../../../../components/ui/icons/star-empty";
-import IconStarFull from "../../../../../../../components/ui/icons/star-full";
-import Link from "../../../../../../../components/ui/link";
+import IconComment from "@/components/ui/icons/comment";
+import IconStarEmpty from "@/components/ui/icons/star-empty";
+import IconStarFull from "@/components/ui/icons/star-full";
+import Link from "@/components/ui/link";
 import { CragRoutesContext } from "../../crag-routes";
-import { pluralizeNoun } from "../../../../../../../utils/text-helpers";
+import { pluralizeNoun } from "@/utils/text-helpers";
 import RouteGrade from "./crag-route/route-grade";
 import Checkbox from "@/components/ui/checkbox";
 

src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route/route-grade.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/components/crag-routes/crag-route-list/crag-route/route-grade.tsx

@@ -1,6 +1,4 @@
-import Dialog, {
-  DialogSize,
-} from "../../../../../../../../components/ui/dialog";
+import Dialog, { DialogSize } from "@/components/ui/dialog";
 import DifficultyVotes from "./difficulty-votes";
 import { Crag, DifficultyVote, Route } from "@/graphql/generated";
 import Grade from "@/components/grade";

src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-routes-actions/columns.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/components/crag-routes/crag-routes-actions/columns.tsx

@@ -1,8 +1,8 @@
 import { useContext } from "react";
-import { Select, Option } from "../../../../../../../components/ui/select";
+import { Select, Option } from "@/components/ui/select";
 import { CragRoutesContext, cragRouteListColumns } from "../../crag-routes";
-import Button from "../../../../../../../components/ui/button";
-import IconColumns from "../../../../../../../components/ui/icons/columns";
+import Button from "@/components/ui/button";
+import IconColumns from "@/components/ui/icons/columns";
 
 function Columns() {
   const { cragRoutesState, setCragRoutesState } = useContext(CragRoutesContext);

src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-routes-actions/combine-sectors.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/components/crag-routes/crag-routes-actions/combine-sectors.tsx

@@ -1,7 +1,7 @@
 // import { useRouter } from "next/router";
-import Button from "../../../../../../../components/ui/button";
-import IconMerge from "../../../../../../../components/ui/icons/merge";
-import IconUnmerge from "../../../../../../../components/ui/icons/unmerge";
+import Button from "@/components/ui/button";
+import IconMerge from "@/components/ui/icons/merge";
+import IconUnmerge from "@/components/ui/icons/unmerge";
 import { CragRoutesContext } from "../../crag-routes";
 import { useContext } from "react";
 

src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-routes-actions/filter.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/components/crag-routes/crag-routes-actions/filter.tsx

@@ -1,18 +1,15 @@
 import { useContext, useState } from "react";
-import Button from "../../../../../../../components/ui/button";
-import IconFilter from "../../../../../../../components/ui/icons/filter";
-import Dialog, { DialogSize } from "../../../../../../../components/ui/dialog";
+import Button from "@/components/ui/button";
+import IconFilter from "@/components/ui/icons/filter";
+import Dialog, { DialogSize } from "@/components/ui/dialog";
 import { CragRoutesContext, FilterOptions } from "../../crag-routes";
 import GradeRangeSlider, {
   difficultyToSliderValueMap,
   maxSliderValue,
   minSliderValue,
   sliderValueToDifficultyMap,
-} from "../../../../../../../components/ui/grade-range-slider";
-import {
-  Radio,
-  RadioGroup,
-} from "../../../../../../../components/ui/radio-group";
+} from "@/components/ui/grade-range-slider";
+import { Radio, RadioGroup } from "@/components/ui/radio-group";
 import Checkbox from "@/components/ui/checkbox";
 
 function Filter() {

src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-routes-actions/search.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/components/crag-routes/crag-routes-actions/search.tsx

@@ -1,9 +1,9 @@
 import { useContext, useRef } from "react";
-import IconSearch from "../../../../../../../components/ui/icons/search";
-import TextField from "../../../../../../../components/ui/text-field";
+import IconSearch from "@/components/ui/icons/search";
+import TextField from "@/components/ui/text-field";
 import { CragRoutesContext } from "../../crag-routes";
-import Button from "../../../../../../../components/ui/button";
-import IconClose from "../../../../../../../components/ui/icons/close";
+import Button from "@/components/ui/button";
+import IconClose from "@/components/ui/icons/close";
 
 function Search() {
   const { cragRoutesState, setCragRoutesState } = useContext(CragRoutesContext);

src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-routes-actions/sort.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/components/crag-routes/crag-routes-actions/sort.tsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
-import Button from "../../../../../../../components/ui/button";
-import IconSort from "../../../../../../../components/ui/icons/sort";
-import { Select, Option } from "../../../../../../../components/ui/select";
+import Button from "@/components/ui/button";
+import IconSort from "@/components/ui/icons/sort";
+import { Select, Option } from "@/components/ui/select";
 import { CragRoutesContext, cragRouteListColumns } from "../../crag-routes";
 
 function Sort() {

src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-sector.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/components/crag-routes/crag-sector.tsx

@@ -1,5 +1,5 @@
-import { Crag, Sector } from "../../../../../../graphql/generated";
-import Accordion from "../../../../../../components/ui/accordion";
+import { Crag, Sector } from "@/graphql/generated";
+import Accordion from "@/components/ui/accordion";
 import CragRouteList from "./crag-route-list";
 
 interface Props {

src/app/[lang]/crag/[cragSlug]/layout.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/layout.tsx

@@ -1,7 +1,7 @@
 import { gql } from "@urql/core";
 import CragHeader from "./components/crag-header";
-import { Crag, CragHeaderDocument } from "../../../../graphql/generated";
-import urqlServer from "../../../../graphql/urql-server";
+import { Crag, CragHeaderDocument } from "@/graphql/generated";
+import urqlServer from "@/graphql/urql-server";
 
 interface Params {
   cragSlug: string;

src/app/[lang]/crag/[cragSlug]/page.tsx → src/app/[lang]/crag/[cragSlug]/(crag)/page.tsx

@@ -4,10 +4,10 @@ import {
   Crag,
   CragSectorsDocument,
   MyCragSummaryDocument,
-} from "../../../../graphql/generated";
-import urqlServer from "../../../../graphql/urql-server";
+} from "@/graphql/generated";
+import urqlServer from "@/graphql/urql-server";
 import CragRoutes from "./components/crag-routes";
-import authStatus from "../../../../utils/auth/auth-status";
+import authStatus from "@/utils/auth/auth-status";
 
 type Params = {
   cragSlug: string;

src/app/[lang]/crag/[cragSlug]/route/[routeSlug]/page.tsx

@@ -4,10 +4,11 @@ type Params = {
 };
 
 function RoutePage({ params }: { params: Params }) {
+  console.log(params);
   return (
     <>
-      Route page placeholder here only to test returning to crag page with
-      browsser navigation
+      Route page placeholder here only to test navigation and set up the
+      structure detached from crag layout.
     </>
   );
 }

src/app/components/header.tsx

@@ -1,12 +1,12 @@
 "use client";
 import Link from "next/link";
 import { useState } from "react";
-import IconClose from "../../components/ui/icons/close";
-import IconMenu from "../../components/ui/icons/menu";
-import IconSearch from "../../components/ui/icons/search";
+import IconClose from "@/components/ui/icons/close";
+import IconMenu from "@/components/ui/icons/menu";
+import IconSearch from "@/components/ui/icons/search";
 import Logo from "./header/logo";
-import { useI18nPathname } from "../../utils/hooks/use-i18n-pathname";
-import { AuthStatus } from "../../utils/auth/auth-status";
+import { useI18nPathname } from "@/utils/hooks/use-i18n-pathname";
+import { AuthStatus } from "@/utils/auth/auth-status";
 
 type NavLink = {
   label: string;

src/app/layout.tsx

@@ -2,7 +2,7 @@ import "../styles/globals.css";
 import Head from "next/head";
 import Header from "./components/header";
 import { Poppins } from "next/font/google";
-import authStatus from "../utils/auth/auth-status";
+import authStatus from "@/utils/auth/auth-status";
 import ClientProviders from "./components/client-providers";
 
 const poppins = Poppins({

src/app/sandbox/auth/_components/login-action.ts

@@ -1,8 +1,8 @@
 "use server";
 
 import { gql } from "@urql/core";
-import urqlServer from "../../../../graphql/urql-server";
-import { LoginDocument } from "../../../../graphql/generated";
+import urqlServer from "@/graphql/urql-server";
+import { LoginDocument } from "@/graphql/generated";
 import { cookies } from "next/headers";
 import { revalidatePath } from "next/cache";