Resolving conflicts

.github/workflows/github-ci.yaml

@@ -0,0 +1,30 @@
+name: CI
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v2
+      with:
+        node-version: '18.x'
+
+    - name: Install yarn
+      run: npm i --global yarn
+
+    - name: Install npm packages
+      run: yarn install
+
+    - name: Build assets
+      run: yarn build
+
+    - name: Run test
+      run: yarn test -- --watchAll=false

.gitignore

@@ -30,3 +30,4 @@ dist
 .vscode/
 .vs/
 .idea/
+.vercel

netlify.toml

@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/"
+  status = 200

package.json

@@ -4,24 +4,26 @@
   "private": true,
   "homepage": "https://algos-web.netlify.com",
   "dependencies": {
-    "axios": "^0.21.2",
+    "@emotion/react": "^11.4.1",
+    "axios": "^0.23.0",
     "react": "^16.14.0",
     "react-dom": "^16.13.1",
     "react-particles-js": "^3.5.3",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3",
+    "react-scripts": "^3.4.4",
+    "react-spinners": "^0.11.0",
     "react-springy-parallax": "^1.3.0",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",
     "script": "^0.1.4",
-    "tsparticles": "^1.35.2",
-    "uikit": "^3.5.7"
+    "tsparticles": "^1.35.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "react-scripts --openssl-legacy-provider start",
+    "preinstall": "git config --global url.\"https://\".insteadOf git://",
+    "build": "react-scripts --openssl-legacy-provider build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "predeploy": "npm run build",

src/Main.css

@@ -0,0 +1,9 @@
+.App {
+  text-align: center;
+  background-color: rgb(16, 29, 68);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+}

src/Main.js

@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from 'react';
+import { Switch, Route } from 'react-router-dom';
+import HomePage from './components/home/HomePage';
+import HomeComponent from './components/welcome/HomeComponent.js';
+import HashLoader from 'react-spinners/HashLoader';
+import './Main.css';
+import Algorithm from './components/algorithm/Algorithm';
+
+
+function App() {
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+    }, 2410);
+  }, []);
+
+  return (
+    <div className="App">
+      {loading ? (
+        <div className="loadd">
+          <HashLoader color={'white'} loading={loading} size={60} />
+        </div>
+      ) : (
+        <Switch>
+          {/* New PArrellax component */}
+          {/* <Route exact path="/" component={HomePage}></Route> */}
+          <Route exact path="/" component={HomeComponent}></Route>
+          <Route className="homepage" exact path="/home" component={HomePage}></Route>
+          <Route path="/algorithm/:name" component={Algorithm} />
+        </Switch>
+      )}
+    </div>
+  );
+}
+
+export default App;

src/components/algorithm/Algorithm.css

@@ -0,0 +1,23 @@
+.list ul{
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    }
+.list ul li{
+    padding: 10px;
+    list-style: none;
+    border:1px solid white;
+    margin:10px;
+    color: white;
+    width:40vw;
+
+}
+.list{
+    width: 100vw;
+    height:100%;
+    background-color:rgb(16, 29, 68);
+}
+
+

src/components/algorithm/Algorithm.js

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react';
+import {useParams} from "react-router-dom";
+import axios from 'axios';
+import './Algorithm.css';
+
+const Algorithm = () => {
+  const { name } = useParams();
+  const [data, setData] = useState([]);
+  console.log(name);
+
+  // Get all files under the selected algo and store it into the data variable
+  useEffect(() => {
+    const getDataFromGit = async () => {
+      try {
+        const resp = await axios.get(`https://api.github.com/repos/iiitv/algos/contents/${name}`);
+        console.log(resp.data);
+        setData(resp.data);
+      } catch (e) {
+        console.log(e.response, 'error');
+      }
+    };
+    getDataFromGit();
+  }, [name]);
+
+  console.log(data)
+
+  let finalRender = data.map((file) => {
+    return (
+      <a key={file.sha} href={`${file.html_url}`}>
+        <li key={file.sha}>{file.name}</li>
+      </a>
+    );
+  });
+  return (
+    <div className="list">
+      <ul>{finalRender}</ul>
+    </div>
+  )
+}
+
+
+export default Algorithm

