Skip to content
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

task/WG-74: Create Map React Modal #193

Merged
merged 21 commits into from
Feb 13, 2024
Merged

task/WG-74: Create Map React Modal #193

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
55eb4e7
task/WG-74: Create Map React Modal
Jan 12, 2024
61fa55c
recreating lock file
Jan 12, 2024
a59ebe1
working POST request and unit tests added
Jan 16, 2024
01da5e3
made system_path dynamic to current user that's logged in
Jan 17, 2024
1e6067d
fixing unit tests and modifying auth.ts file for AuthenticatedUser
Jan 17, 2024
11c90ab
adding tacc-core-styles to Modal
Jan 19, 2024
dce9921
Merge branch 'master' into task/WG-74-react-map-modal
tjgrafft Jan 19, 2024
8129ec1
fixing lint issues and unit test
Jan 19, 2024
a857ea6
refactoring usePost and useCreateProject to be more efficient
Jan 22, 2024
a1492b0
renaming MapModal comp and adding error message to modal
Jan 25, 2024
4dfe23a
Merge branch 'master' into task/WG-74-react-map-modal
tjgrafft Jan 26, 2024
4b0328c
adding useAuthenticatedUser hook and replacing redux
Jan 29, 2024
fb11b80
Refactoring CreateMapModal to handle its own states and errors instea…
Jan 31, 2024
a9c9e7f
fixing MainMenu comp to match master
Feb 5, 2024
2e2378a
Updating comments and type cleanup
Feb 7, 2024
36c7e9e
removing actions and submitting state management
Feb 7, 2024
0170c08
Modifying error message handling
Feb 7, 2024
b636ca2
Updating CreateMapModal test to reflect new error handling
Feb 7, 2024
b39c3ec
updating package.json to fix conflicts with lock file
Feb 9, 2024
6f4e2e0
Merge branch 'master' into task/WG-74-react-map-modal
Feb 9, 2024
b7fae15
Merge branch 'master' into task/WG-74-react-map-modal
tjgrafft Feb 12, 2024
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
37 changes: 25 additions & 12 deletions react/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,41 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hazmapper</title>
<link rel="stylesheet" href="src/index.css" />
<base id="base" />
<script>
var hostname = window.location.hostname;
var pathname = window.location.pathname;
// Set base URL dynamically
if (/^hazmapper.tacc.utexas.edu/.test(hostname) && pathname.startsWith('/staging-react')) {
document.getElementById('base').href = '/staging-react/';
} else if (/^hazmapper.tacc.utexas.edu/.test(hostname) && pathname.startsWith('/dev-react')) {
document.getElementById('base').href = '/dev-react/';
if (
nathanfranklin marked this conversation as resolved.
Show resolved Hide resolved
/^hazmapper.tacc.utexas.edu/.test(hostname) &&
pathname.startsWith('/staging-react')
) {
document.getElementById('base').href = '/staging-react/';
} else if (
/^hazmapper.tacc.utexas.edu/.test(hostname) &&
pathname.startsWith('/dev-react')
) {
document.getElementById('base').href = '/dev-react/';
} else if (/^hazmapper.tacc.utexas.edu/.test(hostname)) {
document.getElementById('base').href = '/hazmapper-react/';
} else if (/^hazmapper.tacc.utexas.edu/.test(hostname) && pathname.startsWith('/staging')) {
document.getElementById('base').href = '/staging/';
} else if (/^hazmapper.tacc.utexas.edu/.test(hostname) && pathname.startsWith('/dev')) {
document.getElementById('base').href = '/dev/';
document.getElementById('base').href = '/hazmapper-react/';
} else if (
/^hazmapper.tacc.utexas.edu/.test(hostname) &&
pathname.startsWith('/staging')
) {
document.getElementById('base').href = '/staging/';
} else if (
/^hazmapper.tacc.utexas.edu/.test(hostname) &&
pathname.startsWith('/dev')
) {
document.getElementById('base').href = '/dev/';
} else if (/^hazmapper.tacc.utexas.edu/.test(hostname)) {
document.getElementById('base').href = '/hazmapper/';
document.getElementById('base').href = '/hazmapper/';
} else {
document.getElementById('base').href = '/';
document.getElementById('base').href = '/';
}
// TODO_REACT: Works but has issue. https://tacc-main.atlassian.net/browse/WG-224
</script>
</script>
</head>
<body>
<div id="root"></div>
Expand Down
6,990 changes: 4,479 additions & 2,511 deletions react/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"@babel/preset-typescript": "^7.21.0",
"@changey/react-leaflet-markercluster": "^4.0.0-rc1",
"@reduxjs/toolkit": "^1.8.4",
"@tacc/core-styles": "^2.22.6",
"@tacc/core-styles": "^2.22.3",
"@testing-library/react": "^13.4.0",
"@types/leaflet.markercluster": "^1.5.1",
"axios": "^1.6.2",
Expand All @@ -45,7 +45,8 @@
"react-router-dom": "^6.3.0",
"react-table": "^7.8.0",
"reactstrap": "^9.2.1",
"uuid": "^9.0.1"
"uuid": "^9.0.1",
"yup": "^1.3.3"
},
"devDependencies": {
"@redux-devtools/core": "^3.13.1",
Expand Down
20 changes: 20 additions & 0 deletions react/src/components/CreateMapModal/CreateMapModal.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
:global(.btn-close) {
background: transparent;
border: none;
font-size: 1.5rem;
cursor: pointer;
}

:global(.btn-close::after) {
content: '\00D7'; /* Unicode character for 'X' */
}

.custom-error-message {
margin-top: 0.25rem;
font-size: 0.8em;
color: #dc3545;
}

.form-check-label {
font-style: italic;
}
105 changes: 105 additions & 0 deletions react/src/components/CreateMapModal/CreateMapModal.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import React from 'react';
import {
render,
cleanup,
fireEvent,
screen,
waitFor,
} from '@testing-library/react';
import CreateMapModal from './CreateMapModal';
import { BrowserRouter as Router } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from 'react-query';

jest.mock('../../hooks/user/useAuthenticatedUser', () => ({
__esModule: true,
default: () => ({
data: { username: 'mockUser', email: '[email protected]' },
isLoading: false,
error: null,
}),
}));

jest.mock('../../hooks/projects/useCreateProject', () => ({
__esModule: true,
default: () => ({
mutate: jest.fn((data, { onSuccess, onError }) => {
if (data.project.name === 'Error Map') {
// Simulate a submission error with a 500 status code
onError({ response: { status: 500 } });
} else {
// Simulate successful project creation
onSuccess({ uuid: '123' });
}
}),
isLoading: false,
}),
}));

const mockNavigate = jest.fn();

jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useNavigate: () => mockNavigate,
}));

