Merge branch 'main' into main

Author: danolekh

CONTRIBUTING.md

@@ -34,43 +34,45 @@ If you are getting WSL error when you launch your desktop docker application, go
 
 To get started with Code Racer locally, follow these steps
 
-1. Fork the repo
+1. Make sure you have installed Docker locally (See above Prerequisites)
 
-2. Clone your fork
+2. Fork the repo
+
+3. Clone your fork
 
  ```sh
  git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/code-racer.git
  ```
 
-3. Navigate to the project directory
+4. Navigate to the project directory
 
  ```sh
  cd code-racer
  ```
 
-4. Create a .env file inside the project's packages/app directory.
+5. Create a .env file inside the project's packages/app directory.
 
-5. Copy and paste variables from `packages/app/.env.example` into `packages/app/.env`
+6. Copy and paste variables from `packages/app/.env.example` into `packages/app/.env`
 
-6. Install NPM packages
+7. Install NPM packages
 
  ```sh
  npm i
  ```
 
-7. Start the database
+8. Start the database
 
  ```sh
  npm run dev:db
  ```
 
-8. Start the app dev server
+9. Start the app dev server
 
  ```sh
  npm run dev:app
  ```
 
-9. Start the web socket server
+10. Start the web socket server
 
  ```sh
  npm run dev:wss
@@ -80,9 +82,14 @@ Open your browser and visit <http://localhost:3000> to see the application runni
 
 ## Working on New Features
 
-If you're new to github and working with open source repositories, I made a video a while back which walks you through the process:
+If you're new to Github and working with open source repositories, I made a video a while back which walks you through the process:
 [![How to make a pull request on an open source project](https://img.youtube.com/vi/8A4TsoXJOs8/0.jpg)](https://youtu.be/8A4TsoXJOs8)
 
+There is also a new video explaining how you can contribute to this project:
+<br/>
+[How to contribute to open source projects (our community project walkthrough)](https://www.youtube.com/watch?v=dLRA1lffWBw)
+
+
 If you want to work on a new feature, follow these steps.
 
 1. Fork the repo
@@ -105,15 +112,15 @@ git checkout main
 git pull upstream main
 ```
 
-## Before Submitting Pull Request
+## Before Submitting a Pull Request
 Before submitting a **Pull Request**, you should
 1. Check your code safety with Linter and TypeScript, and make sure your code can build successfully.
 
 ```sh
 npm run pr:precheck
 ```
 
