Rolando branch

frontend/package.json

@@ -40,6 +40,10 @@
     ]
   },
   "devDependencies": {
-    "lint": "^0.7.0"
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.7",
+    "lint": "^0.7.0",
+    "react-test-renderer": "^18.2.0"
   }
+
 }

frontend/public/manifest.json

@@ -36,6 +36,15 @@
       "src": "molly.png",
       "type": "image/png",
       "sizes": "512x512"
+    },
+    {
+      "src": "download.webp",
+      "type": "image/png",
+      "sizes": "512x512"
+    },{
+      "src": "college.jpg",
+      "type": "image/png",
+      "sizes": "512x512"
     }
   ],
   "start_url": ".",

frontend/src/App.js

@@ -9,7 +9,6 @@ import Home from './pages/Home';
 import Profile from './pages/Profile';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import Settings from './pages/Settings';
-
 function App() {
   return (
     <Router> 

frontend/src/App.test.js

@@ -1,8 +1,37 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import Enzyme from "enzyme";
+import Register from "../src/pages/Register";
+import LoginForm from "../src/pages/Login";
+import Home from "../src/pages/Home";
+import Profile from "../src/pages/Profile";
+import { shallow } from 'enzyme';
+import {
+  Button
+} from 'semantic-ui-react'
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+test("Register page loads", () => {
+  expect(Register).toBeDefined();
 });
+test("Login page loads", () => {
+  expect(LoginForm).toBeDefined();
+});
+test("Home page loads", () => {
+  expect(Home).toBeDefined();
+});
+test("Profile Information loads", () => {
+  expect(Profile).toBeDefined();
+});
+
+test("Linkable pages works", () => {
+  expect(Profile).toBeDefined();
+});
+
+describe('Test Button component', () => {
+  it('Test click event', () => {
+    const mockCallBack = jest.fn();
+
+    const button = shallow((<Button onClick={mockCallBack}>Ok!</Button>));
+    button.find('button').simulate('click');
+    expect(mockCallBack.mock.calls.length).toEqual(1);
+  });
+});

frontend/src/navbar.js

@@ -41,14 +41,14 @@ const FixedMenuLayout = () => (
             <Dropdown.Item href='login'>Log Out</Dropdown.Item>
           </Dropdown.Menu>
         </Dropdown>
-        <Menu.Item position='right'>
+        {/* <Menu.Item position='right'>
                   <Button as='a' href='login'>
                     Log in
                   </Button>
                   <Button as='a' style={{ marginLeft: '0.5em', marginRight: '-8.5em'}} href='register'>
                     Sign Up
                   </Button>
-                </Menu.Item>
+                </Menu.Item> */}
       </Container>
     </Menu>
 

frontend/src/pages/Home.js

@@ -9,7 +9,6 @@ import {
   Header,
   Icon,
   Image,
-  List,
   Menu,
   Segment,
   Sidebar,
@@ -32,7 +31,7 @@ const HomepageHeading = ({ mobile }) => (
   <Container text>
     <Header
       as='h1'
-      content='Imagine-a-Company'
+      content='StudyUp'
       inverted
       style={{
         fontSize: mobile ? '2em' : '4em',
@@ -41,18 +40,20 @@ const HomepageHeading = ({ mobile }) => (
         marginTop: mobile ? '1.5em' : '3em',
       }}
     />
+        <Image size='small' src='logo512.png' style={{position: 'absolute', top: 200, left: 390}}/>
+
     <Header
       as='h2'
-      content='Do whatever you want when you want to.'
+      content='Find friends on campus or in your classes. This is a tool for success. You dont have to ever feel alone or overwhelmed again!'
       inverted
       style={{
         fontSize: mobile ? '1.5em' : '1.7em',
         fontWeight: 'normal',
         marginTop: mobile ? '0.5em' : '1.5em',
       }}
     />
-    <Button primary size='huge' href='register'>
-      Get Started
+    <Button primary size='huge' href='login'>
+      Login
       <Icon name='right arrow' />
     </Button>
   </Container>
@@ -218,29 +219,26 @@ const HomepageLayout = () => (
         <Grid.Row>
           <Grid.Column width={8}>
             <Header as='h3' style={{ fontSize: '2em' }}>
-              We Help Companies and Companions
+              We Help Students Achieve Success
             </Header>
             <p style={{ fontSize: '1.33em' }}>
-              We can give your company superpowers to do things that they never thought possible.
-              Let us delight your customers and empower your needs... through pure data analytics.
+              Find students in your classes. Find tutors. Find class resources. Mental Health Help. Find a community or simply friends. Here in StudyUp everything is possible.
             </p>
             <Header as='h3' style={{ fontSize: '2em' }}>
-              We Make Bananas That Can Dance
+              Imagine a Connected College Campus
             </Header>
             <p style={{ fontSize: '1.33em' }}>
-              Yes that's right, you thought it was the stuff of dreams, but even bananas can be
-              bioengineered.
+            Imagine a campus in which studying is enjoyable. Find a community of like minded individuals such as yourselves. Where you find guidance and feel supported. Welcome to StudyUp.
             </p>
           </Grid.Column>
           <Grid.Column floated='right' width={6}>
-            <Image bordered rounded size='large' src='/images/wireframe/white-image.png' />
-          </Grid.Column>
+          <Image size='large' src='download.webp' />          </Grid.Column>
         </Grid.Row>
-        <Grid.Row>
+        {/* <Grid.Row>
           <Grid.Column textAlign='center'>
             <Button size='huge'>Check Them Out</Button>
           </Grid.Column>
-        </Grid.Row>
+        </Grid.Row> */}
       </Grid>
     </Segment>
 
@@ -249,24 +247,24 @@ const HomepageLayout = () => (
         <Grid.Row textAlign='center'>
           <Grid.Column style={{ paddingBottom: '5em', paddingTop: '5em' }}>
             <Header as='h3' style={{ fontSize: '2em' }}>
-              "What a Company"
+              "Excelent Resource"
             </Header>
             <p style={{ fontSize: '1.33em' }}>That is what they all say about us</p>
           </Grid.Column>
           <Grid.Column style={{ paddingBottom: '5em', paddingTop: '5em' }}>
-            <Header as='h3' style={{ fontSize: '2em' }}>
-              "I shouldn't have gone with their competitor."
+            <Header as='h3' style={{ fontSize: '2em', marginRight: 20 }}>
+              "StudyUp helped me break through imposter syndrome by helping me find my community on campus and also helped me meet my closest friends."
             </Header>
             <p style={{ fontSize: '1.33em' }}>
-              <Image avatar src='/images/avatar/large/nan.jpg' />
-              <b>Nan</b> Chief Fun Officer Acme Toys
+            <Image size='large' src='college.jpg' style={{ marginLeft: 130 }}/>
+              <b style={{ marginLeft: 80 }}>Emily</b> First Year Student at the University of Florida
             </p>
           </Grid.Column>
         </Grid.Row>
       </Grid>
     </Segment>
 
-    <Segment style={{ padding: '8em 0em' }} vertical>
+    {/* <Segment style={{ padding: '8em 0em' }} vertical>
       <Container text>
         <Header as='h3' style={{ fontSize: '2em' }}>
           Breaking The Grid, Grabs Your Attention
@@ -301,7 +299,7 @@ const HomepageLayout = () => (
           I'm Still Quite Interested
         </Button>
       </Container>
-    </Segment>
+    </Segment> */}
 
     {/* <Segment inverted vertical style={{ padding: '5em 0em' }}>
       <Container>

frontend/src/pages/Login.js

@@ -1,8 +1,10 @@
 import React from 'react'
 import { Button, Form, Grid, Header, Image, Message, Segment } from 'semantic-ui-react'
 
-const LoginForm = () => (
-  <Grid textAlign='center' style={{ height: '100vh' }} verticalAlign='middle'>
+function LoginForm(){
+
+  return(
+    <Grid textAlign='center' style={{ height: '100vh' }} verticalAlign='middle'>
     <Grid.Column style={{ maxWidth: 450 }}>
       <Header as='h2' color='teal' textAlign='center'>
       <Image size='extra-large' src='logo512.png' style={{ marginRight: '0.5em', marginTop: '-0.5em' }} /> Log-in to your account
@@ -18,9 +20,9 @@ const LoginForm = () => (
             type='password'
           />
 
-          <div class="g-signin2" data-onsuccess="onSignIn" style={{marginBottom: '20px'}}></div>
-          <Button color='teal' fluid size='large'>
-            Login
+          <div class="g-signin2" data-onsuccess="onSignIn" style={{marginBottom: '20px'}} href='dashboard' onClick={()=>{ alert('Log in successful! Good luck Studying.'); }}></div>
+          <Button color='teal' fluid size='large' href='dashboard' onClick={()=>{ alert('Log in successful! Good luck Studying.'); }}>
+              Login
           </Button>
         </Segment>
       </Form>
@@ -30,5 +32,5 @@ const LoginForm = () => (
     </Grid.Column>
   </Grid>
 )
-
-export default LoginForm
+}
+export default LoginForm

frontend/src/pages/Profile.js

@@ -2,17 +2,18 @@ import React from 'react';
 import { Button, Form, Grid, Header, Image, Message, Segment } from 'semantic-ui-react'
 
 const Profile = () => (
+  <div>
 <div class="ui card" style={{marginTop: '100px', marginLeft: '40px'}}>
   <div class="image">
   <Image size='extra-large' src='kristy.png' />
   </div>
   <div class="content">
     <a class="header">Kristy</a>
     <div class="meta">
-      <span class="date">Joined in 2013</span>
+      <span class="date">Joined in 2022</span>
     </div>
     <div class="description">
-      Kristy is an art director living in New York.
+      Kristy is a first year computer engineering major at the Univeristy of Florida.
     </div>
   </div>
   <div class="extra content">
@@ -22,6 +23,19 @@ const Profile = () => (
     </a>
   </div>
 </div>
+<div class="ui card" style={{marginTop: '-460px', marginLeft: '330px'}}>
+<h1 style={{marginTop: '10px', marginLeft: '5px'}}>Classes</h1>
+  <h2 style={{marginTop: '-10px', marginLeft: '20px'}}>Programming Fundamentals 1</h2>
+  <h2 style={{marginTop: '-10px', marginLeft: '20px'}}>Discrete Structures</h2>
+  <h2 style={{marginTop: '-10px', marginLeft: '20px'}}>Computer Organization</h2>
+  <h2 style={{marginTop: '-10px', marginLeft: '20px'}}>Chemistry 1</h2>
+  <h1 style={{marginTop: '10px', marginLeft: '5px'}}>Major</h1>
+  <h2 style={{marginTop: '-10px', marginLeft: '20px'}}>Computer Engineering</h2>
+  <h1 style={{marginTop: '10px', marginLeft: '5px'}}>Year</h1>
+  <h2 style={{marginTop: '-10px', marginLeft: '20px', marginBottom: '40px'}}>Freshman</h2>
+  </div>
+
+  </div>
 )
 
 export default Profile

frontend/src/pages/Register.js

@@ -33,7 +33,7 @@ const Register = () => (
       <label>I agree to the Terms and Conditions</label>
     </div>
   </div>
-  <button class="ui button" type="submit">Submit</button>
+  <button class="ui button" type="submit" href='dashboard' onClick={()=>{ alert('Account Created! Good luck Studying.'); }}>Submit</button>
 </form>
 )
 

frontend/src/pages/Settings.js

@@ -2,13 +2,19 @@ import React from 'react';
 
 const Settings = () => (
     <>
-    <h1 style={{marginTop: '70px', marginLeft: '20px'}}>Settings</h1>
-    <div class="inline field" style={{marginTop: '20px', marginLeft: '20px'}}>
-        <div class="ui toggle checkbox">
-            <input type="checkbox" tabindex="0" class="hidden" />
-            <label>Receive Notifications</label>
+    <h1 style={{ marginTop: 80, marginLeft: 500, marginRight: 500}}>Settings</h1>
+    <div class="inline field" style={{ marginTop: 20, marginLeft: 500, marginRight: 500}}>
+    <div class="ui form" style={{marginTop: '20px', marginLeft: '2px', marginRight: '120px'}}>
+            <div class="field">
+                <label>Receive Notifications</label>
+                <select class="ui search dropdown">
+                    <option value="" >Select Preference</option>
+                    <option value="AF">Yes</option>
+                    <option value="AX">No</option>
+                </select>
+            </div>
         </div>
-    </div><div class="ui form" style={{marginTop: '20px', marginLeft: '20px', marginRight: '1200px'}}>
+    </div><div class="ui form" style={{ marginTop: 20, marginLeft: 500, marginRight: 620}}>
             <div class="field">
                 <label>Share profile with</label>
                 <select class="ui search dropdown">

frontend/src/setupTests.js

@@ -3,3 +3,8 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+import React from 'react';
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });