freeCodeCamp / classroom

BSD 3-Clause "New" or "Revised" License
143 stars 120 forks source link

Refactor variable names in the file that handles the dashboard page to be more intuitive #495

Open ngillux opened 11 months ago

ngillux commented 11 months ago

[ISSUE RESERVED FOR CTI STUDENT(S)]


Issue Context: There is a file called [id].js found in pages/dashboard/v2/[id].js; this file contains the logic behind the dashboard page when a teacher clicks ‘View Class.’

Screenshot 2023-10-15 at 1 00 37 PM

[id].js uses utility functions from an external file called _apiprocessor.js which handles API processing functionality; we currently use mock student data (mock-json-server/fccdata.json) which we make an API call to, and we make an API call to FreeCodeCamp’s (FCC) curriculum data.

For current and future contributors, it may be important to understand how [id].js and _apiprocessor.js are connected to one another, one way of doing this is ensuring the variable names are meaningful.


Issue Objective: There are 4 variables in [id].js that could be renamed to be more specific.

Navigate to pages/v2/dashboard/v2/[id].js and update the variables to be more meaningful based on what they represent / their behavior. Feel free to update other variable names that are not mentioned on the list if they seem obscure / could use a more relevant name.

Variable name: timestamps Variable holds: An array of objects (i.e., [ {}, {}, …etc]), where each object has 2 attributes; ‘name’ and ‘timestamps’.

The ‘name’ attribute is the student’s email, and the ‘timestamps’ attribute as an array of timestamps (these are milliseconds, as we have logic which eventually turns them into Dates using JavaScript’s Date.now(), see the components/studentActivity.js file if you’re curious about more details).

Here is an example of what is stored in timestamps: [ { name: 'student[A]@gmail.com', completedTimestamps: [ 1475094716730, 1537207306322, 98448684, 98448643284, 47664591 ] }, { name: 'student[B]@gmail.com', completedTimestamps: [ 98448684, 98448643284, 47664591 ] } ]


Variable name: superblockURLS Variable holds: Holds an array of strings which are URL endpoints with information specific to a certificate/superblock. For example, the certificate/superblock data for Responsive Web Design can be found at https://www.freecodecamp.org/curriculum-data/v1/2022/responsive-web-design.json.

The logic that derives these URLs requires the data from FCC’s curriculum endpoint and our database (‘Classroom’ table, specifically the ‘fccCertifications’ column, run npx prisma studio and navigate to Classroom for more details) which is updated when a teacher first creates a class (view components/ClassInviteTable.js and components/modal.js if you’re curious for more details).

Here is an example of what is stored in superblockURLS.

[
  'https://www.freecodecamp.org/curriculum-data/v1/2022/responsive-web-design.json',
  'https://www.freecodecamp.org/curriculum-data/v1/quality-assurance.json'
]

Variable name: superblockJSONS Variable holds: Stores an array os objects, where each object’s key is the certificate/superblock name, and the value is an object with the details for the certificate/superblock.

Here is an example of what is stored in superblockJSONS:

[
  {
    '2022/responsive-web-design': { intro: [Array], blocks: [Object] }
  },
  { 'quality-assurance': { intro: [Array], blocks: [Object] } }
]

Variable name: dashboardObjs Variable holds: An array of objects, where each object holds data on a specific certificate/superblock. The index of where the object is in the array relates to the fccCertificates array.

Here is an example of what is stored in superblockJSONS:

[
  [
    {
      name: 'Learn HTML by Building a Cat Photo App',
      selector: 'learn-html-by-building-a-cat-photo-app',
      dashedName: 'learn-html-by-building-a-cat-photo-app',
      allChallenges: [Array],
      order: 0
    },
    {
      name: 'Learn Basic CSS by Building a Cafe Menu',
      selector: 'learn-basic-css-by-building-a-cafe-menu',
      dashedName: 'learn-basic-css-by-building-a-cafe-menu',
      allChallenges: [Array],
      order: 1
    },
]

Expected behavior after refactor: The UI will remain the same, however, the code will be more intuitive for current / future contributors.

shivamMukhia commented 11 months ago

I want to work on this issue

utsab commented 11 months ago

We are assigning this issue to one of the Computing Talent Initiative (CTI) teams. Sorry @Shivam-sahni, for the month of November, we will have a number of CTI students contribute to this project, and we are reserving issues for them.

emilyshawkins commented 11 months ago

I'm working on this