{"id":24018685,"url":"https://github.com/ryancoll/comp-3330-week3","last_synced_at":"2026-08-01T20:31:20.668Z","repository":{"id":139649189,"uuid":"410121010","full_name":"RyanColl/COMP-3330-week3","owner":"RyanColl","description":null,"archived":false,"fork":false,"pushed_at":"2021-10-04T00:17:20.000Z","size":445,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-25T21:35:22.252Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RyanColl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-24T22:48:57.000Z","updated_at":"2021-10-04T00:17:23.000Z","dependencies_parsed_at":"2023-07-23T08:15:44.316Z","dependency_job_id":null,"html_url":"https://github.com/RyanColl/COMP-3330-week3","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RyanColl/COMP-3330-week3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanColl%2FCOMP-3330-week3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanColl%2FCOMP-3330-week3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanColl%2FCOMP-3330-week3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanColl%2FCOMP-3330-week3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RyanColl","download_url":"https://codeload.github.com/RyanColl/COMP-3330-week3/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanColl%2FCOMP-3330-week3/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279005967,"owners_count":26084004,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-08T10:17:37.732Z","updated_at":"2025-10-11T02:43:24.158Z","avatar_url":"https://github.com/RyanColl.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Getting Started With My Project!\n\n## Week 3\n\n### ES6 Usage Examples\n\nIn this project, I used the following EC6 features:\n\nArrow Function from line 9 of List.tsx: \u003cpre\u003e\u003ccode\u003econst linkPress = (course: string) =\u003e {\n        store.dispatch(actions.addCourse(course));\n        console.log(store.getState())\n  }\u003c/code\u003e\u003c/pre\u003e\n\nDestructuring from line 23 of App.tsx: \u003cpre\u003e\u003ccode\u003econst [courses, setCourses] = useState([])\u003c/code\u003e\u003c/pre\u003e\n\nDefault from line 5 of reducer.js: \u003cpre\u003e\u003ccode\u003eexport default function reducer(state = [], action) {}\u003c/code\u003e\u003c/pre\u003e\n\nLet from line 10 of Item.tsx: \u003cpre\u003e\u003ccode\u003elet path = useLocation().pathname.substr(6);\u003c/code\u003e\u003c/pre\u003e\n\nThis is the extent of my EC6 feature usage in this project.\n\n### Typescript\n\nTypescript is involved in the project, but do not worry, simply using ```npm install``` when you enter the project solves any sort of dependency problems. To install typescript in a react-app of your own, visit this [link.](https://create-react-app.dev/docs/adding-typescript/)\n\n### Ternary\n\n[Ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) is used to check a condition that returns a boolean, and then executes code based on whether it is true or false. Ternary can look at a boolean directly, or it can look at a comparison, as it always resorts to a boolean. \n\n### State\n\nState is used to update a component. Updating a component re-renders it, but with the re-rendered value. \u003c/br\u003e\nFor example, in the following code, we will destructure our state variable and our component-updating function (as described in the [docs](https://reactjs.org/docs/hooks-state.html)) and give it an initial value of a an empty array. In our actual code, we fill this array with a 7-piece data-set, so we will not include it here. Can be found on line 23 of App.tsx.\n\u003c/br\u003e\n\n\u003ccode\u003econst [courses, setCourses] = useState([])\u003c/code\u003e\n\n### How It Works\n\nMy app is simple and introduces the use of redux, but not in a way that is meaningful yet. Redux is a new topic, and I have implemented into some buttons the logic required to dispatch into state the name of the current course selected. I have provided a back button that returns to the list, and filters through the state and pulls the course out of state. I see that when state is changed in Redux, we may have to re-render a component to see it. I will leave that for another time. The react router dom handles requests from the url parameters. I made a courses array in state, sent it as props down to both list and item. I used \u003cList /\u003e to handle the ``` /list ``` url, and \u003cItem /\u003e to handle any parameter after the list url, like ``` /list/COMP-3330 ```. I use the parameter in item to filter through the courses array and grab the correct course. I then map the course into an ``` h1 ``` tag and a ``` span ``` tag.\n\n### Redux\n\nI have also added a state tracker on the page using Redux. You will see that the state matches the name of the course displayed. This is because I have included some logic inside of the onClick for the list: \n\n\u003cpre\u003e\u003ccode\u003econst linkPress = (course: string) =\u003e {\n      store.dispatch(actions.addCourse(course));\n      console.log(store.getState())\n  }\u003c/code\u003e\u003c/pre\u003e\n  \nWhat this does is take in the course from the link, put it into state, and log the new state. This new state is what is being read in Item.tsx on lines 30-32. When we want to return to our list, I have included a back button from [material-icons](https://mui.com/components/material-icons/). The logic placed in this back button is what is called that allows our state to be updated and the current course removed:\n\n\u003cpre\u003e\u003ccode\u003econst onBack = () =\u003e {\n        store.dispatch(actions.removeCourse(courses.filter(course =\u003e course.course === path)[0]))\n        console.log(store.getState())\n    }\u003c/code\u003e\u003c/pre\u003e\n\nThis dispatches an array that is produced from filtering the courses array to match the course that shares name with the current path. We then console log the state, which is now an empty array as expected.\n\nOverall, I am starting to see the big picture with react redux, and look forward to potentially building it into a larger project. More study on Redux will be needed.\n\nPlease feel free to check out my website too, which is currently just a work in progress. [RyanColl](https://www.rcoll-dev.com)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryancoll%2Fcomp-3330-week3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryancoll%2Fcomp-3330-week3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryancoll%2Fcomp-3330-week3/lists"}