Skip to content

Commit

Permalink
refactor: rename history parameters
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisvxd
chrisvxd committed Dec 11, 2023
1 parent 0f52b61 commit d636605
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 59 deletions.
14 changes: 6 additions & 8 deletions packages/core/components/MenuBar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,10 @@ export const MenuBar = ({
setMenuOpen: Dispatch<SetStateAction<boolean>>;
}) => {
const {
history: { rewind, forward, historyStore },
history: { back, forward, historyStore },
} = useAppContext();

const { canForward = false, canRewind = false } = historyStore || {};
const { hasFuture = false, hasPast = false } = historyStore || {};

return (
<div
Expand All @@ -57,21 +57,19 @@ export const MenuBar = ({
>
<div className={getClassName("inner")}>
<div className={getClassName("history")}>
<IconButton title="undo" disabled={!canRewind} onClick={rewind}>
<IconButton title="undo" disabled={!hasPast} onClick={back}>
<ChevronLeft
size={21}
stroke={
canRewind
? "var(--puck-color-black)"
: "var(--puck-color-grey-7)"
hasPast ? "var(--puck-color-black)" : "var(--puck-color-grey-7)"
}
/>
</IconButton>
<IconButton title="redo" disabled={!canForward} onClick={forward}>
<IconButton title="redo" disabled={!hasFuture} onClick={forward}>
<ChevronRight
size={21}
stroke={
canForward
hasFuture
? "var(--puck-color-black)"
: "var(--puck-color-grey-7)"
}
Expand Down
48 changes: 24 additions & 24 deletions packages/core/lib/__tests__/use-history-store.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,17 @@ describe("use-history-store", () => {
});

test("should have the correct initial state", () => {
expect(renderedHook.result.current.canRewind).toBe(false);
expect(renderedHook.result.current.canForward).toBe(false);
expect(renderedHook.result.current.hasPast).toBe(false);
expect(renderedHook.result.current.hasFuture).toBe(false);
expect(renderedHook.result.current.histories.length).toBe(0);
});

test("should record the history", () => {
act(() => renderedHook.result.current.record("Apples"));
act(() => renderedHook.result.current.record("Oranges"));

expect(renderedHook.result.current.canRewind).toBe(true);
expect(renderedHook.result.current.canForward).toBe(false);
expect(renderedHook.result.current.hasPast).toBe(true);
expect(renderedHook.result.current.hasFuture).toBe(false);
expect(renderedHook.result.current.histories.length).toBe(2);
expect(renderedHook.result.current.histories[0].data).toBe("Apples");
expect(renderedHook.result.current.histories[1].data).toBe("Oranges");
Expand All @@ -33,57 +33,57 @@ describe("use-history-store", () => {
test("should enable partial rewinds through history", () => {
act(() => renderedHook.result.current.record("Apples"));
act(() => renderedHook.result.current.record("Oranges"));
act(() => renderedHook.result.current.rewind());
act(() => renderedHook.result.current.back());

expect(renderedHook.result.current.canRewind).toBe(true);
expect(renderedHook.result.current.canForward).toBe(true);
expect(renderedHook.result.current.hasPast).toBe(true);
expect(renderedHook.result.current.hasFuture).toBe(true);
expect(renderedHook.result.current.currentHistory.data).toBe("Apples");
});

test("should enable full rewinds through history", () => {
act(() => renderedHook.result.current.record("Apples"));
act(() => renderedHook.result.current.record("Oranges"));
act(() => renderedHook.result.current.rewind());
act(() => renderedHook.result.current.rewind());
act(() => renderedHook.result.current.back());
act(() => renderedHook.result.current.back());

expect(renderedHook.result.current.canRewind).toBe(false);
expect(renderedHook.result.current.canForward).toBe(true);
expect(renderedHook.result.current.hasPast).toBe(false);
expect(renderedHook.result.current.hasFuture).toBe(true);
expect(renderedHook.result.current.currentHistory).toBeFalsy();
});

test("should enable partial fast-forwards through history", () => {
act(() => renderedHook.result.current.record("Apples"));
act(() => renderedHook.result.current.record("Oranges"));
act(() => renderedHook.result.current.rewind());
act(() => renderedHook.result.current.rewind());
act(() => renderedHook.result.current.back());
act(() => renderedHook.result.current.back());
act(() => renderedHook.result.current.forward());

expect(renderedHook.result.current.canRewind).toBe(true);
expect(renderedHook.result.current.canForward).toBe(true);
expect(renderedHook.result.current.hasPast).toBe(true);
expect(renderedHook.result.current.hasFuture).toBe(true);
expect(renderedHook.result.current.currentHistory.data).toBe("Apples");
});

test("should enable full rewinds through history", () => {
test("should enable full fast-forwards through history", () => {
act(() => renderedHook.result.current.record("Apples"));
act(() => renderedHook.result.current.record("Oranges"));
act(() => renderedHook.result.current.rewind());
act(() => renderedHook.result.current.rewind());
act(() => renderedHook.result.current.back());
act(() => renderedHook.result.current.back());
act(() => renderedHook.result.current.forward());
act(() => renderedHook.result.current.forward());

expect(renderedHook.result.current.canRewind).toBe(true);
expect(renderedHook.result.current.canForward).toBe(false);
expect(renderedHook.result.current.hasPast).toBe(true);
expect(renderedHook.result.current.hasFuture).toBe(false);
expect(renderedHook.result.current.currentHistory.data).toBe("Oranges");
});

test("should replace the history if record is triggered after rewind", () => {
test("should replace the history if record is triggered after back", () => {
act(() => renderedHook.result.current.record("Apples"));
act(() => renderedHook.result.current.record("Oranges"));
act(() => renderedHook.result.current.rewind());
act(() => renderedHook.result.current.back());
act(() => renderedHook.result.current.record("Banana"));

expect(renderedHook.result.current.canRewind).toBe(true);
expect(renderedHook.result.current.canForward).toBe(false);
expect(renderedHook.result.current.hasPast).toBe(true);
expect(renderedHook.result.current.hasFuture).toBe(false);
expect(renderedHook.result.current.histories.length).toBe(2);
expect(renderedHook.result.current.histories[0].data).toBe("Apples");
expect(renderedHook.result.current.histories[1].data).toBe("Banana");
Expand Down
20 changes: 10 additions & 10 deletions packages/core/lib/__tests__/use-puck-history.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ jest.mock("react-hotkeys-hook");
jest.mock("../use-history-store");

const historyStore = {
canRewind: false,
hasPast: false,
prevHistory: { data: null },
nextHistory: { data: null },
rewind: jest.fn(),
back: jest.fn(),
forward: jest.fn(),
} as unknown as HistoryStore;

Expand All @@ -22,21 +22,21 @@ beforeEach(() => {
});

describe("use-puck-history", () => {
test("rewind function does not call dispatch when there is no history", () => {
test("back function does not call dispatch when there is no history", () => {
const { result } = renderHook(() =>
usePuckHistory({ dispatch, initialAppState, historyStore })
);

act(() => {
result.current.rewind();
result.current.back();
});

expect(historyStore.rewind).not.toHaveBeenCalled();
expect(historyStore.back).not.toHaveBeenCalled();
expect(dispatch).not.toHaveBeenCalled();
});

test("rewind function calls dispatch when there is a history", () => {
historyStore.canRewind = true;
test("back function calls dispatch when there is a history", () => {
historyStore.hasPast = true;
historyStore.prevHistory = {
id: "",
data: {
Expand All @@ -50,18 +50,18 @@ describe("use-puck-history", () => {
);

act(() => {
result.current.rewind();
result.current.back();
});

expect(historyStore.rewind).toHaveBeenCalled();
expect(historyStore.back).toHaveBeenCalled();
expect(dispatch).toHaveBeenCalledWith({
type: "set",
state: historyStore.prevHistory?.data || initialAppState,
});
});

test("forward function does not call dispatch when there is no future", () => {
historyStore.canRewind = false;
historyStore.hasPast = false;
historyStore.nextHistory = null;

const { result } = renderHook(() =>
Expand Down
22 changes: 11 additions & 11 deletions packages/core/lib/use-history-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ export type History<D = any> = {
export type HistoryStore<D = any> = {
index: number;
currentHistory: History;
canRewind: boolean;
canForward: boolean;
hasPast: boolean;
hasFuture: boolean;
record: (data: D) => void;
rewind: VoidFunction;
back: VoidFunction;
forward: VoidFunction;
nextHistory: History<D> | null;
prevHistory: History<D> | null;
Expand All @@ -28,12 +28,12 @@ export function useHistoryStore<D = any>(): HistoryStore<D> {
const [index, setIndex] = useState(EMPTY_HISTORY_INDEX);
// const index = useRef(EMPTY_HISTORY_INDEX);

const canRewind = index > EMPTY_HISTORY_INDEX;
const canForward = index < histories.length - 1;
const hasPast = index > EMPTY_HISTORY_INDEX;
const hasFuture = index < histories.length - 1;

const currentHistory = histories[index];
const nextHistory = canForward ? histories[index + 1] : null;
const prevHistory = canRewind ? histories[index - 1] : null;
const nextHistory = hasFuture ? histories[index + 1] : null;
const prevHistory = hasPast ? histories[index - 1] : null;

const record = useDebouncedCallback((data: D) => {
const history: History = {
Expand All @@ -50,7 +50,7 @@ export function useHistoryStore<D = any>(): HistoryStore<D> {
});
}, 250);

const rewind = () => {
const back = () => {
setIndex(index - 1);
};

Expand All @@ -61,10 +61,10 @@ export function useHistoryStore<D = any>(): HistoryStore<D> {
return {
index: index,
currentHistory,
canRewind,
canForward,
hasPast,
hasFuture,
record,
rewind,
back,
forward,
nextHistory,
prevHistory,
Expand Down
12 changes: 6 additions & 6 deletions packages/core/lib/use-puck-history.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useHotkeys } from "react-hotkeys-hook";
import { HistoryStore } from "./use-history-store";

export type PuckHistory = {
rewind: VoidFunction;
back: VoidFunction;
forward: VoidFunction;
historyStore: HistoryStore;
};
Expand All @@ -18,14 +18,14 @@ export function usePuckHistory({
initialAppState: AppState;
historyStore: HistoryStore;
}) {
const rewind = () => {
if (historyStore.canRewind) {
const back = () => {
if (historyStore.hasPast) {
dispatch({
type: "set",
state: historyStore.prevHistory?.data || initialAppState,
});

historyStore.rewind();
historyStore.back();
}
};

Expand All @@ -37,12 +37,12 @@ export function usePuckHistory({
}
};

useHotkeys("meta+z", rewind, { preventDefault: true });
useHotkeys("meta+z", back, { preventDefault: true });
useHotkeys("meta+shift+z", forward, { preventDefault: true });
useHotkeys("meta+y", forward, { preventDefault: true });

return {
rewind,
back,
forward,
historyStore,
};
Expand Down

1 comment on commit d636605

@vercel
Copy link

@vercel vercel bot commented on d636605 Dec 11, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

puck-docs – ./apps/docs

puck-docs-git-main-measured.vercel.app
puck-docs-measured.vercel.app
puckeditor.com
www.puckeditor.com
puck-docs.vercel.app

Please sign in to comment.