Organize files

client-app/src/app/layout/App.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Container } from 'semantic-ui-react';
+import { Activity } from '../models/activity';
+import NavBar from './NavBar';
+import ActivityDashboard from '../../features/activities/dashboard/ActivityDashboard';
+
+function App() {
+ const [activities, setActivities] = useState<Activity[]>([]);
+
+ useEffect(() => {
+ axios.get<Activity[]>('https://localhost:5000/api/activities').then(response => {
+ setActivities(response.data);
+ })
+ }, [])
+
+ return (
+ <>
+ <NavBar />
+ <Container style={{ marginTop: '7em' }}>
+ <ActivityDashboard activities={activities} />
+ </Container>
+ </>
+ );
+}
+
+export default App;

client-app/src/app/layout/styles.css

@@ -0,0 +1,7 @@
+body {
+ background-color: #eaeaea !important;
+}
+
+.ui.inverted.top.fixed.menu {
+ background-image: linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 82%) !important;
+}

client-app/src/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import 'semantic-ui-css/semantic.min.css';
-import './index.css';
-import App from './App';
+import './app/layout/styles.css';
+import App from './app/layout/App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(