Homepage Remodel

src/Homepage.test.js

@@ -0,0 +1,25 @@
+import { render, fireEvent ,screen } from '@testing-library/react';
+import Homepage from './components/HomePage/HomePage';
+
+
+describe('Homepage', () => {
+  test('renders Homepage component', () => {
+    const { getByText } = render(<Homepage />);
+
+  expect(screen.getByText("Open Source Internships")).toBeInTheDocument();
+  expect(screen.getByText("We are an organization to help you find open source internships")).toBeInTheDocument();
+  expect(screen.getByText("What Open Source is ...")).toBeInTheDocument();
+  expect(screen.getByText("a term that is referred to Open Source Software that is designed to be publicly accessible meaning that any user can see, modify, and distribute the code.")).toBeInTheDocument();
+  expect(screen.getByText("We are here to help you!")).toBeInTheDocument();
+});
+
+  const Button = ({children}) => (
+    <button>{children}</button>
+  )
+  test('renders button start', async () =>  {
+    render(<Button>start</Button>)
+    fireEvent.click(screen.getByText(/start/i))
+  });
+  screen.debug();
+
+});

src/Resources.test.js

@@ -0,0 +1,41 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { BrowserRouter, Router, Link } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import data from './components/data/data.json';
+import Resources from './components/Resources/Resources';
+
+describe('Resources', () => {
+
+    test(" more info Link validation", async () => {
+        //check the more info link 12 times rendered on /resouces page 
+        //check when click moreinfo link routes to corresponding page /resources/resource.id 
+        //check each page has resource.name by getByText on the screen
+
+        let history = createMemoryHistory({ initialEntries: ["/resources"] });
+
+        render(<BrowserRouter><Resources ResourcesList={data} /></BrowserRouter>);
+        let moreinfoButtons = screen.getAllByText("More info");
+        for (let resource of data) 
+        {
+
+            <Router history={history}>
+                <Link to={{ pathname: `/resources/${resource.id}` }}>More info</Link>
+            </Router>
+
+            expect(moreinfoButtons).toHaveLength(12)
+
+            fireEvent.click(moreinfoButtons[`${resource.id-1}`]);
+
+            expect(location.pathname).toEqual(`/resources/${resource.id}`);
+
+            await expect(screen.getByText(`${resource.name}`)).toBeInTheDocument();
+
+        }   
+
+    });
+    screen.debug();
+});
+
+
+

src/components/Contributions/Contributions.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import SubHeading from '../UI/SubHeading';
+import Paragraph from '../UI/Paragraph';
+import styles from './Contributions.module.css';
+const Contributions = props => {
+    return (
+        <div className = {styles.container}>
+                <SubHeading > Contributions </SubHeading>
+
+                <Paragraph >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</Paragraph>
+
+        </div>
+    )
+}
+export default Contributions;

src/components/Contributions/Contributions.module.css

@@ -0,0 +1,7 @@
+
+
+.container{
+    display: grid;
+    justify-items: start;
+
+}

src/components/Internships/Internships.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import SubHeading from '../UI/SubHeading';
+import Paragraph from '../UI/Paragraph';
+import styles from './Internships.module.css';
+const Internships = props => {
+    return (
+        <div className={styles.container}>
+
+            <SubHeading > Internships </SubHeading>
+
+            <Paragraph >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</Paragraph>
+
+
+        </div>
+    )
+}
+export default Internships;

src/components/Internships/Internships.module.css

@@ -0,0 +1,6 @@
+
+.container{
+    display: grid;
+    justify-items: start;
+
+}

src/components/Members/Members.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import SubHeading from '../UI/SubHeading';
+import Paragraph from '../UI/Paragraph';
+import styles from './Members.module.css';
+const Members = props => {
+    return (
+        <div className={styles.container}>
+
+            <SubHeading > Members </SubHeading>
+
+            <Paragraph >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</Paragraph>
+
+
+        </div>
+    )
+}
+export default Members;

src/components/Members/Members.module.css

@@ -0,0 +1,7 @@
+
+
+.container{
+    display: grid;
+    justify-items: start;
+
+}

src/components/NewAbout/About.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Heading from '../UI/Heading';
+import Paragraph from '../UI/Paragraph';
+
+import styles from './About.module.css';
+const About = props => {
+    return (
+        <div className={styles.container}>
+
+            <Heading >We are an Organization to help you find Open Source Internships </Heading>
+
+            <Paragraph >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</Paragraph>
+
+
+        </div>
+    )
+}
+export default About;

src/components/NewAbout/About.module.css

@@ -0,0 +1,5 @@
+.container{
+    display: grid;
+    justify-items: start;
+
+}

