Merge pull request #3 from bannzai/fix/state/management

Fix state meanagement(WIP)

.gitignore

@@ -12,3 +12,5 @@ web-build/
 # macOS
 .DS_Store
 app.config.js
+
+schema.json

App.tsx

@@ -1,41 +1,29 @@
 import * as React from "react";
 import * as WebBrowser from "expo-web-browser";
-import { makeRedirectUri, useAuthRequest } from "expo-auth-session";
-import { Button } from "react-native";
-import Constants from "expo-constants";
+import { Platform } from "react-native";
+import { BrowserRouter, Redirect, Switch } from "react-router-dom";
+import { AuthorizedRoute } from "./src/route/AuthorizedRoute";
+import { HomePage } from "./src/usecase/home/HomePage";
+import { UnAuthorizedRoute } from "./src/route/UnauthorizedRoute";
+import { LoginPage } from "./src/usecase/login/LoginPage";
+import { AuthProvider } from "./src/context/Auth";
 
 WebBrowser.maybeCompleteAuthSession();
 
-// Endpoint
-const discovery = {
-  authorizationEndpoint: "https://github.com/login/oauth/authorize",
-  tokenEndpoint: "https://github.com/login/oauth/access_token",
-  revocationEndpoint: `https://github.com/settings/connections/applications/${Constants.manifest?.extra?.githubOAuthClientID}`,
-};
-
 export default function App() {
-  const [request, response, promptAsync] = useAuthRequest(
-    {
-      clientId: Constants.manifest?.extra?.githubOAuthClientID,
-      redirectUri: Constants.manifest?.extra?.githubOAuthCallbackURL,
-    },
-    discovery
-  );
-
-  React.useEffect(() => {
-    if (response?.type === "success") {
-      const { code } = response.params;
-      console.log(`success code: ${code}`);
-    }
-  }, [response]);
-
-  return (
-    <Button
-      disabled={!request}
-      title="Login"
-      onPress={() => {
-        promptAsync();
-      }}
-    />
-  );
+  if (Platform.OS === "web") {
+    return (
+      <AuthProvider>
+        <BrowserRouter>
+          <Switch>
+            <AuthorizedRoute exact path="/" component={HomePage} />
+            <UnAuthorizedRoute exact path="/login" component={LoginPage} />
+            <Redirect to="/" />
+          </Switch>
+        </BrowserRouter>
+      </AuthProvider>
+    );
+  } else {
+    return <p> Comming soon...</p>;
+  }
 }

codegen.yml

@@ -0,0 +1,11 @@
+schema: ./schema.json
+documents: "src/**/*.graphql"
+generates:
+  src/generated-types.ts:
+    plugins:
+      - typescript
+      - typescript-operations
+      - typescript-react-apollo
+    config:    
+      withHooks: true
+

package.json

@@ -5,24 +5,36 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
+    "introspection": "rm -f ./schema.json && get-graphql-schema -h \"Authorization=Bearer $GITHUB_PERSONAL_ACCESS_TOKEN\" https://api.github.com/graphql --json > schema.json",
+    "codegen": "graphql-codegen",
+    "watch": "graphql-codegen --watch",
     "eject": "expo eject"
   },
   "dependencies": {
+    "@apollo/client": "^3.3.21",
     "expo": "~42.0.1",
     "expo-auth-session": "~3.3.1",
     "expo-constants": "~11.0.1",
     "expo-random": "~11.2.0",
     "expo-status-bar": "~1.0.4",
     "expo-web-browser": "~9.2.0",
+    "graphql": "^15.5.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
-    "react-native-web": "~0.13.12"
+    "react-native-web": "~0.13.12",
+    "react-router-dom": "^5.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
+    "@graphql-codegen/cli": "^1.21.7",
+    "@graphql-codegen/typescript": "^1.23.0",
+    "@graphql-codegen/typescript-operations": "^1.18.4",
+    "@graphql-codegen/typescript-react-apollo": "^2.3.1",
     "@types/react": "~16.9.35",
     "@types/react-native": "~0.63.2",
+    "@types/react-router-dom": "^5.1.8",
+    "get-graphql-schema": "^2.1.2",
     "typescript": "~4.0.0"
   },
   "private": true

src/components/repository/repositories.graphql

@@ -0,0 +1,17 @@
+query Top($userName: String!, $after: String) {
+  user(login: $userName) {
+    id
+    name
+    avatarUrl
+    repositories(first: 20, after: $after) {
+      edges {
+        node {
+          id
+          name
+          url
+          viewerHasStarred
+        }
+      }
+    }
+  }
+}

src/context/Auth.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, useContext, useState } from "react";
+import { IdentifyToken } from "../model/IdentifyToken";
+
+type Login = (token: IdentifyToken) => void;
+const LoginContext = createContext<Login>((_) =>
+  console.error("Unexpected not set login handler")
+);
+const IdentifyTokenContext = createContext<IdentifyToken | null>(null);
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const AuthProvider: React.VFC<Props> = ({ children }) => {
+  const [identifyToken, setIdentifyToken] = useState<IdentifyToken | null>(
+    null
+  );
+
+  console.log(`identifyToken: ${identifyToken}`);
+  const login = (token: IdentifyToken) => {
+    console.log(`called setIdentifyToken`);
+    setIdentifyToken(token);
+  };
+
+  return (
+    <LoginContext.Provider value={login}>
+      <IdentifyTokenContext.Provider value={identifyToken}>
+        {children}
+      </IdentifyTokenContext.Provider>
+    </LoginContext.Provider>
+  );
+};
+
+export const useIdentifyToken = () => useContext(IdentifyTokenContext);
+export const useLogin = () => useContext(LoginContext);

src/core/Apollo.ts

@@ -0,0 +1,30 @@
+import {
+  ApolloClient,
+  createHttpLink,
+  NormalizedCacheObject,
+} from "@apollo/client/core";
+import { setContext } from "@apollo/client/link/context";
+
+import { InMemoryCache } from "@apollo/client/cache";
+
+const httpLink = createHttpLink({
+  uri: "https://api.github.com/graphql",
+});
+const authLink = setContext((_, { headers }) => {
+  const token = localStorage.getItem("github_token");
+  return {
+    headers: {
+      ...headers,
+      authorization: token ? `Bearer ${token}` : "",
+    },
+  };
+});
+
+export function createApolloClient(
+  token: string
+): ApolloClient<NormalizedCacheObject> {
+  return new ApolloClient({
+    cache: new InMemoryCache(),
+    link: httpLink.concat(authLink),
+  });
+}