Skip to content

Devtools optimizations and dev #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 23, 2022
Merged

Devtools optimizations and dev #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
31ad326
[devtools] fix data.subscriptions is undefined when applying partial …
incepter Nov 19, 2022
04e7a73
make devtools resizable vertically
incepter Nov 19, 2022
1f7891c
Ref[replace-antd-with-tailwind]: remove antdesign and use normal sty……
IbrahimBzd Nov 23, 2022
caa7d89
publish devtools alpha 5
incepter Nov 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 9 additions & 8 deletions packages/devtools-extension/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"name": "async-states-devtools",
"type": "module",
"version": "0.0.1-alpha-1",
"sideEffects": false,
"types": "dist/index",
"module": "dist/index.js",
"main": "dist/index.umd.cjs",
"version": "0.0.1-alpha-5",
"main": "dist/index.umd.js",
"name": "async-states-devtools",
"module": "dist/index.development.mjs",
"files": [
"README.MD",
"dist"
Expand All @@ -13,10 +13,9 @@
"dev": "vite",
"preview": "vite preview",
"build:ext": "tsc && vite build --config vite.config.ts",
"build:lib": "tsc && vite build --config vite.config.lib.ts"
"build:lib": "tsc && vite build --config vite.config.lib.dev.ts && vite build --config vite.config.lib.prod.ts"
},
"dependencies": {
"antd": "^4.24.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-json-view": "^1.21.3",
Expand All @@ -26,6 +25,7 @@
"react-async-states": ">=1.0.0-rc-8"
},
"devDependencies": {
"@rollup/plugin-replace": "^5.0.1",
"@types/node": "^18.11.9",
"@types/react": "^18.0.24",
"@types/react-dom": "^18.0.8",
Expand All @@ -34,6 +34,7 @@
"typescript": "^4.6.4",
"vite": "^3.2.3",
"vite-plugin-dts": "^1.7.1",
"vite-plugin-imp": "^2.3.1"
"vite-plugin-imp": "^2.3.1",
"vite-plugin-replace": "^0.1.1"
}
}
110 changes: 70 additions & 40 deletions packages/devtools-extension/src/DevtoolsView/CurrentJournalDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,38 @@
import * as React from "react";
import Select from "antd/lib/select";
import ReactJson from "react-json-view";
import Button from "antd/lib/button";
import Layout from "antd/lib/layout";
import {useSource, useSourceLane,} from "react-async-states";
import {DevtoolsJournalEvent} from "react-async-states/dist/devtools";
import {currentJournal, journalSource} from "./sources";
import {addFormattedDate} from "./utils";

const {Content, Sider} = Layout;

const CurrentJournalDisplay = React.memo(function Journal({lane}: { lane: string }) {

return (
<Layout className='main-bg' style={{
height: '100%',
padding: 0
}}>
<Sider style={{
<div className='main-bg'
style={{
display: 'flex',
flexDirection: 'row',
height: '100%',
padding: 0
}}>
<div style={{
width: 250,
minWidth: 250,
padding: 8,
overflow: 'auto',
// height: 'calc(100vh - 40px)',
borderRight: '1px dashed #C3C3C3',
}} className='main-bg scroll-y-auto' width={250}>
}} className='main-bg scroll-y-auto'>
<div className='main-color' style={{height: '100%'}}>
<JournalView lane={lane}/>
</div>
</Sider>
<Content className='main-bg main-color scroll-y-auto'
style={{height: '100%', overflowY: 'auto'}}>
</div>
<div className='main-bg main-color scroll-y-auto'
style={{height: '100%', overflowY: 'auto', width: '100%'}}>
<CurrentJson/>
</Content>
</Layout>);
</div>
</div>);
});

const JOURNAL_EVENT_TYPES_FILTER_OPTIONS = Object.values(DevtoolsJournalEvent).map(t => ({
label: t, value: t
}));
const initialSelectedEvents = [
DevtoolsJournalEvent.creation,
DevtoolsJournalEvent.update,
Expand Down Expand Up @@ -70,37 +66,71 @@ function JournalView({lane}) {
}
}, [lane]);

// handel select or unselect selectType
function handleSelectChange(e: React.ChangeEvent<HTMLSelectElement>) {
const value: DevtoolsJournalEvent = e.target.value as DevtoolsJournalEvent;
if (selectedTypes.find((option: DevtoolsJournalEvent) => option === value) === undefined) {
return setSelectedTypes([...selectedTypes, value])
} else {
return setSelectedTypes(selectedTypes.filter((option: DevtoolsJournalEvent) => option !== value))
}
}

return (
<div>
<span>Available: ({allLogs.length}), shown: ({filteredData.length})</span>
<div style={{display: "flex"}}>
<Button type="link" size="small" shape="round"
className="default-button"
onClick={() => setSelectedTypes([])}>Clear all</Button>
<Button type="link" size="small" shape="round"
className="default-button"
style={{marginLeft: 8}}
<button className="default-button"
onClick={() => setSelectedTypes([])}
style={{
backgroundColor: 'transparent',
border: "none",
color: '#00aaff',
cursor: "pointer"
}}>Clear all
</button>
<button className="default-button"
style={{
backgroundColor: 'transparent',
border: "none",
color: '#00aaff',
marginLeft: 8,
cursor: "pointer"
}}
onClick={() => setSelectedTypes(Object.values(DevtoolsJournalEvent))}
>
Select all
</Button>
</button>
</div>
<Select
mode="multiple"
<select
multiple
value={selectedTypes}
style={{width: '100%', marginTop: 8}}
onChange={setSelectedTypes}
defaultValue={selectedTypes}
options={JOURNAL_EVENT_TYPES_FILTER_OPTIONS}
/>
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => handleSelectChange(e)}
style={{
color: '#000',
width: '100%',
marginTop: 8,
background: 'white',
borderRadius: 5,
outline: "none"
}}>
{Object.values(DevtoolsJournalEvent)?.map((t: string) => (
<option key={t} value={t}>{t}</option>))}
</select>
<ul style={{marginTop: 8}}>
{filteredData.map((entry, id) => (
{filteredData.map((entry) => (
<li
className="w-full"
key={id}>
<Button
type={json.data?.eventId === entry.eventId ? "primary" : "link"}
size="small" shape="round" className="default-button"
key={entry?.eventId}>
<button
style={{
borderRadius: 100,
backgroundColor: json.data?.eventId === entry.eventId ? '#0059ff' : 'transparent',
color: json.data?.eventId === entry.eventId ? 'white' : '#00bbff',
padding: '3px 10px',
border: "none"
}}
className="default-button"
onClick={() => {
currentJournal.setState({
data: formJournalEventJson(entry),
Expand All @@ -110,7 +140,7 @@ function JournalView({lane}) {
});
}}>
{`› ${entry.eventType}`}
</Button>
</button>
</li>
))}
</ul>
Expand Down
Loading