src/components/home/HomePage.css

@@ -0,0 +1,23 @@
+.list ul{
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    }
+.list ul li{
+    padding: 10px;
+    list-style: none;
+    border:1px solid white;
+    margin:10px;
+    color: white;
+    width:40vw;
+
+}
+.list{
+    width: 100vw;
+    height:100%;
+    background-color:rgb(16, 29, 68);
+}
+
+

src/components/home/HomePage.js

@@ -1,22 +1,22 @@
 import React, { useState, useEffect } from 'react';
 import './HomePage.css';
+import axios from 'axios';
+import {Link} from "react-router-dom";
 
 const HomePage = () => {
   const [data, setData] = useState(null);
 
   useEffect(() => {
-    fetch('https://cors-anywhere.herokuapp.com/https://api.github.com/repos/iiitv/algos/contents', {
-      method: 'GET',
-      credentials: 'same-origin',
-      headers: new Headers({
-        'Access-Control-Allow-Origin': '*',
-      }),
-      mode: 'cors',
-    })
-      .then((res) => res.json())
-      .then((data) => {
-        setData(data);
-      });
+    const getDataFromGit = async () => {
+      try {
+        const resp = await axios.get('https://api.github.com/repos/iiitv/algos/contents');
+        console.log(resp.data);
+        setData(resp.data);
+      } catch (e) {
+        console.log(e.response, 'error');
+      }
+    };
+    getDataFromGit();
   }, []);
 
   let val = null;
@@ -31,9 +31,9 @@ const HomePage = () => {
   if (val) {
     list = val.map((item) => {
       return (
-        <a key={item.sha} href={item.html_url}>
+        <Link key={item.sha} to={`algorithm/${item.name}`}>
           <li key={item.sha}>{item.name}</li>
-        </a>
+        </Link>
       );
     });
   }
@@ -63,13 +63,15 @@ const HomePage = () => {
           </div>
         </div>
         <div className="uk-width-4-5@s">
-          <div style={{ background: 'blue' }} className="uk-padding-small">
+          <div style={{ background: 'blue'  } } className="uk-padding-small">
             <p>yomo</p>
           </div>
         </div>
       </div>
       <>
-        <ul>{list}</ul>
+        <div className="list">
+          <ul>{list}</ul>
+        </div>
       </>
     </div>
   );

src/components/welcome/HomeComponent.css

@@ -42,7 +42,6 @@
 .footer-image {
   opacity: 0.6;
   width: 40%;
-  margin-left: 30%;
 }
 
 .footer-heading {

src/components/welcome/HomeComponent.js

@@ -69,6 +69,8 @@ export default class HomeComponent extends Component {
           </div>
         </Parallax.Layer>
       </Parallax>
+      //   )}
+      // </div>
     );
   }
 }

src/index.js

@@ -1,24 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Route } from 'react-router';
-import { BrowserRouter, Switch } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
+import Main from './Main';
 
 // import * as serviceWorker from './serviceWorker';
 import store from './store';
 import './index.css';
-import HomePage from './components/home/HomePage';
-import HomeComponent from './components/welcome/HomeComponent.js';
 
 ReactDOM.render(
   <Provider store={store}>
     <BrowserRouter basename={process.env.PUBLIC_URL}>
-      <Switch>
-        {/* New PArrellax component */}
-        {/* <Route exact path="/" component={HomePage}></Route> */}
-        <Route exact path="/" component={HomeComponent}></Route>
-        <Route exact path="/home" component={HomePage}></Route>
-      </Switch>
+      <Main />
     </BrowserRouter>
   </Provider>,
   document.getElementById('root')