formatting changes

task-01/src/App.js

@@ -7,13 +7,13 @@ import TabContent from './containers/TabContent';
 
 function App() {
   const [activeTab, setActiveTab] = useState("form");
-  
+
   return (
     <div className="App">
       <ErrorBoundary>
         <LanguageProvider>
           <NavBar className="NavBar" activeTab={activeTab} setActiveTab={setActiveTab} />
-          <TabContent className="App-content" activeTab={activeTab}/>
+          <TabContent className="App-content" activeTab={activeTab} />
         </LanguageProvider>
       </ErrorBoundary>
     </div>

task-01/src/components/LanguageSelector.js

@@ -4,19 +4,19 @@ import { LanguageContext } from "../libs/language";
 import { languageOptions } from "../languages/dictionaryList";
 import './LanguageSelector.css';
 
-export default function LanguageSelector(props){
+export default function LanguageSelector(props) {
     const { userLanguage, userLanguageChange } = useContext(LanguageContext)
 
     const handleLanguageChange = e => userLanguageChange(e.target.value);
 
     return (
         <div {...props}>
-            <div className="langtext"><Text tid="language"/></div>
+            <div className="langtext"><Text tid="language" /></div>
             <select
                 aria-label="Language Selector"
                 onChange={handleLanguageChange}
                 value={userLanguage}
-                >
+            >
                 {Object.entries(languageOptions).map(([id, name]) => <option key={id} value={id}>{name}</option>)}
             </select>
         </div>

task-01/src/containers/Form.js

@@ -15,8 +15,8 @@ export default function Form(props) {
 
   useEffect(() => {
     loadUser()
-    .then(d => { dispatch({type: "setData", payload: d})})
-    .finally(setIsLoading(false));
+      .then(d => { dispatch({ type: "setData", payload: d }) })
+      .finally(setIsLoading(false));
   }, [])
 
   function handleSubmit(e) {

task-01/src/containers/NavBar.js

@@ -3,11 +3,11 @@ import LanguageSelector from "../components/LanguageSelector";
 import Tabs from "./Tabs";
 import "./NavBar.css";
 
-export default function NavBar(props){
+export default function NavBar(props) {
     return (
         <div className="navBar">
-            <Tabs setTabContentClassName={props.setTabContentClassName} activeTab={props.activeTab} setActiveTab={props.setActiveTab}/>
-            <LanguageSelector className="lang"/>
-        </div>  
+            <Tabs setTabContentClassName={props.setTabContentClassName} activeTab={props.activeTab} setActiveTab={props.setActiveTab} />
+            <LanguageSelector className="lang" />
+        </div>
     )
 }

task-01/src/containers/Static.js

@@ -5,14 +5,14 @@ function Static(props) {
     const text = "someContent";
     const arr = [];
 
-    for(let i=0;i<20;i++){
+    for (let i = 0; i < 20; i++) {
         arr.push(text);
     }
 
-    return ( props.isActive ? (
+    return (props.isActive ? (
         <div>
-            <Text tid="selectedLanguage"/><br/><br/>
-            {Object.entries(arr).map(([id,text]) => <Text key={id} id={id} tid={text} />)}
+            <Text tid="selectedLanguage" /><br /><br />
+            {Object.entries(arr).map(([id, text]) => <Text key={id} id={id} tid={text} />)}
         </div>) : null
     )
 }

task-01/src/containers/TabContent.js

@@ -7,10 +7,10 @@ import '../App.css'
 export default function TabContent(props) {
     return (
         <div className={props.className}>
-            <Form isActive={props.activeTab==="form" ? "true" : undefined}/>
-            <Static isActive={props.activeTab==="static" ? "true" : undefined}/>
-            <ClassForm isActive={props.activeTab==="classForm" ? "true" : undefined}/>
-            
+            <Form isActive={props.activeTab === "form" ? "true" : undefined} />
+            <Static isActive={props.activeTab === "static" ? "true" : undefined} />
+            <ClassForm isActive={props.activeTab === "classForm" ? "true" : undefined} />
+
         </div>
     )
 }

task-01/src/libs/contactAPI.js

@@ -9,6 +9,6 @@ export function setContactData(contactData, userID) {
 }
 
 export function deleteContactData(userID) {
-    const url=`${baseUrl}/${userID}`;
-    return fetchAPI("PUT", url, {id: userID})
+    const url = `${baseUrl}/${userID}`;
+    return fetchAPI("PUT", url, { id: userID })
 }

task-01/src/libs/formAPI.js

@@ -8,7 +8,7 @@ export function editUser(e, userData, userID) {
     return fetchAPI("PUT", url, userData);
 }
 
-export async function loadUser(){
+export async function loadUser() {
     const url = baseUrl;
     return fetchAPI("GET", url);
 }

task-01/src/libs/language.js

@@ -6,7 +6,7 @@ export const LanguageContext = createContext({
     dictionary: dictionaryList.eng
 });
 
-export function LanguageProvider({children}){
+export function LanguageProvider({ children }) {
     const [userLanguage, setUserLanguage] = useState("eng")
 
     const provider = {
@@ -25,17 +25,17 @@ export function LanguageProvider({children}){
     );
 };
 
-export function Text({tid}) {
+export function Text({ tid }) {
     const languageContext = useContext(LanguageContext);
     return languageContext.dictionary[tid] || tid;
 };
 
-export function Input(props){
+export function Input(props) {
     const languageContext = useContext(LanguageContext);
     return <input id={props.id} name={props.name} placeholder={languageContext.dictionary[props.tid] || props.tid} onChange={props.onChange} />
 }
 
-export function TextArea(props){
+export function TextArea(props) {
     const languageContext = useContext(LanguageContext);
     return <textarea type={props.type} id={props.id} name={props.name} placeholder={languageContext.dictionary[props.tid] || props.tid} onChange={props.onChange} />
 }

task-01/src/libs/reducer.js

@@ -1,15 +1,15 @@
-export function reducer(state, action){
+export function reducer(state, action) {
     switch (action.type) {
         case "fieldChange": {
-            const newState = {...state, [String(action.payload.name)]: String(action.payload.value)}
+            const newState = { ...state, [String(action.payload.name)]: String(action.payload.value) }
             return newState;
         }
 
         case "setData": {
             const newState = action.payload;
             return newState;
         }
-        
+
         default: {
             return state;
         }