Skip to content

Commit 2fac0f6

Browse files
davidwoolfdavidwoolf
committed
data persistence!
1 parent 9469de4 commit 2fac0f6

File tree

15 files changed

+689
-218
lines changed

15 files changed

+689
-218
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,5 @@ node_modules
44
/build
55
/public/build
66
.env
7+
8+
/prisma/dev.db

‎app/components/Button/Button.tsx

+3-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
interface Button extends React.ComponentPropsWithoutRef<"button"> {
2-
className? : string,
3-
icon?: any,
4-
label: string;
5-
size?: 'normal' | 'small',
6-
variant?: 'normal' | 'simple' | 'highlight',
7-
}
8-
export const Button = (props: Button) => {
1+
import {ButtonInterface} from '~/config/interface/Button'
2+
3+
export const Button = (props: ButtonInterface) => {
94
const {
105
className = '',
116
icon = undefined,

‎app/components/Fields/Button/Button.tsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1+
import {ButtonInterface} from '~/config/interface/Button'
2+
13
import {Button} from '~/components/Button/Button'
24

3-
export const FieldButton = ({
4-
className,
5-
label,
6-
}: {className?: string, label: string}) => (
5+
export const FieldButton = (props: ButtonInterface) => (
76
<Button
8-
className={className}
97
type="submit"
10-
label={label} />
8+
{...props} />
119
)

‎app/components/Fields/Input/Input.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
interface Input {
1+
interface Input extends React.ComponentPropsWithoutRef<"input"> {
22
label: string;
3-
type?: string;
43
placeholder?: string | undefined;
54
description?: string | undefined;
65
}
76

87
export const Input = ({
8+
name,
99
label,
1010
type = 'text',
1111
placeholder = undefined,
@@ -43,7 +43,8 @@ export const Input = ({
4343
focus:outline-none
4444
"
4545
placeholder={placeholder}
46-
type={type} />
46+
type={type}
47+
name={name} />
4748

4849
{description &&
4950
<span

‎app/components/GuideStep/GuideStep.tsx

+66-31
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,83 @@
1+
import {
2+
Form,
3+
} from 'remix'
4+
5+
import Fields from '~/components/Fields'
6+
17
interface GuideStep {
28
step: string;
39
title: string;
410
description: string;
11+
previous?: number | undefined;
512
}
613

714
export const GuideStep = ({
815
step,
916
title,
1017
description,
18+
previous = undefined,
1119
}: GuideStep) => (
12-
<div>
13-
<h2
14-
className="
15-
font-semibold
16-
text-lg
17-
">
18-
Step {step}:&nbsp;
19-
20-
<em
20+
<div
21+
className="
22+
flex
23+
items-center
24+
justify-between
25+
">
26+
<div
27+
className={`
28+
${previous !== undefined ? 'opacity-40' : ''}
29+
`}>
30+
<h2
2131
className="
32+
font-semibold
33+
text-lg
34+
">
35+
Step {step}:&nbsp;
2236

23-
not-italic
24-
relative
37+
<em
38+
className={`
39+
not-italic
40+
relative
2541
26-
after:absolute
27-
after:border-b
28-
after:border-blue-400
29-
after:-bottom-1
30-
after:left-0
31-
after:w-full
32-
">
33-
{title}
34-
</em>
35-
</h2>
42+
after:absolute
43+
after:border-b
44+
after:border-blue-400
45+
after:-bottom-1
46+
after:left-0
47+
after:w-full
3648
37-
<p
38-
className="
39-
leading-tight
40-
pt-3
41-
max-w-xs
42-
text-body
43-
text-black-300
44-
">
45-
{description}
46-
</p>
49+
${previous !== undefined ? 'after:hidden' : ''}
50+
`}>
51+
{title}
52+
</em>
53+
</h2>
54+
55+
{previous === undefined &&
56+
<p
57+
className="
58+
leading-tight
59+
pt-3
60+
max-w-xs
61+
text-body
62+
text-black-300
63+
">
64+
{description}
65+
</p>
66+
}
67+
</div>
68+
69+
{previous !== undefined &&
70+
<>
71+
<input type="hidden" name="step_to_review" value={previous} />
72+
73+
<Fields.Button
74+
label="review this step"
75+
size="small"
76+
variant="highlight"
77+
name="_action"
78+
value="review_previous_step">
79+
</Fields.Button>
80+
</>
81+
}
4782
</div>
4883
)

‎app/config/interface/Button.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export interface ButtonInterface extends React.ComponentPropsWithoutRef<"button"> {
2+
className? : string,
3+
icon?: any,
4+
label: string;
5+
size?: 'normal' | 'small',
6+
variant?: 'normal' | 'simple' | 'highlight',
7+
}

‎app/routes/dashboard/guides.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,12 @@ export default function GuidesWrapper() {
3535
<Button
3636
icon={
3737
<svg
38-
className="fill-current"
3938
width="18"
4039
height="14"
4140
viewBox="0 0 18 14">
4241
<path
4342
d="M4.44922 12.8281C4.75977 12.8281 4.9707 12.7227 5.3457 12.3945L7.30859 10.6309C7.73047 11.0938 8.36914 11.3457 9.18359 11.3457H11.2051L13.1621 13.0215C13.5195 13.3262 13.7129 13.4844 13.9941 13.4844C14.3984 13.4844 14.627 13.1973 14.627 12.752V11.3457H14.873C16.3438 11.3457 17.3223 10.4551 17.3223 8.92578V5.46289C17.3223 3.92773 16.3438 3.03711 14.873 3.03711H13.9531V2.5918C13.9531 1.00391 13.0098 0.078125 11.416 0.078125H3.03125C1.50195 0.078125 0.494141 1.00391 0.494141 2.5918V7.98828C0.494141 9.58203 1.50195 10.502 3.03125 10.502H3.80469V12.1074C3.80469 12.5586 4.0332 12.8281 4.44922 12.8281ZM4.68945 10.1094C4.68945 9.77539 4.49023 9.62305 4.23242 9.62305H3.08984C2.05273 9.62305 1.4375 9.05469 1.4375 7.96484V2.62695C1.4375 1.53711 2.05273 0.962891 3.08984 0.962891H11.3574C12.3945 0.962891 13.0098 1.53711 13.0098 2.62695V3.03711H9.18359C7.64844 3.03711 6.74023 3.92773 6.74023 5.46289V8.92578C6.74023 9.24219 6.77539 9.5293 6.85156 9.78711L4.68945 11.7852V10.1094ZM13.748 12.4238L11.8672 10.7363C11.6328 10.5312 11.4922 10.4609 11.1699 10.4609H9.24219C8.26367 10.4609 7.67773 9.93359 7.67773 8.89648L7.68359 5.49219C7.68359 4.46094 8.26367 3.92188 9.24219 3.92188H14.8203C15.793 3.92188 16.3789 4.46094 16.3789 5.49219V8.89648C16.3789 9.93359 15.793 10.4609 14.8203 10.4609H14.1992C13.9473 10.4609 13.748 10.6133 13.748 10.9414V12.4238Z"
44-
/>
43+
className="fill-black-300" />
4544
</svg>
4645
}
4746
label="Support"

‎app/routes/dashboard/guides/index.tsx

+120-28
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,137 @@
1+
import {
2+
Link,
3+
useLoaderData,
4+
} from 'remix'
5+
6+
import { db } from '~/utils/db.server'
7+
8+
export const loader = async () => {
9+
const data = {
10+
guides: await db.guide.findMany()
11+
}
12+
13+
return data
14+
}
15+
116
export default function Guides() {
17+
const data = useLoaderData()
18+
219
return (
320
<div
421
className="
522
flex
623
items-center
724
justify-center
825
h-full
26+
px-8
27+
py-16
928
">
10-
<div
11-
className="
12-
flex
13-
flex-col
14-
items-stretch
15-
">
16-
<p
29+
{data.guides.length > 0 &&
30+
<div
1731
className="
18-
text-body
19-
text-black-300
32+
w-full
2033
">
21-
You haven’t created any guides yet
22-
</p>
34+
{
35+
data.guides.map((guide: any) =>
36+
<div
37+
className="
38+
border-b
39+
border-black-100
40+
mb-9
41+
pb-8
42+
flex
43+
items-center
44+
">
45+
<div>
46+
<h2
47+
className="
48+
font-medium
49+
text-lg
50+
">
51+
{guide.name}
52+
</h2>
2353

24-
<button
25-
className="
26-
appearance-none
27-
bg-blue-400
28-
font-medium
29-
h-10
30-
mt-4
31-
text-md
32-
relative
33-
rounded-md
34-
text-white
35-
transition-all
36-
w-full
54+
<span
55+
className="
56+
opacity-70
57+
text-md
58+
">
59+
{guide.url}
60+
</span>
61+
</div>
62+
</div>
63+
)
64+
}
65+
66+
<Link
67+
to="new"
68+
prefetch="intent"
69+
className="
70+
appearance-none
71+
bg-blue-400
72+
flex
73+
font-medium
74+
h-10
75+
items-center
76+
justify-center
77+
mt-4
78+
text-md
79+
relative
80+
rounded-md
81+
text-center
82+
text-white
83+
transition-all
84+
w-32
85+
86+
hover:bg-blue-600
87+
">
88+
New guide
89+
</Link>
90+
</div>
91+
}
3792

38-
hover:bg-blue-600
93+
{data.guides.length === 0 &&
94+
<div
95+
className="
96+
flex
97+
flex-col
98+
items-stretch
3999
">
40-
Create your first guide
41-
</button>
42-
</div>
100+
101+
<p
102+
className="
103+
text-body
104+
text-black-300
105+
">
106+
You haven&rsquo;t created any guides yet
107+
</p>
108+
109+
<Link
110+
to="new"
111+
prefetch="intent"
112+
className="
113+
appearance-none
114+
bg-blue-400
115+
flex
116+
font-medium
117+
h-10
118+
items-center
119+
justify-center
120+
mt-4
121+
text-md
122+
relative
123+
rounded-md
124+
text-center
125+
text-white
126+
transition-all
127+
w-full
128+
129+
hover:bg-blue-600
130+
">
131+
Create your first guide
132+
</Link>
133+
</div>
134+
}
43135
</div>
44136
)
45137
}

0 commit comments

Comments
 (0)