Merge pull request #532 from Kamlesh72/feat/github-star-btn

Feat: CTA Button to Star Github Repo

Author: jayantbh

web-server/src/components/GithubButton.tsx

@@ -0,0 +1,54 @@
+import StarBorderOutlined from '@mui/icons-material/StarBorderOutlined';
+import { Button, ButtonProps, Divider, useTheme } from '@mui/material';
+import { FC, useMemo } from 'react';
+
+import { FlexBox } from '@/components/FlexBox';
+import { Line } from '@/components/Text';
+import { useSelector } from '@/store';
+
+const githubRepoUrl = `https://github.com/middlewarehq/middleware`;
+
+const formatStarCount = (stars: number) => {
+  if (isNaN(stars)) return '';
+  if (stars < 1000) return `${stars}`;
+
+  return `${Number((stars / 1000).toFixed(1))}k`;
+};
+
+export const GithubButton: FC<ButtonProps> = () => {
+  const theme = useTheme();
+  const githubRepoStars = useSelector((s) => s.app.githubRepoStarsCount);
+  const githubRepoStarsCount = useMemo(
+    () => formatStarCount(githubRepoStars),
+    [githubRepoStars]
+  );
+
+  return (
+    <Button
+      variant="outlined"
+      sx={{
+        borderRadius: 0.8,
+        borderColor: theme.colors.alpha.trueWhite[10],
+        color: 'lightgray',
+        height: 40,
+        padding: '0 18px'
+      }}
+      onClick={() => window.open(githubRepoUrl, '_blank')}
+    >
+      <FlexBox alignCenter>
+        <StarBorderOutlined fontSize="small" />
+        <Line bold marginLeft={1}>
+          Star
+        </Line>
+      </FlexBox>
+      <Divider
+        orientation="vertical"
+        sx={{
+          height: '100%',
+          marginX: 2
+        }}
+      />
+      <Line bold>{githubRepoStarsCount}</Line>
+    </Button>
+  );
+};

web-server/src/components/PageHeader.tsx

@@ -17,6 +17,7 @@ import { TeamSelectorModes } from '@/types/resources';
 import { AvatarPageTitle } from './AvatarPageTitle';
 import { BranchSelector } from './BranchSelector';
 import { FlexBox, FlexBoxProps } from './FlexBox';
+import { GithubButton } from './GithubButton';
 import { Hotkey } from './Hotkey';
 import { Logo } from './Logo/Logo';
 import { Tabs } from './Tabs';
@@ -100,6 +101,7 @@ export const PageHeader: FC<
             {children}
           </FlexBox>
           {Boolean(subRoutes?.length) && <PageTabs subRoutes={subRoutes} />}
+          <GithubButton />
         </FlexBox>
         {showSelectorSection && (
           <>

web-server/src/components/PageTitleWrapper/index.tsx

@@ -28,7 +28,7 @@ export const PageTitleWrapper: FC<BoxProps> = ({ children, ...props }) => {
       className="MuiPageTitle-wrapper"
       {...props}
       p={4}
-      py={{ lg: 2.5, xs: 2 }}
+      py={{ lg: 2.6, xs: 2 }}
       sx={{ ...props.sx, marginBottom: `0 !important` }}
     >
       {children}

web-server/src/components/TopLevelLogicComponent.tsx

@@ -1,8 +1,17 @@
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
 
 import { useImageUpdateStatusWorker } from '@/hooks/useImageUpdateStatusWorker';
+import { getGithubRepoStars } from '@/slices/app';
+import { useDispatch } from '@/store';
 
 export const TopLevelLogicComponent: FC = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(getGithubRepoStars());
+  }, [dispatch, getGithubRepoStars]);
+
   useImageUpdateStatusWorker();
+
   return null;
 };

web-server/src/slices/app.ts

@@ -28,9 +28,14 @@ type Error = {
 
 type Name = string;
 type ErrorMap = Record<Name, Error>;
+type GithubStarsAPIResponse = {
+  stargazers_count: number;
+};
 export type SerializableDateRange = [string, string];
 export type NetworkType = 'slow-2g' | '2g' | '3g' | '4g';
 
+const githubRepoApiUrl = `https://api.github.com/repos/middlewarehq/middleware`;
+
 // This state contains things that will generally be persisted to localStorage
 type State = StateFetchConfig<{
   networkType: NetworkType;
@@ -51,6 +56,7 @@ type State = StateFetchConfig<{
   lastDisabledImageUpdateBannerAt: DateString | null;
   latestImageStatus: ImageStatusApiResponse | null;
   selectedIndustry: Industries;
+  githubRepoStarsCount: number | null;
 }>;
 
 export const DEFAULT_PR_TABLE_COLUMN_STATE_MAP = {
@@ -91,7 +97,8 @@ const initialState: State = {
   lastSyncedAt: null,
   lastDisabledImageUpdateBannerAt: null,
   latestImageStatus: null,
-  selectedIndustry: Industries.ALL_INDUSTRIES
+  selectedIndustry: Industries.ALL_INDUSTRIES,
+  githubRepoStarsCount: null
 };
 
 export const appSlice = createSlice({
@@ -244,6 +251,14 @@ export const appSlice = createSlice({
         }
       }
     );
+    addFetchCasesToReducer(
+      builder,
+      getGithubRepoStars,
+      'githubRepoStarsCount',
+      (state, action) => {
+        state.githubRepoStarsCount = action.payload;
+      }
+    );
   }
 });
 
@@ -275,6 +290,15 @@ export const updateTeamBranchesMap = createAsyncThunk(
   }
 );
 
+export const getGithubRepoStars = createAsyncThunk(
+  'app/getGithubRepoStars',
+  async () => {
+    const res = await fetch(githubRepoApiUrl);
+    const data: GithubStarsAPIResponse = await res.json();
+    return data.stargazers_count;
+  }
+);
+
 const getSelectedTeam = (
   selectedTeam: State['singleTeam'],
   allTeams: State['allTeams']