const toggleMock = jest.fn();
const queryClient = new QueryClient();

const renderComponent = (isOpen = true) => {
render(
<QueryClientProvider client={queryClient}>
<Router>
<CreateMapModal isOpen={isOpen} toggle={toggleMock} />
</Router>
</QueryClientProvider>
);
};

describe('CreateMapModal', () => {
afterEach(() => {
cleanup();
});

test('renders the modal when open', () => {
renderComponent();
expect(screen.getByText(/Create a New Map/)).toBeTruthy();
});

test('submits form data successfully', async () => {
renderComponent();
fireEvent.change(screen.getByTestId('name-input'), {
target: { value: 'Success Map' },
});
fireEvent.change(screen.getByLabelText(/Description/), {
target: { value: 'A successful map' },
});
fireEvent.change(screen.getByLabelText(/Custom File Name/), {
target: { value: 'success-file' },
});
fireEvent.click(screen.getByRole('button', { name: /Create/ }));

await waitFor(() => {
expect(mockNavigate).toHaveBeenCalledWith('/project/123');
});
});

test('displays error message on submission error', async () => {
renderComponent();
fireEvent.change(screen.getByTestId('name-input'), {
target: { value: 'Error Map' },
});
fireEvent.change(screen.getByLabelText(/Description/), {
target: { value: 'A map with an error' },
});
fireEvent.change(screen.getByLabelText(/Custom File Name/), {
target: { value: 'error-file' },
});
fireEvent.click(screen.getByRole('button', { name: /Create/ }));

await waitFor(() => {
expect(
screen.getByText('Internal server error. Please contact support.')
).toBeTruthy();
});
});
});
Loading
Loading