-2. (Optional) Do an E2E test to ensure application function properly
+2. (Optional) Do an E2E test to ensure application functions properly
 
 ```
 npm run e2e -w @code-racer/app
@@ -124,7 +131,8 @@ npm run e2e -w @code-racer/app
 
 In the interest of fostering an open and welcoming environment, we as
 contributors and maintainers pledge to making participation in our project and
-our community a friendly experience for everyone, regardless of any experience to give everyone an opportunity to contribute in this project.
+our community a friendly experience for everyone, regardless of any experience
+to give everyone an opportunity to contribute in this project.
 
 ### Our Responsibilities
 

packages/app/LICENSE renamed to LICENSE

@@ -1,5 +1,5 @@
 <div align="center" >
- <img src="./packages/app/public/static/logo.png" width="60" alt="">
+ <img src="./packages/app/public/static/logo.png" width="60" alt="code-racer-logo">
  <br/>
  <h1>Code Racer</h1>
 </div>
@@ -29,10 +29,10 @@
 
 ## Technologies Used :computer:
 
-- [Next.js](https://nextjs.org) : A React framework for building server-side rendered and statically generated applications.
-- [NextAuth](https://next-auth.js.org) : For user authentication.
-- [Prisma](https://www.prisma.io) : Next-generation ORM, it provides a clean and type-safe API for submitting database queries
-- [Tailwind CSS](https://tailwindcss.com) : A utility-first CSS framework for rapid UI development.
+- [Next.js](https://nextjs.org): A React framework for building server-side rendered and statically generated applications.
+- [NextAuth](https://next-auth.js.org): For user authentication.
+- [Prisma](https://www.prisma.io): Next-generation ORM, it provides a clean and type-safe API for submitting database queries.
+- [Tailwind CSS](https://tailwindcss.com): A utility-first CSS framework for rapid UI development.
 - [TypeScript](https://www.typescriptlang.org): A typed superset of JavaScript that provides enhanced tooling and developer productivity.
 
 ## Contribution :raised_hands:
@@ -60,18 +60,20 @@ A big thank you to all the developers who have helped shape Code Racer into what
 
 ## Contact :mailbox:
 
-If you have any questions, suggestions, or feedback regarding Code Racer, please feel free to reach out to us on the [WebDevCody discord server](https://discord.gg/4kGbBaa).
+If you have any questions, suggestions, or feedback regarding Code Racer, please feel free to reach out to us at in the WebDevCody [discord](https://discord.gg/4kGbBaa) server.
 
 Happy coding and enjoy the race!
 
 ## Related Youtube Videos & Progress :movie_camera:
 
 1. [Community Project Announcement Video](https://www.youtube.com/watch?v=-n6tV3RPjGc)
 2. [First Q&A Livestream and Community Project Live Coding Session](https://www.youtube.com/watch?v=BQXXBsHXfak)
+3. [How to contribute to open source projects (our community project walkthrough)](https://www.youtube.com/watch?v=dLRA1lffWBw)
+4. [You need to write tests when this starts to happen](https://www.youtube.com/watch?v=PzrhclEQp-M)
 
 <details>
  <summary>
- <h2>How To(s) - A newbie section</h2>
+  <h2>How To(s) - A newbie section</h2>
  </summary>
 
 ### Check the logs of Post

README.md

@@ -50,6 +50,7 @@
  "class-variance-authority": "^0.6.1",
  "clsx": "^1.2.1",
  "cmdk": "^0.2.0",
+ "lodash": "^4.17.21",
  "lucide-react": "^0.259.0",
  "next": "13.4.9",
  "next-auth": "^4.22.1",
@@ -81,6 +82,7 @@
  },
  "devDependencies": {
  "@flydotio/dockerfile": "^0.3.3",
+ "@types/lodash": "^4.14.197",
  "@types/node": "^20.4.1",
  "@types/react": "^18.2.15",
  "@types/react-dom": "18.2.6",

package-lock.json

@@ -0,0 +1,5 @@
+"use client";
+
+export default function Error() {
+ return <div>Something went wrong</div>;
+}

packages/app/package.json

@@ -1,4 +1,5 @@
 import { prisma } from "@/lib/prisma";
+import { omit } from "lodash";
 
 export async function getUsersWithResultCounts({
  take,
@@ -17,7 +18,13 @@ export async function getUsersWithResultCounts({
  _count: order,
  },
  },
- include: {
+ select: {
+ id: true,
+ image: true,
+ averageAccuracy: true,
+ averageCpm: true,
+ name: true,
+ topLanguages: true,
  results: true,
  },
  where: {
@@ -28,11 +35,19 @@ export async function getUsersWithResultCounts({
  },
  },
  });
+
+ // return users.map(omitSensitiveUserFields);
 }
 
 export async function getAllUsersWithResults() {
- return await prisma.user.findMany({
- include: {
+ const users = await prisma.user.findMany({
+ select: {
+ id: true,
+ averageAccuracy: true,
+ averageCpm: true,
+ image: true,
+ name: true,
+ topLanguages: true,
  results: true,
  },
  where: {
@@ -43,6 +58,7 @@ export async function getAllUsersWithResults() {
  },
  },
  });
+ return users;
 }
 
 export async function getUsersWithResults({
@@ -56,13 +72,19 @@ export async function getUsersWithResults({
  sortBy: string;
  order: "asc" | "desc" | undefined;
 }) {
- return await prisma.user.findMany({
+ const users = await prisma.user.findMany({
  take,
  skip,
  orderBy: {
  [sortBy]: order,
  },
- include: {
+ select: {
+ id: true,
+ image: true,
+ averageAccuracy: true,
+ averageCpm: true,
+ name: true,
+ topLanguages: true,
  results: true,
  },
  where: {
@@ -73,6 +95,8 @@ export async function getUsersWithResults({
  },
  },
  });
+
+ return users;
 }
 
 export async function getTotalUsers() {

packages/app/src/app/error.tsx

@@ -1,6 +1,6 @@
 import { Heading } from "@/components/ui/heading";
 import { getCurrentUser } from "@/lib/session.js";
-import { Result, User } from "@prisma/client";
+import { User } from "@prisma/client";
 import {
  getAllUsersWithResults,
  getTotalUsers,
@@ -11,8 +11,7 @@ import {
 import { UserRankings } from "./user-rankings";
 import { UsersTable } from "./users-table";
 import { sortFilters } from "./sort-filters";
-
-type UserWithResults = User & { results: Result[] };
+import { UserWithResults } from "./types";
 
 function setUsersRankByValue({
  fieldName,
@@ -48,22 +47,16 @@ function setUsersRankByValue({
  if (prev && current.value == prev.value) {
  userRanks[current.id][fieldName]["shared"] = true;
  }
- 
+
  if (next === undefined || current.value === next.value) {
  return;
  }
 
  currentRank++;
  });
-
-
 }
 
-function calculateUsersRank({
- allUsers,
-}: {
- allUsers: UserWithResults[];
-}) {
+function calculateUsersRank(allUsers: UserWithResults[]) {
  // userRanks stores rank of all users in all category (avgCPM, avgAcc, totalRaces)
  /* { 
  _userID_ : { 
@@ -94,7 +87,7 @@ function calculateUsersRank({
  // Based on Race Played:
  setUsersRankByValue({
  fieldName: sortFilters.RacePlayed,
- values: allUsers.map((u) => ({ id: u.id, value: u.results.length })),
+ values: allUsers.map((u) => ({ id: u.id, value: u.results!.length })),
  userRanks,
  });
 
@@ -138,7 +131,7 @@ export default async function LeaderboardPage({
  typeof sort === "string"
  ? (sort.split(".") as [
  keyof User | sortFilters.RacePlayed | undefined,
- "asc" | "desc" | undefined,
+ "asc" | "desc" | undefined
  ])
  : [];
 
@@ -173,18 +166,21 @@ export default async function LeaderboardPage({
  const allUsers = await getAllUsersWithResults();
  const currUserIsRanked =
  user !== undefined && allUsers.some((u) => u.id === user.id);
- 
- const userRanks = calculateUsersRank({
- allUsers: allUsers,
- });
+
+ const userRanks = calculateUsersRank(allUsers);
 
  return (
  <div className="pt-12">
  <Heading title="Leaderboard" description="Find your competition" />
  {currUserIsRanked ? (
  <UserRankings currentUserRankDetail={userRanks[user.id]} />
  ) : null}
- <UsersTable data={users} pageCount={pageCount} ranks={userRanks} field={sortBy}/>
+ <UsersTable
+ data={users}
+ pageCount={pageCount}
+ ranks={userRanks}
+ field={sortBy}
+ />
  </div>
  );
 }

packages/app/src/app/leaderboard/loaders.ts

@@ -0,0 +1,8 @@
+import { Result, User } from "@prisma/client";
+
+export type UserWithResults = Pick<
+ User,
+ "id" | "averageAccuracy" | "averageCpm" | "name" | "topLanguages" | "image"
+> & {
+ results: Result[];
+};