Merge pull request #7 from datasektionen/student-life

Add Student Life page, other empty pages

package.json

@@ -8,7 +8,8 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-router-dom": "^6.23.0",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,15 +1,67 @@
-import logo from './logo.svg';
 import './App.css';
 
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Navigate,
+} from "react-router-dom";
+import Home from "./pages";
+import Abroad from "./pages/abroad";
+import StudentLife from './pages/student-life';
+import NavBar from './NavBar';
+
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
+      <Router>
+        <NavBar />
+        <div className='page-content'>
+          <Routes>
+            {/* This route is for home component 
+          with exact path "/", in component props 
+          we passes the imported component*/}
+            <Route
+              exact
+              path="/"
+              element={<Home />}
+            />
+
+            {/* This route is for about component 
+          with exact path "/about", in component 
+          props we passes the imported component*/}
+            <Route
+              exact
+              path="/abroad"
+              element={<Abroad />}
+            />
+
+            {/* This route is for student-life component
+            with exact path "/student-life", in component props
+            we pass the imported component */}
+            <Route
+              exact
+              path="/student-life"
+              element={<StudentLife />}
+            />
+
+            {/* If any route mismatches the upper 
+          route endpoints then, redirect triggers 
+          and redirects app to home component with to="/" */}
+            {/* <Redirect to="/" /> */}
+            <Route
+              path="*"
+              element={<Navigate to="/" />}
+            />
+          </Routes>
+        </div>
+      </Router>
+      {/* <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
           Filler page, put content here!
         </p>
-      </header>
+      </header> */}
     </div>
   );
 }

src/NavBar.js

@@ -1,16 +1,18 @@
 import logo from './in-newlogo2.png';
