navbar

web/src/components/NavBar.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Box, Link, Flex, Button } from "@chakra-ui/core";
+import NextLink from "next/link";
+import { useMeQuery } from "../generated/graphql";
+
+interface NavBarProps {}
+
+export const NavBar: React.FC<NavBarProps> = ({}) => {
+  const [{ data, fetching }] = useMeQuery();
+  let body = null;
+
+  // data is loading
+  if (fetching) {
+    // user not logged in
+  } else if (!data?.me) {
+    body = (
+      <>
+        <NextLink href="/login">
+          <Link mr={2}>login</Link>
+        </NextLink>
+        <NextLink href="/register">
+          <Link>register</Link>
+        </NextLink>
+      </>
+    );
+    // user is logged in
+  } else {
+    body = (
+      <Flex>
+        <Box mr={2}>{data.me.username}</Box>
+        <Button variant="link">logout</Button>
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex bg="tomato" p={4}>
+      <Box ml={"auto"}>{body}</Box>
+    </Flex>
+  );
+};

web/src/generated/graphql.tsx

@@ -93,6 +93,25 @@ export type UsernamePasswordInput = {
   password: Scalars['String'];
 };
 
+export type LoginMutationVariables = Exact<{
+  options: UsernamePasswordInput;
+}>;
+
+
+export type LoginMutation = (
+  { __typename?: 'Mutation' }
+  & { login: (
+    { __typename?: 'UserResponse' }
+    & { errors?: Maybe<Array<(
+      { __typename?: 'FieldError' }
+      & Pick<FieldError, 'field' | 'message'>
+    )>>, user?: Maybe<(
+      { __typename?: 'User' }
+      & Pick<User, 'id' | 'username'>
+    )> }
+  ) }
+);
+
 export type RegisterMutationVariables = Exact<{
   username: Scalars['String'];
   password: Scalars['String'];
@@ -113,7 +132,36 @@ export type RegisterMutation = (
   ) }
 );
 
+export type MeQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type MeQuery = (
+  { __typename?: 'Query' }
+  & { me?: Maybe<(
+    { __typename?: 'User' }
+    & Pick<User, 'id' | 'username'>
+  )> }
+);
+
 
+export const LoginDocument = gql`
+    mutation Login($options: UsernamePasswordInput!) {
+  login(options: $options) {
+    errors {
+      field
+      message
+    }
+    user {
+      id
+      username
+    }
+  }
+}
+    `;
+
+export function useLoginMutation() {
+  return Urql.useMutation<LoginMutation, LoginMutationVariables>(LoginDocument);
+};
 export const RegisterDocument = gql`
     mutation Register($username: String!, $password: String!) {
   register(options: {username: $username, password: $password}) {
@@ -131,4 +179,16 @@ export const RegisterDocument = gql`
 
 export function useRegisterMutation() {
   return Urql.useMutation<RegisterMutation, RegisterMutationVariables>(RegisterDocument);
+};
+export const MeDocument = gql`
+    query Me {
+  me {
+    id
+    username
+  }
+}
+    `;
+
+export function useMeQuery(options: Omit<Urql.UseQueryArgs<MeQueryVariables>, 'query'> = {}) {
+  return Urql.useQuery<MeQuery>({ query: MeDocument, ...options });
 };

web/src/graphql/mutations/login.graphql

@@ -0,0 +1,12 @@
+mutation Login($options: UsernamePasswordInput!) {
+  login(options: $options) {
+    errors {
+      field
+      message
+    }
+    user {
+      id
+      username
+    }
+  }
+}

web/src/graphql/queries/me.graphql

@@ -0,0 +1,6 @@
+query Me {
+  me {
+    id
+    username
+  }
+}

web/src/pages/index.tsx

@@ -1,3 +1,10 @@
-const Index = () => <div>hello world</div>;
+import { NavBar } from "../components/NavBar";
+
+const Index = () => (
+  <>
+    <NavBar />
+    <div>hello world</div>
+  </>
+);
 
 export default Index;

web/src/pages/login.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Formik, Form } from "formik";
+import { Box, Button } from "@chakra-ui/core";
+import { Wrapper } from "../components/Wrapper";
+import { InputField } from "../components/InputField";
+import { useLoginMutation } from "../generated/graphql";
+import { toErrorMap } from "../utils/toErrorMap";
+import { useRouter } from "next/router";
+
+const Login: React.FC<{}> = ({}) => {
+  const router = useRouter();
+  const [, login] = useLoginMutation();
+  return (
+    <Wrapper variant="small">
+      <Formik
+        initialValues={{ username: "", password: "" }}
+        onSubmit={async (values, { setErrors }) => {
+          const response = await login({ options: values });
+          if (response.data?.login.errors) {
+            setErrors(toErrorMap(response.data.login.errors));
+          } else if (response.data?.login.user) {
+            // worked
+            router.push("/");
+          }
+        }}
+      >
+        {({ isSubmitting }) => (
+          <Form>
+            <InputField
+              name="username"
+              placeholder="username"
+              label="Username"
+            />
+            <Box mt={4}>
+              <InputField
+                name="password"
+                placeholder="password"
+                label="Password"
+                type="password"
+              />
+            </Box>
+            <Button
+              mt={4}
+              type="submit"
+              isLoading={isSubmitting}
+              variantColor="teal"
+            >
+              login
+            </Button>
+          </Form>
+        )}
+      </Formik>
+    </Wrapper>
+  );
+};
+
+export default Login;

web/tsconfig.json

@@ -5,6 +5,14 @@
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,