diff --git a/.eslintrc.json b/.eslintrc.json index bc84d80..64a510a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -8,7 +8,7 @@ "rules": { // I suggest you add those two rules: "@typescript-eslint/no-unused-vars": "warn", - "@typescript-eslint/no-explicit-any": "error", + "@typescript-eslint/no-explicit-any": "warn", // semicolons are required "semi": ["error", "always"] } diff --git a/src/components/home/AppShell.tsx b/src/components/home/AppShell.tsx index 5454fb9..a4eac7f 100644 --- a/src/components/home/AppShell.tsx +++ b/src/components/home/AppShell.tsx @@ -139,10 +139,10 @@ export default function AppShell(props: AppShellProps) { user={props.user} errorMessage={`No form found for ${formId}`} /> - ) + ); } - setActiveForm(selectedForm) - setMode(formDetailAppMode) + setActiveForm(selectedForm); + setMode(formDetailAppMode); }} /> ); diff --git a/src/components/home/modes/DashboardMode.tsx b/src/components/home/modes/DashboardMode.tsx index edd8b98..60c30cd 100644 --- a/src/components/home/modes/DashboardMode.tsx +++ b/src/components/home/modes/DashboardMode.tsx @@ -10,9 +10,9 @@ type DashboardModeProps = { }; const openInNewTab = (url: string) => { - const newWindow = window.open(url, '_blank', 'noopener,noreferrer') - if (newWindow) newWindow.opener = null -} + const newWindow = window.open(url, '_blank', 'noopener,noreferrer'); + if (newWindow) newWindow.opener = null; +}; export default function DashboardMode(props: DashboardModeProps) { if (props.forms.length === 0) { @@ -73,7 +73,12 @@ export default function DashboardMode(props: DashboardModeProps) { View responses {f.is_open ? ( - ) : null} diff --git a/src/components/home/modes/FormDetailMode.tsx b/src/components/home/modes/FormDetailMode.tsx index ad2d204..f09ab52 100644 --- a/src/components/home/modes/FormDetailMode.tsx +++ b/src/components/home/modes/FormDetailMode.tsx @@ -11,7 +11,9 @@ export default function FormDetailMode(props: FormDetailModeProps) { const badgeColor = props.form.is_open ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'; - const camelCaseTitle = props.form.name.charAt(0).toUpperCase() + props.form.name.slice(1, props.form.name.length); + const camelCaseTitle = + props.form.name.charAt(0).toUpperCase() + + props.form.name.slice(1, props.form.name.length); return ( <>
@@ -32,7 +34,9 @@ export default function FormDetailMode(props: FormDetailModeProps) {
response.results as Array>)} + data={props.responses.map( + (response) => response.results as Array> + )} /> ); diff --git a/src/components/home/modes/ResponsesTable.tsx b/src/components/home/modes/ResponsesTable.tsx index d2e4cc6..8f4d222 100644 --- a/src/components/home/modes/ResponsesTable.tsx +++ b/src/components/home/modes/ResponsesTable.tsx @@ -1,43 +1,47 @@ - interface Props { - data: Array>; + data: Array>; } - + const ResponsesTable: React.FC = ({ data }) => { - if (!data || data.length === 0) return
No data available.
; - - // Assuming all lists have a similar structure, so we'll use the first list's first item for headers - const sampleItem = data[0]; - if (!sampleItem) return
{`${data.length} responses collected but all are empty`}
; - - const headers = Object.keys(sampleItem); - - return ( -
- {data.map((list, listIndex) => ( -
- - - - {headers.map(header => ( - + if (!data || data.length === 0) return
No data available.
; + + // Assuming all lists have a similar structure, so we'll use the first list's first item for headers + const sampleItem = data[0]; + if (!sampleItem) + return
{`${data.length} responses collected but all are empty`}
; + + const headers = Object.keys(sampleItem); + + return ( +
+ {data.map((list, listIndex) => ( +
+
{header}
+ + + {headers.map((header) => ( + + ))} + + + + {data.map((row, rowIndex) => ( + + {headers.map((header) => ( + ))} - - - {data.map((row, rowIndex) => ( - - {headers.map(header => ( - - ))} - - ))} - -
+ {header} +
+ {row[header] || 'N/A'} +
{row[header] || 'N/A'}
-
- ))} -
- ); + ))} + + + + ))} + + ); }; - -export default ResponsesTable; \ No newline at end of file + +export default ResponsesTable; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3f338fc..5447b8d 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,6 +1,7 @@ import { faGithub } from '@fortawesome/free-brands-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Work_Sans } from 'next/font/google';import Link from 'next/link'; +import { Work_Sans } from 'next/font/google'; +import Link from 'next/link'; // export const workSans = Work_Sans({ // weight: '400', @@ -30,7 +31,11 @@ export default function Home() { target="_blank" rel="noopener noreferrer" > - View on GitHub + {' '} + View on GitHub Create a form › - @@ -83,295 +87,288 @@ function Footer() { ); } - -function SpecificsTextOnLeft(props: {heading: string, content: string}) { +function SpecificsTextOnLeft(props: { heading: string; content: string }) { return (
-
-

+
+

{props.heading} -

-

- {props.content} -
-
-

-
-
- - travel booking - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +

+

+ {props.content} +
+
+

+
+
+ + travel booking + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
- - ) + ); } function SpecificsTextOnRight(props: { heading: string; content: string }) { return ( @@ -552,18 +549,30 @@ function SpecificsTextOnRight(props: { heading: string; content: string }) { function Specifics() { return (
-
-

- Faster, easier, more powerful. -

-
-
+
+

+ Faster, easier, more powerful. +

+
+
- - - - -
-
- ) -} \ No newline at end of file + + + + + + + ); +}