Skip to content

Commit

Permalink
Add easy-peasy
Browse files Browse the repository at this point in the history
  • Loading branch information
Maigo Erit committed Dec 20, 2020
1 parent 143153a commit ef9df88
Show file tree
Hide file tree
Showing 10 changed files with 177 additions and 59 deletions.
1 change: 1 addition & 0 deletions client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"babel-plugin-import": "^1.13.3",
"cross-env": "6.0.3",
"debounce-promise": "^3.1.2",
"easy-peasy": "^4.0.1",
"eiphop": "^1.0.13",
"electron-store": "5.1.0",
"fast-deep-equal": "^3.1.1",
Expand Down
14 changes: 7 additions & 7 deletions client/src/@types/ITrackItem.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
export interface ITrackItem {
id: number;
taskName: string;
beginDate: string;
endDate: string;
app: string;
title: string;
color: string;
id?: number;
taskName?: string;
beginDate: number;
endDate: number;
app?: string;
title?: string;
color?: string;
}
/*
id: 472,
Expand Down
12 changes: 4 additions & 8 deletions client/src/components/Timeline/Search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,6 @@ import { TIMERANGE_MODE_TODAY } from '../../TimelineContext';

const { RangePicker } = DatePicker;

interface IProps {
timerange: any;
loadTimerange: (timerange: any) => void;
changeVisibleTimerange: (timerange: any) => void;
}

type IFullProps = IProps;

const getDayBefore = d => moment(d).subtract(1, 'days');
const getDayAfter = d => moment(d).add(1, 'days');

Expand All @@ -28,6 +20,7 @@ export const Search = ({
changeVisibleTimerange,
liveView,
setLiveView,
createNewItem,
}) => {
const showLiveViewButton = timerangeMode === TIMERANGE_MODE_TODAY;
const toggleLiveView = () => {
Expand Down Expand Up @@ -143,6 +136,9 @@ export const Search = ({
</Box>
)}
<Box flex={1} />
<Box p={1}>
<Button onClick={createNewItem}>New Log item</Button>
</Box>
<Box p={1}>
<Button onClick={showDay} type="dashed">
All Day
Expand Down
101 changes: 64 additions & 37 deletions client/src/components/Timeline/Timeline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,14 @@ import { Logger } from '../../logger';
import { formatDuration } from '../SummaryCalendar/SummaryCalendar.util';
import { colorProp } from '../charts.utils';
import { useChartThemeState } from '../../routes/ChartThemeProvider';
import { useStoreActions, useStoreState } from '../../store/easyPeasy';

interface IProps {
timerange: any;
visibleTimerange: any;
setVisibleTimerange?: any;

timeItems: any;

selectedTimelineItem?: any;
setSelectedTimelineItem?: any;
reloadTimerange?: any;
toggleRow?: any;

Expand Down Expand Up @@ -95,7 +93,29 @@ const rowEnabledDefaults = {
};

const GridComponent = props => {
console.info('...................', props);
console.error('...................', props);
const { selectedTimelineItem, onBrushDomainChange, chartTheme } = props;
return selectedTimelineItem ? (
<VictoryBrushLine
width={barWidth}
dimension="y"
brushDomain={[selectedTimelineItem._y, selectedTimelineItem._y0]}
onBrushDomainChange={onBrushDomainChange}
brushStyle={{
pointerEvents: 'none',
stroke: '#8363ff',
fill: chartTheme.isDark ? 'green' : 'black',
opacity: ({ active }) => (active ? 0.5 : 0.4),
}}
brushAreaStyle={{
stroke: 'none',
fill: 'transparent',
opacity: 0,
}}
/>
) : (
<LineSegment />
);
};

export const Timeline = memo<IFullProps>(
Expand All @@ -108,8 +128,9 @@ export const Timeline = memo<IFullProps>(
reloadTimerange,
}) => {
const { chartTheme } = useChartThemeState();
const [selectedTimerange, setSelectedTimerange] = useState<any>();
const [selectedTimelineItem, setSelectedTimelineItem] = useState<any>();

const selectedTimelineItem = useStoreState(state => state.selectedTimelineItem);
const setSelectedTimelineItem = useStoreActions(actions => actions.setSelectedTimelineItem);
const [isRowEnabled, setIsRowEnabled] = useState<any>(rowEnabledDefaults);

const chartWidth = useWindowWidth();
Expand Down Expand Up @@ -140,14 +161,17 @@ export const Timeline = memo<IFullProps>(
changeVisibleTimerange(domain.y);
};

const handleEditBrush = domain => {
const handleEditBrush = (domain, props) => {
if (domain) {
const beginDate = convertDate(domain[0]).valueOf();
const endDate = convertDate(domain[1]).valueOf();
console.info('props', props);
if (props.index === TimelineRowType.Log) {
const beginDate = convertDate(domain[0]).valueOf();
const endDate = convertDate(domain[1]).valueOf();

Logger.debug('EditBrush changed:', beginDate, endDate);
Logger.debug('EditBrush changed:', beginDate, endDate);

setSelectedTimelineItem({ ...selectedTimelineItem, beginDate, endDate });
setSelectedTimelineItem({ ...selectedTimelineItem, beginDate, endDate });
}
}
};

Expand Down Expand Up @@ -249,8 +273,6 @@ export const Timeline = memo<IFullProps>(
style={{ zIndex: 930 }}
content={
<TimelineItemEditContainer
selectedTimelineItem={selectedTimelineItem}
setSelectedTimelineItem={setSelectedTimelineItem}
reloadTimerange={reloadTimerange}
showDeleteBtn
showCloseBtn
Expand Down Expand Up @@ -294,35 +316,40 @@ export const Timeline = memo<IFullProps>(
}
/>
<VictoryAxis
key={selectedTimelineItem && selectedTimelineItem.id}
tickValues={[1, 2, 3]}
tickFormat={['App', 'Status', 'Log']}
events={axisEvents}
style={axisStyle}
gridComponent={
selectedTimelineItem ? (
<VictoryBrushLine
width={barWidth}
dimension="y"
brushDomain={[
selectedTimelineItem._y,
selectedTimelineItem._y0,
]}
onBrushDomainChange={handleEditBrushDebounced}
brushStyle={{
pointerEvents: 'none',
stroke: '#8363ff',
fill: chartTheme.isDark ? 'green' : 'black',
opacity: ({ active }) => (active ? 0.5 : 0.4),
}}
brushAreaStyle={{
stroke: 'none',
fill: 'transparent',
opacity: 0,
}}
/>
) : (
<LineSegment />
)
<VictoryBrushLine
disable={
!selectedTimelineItem ||
selectedTimelineItem.taskName !==
TrackItemType.LogTrackItem
}
key={selectedTimelineItem && selectedTimelineItem.id}
width={barWidth}
dimension="y"
brushDomain={[
selectedTimelineItem
? selectedTimelineItem.beginDate
: 0,
selectedTimelineItem ? selectedTimelineItem.endDate : 0,
]}
onBrushDomainChange={handleEditBrushDebounced}
brushStyle={{
pointerEvents: 'none',
stroke: '#8363ff',
fill: chartTheme.isDark ? 'green' : 'black',
opacity: ({ active }) => (active ? 0.5 : 0.4),
}}
brushAreaStyle={{
stroke: 'none',
fill: 'transparent',
opacity: 0,
}}
/>
}
/>
</VictoryChart>
Expand Down
7 changes: 5 additions & 2 deletions client/src/components/Timeline/TimelineItemEditContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,12 @@ import { changeColorForApp } from '../../services/appSettings.api';
import { saveTrackItem, deleteByIds, updateTrackItemColor } from '../../services/trackItem.api';
import { TimelineItemEdit } from './TimelineItemEdit';
import { Logger } from '../../logger';
import { useStoreActions, useStoreState } from '../../store/easyPeasy';

export const TimelineItemEditContainer = props => {
const { setSelectedTimelineItem, reloadTimerange } = props;
const { reloadTimerange } = props;
const selectedTimelineItem = useStoreState(state => state.selectedTimelineItem);
const setSelectedTimelineItem = useStoreActions(actions => actions.setSelectedTimelineItem);
const deleteTimelineItem = async trackItem => {
const id = trackItem.id;
Logger.debug('Delete timeline trackItem', id);
Expand Down Expand Up @@ -43,5 +46,5 @@ export const TimelineItemEditContainer = props => {
clearTimelineItem,
saveTimelineItem,
};
return <TimelineItemEdit {...props} {...moreProps} />;
return <TimelineItemEdit selectedTimelineItem={selectedTimelineItem} {...moreProps} />;
};
12 changes: 7 additions & 5 deletions client/src/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom';

import 'typeface-berkshire-swash';
import { MainRouter } from './router';

import { setupFrontendListener } from 'eiphop';
import { AppDataProvider } from './routes/AppDataProvider';
import { StoreProvider } from 'easy-peasy';
import { mainStore } from './store/mainStore';

(window as any).CSPSettings = {
nonce: 'nonce',
Expand All @@ -20,8 +20,10 @@ if (process.env.NODE_ENV !== 'production') {
}

ReactDOM.render(
<AppDataProvider>
<MainRouter />
</AppDataProvider>,
<StoreProvider store={mainStore}>
<AppDataProvider>
<MainRouter />
</AppDataProvider>
</StoreProvider>,
document.getElementById('root') as HTMLElement,
);
1 change: 1 addition & 0 deletions client/src/routes/TimelinePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export function TimelinePage({ location }: any) {
setTimerangeMode,
liveView,
setLiveView,
createNewItem: () => {},
};
const timelineProps = {
timerange,
Expand Down
8 changes: 8 additions & 0 deletions client/src/store/easyPeasy.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { createTypedHooks } from 'easy-peasy';
import { StoreModel } from './mainStore';

const typedHooks = createTypedHooks<StoreModel>();

export const useStoreActions = typedHooks.useStoreActions;
export const useStoreDispatch = typedHooks.useStoreDispatch;
export const useStoreState = typedHooks.useStoreState;
16 changes: 16 additions & 0 deletions client/src/store/mainStore.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { createStore, Action, action } from 'easy-peasy';
import { ITrackItem } from '../@types/ITrackItem';

export interface StoreModel {
selectedTimelineItem: null | ITrackItem;
setSelectedTimelineItem: Action<StoreModel, ITrackItem | null>;
}

const mainStore = createStore<StoreModel>({
selectedTimelineItem: null,
setSelectedTimelineItem: action((state, payload) => {
state.selectedTimelineItem = payload;
}),
});

export { mainStore };
Loading

0 comments on commit ef9df88

Please sign in to comment.