src/components/NewHomepage/Homepage.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import Button from '../UI/Button';
+import styles from './Homepage.module.css';
+import sampleImg from '../../assets/images/sample.png';
+
+import Contributions from '../Contributions/Contributions';
+import Members from '../Members/Members';
+import Internships from '../Internships/Internships';
+import About from '../NewAbout/About'
+const Homepage = props => {
+    return (
+        <div>
+
+            <table className={styles['homepage-table']}>
+                <tbody>
+                <tr className={styles['homepage-table-row']}>
+                    <td className={styles['homepage-table-data']}>
+                        <About></About>
+                    </td>
+                    <td className={styles['homepage-table-data']}>
+                        <img alt="sampleimage" src={sampleImg} className={styles.image}></img>
+                    </td>
+                </tr>
+                <tr>
+                    <td className={styles['homepage-table-button']}>
+                        <Button>
+                            Get Started
+                        </Button>
+                        <Button>
+                            GitHub
+                        </Button>
+                    </td>
+
+                </tr>
+                <tr className={styles['homepage-table-row']}>
+
+                    <td className={styles['homepage-table-data']}>
+                        <Contributions></Contributions>
+                    </td>
+                    <td className={styles['homepage-table-data']}>
+                        <Members></Members>
+                    </td>
+                    <td className={styles['homepage-table-data']}></td>
+                    <td className={styles['homepage-table-data']}>
+                        <Internships></Internships>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+
+        </div>
+    )
+}
+export default Homepage;

src/components/NewHomepage/Homepage.module.css

@@ -0,0 +1,23 @@
+
+.image{
+    width: 100%;
+    height: 100%;
+}
+
+.homepage-table {
+    display: table;
+    border-spacing: 150px;
+
+}
+.homepage-table-row {
+    display:flex;
+    justify-content: space-evenly;
+}
+.homepage-table-data{
+    display: flex;
+
+}
+.homepage-table-button{
+    display: flex;
+    justify-content: space-evenly;
+}

src/components/Resources/Bubblechart.js

@@ -6,7 +6,6 @@ import "./Bubblechart.css";
 const Bubblechart = (aData) => {
   let jsonToDisplay = { "children": [...aData.data] };
   let diameter = 1000;
-  // color = d3.scaleOrdinal(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]);
   let bubble = d3.pack()
     .size([diameter, diameter])
     .padding(2);
@@ -28,25 +27,27 @@ const Bubblechart = (aData) => {
 
 
 
-  let root = d3.hierarchy(jsonToDisplay)
-    .sum(function (d) { console.log(d.id); return d.id; })
-
-    .sort(function (a, b) { return b.id - a.id });
-
 
+  let root = d3.hierarchy(jsonToDisplay)
+    .sort(function (b,a) {  return d3.ascending(b.contributions,a.contributions); })
+    .sum(function (d) {  return d.contributions; })
+
+
+
   bubble(root);
 
   let node = svg.selectAll('node')
     .data(root.children)
     .enter().append('g')
     .attr('class', 'node')
     .attr('transform', function (d) { return 'translate(' + d.x + ' ' + d.y + ')'; })
+    .append("a")
 
 
   let defs = node.append('defs');
 
   defs.append("pattern")
-    .attr("id", function (d) { console.log(d.data.id); return d.data.id })
+    .attr("id", function (d) { return d.data.id })
 
     .attr("width", 10)
     .attr("height", 10)
@@ -60,7 +61,10 @@ const Bubblechart = (aData) => {
     .attr("y", 0);
 
 
+
+
   node.append("circle")
+
     .attr('r', function (d) {
       return d.r / (Math.sqrt(1.5));
     })
@@ -69,7 +73,8 @@ const Bubblechart = (aData) => {
     .style("stroke", "black")
     .on("mouseover", mouseover)
     .on("mousemove", mousemove)
-    .on("mouseout", mouseout);
+    .on("mouseout", mouseout)
+    .on("click", function(event,d) { console.log(d.data.login); window.location.href =  "http://github.com/"+d.data.login; })
 
 
   let div = d3.select("#bubble").append("div")
@@ -92,9 +97,8 @@ const Bubblechart = (aData) => {
   function mouseout(d) {
     div.style("display", "none");
   }
-
-
-
+
+
   return (
     <div id="bubble" className="bubble">
       <svg id="chart" className="chart" ></svg>

src/components/Resources/TableView.js

@@ -1,24 +1,24 @@
 import React from 'react';
 import ResourcesList from '../data/data.json';
 import { Link } from "react-router-dom";
-import './TableView.css';
+import styles from './TableView.module.css';
 import Toggle from "../Toggle";
 
-export default function TableView() {
+const TableView = props =>  {
 return (
   <div className="container">
   <Toggle />
-        <table> 
-            <th>ID</th>
-            <th>Name</th>
-            <th>URL</th>
+        <table className={styles['resource-table']}> 
+            <th className= {styles['resource-table-head']}>ID</th>
+            <th className= {styles['resource-table-head']}>Name</th>
+            <th className= {styles['resource-table-head']}>URL</th>
             {
               ResourcesList.map(resource =>
 
-              <tr key={resource.id}>
-                <td>{resource.id}</td>
-                <td>{resource.name}</td>
-                <td>{<Link className="resourceLink" to={`/resources/${resource.id}`}><span>More info</span></Link>}</td>  
+              <tr className = {styles['resource-table-row']} key={resource.id}>
+                <td className = {styles['resource-table-data']}>{resource.id}</td>
+                <td className = {styles['resource-table-data']}>{resource.name}</td>
+                <td className = {styles['resource-table-data']}>{<Link className="resourceLink" to={`/resources/${resource.id}`}><span>More info</span></Link>}</td>  
             </tr>
 
               )
@@ -27,4 +27,5 @@ return (
 
    </div>
   );
-}
+}
+export default TableView;