Skip to content

Commit 14bcc91

Browse files
quolprquolpr
committed
Better links going
1 parent 9dd316a commit 14bcc91

File tree

7 files changed

+157
-68
lines changed

7 files changed

+157
-68
lines changed

‎packages/web-app/src/components/CommandPaletteModal/CommandPaleteModal.tsx

Lines changed: 34 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
import React, {
2-
useCallback,
3-
useEffect,
4-
useMemo,
5-
useRef,
6-
useState,
7-
} from 'react';
1+
import React, { useCallback, useEffect, useRef, useState } from 'react';
82
import './styles.css';
93
import { ChevronRightIcon, ReplyIcon } from '@heroicons/react/solid';
104
import Highlighter from 'react-highlight-words';
@@ -13,13 +7,13 @@ import { cn } from '../../utils';
137
import { useKey } from 'react-use';
148
import { v4 as uuidv4 } from 'uuid';
159
import type { IFocusBlockState } from '../Note/Note';
16-
import { PATHS, paths } from '../../paths';
10+
import { paths } from '../../paths';
1711
import { useNoteRepository } from '../../contexts/CurrentNoteRepositoryContext';
1812
import { useCurrentVault } from '../../hooks/useCurrentVault';
1913
import { Modal, modalClass } from '../Modal/Modal';
2014
import { firstValueFrom } from 'rxjs';
2115
import { generateStackedNotePath } from '../../hooks/useNoteClick';
22-
import pathToRegexp from 'path-to-regexp';
16+
import { usePrimaryNoteId } from '../../hooks/usePrimaryNote';
2317

