App.tsx 1.66 KB
Newer Older
1
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
2
import './App.scss';
3
4
5
6
import Footer from './components/Footer/Footer';
import Header from './components/Header/Header';
import Home from './components/Home/Home';
import MovieDetail from './components/MovieDetail/MovieDetail';
7

8
/**
9
 * Server-Capabilities with React;
10
11
 * We use ApolloClient to create our provider to GraphQl
 * From is a method by Apolloclient to create a link to API
12
 */
13
import {ApolloClient, ApolloProvider, from, HttpLink, InMemoryCache} from '@apollo/client'
14
15

//A way to build GraphQL endpoint to server
16
const link = from([
17
    // Denne koden peker til server på den virtuelle maskinen
Sander Arntzen's avatar
Sander Arntzen committed
18
    //new HttpLink({uri: "http://it2810-36.idi.ntnu.no:8081/graphql"})
19
20

    // Denne koden peker mot server lokalt på maskinen
Sander Arntzen's avatar
Sander Arntzen committed
21
    new HttpLink({uri: "http://localhost:8081/graphql"})
22
23
24
25
26

])

/**
 * Have to create a client -> an instance of ApolloClient, to have a connection
27
 * To server
28
 */
29
export const client = new ApolloClient({
30
31
    cache: new InMemoryCache(),
    link: link,
32
33
34

})

35
function App() {
36
37
38
39
40
41
42
    return (
        <ApolloProvider client={client}>
            <div data-testid="App" className="App">
                <Router>
                    <Header></Header>
                    <div className="container">
                        <Switch>
Sander Arntzen's avatar
Sander Arntzen committed
43
44
                            <Route path="/movieappv4/" exact component={Home}/>
                            <Route path="/movieappv4/movie/:imdbID" component={MovieDetail}/>
45
46
47
48
49
50
51
                        </Switch>
                    </div>
                    <Footer/>
                </Router>
            </div>
        </ApolloProvider>
    );
52
53
54
}

export default App;