Skip to content

Commit 9c6467e

Browse files
lemke-ethanlemke-ethan
authored
Merge pull request #16 from MFB-Technologies-Inc/8-change-asyncrequeststatus-to-a-type
8 change async request status to a type
2 parents 2798bfc + 551dd93 commit 9c6467e

15 files changed

+391
-285
lines changed

‎.prettierignore

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
/*
2-
* Copyright 2022 MFB Technologies, Inc.
3-
*/
4-
51
#-------------------------------------------------------------------------------------------------------------------
62
# Keep this section in sync with .gitignore
73
#-------------------------------------------------------------------------------------------------------------------

‎.vscode/settings.json

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,65 @@
11
{
2-
"editor.tabSize": 2,
3-
"editor.detectIndentation": true,
4-
"typescript.tsdk": "./node_modules/typescript/lib",
5-
"editor.defaultFormatter": "esbenp.prettier-vscode",
6-
"editor.formatOnSave": true,
7-
"editor.rulers": [100],
8-
"psi-header.templates": [
9-
{
10-
"language": "*",
11-
"template": [" Copyright <<year>> <<company>>"]
12-
}
2+
"editor.tabSize": 2,
3+
"editor.detectIndentation": true,
4+
"typescript.tsdk": "./node_modules/typescript/lib",
5+
"editor.defaultFormatter": "esbenp.prettier-vscode",
6+
"editor.formatOnSave": true,
7+
"editor.rulers": [100],
8+
"psi-header.templates": [
9+
{
10+
"language": "*",
11+
"template": [" Copyright <<year>> <<company>>"]
12+
}
13+
],
14+
"psi-header.config": {
15+
"company": "MFB Technologies, Inc.",
16+
"forceToTop": true,
17+
"blankLinesAfter": 1
18+
},
19+
"psi-header.changes-tracking": {
20+
"isActive": true,
21+
"enforceHeader": true,
22+
"excludeGlob": [
23+
"**/settings.json",
24+
"**/.gitignore",
25+
"**/.env*",
26+
"**/sonar-project.properties",
27+
"**/.github/**/*",
28+
"**/*.yml",
29+
"**/.prettierignore",
30+
"**/Dockerfile"
1331
],
14-
"psi-header.config": {
15-
"company": "MFB Technologies, Inc.",
16-
"forceToTop": true,
17-
"blankLinesAfter": 1
32+
"exclude": ["jsonc", "json", "markdown"]
33+
},
34+
"psi-header.lang-config": [
35+
{
36+
"language": ".js",
37+
"begin": "",
38+
"end": "",
39+
"prefix": "//",
40+
"beforeHeader": ["#!/usr/bin/env node"]
1841
},
19-
"psi-header.changes-tracking": {
20-
"isActive": true,
21-
"enforceHeader": true,
22-
"excludeGlob": [
23-
"**/settings.json",
24-
"**/.gitignore",
25-
"**/.env*",
26-
"**/sonar-project.properties",
27-
"**/.github/**/*",
28-
"**/*.yml",
29-
"**/Dockerfile"
30-
],
31-
"exclude": ["jsonc", "json", "markdown"]
42+
{
43+
"language": ".ts",
44+
"begin": "",
45+
"end": "",
46+
"prefix": "//"
3247
},
33-
"psi-header.lang-config": [
34-
{
35-
"language": ".js",
36-
"begin": "",
37-
"end": "",
38-
"prefix": "//",
39-
"beforeHeader": ["#!/usr/bin/env node"]
40-
},
41-
{
42-
"language": ".ts",
43-
"begin": "",
44-
"end": "",
45-
"prefix": "//"
46-
},
47-
{
48-
"language": ".tsx",
49-
"begin": "",
50-
"end": "",
51-
"prefix": "//"
52-
},
53-
{
54-
"language": ".scss",
55-
"begin": "",
56-
"end": "",
57-
"prefix": "//"
58-
}
59-
],
60-
"search.exclude": {
61-
"**/node_modules": true,
62-
"**/lib": true,
48+
{
49+
"language": ".tsx",
50+
"begin": "",
51+
"end": "",
52+
"prefix": "//"
53+
},
54+
{
55+
"language": ".scss",
56+
"begin": "",
57+
"end": "",
58+
"prefix": "//"
6359
}
60+
],
61+
"search.exclude": {
62+
"**/node_modules": true,
63+
"**/lib": true
6464
}
65-
65+
}

‎DOCKER.md

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
# Docker
22

3-
Run these commands to setup the dev env, which is a copy of the local repo as-is in a volume and a container attached to that volume:
4-
5-
1. `docker build --tag mfbtech-react-async-renderer-dev-env .`
6-
1. `docker run --name mfbtech-react-async-renderer-dev-env -td mfbtech-react-async-renderer-dev-env`
7-
8-
Now attach to the container using vscode and the remote explorer extension.
9-
10-
>
11-
> Deleting the container will delete the volume as well, so make sure you have all of your work pushed before deleting the container.
12-
>
3+
1. Generate an SSH key and add it to GitHub.
4+
1. Clone the repository.
5+
1. Run `eval "$(ssh-agent)"`.
6+
1. Run `ssh-add`.
7+
1. Run `docker build --ssh default --pull -t mfb-async-renderer-dev-env .`.
8+
1. Run `docker create --mount type=bind,src=${HOME}/.ssh,target=/home/vscode/.ssh --name mfb-async-renderer-dev-env-active -h mfb-async-renderer-dev-env -it mfb-async-renderer-dev-env`.
9+
1. Install the "Remote Development" extension pack in VS Code.
10+
1. Navigate to Remote Explorer in the VSCode sidebar.
11+
1. Select Containers from the drop down at the top.
12+
1. Attach to the align-dev-env container.
13+
1. Click Open Folder and open the align-ts folder.

‎Dockerfile

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,38 @@
1-
FROM debian:bullseye-slim AS base-with-deps
1+
/*
2+
* Copyright 2023 MFB Technologies, Inc.
3+
*/
4+
5+
FROM debian:bullseye
26
ARG USERNAME=vscode
3-
RUN apt-get update && apt-get upgrade -y && apt-get install -y curl git sudo
4-
RUN echo '%sudo ALL=(ALL) NOPASSWD:ALL' >> /etc/sudoers \
5-
&& useradd -ms /bin/bash -u 1002 -G sudo $USERNAME
7+
RUN apt-get update
8+
RUN apt-get -y install git fzf ripgrep curl python3 ssh sudo locales gnupg lsb-release libnss3-tools gstreamer1.0-gl gstreamer1.0-plugins-ugly
9+
# set the locale
10+
RUN sed -i '/en_US.UTF-8/s/^# //g' /etc/locale.gen && \
11+
locale-gen
12+
ENV LANG en_US.UTF-8
13+
ENV LANGUAGE en_US:en
14+
ENV LC_ALL en_US.UTF-8
15+
# configure terminal
16+
ENV TERM="xterm-256color"
17+
ADD https://raw.githubusercontent.com/git/git/master/contrib/completion/git-completion.bash .git-completion.bash
18+
ADD https://raw.githubusercontent.com/git/git/master/contrib/completion/git-prompt.sh .git-prompt.sh
19+
COPY docker/bashrc .bashrc
20+
# setup the user for the developer
21+
RUN echo '%sudo ALL=(ALL) NOPASSWD:ALL' >> /etc/sudoers
22+
RUN useradd -ms /bin/bash -u 1002 -G sudo $USERNAME
23+
RUN chown -R $USERNAME /home/$USERNAME
624
WORKDIR /home/$USERNAME
725
USER $USERNAME
26+
# setup ssh
27+
RUN mkdir -p -m 0700 ~/.ssh
28+
RUN ssh-keyscan github.com >> ~/.ssh/known_hosts
829
SHELL ["/bin/bash", "--login", "-c"]
9-
RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash \
10-
&& . ~/.nvm/nvm.sh \
11-
&& nvm install --lts=hydrogen \
12-
&& npm install -g [email protected]
13-
14-
# copy local repo into a volume
15-
FROM base-with-deps AS mfbtech-react-async-renderer-dev-env
16-
RUN mkdir /home/$USERNAME/workspace
17-
COPY --chown=$USERNAME:$USERNAME . /home/$USERNAME/workspace
18-
VOLUME /home/$USERNAME/workspace
30+
# install nvm with a specified version of node
31+
RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash \
32+
&& . ~/.nvm/nvm.sh \
33+
&& nvm install --lts=gallium
34+
# clone repo
35+
RUN --mount=type=ssh,uid=1002 git clone [email protected]:MFB-Technologies-Inc/react-async-renderer /home/$USERNAME/workspace/react-async-renderer
36+
# set working dir
37+
WORKDIR /home/$USERNAME/workspace/react-async-renderer
38+
VOLUME /home/$USERNAME/workspace/react-async-renderer

‎docker/bashrc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
## commands relative to root of current git repository
2+
3+
# navigate to root of repository
4+
alias cdg='cd "$(git rev-parse --show-cdup)"'
5+
6+
# list files at root of repository
7+
alias lsg='ls "$(git rev-parse --show-cdup)"'
8+
9+
# git tab completion
10+
source ~/.git-completion.bash

‎example/src/AsyncRendererExample.tsx

Lines changed: 52 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,77 @@
11
// Copyright 2022 MFB Technologies, Inc.
22

3-
import { AsyncRequestStatus, createAsyncRenderer } from "@mfbtech/react-async-renderer"
3+
import {
4+
AsyncRequestStatus,
5+
AsyncRequestStatusEnum,
6+
createAsyncRenderer
7+
} from "@mfbtech/react-async-renderer"
48
import { useState } from "react"
59
import "./AsyncRendererExample.css"
610

711
export function AsyncRendererExample() {
8-
const [currentAsyncRequestState, setCurrentAsyncRequestState] = useState(AsyncRequestStatus.INIT)
9-
const asyncRequestError = currentAsyncRequestState === AsyncRequestStatus.ERROR ? "some error occurred!" : null
10-
const asyncRequestData = currentAsyncRequestState === AsyncRequestStatus.FULFILLED ? { data: "my data" } : null
12+
const [currentAsyncRequestState, setCurrentAsyncRequestState] =
13+
useState<AsyncRequestStatus>(AsyncRequestStatusEnum.INIT)
14+
const asyncRequestError =
15+
currentAsyncRequestState === AsyncRequestStatusEnum.ERROR
16+
? "some error occurred!"
17+
: null
18+
const asyncRequestData =
19+
currentAsyncRequestState === AsyncRequestStatusEnum.FULFILLED
20+
? { data: "my data" }
21+
: null
1122
const renderer = createAsyncRenderer({
1223
status: currentAsyncRequestState,
1324
error: asyncRequestError,
14-
onCompletedSuccessfullyArgs: asyncRequestData,
25+
onCompletedSuccessfullyArgs: asyncRequestData
1526
})
1627

1728
return (
1829
<div className="async-renderer-example">
1930
<h2>Async renderer example</h2>
2031
<div>
21-
<label htmlFor="asyncRequestStatus">Status of the long running process:</label>
32+
<label htmlFor="asyncRequestStatus">
33+
Status of the long running process:
34+
</label>
2235
<select
2336
value={currentAsyncRequestState}
24-
onChange={(e) => {
25-
setCurrentAsyncRequestState(e.currentTarget.value as AsyncRequestStatus)
37+
onChange={e => {
38+
setCurrentAsyncRequestState(
39+
e.currentTarget.value as AsyncRequestStatus
40+
)
2641
}}
27-
id="asyncRequestStatus">
28-
{
29-
Object.entries(AsyncRequestStatus).map(([name, value]) => {
30-
return (
31-
<option key={value} value={value}>{name}</option>
32-
)
33-
})
34-
}
42+
id="asyncRequestStatus"
43+
>
44+
{Object.entries(AsyncRequestStatusEnum).map(([name, value]) => {
45+
return (
46+
<option key={value} value={value}>
47+
{name}
48+
</option>
49+
)
50+
})}
3551
</select>
3652
</div>
3753
<div>
38-
{renderer((args) => {
39-
return (
40-
<p className='renderer-result success'>{args.data}</p>
41-
)
42-
},
54+
{renderer(
55+
args => {
56+
return <p className="renderer-result success">{args.data}</p>
57+
},
4358
{
44-
onInit: () => (<p className='renderer-result info'>Waiting for long running process to start...</p>),
45-
onLoading: () => (<p className='renderer-result loading'>custom spinner...</p>),
46-
onCompletedWithError: (props) => (<p className='renderer-result error'>{props.errorMessage ?? "error"}</p>)
47-
})}
59+
onInit: () => (
60+
<p className="renderer-result info">
61+
Waiting for long running process to start...
62+
</p>
63+
),
64+
onLoading: () => (
65+
<p className="renderer-result loading">custom spinner...</p>
66+
),
67+
onCompletedWithError: props => (
68+
<p className="renderer-result error">
69+
{props.errorMessage ?? "error"}
70+
</p>
71+
)
72+
}
73+
)}
4874
</div>
4975
</div>
5076
)
51-
}
77+
}

0 commit comments

Comments
 (0)