Skip to content

Commit 07f0be8

Browse files
LorezzLorezz
committed
feat: refactoring components ad style
1 parent 4c9f364 commit 07f0be8

10 files changed

Lines changed: 194 additions & 194 deletions

File tree

‎src/app/App.tsx‎

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,21 @@ import { NotificationManager } from "design-react-kit";
99
import "bootstrap-italia/dist/css/bootstrap-italia.min.css";
1010
import "react-widgets/styles.css";
1111
import "../assets/main.css";
12+
import WarningBox, { Warning } from "./components/WarningBox";
13+
import PublicCode, {
14+
PublicCodeWithDeprecatedFields,
15+
} from "./contents/publiccode";
16+
import { getYaml } from "./lib/utils";
17+
import YamlPreview from "./components/YamlPreview";
1218

1319
const NOTIFICATION_TIMEOUT = 4_000;
1420
export const App = () => {
1521
const [isLoading] = useState(false);
22+
const [isPublicCodeImported, setPublicCodeImported] = useState(false);
23+
const [warnings, setWarnings] = useState<Warning[]>([]);
24+
const [data, setData] = useState<
25+
PublicCode | PublicCodeWithDeprecatedFields
26+
>();
1627
const { t } = useTranslation();
1728

1829
return (
@@ -25,7 +36,7 @@ export const App = () => {
2536
className='spinner-grow text-primary'
2637
role='status'
2738
aria-hidden='true'
28-
></div>
39+
/>
2940
</div>
3041
</div>
3142
)}
@@ -37,12 +48,43 @@ export const App = () => {
3748
closeOnClick={false}
3849
style={{ zIndex: 10 }}
3950
/>
40-
<Head />
51+
{/* <YamlModal
52+
yaml={getYaml(data)}
53+
display={isYamlModalVisible}
54+
toggle={() => setYamlModalVisibility(!isYamlModalVisible)}
55+
/>
56+
<WarningModal
57+
display={isWarningModalVisible}
58+
toggle={() => setWarningModalVisibility(!isWarningModalVisible)}
59+
warnings={warnings}
60+
setWarnings={setWarnings}
61+
/> */}
62+
<div>
63+
<Head />
64+
</div>
4165
<div className='content'>
4266
<div className='content__main'>
43-
<Editor />
67+
<Editor
68+
setData={(d) => setData(d)}
69+
setWarnings={setWarnings}
70+
setPublicCodeImported={setPublicCodeImported}
71+
isPublicCodeImported={isPublicCodeImported}
72+
/>
73+
</div>
74+
<div className='content__sidebar'>
75+
{warnings && (
76+
<WarningBox
77+
warnings={warnings}
78+
setWarnings={(items) => setWarnings(items as Warning[])}
79+
/>
80+
)}
81+
{data && (
82+
<YamlPreview
83+
yaml={getYaml(data as PublicCode) as string}
84+
toggle={() => console.log("toggle")}
85+
/>
86+
)}
4487
</div>
45-
<div className='content__sidebar'>sidebar</div>
4688
</div>
4789
</div>
4890
</Layout>

‎src/app/components/Editor.tsx‎

Lines changed: 45 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Icon, notify } from "design-react-kit";
1+
import { notify } from "design-react-kit";
22
import { set } from "lodash";
33
import { useCallback, useEffect, useState } from "react";
44
import {
@@ -11,7 +11,6 @@ import {
1111
import useFormPersist from "react-hook-form-persist";
1212
import { useTranslation } from "react-i18next";
1313
import { RequiredDeep } from "type-fest";
14-
1514
import licenses from "../../generated/licenses.json";
1615
import { allLangs } from "../../i18n";
1716
import categories from "../contents/categories";
@@ -31,7 +30,6 @@ import softwareTypes from "../contents/softwareTypes";
3130
import fileImporter from "../importers/file.importer";
3231
import importFromGitlab from "../importers/gitlab.importer";
3332
import importStandard from "../importers/standard.importer";
34-
import linter from "../linter";
3533
import publicCodeAdapter from "../publiccode-adapter";
3634
import { isMinorThanLatest, toSemVerObject } from "../semver";
3735
import { useAppDispatch, useAppSelector } from "../store";
@@ -54,23 +52,28 @@ import EditorScreenshots from "./EditorScreenshots";
5452
import EditorSelect from "./EditorSelect";
5553
import EditorUsedBy from "./EditorUsedBy";
5654
import EditorVideos from "./EditorVideos";
57-
import { Footer } from "./Foot";
58-
59-
import InfoBox from "./InfoBox";
55+
import EditorToolbar from "./EditorToolbar";
6056
import PubliccodeYmlLanguages from "./PubliccodeYmlLanguages";
61-
import { WarningModal } from "./WarningModal";
62-
import { YamlModal } from "./YamlModal";
57+
import { Warning } from "./WarningBox";
6358

64-
const PUBLIC_CODE_EDITOR_WARNINGS = "PUBLIC_CODE_EDITOR_WARNINGS";
59+
const validatorFn = async (values: PublicCode) => {
60+
try {
61+
const results = await validator({
62+
publiccode: JSON.stringify(values),
63+
baseURL: values.url,
64+
});
6565

66-
const validatorFn = async (values: PublicCode) =>
67-
await validator({ publiccode: JSON.stringify(values), baseURL: values.url });
66+
return results;
67+
} catch (error) {
68+
console.log("error validating");
69+
}
70+
};
6871

6972
const checkWarnings = async (values: PublicCode) => {
7073
const res = await validatorFn(values);
7174
const warnings = new Map<string, { type: string; message: string }>();
7275

73-
for (const { key, description } of res.warnings) {
76+
for (const { key, description } of res?.warnings || []) {
7477
warnings.set(key, {
7578
type: "warning",
7679
message: description,
@@ -84,17 +87,20 @@ const resolver: Resolver<PublicCode | PublicCodeWithDeprecatedFields> = async (
8487
values
8588
) => {
8689
console.log(values);
90+
91+
// return { values, errors: {} }; //@TODO REMOVE: USED TO IGNORE VALIDATIONS
92+
8793
const res = await validatorFn(values as PublicCode);
8894

89-
if (res.errors.length === 0)
95+
if (res?.errors.length === 0)
9096
return {
9197
values,
9298
errors: {},
9399
};
94100

95101
const errors: Record<string, { type: string; message: string }> = {};
96102

97-
for (const { key, description } of res.errors) {
103+
for (const { key, description } of res?.errors || []) {
98104
set(errors, key, {
99105
type: "error",
100106
message: description,
@@ -115,7 +121,19 @@ const defaultValues = {
115121
it: defaultItaly,
116122
};
117123

118-
export default function Editor() {
124+
type EditorProps = {
125+
setData: (data: PublicCode) => void;
126+
setWarnings: (items: Warning[]) => void;
127+
isPublicCodeImported: boolean;
128+
setPublicCodeImported: (value: boolean) => void;
129+
};
130+
131+
export default function Editor({
132+
setData,
133+
setWarnings,
134+
isPublicCodeImported,
135+
setPublicCodeImported,
136+
}: EditorProps) {
119137
//#region Common
120138
const dispatch = useAppDispatch();
121139
//#endregion
@@ -126,24 +144,6 @@ export default function Editor() {
126144
const configCountrySections = countrySection.parse(DEFAULT_COUNTRY_SECTIONS);
127145
const [currentPublicodeYmlVersion, setCurrentPubliccodeYmlVersion] =
128146
useState("");
129-
const [isYamlModalVisible, setYamlModalVisibility] = useState(false);
130-
const [isPublicCodeImported, setPublicCodeImported] = useState(false);
131-
const [isWarningModalVisible, setWarningModalVisibility] = useState(false);
132-
const [warnings, setWarnings] = useState<{ key: string; message: string }[]>(
133-
[]
134-
);
135-
136-
useEffect(() => {
137-
const warnings = localStorage.getItem(PUBLIC_CODE_EDITOR_WARNINGS);
138-
139-
if (warnings) {
140-
setWarnings(JSON.parse(warnings));
141-
}
142-
}, []);
143-
144-
useEffect(() => {
145-
localStorage.setItem(PUBLIC_CODE_EDITOR_WARNINGS, JSON.stringify(warnings));
146-
}, [warnings]);
147147

148148
const getNestedValue = (
149149
obj: PublicCodeWithDeprecatedFields,
@@ -159,17 +159,13 @@ export default function Editor() {
159159

160160
const isDeprecatedFieldVisible = (fieldName: PublicCodeDeprecatedField) => {
161161
const values = getValues() as PublicCodeWithDeprecatedFields;
162-
163162
if (!values) {
164163
return false;
165164
}
166-
167165
const fieldValue = getNestedValue(values, fieldName); //values[fieldName]
168-
169166
if (fieldValue === null || fieldValue === undefined) {
170167
return false;
171168
}
172-
173169
return true;
174170
};
175171
const isContractorsVisible = () => {
@@ -258,8 +254,12 @@ export default function Editor() {
258254

259255
//#region form action handlers
260256
const submitHandler = handleSubmit(
261-
async () => {
262-
setYamlModalVisibility(true);
257+
async (data) => {
258+
console.log("handleSubmit", data);
259+
//todo change to values
260+
if (data) {
261+
setData(data as PublicCode);
262+
}
263263
},
264264
(e: FieldErrors<PublicCode>) => {
265265
notify(
@@ -352,7 +352,7 @@ export default function Editor() {
352352

353353
return (
354354
<div className='container'>
355-
{!!warnings.length && (
355+
{/* {!!warnings.length && (
356356
<div className='p-2 bd-highlight'>
357357
<Icon
358358
icon='it-warning-circle'
@@ -362,7 +362,7 @@ export default function Editor() {
362362
/>
363363
&nbsp;
364364
</div>
365-
)}
365+
)} */}
366366

367367
<FormProvider {...methods}>
368368
<form>
@@ -594,7 +594,9 @@ export default function Editor() {
594594
<hr />
595595
{countrySection.isVisible(configCountrySections, "italy") && (
596596
<div>
597-
<h2>{t("countrySpecificSection.italy")}</h2>
597+
<div>
598+
<h4>{t("countrySpecificSection.italy")}</h4>
599+
</div>
598600
<span>
599601
<EditorInput<"name"> fieldName='name' required />
600602
</span>
@@ -605,9 +607,8 @@ export default function Editor() {
605607
)}
606608
</form>
607609
</FormProvider>
608-
<Footer
610+
<EditorToolbar
609611
reset={() => resetFormHandler()}
610-
submit={() => undefined}
611612
loadRemoteYaml={(url) => loadRemoteYamlHandler(url)}
612613
loadFileYaml={(file) => loadFileYamlHandler(file)}
613614
trigger={() => submitHandler()}

src/app/components/Foot.tsx renamed to src/app/components/EditorToolbar.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { ResetFormConfirm } from "./ResetFormConfirm";
88
import UploadModal from "./UploadModal";
99

1010
interface Props {
11-
submit: () => void;
1211
loadRemoteYaml: (url: string) => void;
1312
loadFileYaml: (file: File) => void;
1413
trigger: () => void;
@@ -17,7 +16,7 @@ interface Props {
1716
yamlLoaded: boolean;
1817
}
1918

20-
export const Footer = (props: Props): JSX.Element => {
19+
const EditorToolbar = (props: Props): JSX.Element => {
2120
const { t } = useTranslation();
2221
const [uploadOpen, setUploadOpen] = useState(false);
2322
const [isModalVisible, setModalVisibility] = useState(false);
@@ -135,3 +134,5 @@ export const Footer = (props: Props): JSX.Element => {
135134
</div>
136135
);
137136
};
137+
138+
export default EditorToolbar;

‎src/app/components/WarningBox.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { Icon } from "design-react-kit";
2+
import { useTranslation } from "react-i18next";
3+
import { useEffect } from "react";
4+
const PUBLIC_CODE_EDITOR_WARNINGS = "PUBLIC_CODE_EDITOR_WARNINGS";
5+
6+
export type Warning = {
7+
key: string;
8+
message: string;
9+
};
10+
11+
type WarningBoxProps = {
12+
warnings: Warning[];
13+
setWarnings: (data: unknown) => void;
14+
};
15+
16+
const WarningBox = (props: WarningBoxProps): JSX.Element => {
17+
const { t } = useTranslation();
18+
const { warnings, setWarnings } = props;
19+
useEffect(() => {
20+
const warnings = localStorage.getItem(PUBLIC_CODE_EDITOR_WARNINGS);
21+
if (warnings) {
22+
setWarnings(JSON.parse(warnings));
23+
}
24+
}, []);
25+
26+
useEffect(() => {
27+
localStorage.setItem(PUBLIC_CODE_EDITOR_WARNINGS, JSON.stringify(warnings));
28+
}, [warnings]);
29+
30+
return (
31+
<div>
32+
<h3>
33+
<Icon
34+
icon='it-warning-circle'
35+
color='warning'
36+
title={t("editor.warnings")}
37+
/>
38+
&nbsp;{t("editor.warnings")}
39+
</h3>
40+
<div className='it-list-wrapper'>
41+
{warnings.length ? (
42+
<ul className='it-list'>
43+
<li>
44+
{warnings.map(({ key, message }) => (
45+
<li key={key}>
46+
<div className='list-item'>
47+
<div className='it-right-zone'>
48+
<div>
49+
<h4 className='text m-0'>{key}</h4>
50+
<p className='small m-0'>{message}</p>
51+
</div>
52+
</div>
53+
</div>
54+
</li>
55+
))}
56+
</li>
57+
</ul>
58+
) : (
59+
<p>Non ci sono warning</p>
60+
)}
61+
</div>
62+
</div>
63+
);
64+
};
65+
66+
export default WarningBox;

0 commit comments

Comments
 (0)