+import { Link } from "react-router-dom";
+
 function NavBar() {
     return (
-        <div class="navbar"> {
+        <div className="navbar"> {
             //style="height: 64px;"
         }
-            <img src={logo}/>
+            <img src={logo} alt="logo"/>
             <ul>
-                <li class="nav-item"><a href="./index.html">Home</a></li>
-                <li class="nav-item"><a href="./student-life.html">Student Life</a></li>
-                <li class="nav-item"><a href="./incoming-students.html">Incoming Students</a></li>
-                <li class="nav-item"><a href="./opportunities-abroad.html">Going Abroad</a></li>
-                <li class="nav-item"><a href="./contact-faq.html">Contact & FAQ</a></li>
+                <li className="nav-item"><Link to="/">Home</Link></li>
+                <li className="nav-item"><Link to="/student-life">Student Life</Link></li>
+                <li className="nav-item"><Link to="/incoming-students">Incoming Students</Link></li>
+                <li className="nav-item"><Link to="/abroad">Going Abroad</Link></li>
+                <li className="nav-item"><Link to="/contact-faq">Contact & FAQ</Link></li>
             </ul>
         </div>
     );

src/index.js

@@ -1,17 +1,15 @@
-import React from 'react';
+import {React} from 'react';
 import ReactDOM from 'react-dom/client';
 //import './index.css';
 import './styles.css'
 import App from './App';
-import NavBar from './NavBar';
-//import reportWebVitals from './reportWebVitals';
+
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
-    <NavBar />
+  <>
     <App />
-  </React.StrictMode>
+  </>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/pages/Committees.js

@@ -0,0 +1,180 @@
+const Committees = () => {
+    return (
+        <div className="committees">
+            <ChapterBelonging belonging="CS-Media committees"/>
+            <div className="committee-info">
+                <CommitteeName name="International Committee" />
+                <InternationalCommittee />
+
+                <CommitteeName name="Qulture Committee"/>
+                <QultureCommittee/>
+
+                <CommitteeName name="METAdorerna"/>
+                <METAdorerna/>
+
+                <CommitteeName name="MetaSpexet"/>
+                <MetaSpexet/>
+            </div>
+
+            <ChapterBelonging belonging="CS committees"/>
+            <div className="committee-info">
+                <CommitteeName name={"Equality Committee"}/>
+                <EqualityCommittee/>
+
+                <CommitteeName name={"DKM"}/>
+                <DKM/>
+            </div>
+
+            <ChapterBelonging belonging="Media committees"/>
+            <div className="committee-info">
+                <CommitteeName name="MKM"/>
+                <MKM/>
+            </div>
+        </div>
+    );
+}
+
+function ChapterBelonging({belonging}) {
+    return(
+        <h2>{belonging}</h2>
+    );
+}
+
+function CommitteeName({name}) {
+    return(
+        <h3>{name}</h3>
+    );
+}
+
+const InternationalCommittee = () => {
+    return(
+        //
+        <p>
+            The International Committee (Swedish: Internationella Nämnden, IN) is the committee in META that 
+            welcomes international students, make events for them, and helps them to participate in Computer 
+            Science and Media Technology chapters. The committee also provides a platform for Swedish students.
+            The committee is open to any META student, whether from CS or Media, international or Swedish.
+            We often have collaborations with other committees.
+            <br/>
+            Our usual meeting time is 12:15 on Mondays. You can talk to us on
+            our <a href="https://dsekt.se/whatsapp">WhatsApp group</a> to get more info and talk to international
+            students.
+            <br/>
+            Oh, also, we are the ones maintaining this website ;).
+        </p>
+    )
+}
+
+function QultureCommittee() {
+    return(
+        <p>
+            The Qulture Committee (Swedish: Qulturnämnden, QN) is the committee focusing on <i>qulture</i> events (yes,
+            with a q!). Come past 17:17 in META every Tuesday to play board games at what is called QN Tuesday, or enjoy LANs, 
+            screenings, food courses, theater visits, game nights and much more when announced (rarely).
+            <br/>
+            It is known QN's meetings are hosted with plenty of cookies, so join the dark side of qulture! Contact:
+            [email protected], [email protected].
+        </p>
+    );
+}
+
+
+function METAdorerna() {
+    return(
+        <p>
+            METAdorerna (META doors) is the CS-Media committee that takes care of the Chapter Hall, META. If you do
+            not know yet, it is located at Osquars backe 21, 114 28 Stockholm, Sweden (or use this convenient 
+            <a href="https://www.google.se/maps/place/META/@59.347854,18.0713357,19.33z/data=!4m6!3m5!1s0x465f9d8239dc3dc7:0x5339bd50f81e85b2!8m2!3d59.3480716!4d18.0713859!16s%2Fg%2F11tjpzdy84?entry=ttu">
+                Google Maps link
+            </a>). To help clean META, the committee asks for help on Mondays, and participating at least twice 
+            lets you can attend a special party at the end of the year ;).
+            <br/>
+            Some useful links:
+            <ul>
+                <li>The <a href="https://datasektionen.se/en/clubs/metadorerna">METAdorerna page</a> on the CS chapter's
+                website, with lots of info</li>
+                <li>Contact: [email protected]</li>
+            </ul>
+        </p>
+
+    );
+}
+
+function EqualityCommittee() {
+    return (
+        <p>
+            The Equality Committee (Swedish: Jämlikhetsnämnden) is the committee that makes sure you feel safe and welcome
+            in the chapter! They have a <a href="https://discord.gg/UjpGaB6Ckh">Discord server</a> if you are interested
+            to work on equality issues. The server is where any information, including meeting information, is posted.
+        </p>
+    )
+}
+
+function MetaSpexet() {
+    return (
+        <p>
+            MetaWhatagain? MetaSpexet! This committee is in charge of theatrical productions (spex) and is a joint committee
+            between the CS and Media chapters. There are many groups inside MetaSpexet (theatrical production is vast).
+            <br/>
+            You might be interested to join them, or just to go watch their productions ;). Recruitement is every autumn.
+            <br/>
+            Contact:
+            <ul>
+                <li> <a href="https://metaspexet.se">Website link</a> (only in Swedish)</li>
+                <li> <a href="https://www.facebook.com/metaspexet"> Facebook page</a></li>
+                <li> <a href= "https://www.instagram.com/metaspexet/"> Instagram </a></li>
+                <li> Or just go to META, you'll find the spex people easily, and they can tell you more about the 
+                    committee.
+                </li>
+            </ul>
+        </p>
+    )
+}
+
+function DKM() {
+    return (
+        <p>
+            DKM (standing for the Swedish 'Datas Klubbmästeri') is the pub committee on the CS chapter side (see MKM for Media). 
+            The committee holds a CS pub each Wednesday at 17:17. There are some exceptional pubs, including the famous 
+            TentaPub, usually the first Saturday after each exam period. DKM and MKM propose both alcoholic 
+            and <u>alcohol-free</u> beverages. Note that to enter an event by DKM, you must:
+            <ul>
+                <li>Present a valid identity document</li>
+                <li>Show your Mecenat card with the chapter's logo (see below)</li>
+            </ul>
+            This is required even if you won't drink alcohol, or if you want to go to META for something else during a pub.
+            <br/>
+            The Mecenat card is the proof that you are a student, and the logo is obtained sometime after becoming a 
+            member of THS.
+            <br/>
+            Contact:
+            <ul>
+                <li>Mail: [email protected]</li>
+                <li><a href="https://www.facebook.com/datasklubbmasteri">Facebook page</a></li>
+                <li><a href="https://www.instagram.com/dkmkth/">Instagram</a></li>
+            </ul>
+        </p>
+    )
+}
+
+function MKM() {
+    return (
+        <p>
+            MKM (standing for the Swedish 'Medias Klubbmästeri') is the pub committee on the Media chapter side 
+            (see DKM for Media). The committee holds a Media pub each Thursday at 17:17. There are some 
+            exceptional pubs, including the famous TentaPub, usually the first Saturday after each exam period. 
+            MKM and DKM serve both alcoholic and <u>alcohol-free</u> beverages. Note that to enter an event by 
+            MKM, you must:
+            <ul>
+                <li>Present a valid identity document</li>
+                <li>Show your Mecenat card with the chapter's logo (see below)</li>
+            </ul>
+            This is required even if you won't drink alcohol, or if you want to go to META for something else during a pub.
+            <br/>
+            The Mecenat card is the proof that you are a student, and the logo is obtained sometime after becoming a 
+            member of THS.
+        </p>
+    )
+}
+
+export default Committees;

src/pages/abroad.js

@@ -0,0 +1,9 @@
+import {React} from 'react';
+import './styles.css'
+//import NavBar from './NavBar';
+
+export default function Abroad() {
+    <>
+        <h1>test</h1>
+    </>
+}

src/pages/index.js

@@ -0,0 +1,17 @@
+import {React} from "react";
+import logo from '../logo.svg';
+
+const Home = () => {
+    return (
+        <div>
+            <header className="App-header">
+                <img src={logo} className="App-logo" alt="logo" />
+                <p>
+                Filler page, put content here!
+                </p>
+            </header>
+        </div>
+    );
+};
+
+export default Home;

src/pages/student-life.js

@@ -0,0 +1,16 @@
+import {React} from 'react';
+import "../styles.css";
+
+import Committees from './Committees';
+
+
+const StudentLife = () => {
+    return (
+        <div className='StudentLife'>
+            <Committees />
+        </div>
+
+    );
+};
+
+export default StudentLife;