2418
// Command executes on each user type and as result gives list of actions
2519
// Commands are start with `!`. If no `!` present - then search happen between all start view actions names
@@ -32,6 +26,7 @@ type IAction = (
3226
name: string;
3327
type: 'goToPage';
3428
href: string;
29+
stackHref?: string;
3530
}
3631
| {
3732
id: string;
@@ -65,10 +60,7 @@ export const CommandPaletteModal = ({
6560
}) => {
6661
const location = useLocation();
6762

68-
const currentNoteId = useMemo(
69-
() => pathToRegexp(PATHS.VAULT_NOTE_PATH).exec(location.pathname)?.[2],
70-
[location.pathname],
71-
);
63+
const primaryNoteId = usePrimaryNoteId();
7264

7365
const history = useHistory();
7466
const vault = useCurrentVault();
@@ -102,7 +94,7 @@ export const CommandPaletteModal = ({
10294
);
10395
const focusedIndex = view.actions.findIndex((n) => n.id === focusedActionId);
10496

105-
const prevMosePosRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
97+
const prevMousePosRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
10698

10799
const searchItemRefs = useRef<Record<string, HTMLElement>>({});
108100

@@ -127,6 +119,7 @@ export const CommandPaletteModal = ({
127119
type: 'createNote',
128120
noteName: toFind,
129121
};
122+
console.log(location.search);
130123

131124
return {
132125
actions: [
@@ -135,17 +128,18 @@ export const CommandPaletteModal = ({
135128
id,
136129
name: title,
137130
type: 'goToPage',
138-
href: currentNoteId
139-
? generateStackedNotePath(
140-
location.search,
141-
vault.$modelId,
142-
currentNoteId,
143-
id,
144-
)
145-
: paths.vaultNotePath({
146-
vaultId: vault.$modelId,
147-
noteId: id,
148-
}),
131+
href: paths.vaultNotePath({
132+
vaultId: vault.$modelId,
133+
noteId: id,
134+
}),
135+
stackHref:
136+
primaryNoteId &&
137+
generateStackedNotePath(
138+
location.search,
139+
vault.$modelId,
140+
primaryNoteId,
141+
id,
142+
),
149143

150144
highlight: toFind,
151145
}),
@@ -192,14 +186,18 @@ export const CommandPaletteModal = ({
192186
noteRepo,
193187
startView,
194188
location.search,
195-
currentNoteId,
189+
primaryNoteId,
196190
]);
197191

198192
const performAction = useCallback(
199-
async (action: IAction) => {
193+
async (action: IAction, isShift: boolean) => {
200194
switch (action.type) {
201195
case 'goToPage':
202-
history.push(action.href);
196+
if (isShift && action.stackHref) {
197+
history.push(action.stackHref);
198+
} else {
199+
history.push(action.href + location.search);
200+
}
203201

204202
onClose();
205203
break;
@@ -233,7 +231,7 @@ export const CommandPaletteModal = ({
233231
break;
234232
}
235233
},
236-
[onClose, history, vault, noteRepo],
234+
[onClose, history, location.search, noteRepo, vault.$modelId],
237235
);
238236

239237
useKey(
@@ -276,7 +274,7 @@ export const CommandPaletteModal = ({
276274
if (switchTo < view.actions.length) {
277275
const action = view.actions[switchTo];
278276

279-
if (action) performAction(action);
277+
if (action) performAction(action, e.shiftKey);
280278
}
281279
},
282280
undefined,
@@ -291,7 +289,7 @@ export const CommandPaletteModal = ({
291289
if (focusedActionId) {
292290
const action = view.actions[focusedIndex];
293291

294-
if (action) performAction(action);
292+
if (action) performAction(action, e.shiftKey);
295293
}
296294
},
297295
undefined,
@@ -356,16 +354,17 @@ export const CommandPaletteModal = ({
356354

357355
onClick: (e: React.MouseEvent<HTMLElement>) => {
358356
e.preventDefault();
359-
performAction(action);
357+
358+
performAction(action, e.shiftKey);
360359
},
361360
onMouseMove: (e: React.MouseEvent<HTMLElement>) => {
362361
if (
363-
prevMosePosRef.current.x === e.screenX &&
364-
prevMosePosRef.current.y === e.screenY
362+
prevMousePosRef.current.x === e.screenX &&
363+
prevMousePosRef.current.y === e.screenY
365364
)
366365
return;
367366

368-
prevMosePosRef.current = { x: e.screenX, y: e.screenY };
367+
prevMousePosRef.current = { x: e.screenX, y: e.screenY };
369368

370369
setActionCommandId(action.id);
371370
},

‎packages/web-app/src/components/Note/Note.tsx

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useState } from 'react';
66
import { observer } from 'mobx-react-lite';
77
import { NoteBlockModel, NoteModel, FocusedBlockState } from '@harika/web-core';
88
import { computed } from 'mobx';
9-
import { Link, useHistory } from 'react-router-dom';
9+
import { Link, useHistory, useLocation } from 'react-router-dom';
1010
import { LinkIcon } from '@heroicons/react/solid';
1111
import { groupBy } from 'lodash-es';
1212
import clsx from 'clsx';
@@ -16,7 +16,8 @@ import { CurrentBlockInputRefContext } from '../../contexts';
1616
import { useNoteRepository } from '../../contexts/CurrentNoteRepositoryContext';
1717
import { NoteBlocks } from './NoteBlocks';
1818
import { useCurrentNote } from '../../hooks/useCurrentNote';
19-
import { useNotePath } from '../../hooks/useNoteClick';
19+
import { useHandleClick } from '../../hooks/useNoteClick';
20+
import { paths } from '../../paths';
2021

2122
export interface IFocusBlockState {
2223
focusOnBlockId: string;
@@ -67,8 +68,13 @@ const BacklinkedNote = observer(
6768
const vault = useCurrentVault();
6869
const [isExpanded, setIsExpanded] = useState(true);
6970
const currentNote = useCurrentNote();
71+
const location = useLocation();
7072

71-
const notePath = useNotePath(vault, currentNote?.$modelId, note.$modelId);
73+
const handleClick = useHandleClick(
74+
vault,
75+
currentNote?.$modelId,
76+
note?.$modelId,
77+
);
7278

7379
return (
7480
<div className="backlinked-note">
@@ -84,7 +90,19 @@ const BacklinkedNote = observer(
8490
setIsExpanded(!isExpanded);
8591
}}
8692
/>
87-
<Link to={notePath}>{note.title}</Link>
93+
<Link
94+
to={
95+
note
96+
? paths.vaultNotePath({
97+
vaultId: vault.$modelId,
98+
noteId: note.$modelId,
99+
}) + location.search
100+
: ''
101+
}
102+
onClick={handleClick}
103+
>
104+
{note.title}
105+
</Link>
88106
</div>
89107

90108
<div

‎packages/web-app/src/components/NoteBlock/TokensRenderer.tsx

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { observer } from 'mobx-react-lite';
22
import React, { useCallback } from 'react';
3-
import { Link } from 'react-router-dom';
3+
import { Link, useLocation } from 'react-router-dom';
44
import type { RefToken, NoteBlockModel, Token } from '@harika/web-core';
55
import { useNoteRepository } from '../../contexts/CurrentNoteRepositoryContext';
66
import { useCurrentVault } from '../../hooks/useCurrentVault';
77
import { useCurrentNote } from '../../hooks/useCurrentNote';
8-
import { useNotePath } from '../../hooks/useNoteClick';
8+
import { useHandleClick } from '../../hooks/useNoteClick';
9+
import { paths } from '../../paths';
910

1011
const RefRenderer = observer(
1112
({ token, noteBlock }: { token: RefToken; noteBlock: NoteBlockModel }) => {
13+
const location = useLocation();
1214
const vault = useCurrentVault();
1315
const noteRepo = useNoteRepository();
1416
const linkedNotes = noteBlock.linkedNoteRefs;
@@ -27,7 +29,11 @@ const RefRenderer = observer(
2729
return note.maybeCurrent?.title === token.content;
2830
});
2931

30-
const notePath = useNotePath(vault, currentNote?.$modelId, noteRef?.id);
32+
const handleClick = useHandleClick(
33+
vault,
34+
currentNote?.$modelId,
35+
noteRef?.id,
36+
);
3137

3238
if (token.content === 'TODO' || token.content === 'DONE') {
3339
return (
@@ -59,7 +65,17 @@ const RefRenderer = observer(
5965
if (!noteRef) return <>[[{token.content}]]</>;
6066

6167
return (
62-
<Link to={notePath} className="link" data-not-editable>
68+
<Link
69+
to={
70+
paths.vaultNotePath({
71+
vaultId: vault.$modelId,
72+
noteId: noteRef.id,
73+
}) + location.search
74+
}
75+
onClick={handleClick}
76+
className="link"
77+
data-not-editable
78+
>
6379
[[{token.content}]]
6480
</Link>
6581
);

‎packages/web-app/src/components/VaultHeader/VaultHeader.tsx

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useCallback, useRef, useState } from 'react';
2-
import { useHistory } from 'react-router-dom';
2+
import { useHistory, useLocation } from 'react-router-dom';
33
import { CalendarIcon } from '@heroicons/react/solid';
44
import './styles.css';
55
import dayjs from 'dayjs';
@@ -11,8 +11,9 @@ import { CommandPaletteModal } from '../CommandPaletteModal/CommandPaleteModal';
1111
import { paths } from '../../paths';
1212
import { useNoteRepository } from '../../contexts/CurrentNoteRepositoryContext';
1313
import { useCurrentVault } from '../../hooks/useCurrentVault';
14-
import { useCurrentNote } from '../../hooks/useCurrentNote';
1514
import { cn } from '../../utils';
15+
import { generateStackedNotePath } from '../../hooks/useNoteClick';
16+
import { usePrimaryNote } from '../../hooks/usePrimaryNote';
1617

1718
const vaultHeaderClass = cn('header');
1819

@@ -28,13 +29,15 @@ export const VaultHeader = observer(
2829
isTogglerToggled: boolean;
2930
togglerRef: React.Ref<HTMLElement>;
3031
}) => {
32+
const location = useLocation();
3133
const vault = useCurrentVault();
3234
const noteRepo = useNoteRepository();
3335
const history = useHistory();
3436

35-
const [isModalOpened, setIsModalOpened] = useState(false);
37+
const primaryNote = usePrimaryNote();
38+
const primaryNoteId = primaryNote?.$modelId;
3639

37-
const currentNote = useCurrentNote();
40+
const [isModalOpened, setIsModalOpened] = useState(false);
3841

3942
const [isCalendarOpened, setIsCalendarOpened] = useState(false);
4043

@@ -58,21 +61,32 @@ export const VaultHeader = observer(
5861
}, [isCalendarOpened]);
5962

6063
const handleCalendarChange = useCallback(
61-
async (date: Date | Date[]) => {
64+
async (date: Date | Date[], ev: React.ChangeEvent<HTMLInputElement>) => {
6265
if (Array.isArray(date)) return;
6366

6467
const result = await noteRepo.getOrCreateDailyNote(dayjs(date));
6568

6669
if (result.status === 'ok') {
67-
history.replace(
68-
paths.vaultNotePath({
69-
vaultId: vault.$modelId,
70-
noteId: result.data.$modelId,
71-
}),
72-
);
70+
if ((ev.nativeEvent as MouseEvent).shiftKey && primaryNoteId) {
71+
history.replace(
72+
generateStackedNotePath(
73+
location.search,
74+
vault.$modelId,
75+
primaryNoteId,
76+
result.data.$modelId,
77+
),
78+
);
79+
} else {
80+
history.replace(
81+
paths.vaultNotePath({
82+
vaultId: vault.$modelId,
83+
noteId: result.data.$modelId,
84+
}) + location.search,
85+
);
86+
}
7387
}
7488
},
75-
[vault.$modelId, history, noteRepo],
89+
[noteRepo, primaryNoteId, history, location.search, vault.$modelId],
7690
);
7791

7892
return (
@@ -150,8 +164,8 @@ export const VaultHeader = observer(
150164
<Calendar
151165
onChange={handleCalendarChange}
152166
value={
153-
currentNote?.dailyNoteDate !== undefined
154-
? new Date(currentNote?.dailyNoteDate)
167+
primaryNote?.dailyNoteDate !== undefined
168+
? new Date(primaryNote?.dailyNoteDate)
155169
: undefined
156170
}
157171
className={vaultHeaderClass('calendar', {

0 commit comments

Comments
 (0)