Merge pull request #2

* Zustand + React Query setup

* Integrating Zustand, RQ and api.github with a basic implementation

ui/generate-react-cli.json

@@ -4,7 +4,7 @@
  "testLibrary": "None",
  "component": {
  "default": {
- "path": "src/components",
+ "path": "src/views",
  "withStyle": true,
  "withTest": false,
  "withStory": false,

ui/package.json

@@ -6,28 +6,30 @@
  "@emotion/react": "^11.11.4",
  "@emotion/styled": "^11.11.5",
  "@mui/material": "^5.15.16",
- "@types/axios": "^0.14.0",
- "@types/js-yaml": "^4.0.9",
+ "@tanstack/react-query": "^5.34.1",
  "axios": "^1.6.8",
  "js-yaml": "^4.1.0",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "styled-components": "^6.1.9",
  "typescript": "^4.9.5",
- "web-vitals": "^2.1.4"
+ "web-vitals": "^2.1.4",
+ "zustand": "^4.5.2"
  },
  "devDependencies": {
+ "@tanstack/react-query-devtools": "^5.34.1",
  "@testing-library/jest-dom": "^5.17.0",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
+ "@types/axios": "^0.14.0",
  "@types/jest": "^27.5.2",
+ "@types/js-yaml": "^4.0.9",
  "@types/node": "^16.18.96",
  "@types/react": "^18.3.1",
  "@types/react-dom": "^18.3.0",
  "@types/styled-components": "^5.1.34",
  "react-scripts": "^5.0.1"
  },
-
  "scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",

ui/src/App.tsx

@@ -1,11 +1,74 @@
 import React from 'react';
 import './App.css';
+import {useGitDetails} from "./store";
+import {useUserInfo} from "./hooks";
 
 
+export const Left= (): React.JSX.Element => {
+ const {addToken, addBaseUrl} = useGitDetails();
+
+ const addTokenHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
+ event.preventDefault();
+
+
+ addToken("<YOUR_TOKEN>");
+ addBaseUrl("https://api.github.com");
+ }
+
+ return (
+ <>
+ <button onClick={
+ addTokenHandler
+ }>Click Me To Get User Info
+ </button>
+ </>
+
+ );
+}
+
+export const Right = (): React.JSX.Element => {
+ const {token, baseUrl} = useGitDetails();
+
+ if (!token || !baseUrl){
+ return (
+ <div>Enter your token and base url</div>
+ )
+ }
+
+ return (
+ <UserInfo/>
+ );
+}
+
+const UserInfo = (): React.JSX.Element => {
+ const {isPending, data, error} = useUserInfo();
+
+ if (isPending) {
+ return (
+ <div>Loading...</div>
+ )
+ }
+
+ if (error) {
+ return (
+ <div>Error: {error.message}</div>
+ )
+ }
+
+ return (
+ <div>
+ <h1>{data?.name}</h1>
+ <p>{data?.email}</p>
+ </div>
+ );
+}
+
 
 export const App = (): React.JSX.Element => {
  return (
- <div className="App">Hello World</div>
+ <>
+ <Left/> <Right/>
+ </>
  );
 }
 

ui/src/api/git.ts

@@ -0,0 +1,17 @@
+import axios from 'axios'
+import {useGitDetails} from "../store";
+
+export const gitApi = axios.create({
+ baseURL: useGitDetails.getState().baseUrl,
+ timeout: 1000,
+ headers: {
+ 'Authorization': `Bearer ${useGitDetails.getState().token}`,
+ 'Content-Type': 'application/json',
+ },
+})
+
+// TODO: Auth token in not updating when it changes.
+useGitDetails.subscribe(state => {
+ gitApi.defaults.baseURL = state.baseUrl
+ gitApi.defaults.headers.common['Authorization'] = `Bearer ${state.token}`
+})

ui/src/api/index.ts

@@ -0,0 +1 @@
+export {gitApi} from "./git";

ui/src/hooks/index.ts

@@ -0,0 +1 @@
+export {useUserInfo} from "./useUserInfo";

ui/src/hooks/useUserInfo.ts

@@ -0,0 +1,16 @@
+import {gitApi} from "../api";
+import {useQuery} from "@tanstack/react-query";
+
+
+const fetchUserInfo = async () => {
+ const {data} = await gitApi.get('/user');
+ return data;
+}
+
+export const useUserInfo = () => {
+ return useQuery({
+ queryKey: ['user-info'],
+ queryFn: fetchUserInfo,
+ retry: 1
+ })
+}

ui/src/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import {App} from './App';
 import reportWebVitals from './reportWebVitals';
+import {ReactQueryProvider} from "./providers";
 
 const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
@@ -11,7 +12,9 @@ const root = ReactDOM.createRoot(
 
 root.render(
  <React.StrictMode>
- <App />
+ <ReactQueryProvider>
+ <App />
+ </ReactQueryProvider>
  </React.StrictMode>
 );
 

ui/src/providers/index.ts

@@ -0,0 +1 @@
+export {ReactQueryProvider} from "./react-query-provider";

ui/src/providers/react-query-provider.tsx

@@ -0,0 +1,14 @@
+import {PropsWithChildren} from "react";
+import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
+import {ReactQueryDevtools} from "@tanstack/react-query-devtools";
+
+const queryClient = new QueryClient();
+
+export const ReactQueryProvider = ({children}: PropsWithChildren) => {
+ return (
+ <QueryClientProvider client={queryClient}>
+ {children}
+ <ReactQueryDevtools initialIsOpen={false} />
+ </QueryClientProvider>
+ )
+}

ui/src/store/git-details.ts

@@ -0,0 +1,24 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+type gitDetails = {
+ baseUrl: string;
+ token: string;
+ addBaseUrl: (baseUrl: string) => void;
+ addToken: (token: string) => void;
+
+}
+
+export const useGitDetails = create(
+ persist<gitDetails>(
+ (set: any) => ({
+ baseUrl: "",
+ token: "",
+ addBaseUrl: (baseUrl: string) => set(() => ({baseUrl})),
+ addToken: (token: string) => set(() => ({token})),
+ }),
+ {
+ name: "git-details",
+ }
+ )
+)

ui/src/store/index.ts

@@ -0,0 +1 @@
+export {useGitDetails} from "./git-details";